Microbundle: CSS Modules aren't tree shaked

[StarpTech]

I'd expect that unused CSS is removed from the build. This is one big advantage of CSS Modules.

Example:

Input

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

export default function Button() {
    return <div className={styles.button}></div>
}

.button {
  width: auto;
}
.unused {
  width: auto;
  padding: 3px;
}

Output

._2wMHH,._3X3pB{width:auto}._2wMHH{padding:3px}

[marvinhagemeister]

I'd expect that unused CSS is removed from the build. This is one big advantage of CSS Modules.

I'm curious if there is any previous work to look at. Do you know of a bundler that has successfully done this?

[StarpTech]

I think Next.js handles this with webpack + css-loader

[developit]

There are no current bundlers that tree-shake CSS. Next.js supports CSS Modules, but does not tree-shake the resulting generated styles. One of the reasons for this is that className mappings are an arbitrary exported JS object rather than individual exported members.

[StarpTech]

There are no current bundlers that tree-shake CSS. Next.js supports CSS Modules, but does not tree-shake the resulting generated styles. One of the reasons for this is that className mappings are an arbitrary exported JS object rather than individual exported members.

Hi @developit but it's definitely possible. I thought Next.js is capable to do so because of

In production, all CSS Module files will be automatically concatenated into many minified and code-split .css files. These .css files represent hot execution paths in your application, ensuring the minimal amount of CSS is loaded for your application to paint.
https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css

I checked it and indeed unused css is shipped too.

[StarpTech]

They are an open rollup issue https://github.com/rollup/rollup/issues/2201

[marvinhagemeister]

In production, all CSS Module files will be automatically concatenated into many minified and code-split .css files. These .css files represent hot execution paths in your application, ensuring the minimal amount of CSS is loaded for your application to paint.
nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css

I checked it and indeed unused css is shipped too.

That section says that if you have a build output similar to this:

/dist
  mainEntry.js
  mainEntry.css
  chunk1.js
  chunk1.css

then chunk1.css will only be loaded when chunk1.js is requested. That's what they're referring to as "minimal amount of CSS is loaded".

They are an open rollup issue rollup/rollup#2201

That's our best bet as microbundle is based on rollup 🎉

[StarpTech]

Thanks for clarifying.

[developit]

Yep that's a good point. If we don't currently, supporting code splitting for CSS would be good to reduce net size.

[developit]

Note: we're considering removing CSS support as part of refocusing microbundle on bundling libraries. There is no broadly accepted mechanism for loading CSS from JS in npm modules, so supporting CSS is misleading.

I'm going to close this issue out since it would only ever be solvable in Rollup, which is an upstream dependency.