Compose classes with attribute selector

[tnyo43]

Hi, I faced a problem while using the selector composition, but I don't figure out that if it follows the specifications or not.

I defined classes as like follows:

[class^='stack-'] {
  display: flex;
  flex-direction: column;
}

.stack-8 {
  gap: 8px;
}

I created a css file and a React component as like follows:

/* index.module.css */
.container {
  composes: stack-8 from global;
}

import styles from './index.module.css';

const Container = ({ children }) => <div className={styles.container}>{children}</div>

Then, I found that the gap: 8px declaration is appropriately reflected but display: flex; flex-direction: column; declarations are not.

---

I created a repro https://github.com/tnyo43/css-module-with-attribute-selector-sample

1. run npm install
2. run npm storybook
3. go to http://localhost:6006/?path=/story/containerwithcomposing--default . You will see that the selector composition doesn't work well.
   3.1. You can see that stack-8 itself works well on http://localhost:6006/?path=/story/container--default