I have a nextjs application using css modules(stylus). I import styles files in respective components using the es6 import as shown in the code. These imported stylus files have a common @import statements as shown in the code.

I'm trying to generate two css chunks using splitchunks . 1) main.css (this will have all the common css classes of main.styl) . 2) app.css (this will have all the components css)

I tried the splitchunk config with mini-css-extract-plugin as shown in the code.

I'm able to generate the main.css with the bellow config properly, but the app.css is having many repeated(duplicate) common classes(of main.styl) along with components' classes.

Stylus file example (like this I have lot of component files)

@import '../../layout/main/main.styl'

.search-main-part
  min-height 500px

...

JS file example (Like this I have lot of components)

...
import styles from './search.styl';
...

<div className={styles['pt-20']}>
...
</div>
...

Splitchunk config

config.optimization = Object.assign({}, config.optimization, {
  splitChunks: Object.assign({}, config.optimization.splitChunks, {
    cacheGroups: Object.assign({}, config.optimization.splitChunks.cacheGroups, {
      main: {
        name: 'main',
        test: (m, c) => {
          return m.constructor.name === 'CssModule' && m._identifier.indexOf('main') !== -1;
        },
        priority: 2,
        chunks: 'all',
        reuseExistingChunk: true,
        enforce: true
      },
      app: {
        name: 'app',
        test: (m, c) => {
          return m.constructor.name === 'CssModule' && m._identifier.indexOf('main') === -1;
        },
        priority: 3,
        chunks: 'all',
        reuseExistingChunk: true,
        enforce: true
      }
    })
  })
});

app.css should have only components' classes

0 Answers