Classes used with CSS Module's `compose` are placed after the class doing the composing

Author: shepmasterCreated Jan 7, 2026Updated Sep 16, 2026

LabelsStale

Expected Behavior

When you compose classes with CSS Modules, I expect that the composed class occurs first in the output CSS so that the more specific CSS supersedes it.

Input

css

.-buttonReset {
  background: inherit;
}

css

.primary {
  composes: -buttonReset from './shared.module.css';
  background-color: red;
}

Output

css

.aJTKxq_-buttonReset {
  background: inherit;
}

.y8oHnq_primary {
  background-color: red;
}

Current Behavior

The composed class occurs after the specific CSS:

css

.y8oHnq_primary {
  background-color: red;
}

.aJTKxq_-buttonReset {
  background: inherit;
}

Context

This breaks the CSS cascade and stops my styles from working.

Interestingly, if you comment out the import Junk from "./Junk"; line below, the CSS is output as expected. However, my real project uses the shared CSS classes in multiple locations so this is not a valid solution for the larger project.

Code Sample

`package.json`

json

{
  "name": "parcel-repro-css",
  "version": "0.0.1",
  "dependencies": {
    "react": "19.2.3",
    "react-dom": "19.2.3"
  },
  "devDependencies": {
    "parcel": "2.16.3"
  }
}

`index.html`

xml

<!DOCTYPE html>
<html lang="en">
  <head />
  <body>
    <div id="app"></div>
  </body>
  <script type="module" src="index.jsx"></script>
</html>

`index.jsx`

javascript

import { createRoot } from 'react-dom/client';

import Button from './Button';
// Unused, but simply being present causes the issue
import Junk from "./Junk";

const container = document.getElementById('app');
if (container) {
  const root = createRoot(container);
  root.render(<Button />);
}

`Button.jsx`

javascript

import * as styles from './Button.module.css';

const Button = () => (
  <button className={styles.primary}>
    button
  </button>
);

export default Button;

`Button.module.css`

css

.primary {
  composes: -buttonReset from './shared.module.css';
  background-color: red;
}

`Junk.jsx`

javascript

import * as styles from './Junk.module.css';

const Junk = () => (
  <p>{styles.container}</p>
);

export default Junk;

`Junk.module.css`

css

.container {
  composes: -buttonReset from './shared.module.css';
}

`shared.module.css`

css

.-buttonReset {
  background: inherit;
}

Your Environment

Software	Version(s)
Parcel	2.16.3
Node	24.12.0
pnpm	10.27.0
Operating System	macOS 26.1 (25B78)

Source: parcel-bundler/parcel

View original on GitHub View discussion on GitHub