Composing CSS Modules Results in Duplicate Output

I am working with CSS modules & dynamic imports. When importing a CSS file that composes from another module, that code will be duplicated between different modules.

For example:

app.css

:global(body) {
  white-space: pre;
}

.base {
  background: #0c0;
}

a.css

.a {
  composes: base from './app.css';
  color: #aaa;
}

b.css

.b {
  composes: base from './app.css';
  color: #bbb;
}

Builds to

main.bundle.css

body {
  white-space: pre;
}

.app__base--DHCDZ {
  background: #0c0;
}

a.bundle.css

body {
  white-space: pre;
}

.app__base--DHCDZ {
  background: #0c0;
}
.a__a--3qLxd {
  color: #aaa;
}

b.bundle.css

body {
  white-space: pre;
}

.app__base--DHCDZ {
  background: #0c0;
}
.b__b--3osya {
  color: #bbb;
}

As you can see, the results composed from app.css is included in all three bundles. Is there a way to combine this common code?

Full working example here

• node 8.9.1
• webpack 3.10.0
• extract-css-chunks-webpack-plugin 2.0.18
• flush-css-chunks-webpack-plugin 0.1.0

[dtothefp]

@faceyspacey I was just reverting back to Webpack 3 because having some perf issues and was trying to have the same experience with CSS code splitting. I’m using react-loadable to gather my CSS chunks and inject in HTML. Previously we were on Webpack 2 and jumped the version, had all the fights with changing from extract to mini plugin. Previously our async chunks CSS modules were being bundled into the main bundle, but with addition of mini they were now chunked. composes works as expected without CSS code splitting and with CSS code splitting with the mini plugin. It completely breaks causing excessive duplication of styles with extract and Webpack 4, and breaks much less but in the way described above with extract-css-chunks.

So, sounds like it’s a moot point but thought I might as well document it here to help anyone else facing this issue.

[faceyspacey]

Mini Css Extract Plugin is built by the webpack team, and though not fully complete in its feature-set, will be the go-to solution going forward. I think they’re gonna integrate it further and give webpack itself first class css handling, code-splitting, etc. Like, you’ll be able to dynamically import() a chunk, and receive 2 files: a javascript file + a css file. This is the purpose extract-css-chunks-webpack-plugin + babel-plugin-universal-import initially served, knowing full well webpack eventually planned to fully support it. Webpack 5 is supposed to finalize all this stuff.

So with that said, and given how close webpack now is, I likely won’t find time to add anything to this repo.