Atomic css rule not works when component loaded as lazy

[behnammodi]

If You have a component something like this:

import style9 from 'style9';

const styles = style9.create({
  blue: {
    color: 'blue',
  },
  red: {
    color: 'red'
  }
});

function LazyComponent() {
  return (
    <h1 className={styles('blue', true && 'red')}>I'm Lazy Component</h1>
  );
}

export default LazyComponent;

And before that you created this style in another component:

const styles = style9.create({
  blue: {
    color: 'blue',
  },
  red: {
    color: 'red'
  }
});

New CSS file generated as duplicate

[johanholmerin]

Could you create a repo with a reproduction?

[behnammodi]

Yeah

[behnammodi]

@johanholmerin I sent you a invite to private repo

[johanholmerin]

The CSS files need to be concatenated to a single file. Adding the following to your webpack config fixes the issue:

optimization: {
  splitChunks: {
    cacheGroups: {
      styles: {
        test: /\.css$/,
        chunks: 'all',
        enforce: true,
      }
    }
  }
}

I've updated the documentation to include this.

[behnammodi]

Why closed this issue? I added cacheGroups to config and it not works

[behnammodi]

Could you update https://github.com/behnammodi/style9-sample

[behnammodi]

I tested again, it works thanks 💪🏻, but i think we need ref to doc about CRA