Composing CSS Modules Results in Duplicate Output

[mgreystone]

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

[faceyspacey]

You can do that with the async mode of the common chunk plugin:

#47

As you'll read there, you have to do some extra work to make sure tools like babel-plugin-universal-import serve both the common chunk and the split chunk.

[mgreystone]

Apologies, but the async mode of the common chunk plugin doesn't seem to work. CSS from composition is still duplicated. Here is my new webpack config for your consumption

Furthermore, #47 doesn't seem to say anything about using CSS module composition, only imports.

[jkettmann]

@mgreystone Were you able to resolve this issue? I'm having the same problem and it's not clear to me how to proceed. Thanks

[mgreystone]

@jkettmann I'm afraid I have not been able to resolve this problem. I am no closer to a solution. Any advice is appreciated.

[jkettmann]

@mgreystone Sorry, I misunderstood the issue actually. I thought this was about duplicated css in general, which I was able to solve. I didn't realize that this one is specific to using CSS composes

[dtothefp]

Funny this issue is closed because it does not seem like it is solved and I'm facing the same issue. @mgreystone this works out of the box for me with Webpack 4 and https://github.com/webpack-contrib/mini-css-extract-plugin. With Webpack 3 and this plugin extract-css-chunks-webpack-plugin, I have a main bundle that imports base styles such as

// main.css
@import `helpers/buttons.css'

// main.js
import './main.css'

then I would have an async component that imports CSS that implements composes

.button {
  composes: button from 'helpers/buttons.css';
  // ..some more styles here

// MyAsyncComp.js
import {button} from './MyAsyncComp.css'

The result would be a duplication of the button class in both the main.css bundle and then in the MyAsyncComp.css bundle

main.css

MyAsyncComp.js

[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.

[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.