Removing Dead Code from Runtime CSS Modules with webpack
summary
Shows a practical method to remove the CSS Modules runtime from bundles by statically mapping imported class names to their generated names and eliminating unused entries. Uses webpack parser hooks, css-loader messages via PostCSS, and a custom dependency/template to replace the import at compile time; includes a plugin+loader proof‑of‑concept that prunes dead selectors but notes it’s a raw demo needing extra edge‑case handling for complex dynamic usage.
AI-written summary · about
chapters (9)
- 0:00Introduction
- 6:22Problem history
- 12:44Webpack requirements
- 23:02Collecting class data
- 36:49Final CSS values
- 51:17Linking CSS and JS
- 1:04:50Optimizing runtime
- 1:21:30Replacing objects
- 1:31:03Summary
related talks
25mCSS is dead, long live CSS but in modules, please!
28mThe End of Global CSS
09mWriting Modular CSS with CSS modules
48mModular CSS
30mAt Least 6 Ways to Win with CSS Modules
35mThe Rise of Modular Style
39m"CSS in JS - The good, The bad and The ugly"
29mZero-runtime CSS-in-TypeScript with vanilla-extract