Current State: opt-in via experiments.css: true

Explainer (not everything is implemented yet):

• experiments.css: true enables the native css support in webpack
• This will be enabled by default in webpack 6
• There will be multiple modes depending on how you reference CSS
  • A: import "./style.css": Attaches the stylesheet to the document as side effect of importing. @import and url() are resolved.
  • B: import stylesheet from "./style.css" asset { type: "css" }: Exports the unattached stylesheet as default export. You can adopt it according to the spec. @import is not allowed (yet), but url() will be resolved.
  • C: import { main } from "./style.module.css": Like A, but renames all css classes, keyframes and css variables and exports the new names. @import and url() are resolved.
  • D: new URL("./style.css", import.meta.url): Gives an URL to a stylesheet including all styles. @import and url() are resolved.
  • E: import { main } from "./style.module.css": Like C, but for the node.js target. It generates a JSON module with the exports from the CSS.
• A and C will bundle all CSS of a chunk into a single CSS file (per chunk)
• splitChunks will allow to move CSS around
• output.cssFilename and output.cssChunkFilename allows to configure the filename template for css files. By default it copies filename resp. chunkFilename with extension changed to .css
• HMR will update CSS when you edit it.
• There is external CSS that will lead to @import "..." in the output css files
• There are external assets that will lead to a external url.
• class names are based on module ids, so you need to make sure that SSR and Client module ids match
  • E1: Compute module ids in a deterministic way -> DeterministicModuleIdsPlugin
  • E2: Store module ids in a file and load them on the other side -> SyncModuleIdsPlugin
• In addition to the default bindings, you can use type: "css/..." in rules to apply loader results as css. e. g. for Sass support.
• This will replace mini-css-extract-plugin and css-loader
• It will be more performant, by using a css tokenizer instead of postcss
• There is a css minimizer in production mode.

Implemented:

• A
• @import url("...");
• @import "...";
• url()
• chunking
• on demand loading
• HMR
• splitChunks
• output.cssFilename
• external type css-import
• external type asset
• :export blocks
• correct css order in output file
• warnings for ordering issues
• E
• E1
• E2
• image-set()
• @import url("...") layer(test);
• @import url("...") supports(...);
• @import url("...") media query;
• move all external imports to top
• do not ignore #import and make them external
• inherit layer, supports(...) and media from parent module
• supports style resolution in package.json and test it + test support loader usage
• Implement CSS Module fetchpriority
• prefetch/preload for CSS
• external import with media/supports
• Correct publicPath for assets modules inside CSS files
• pathinfo for @import
• prefeth/preload only for CSS import() generates prefetch/preload runtime for JS
• default type: css enables CSS modules support (i.e. for CSS without CSS modules you need set type: "css/global"), which might be a bit confusing for developers, because some developer just want to use pure CSS and parsing CSS modules can affect on perf, I think we should do:
  • type: "css/auto" - enable/disable CSS modules based on path, it is css/module or css
  • type: "css" - no CSS modules and don't try to parse CSS modules things
  • type: "css/module" - CSS modules with local mode
  • type: "css/global" CSS modules with global mode
• rewrite to be align with CSS spec
• src()
• unstable ?hash generation in --webpack-main when you have multiple same modules
• improve logic in callback (more perfomance?) + better error reporting for @import
• implement /* webpackIgnore: true */ for url()/image-set()
• url() in css leaves an asset JS Module in js chunk
• :import blocks
• @value
• Experiments.css reliance on fact that css should be loaded before js is a huge breaking change #17611 - allow link be before/after script + bug with safari
• support legacy browser? experimental.css not support legacy browser? #16147
• CSS entry without JS file (option to do only extract without runtime + for dynamic?) and hmr
• C
• move tests frompostcss-modules-* packages
• B
• local() and global() in declarations
• re-export for :export/@value/var()/classes and nested @import + internal refactor CSS parser (ICSS inheritance)
• improve hashing of locals for production + no extra _ at start
• url("font.svg#svgFontName") created invalid filename
• css/global align with spec + local()/global()
• more at-rules rename and grid + @function + options in css modules

Not implemented/tested, but Planned (ordered by priority):

• contenthashing and hash for CSS files (hashUpdate) [WIP]
• move test from extract plugin [WIP]
• D [WIP]
• move tests from css-loader [WIP]
• remove empty async chunks + improve concatenation for CSS modules
• pure mode
• exportGlobals
• rewrite from tokenizer to parser/refactor code (better error reporting?) + wasm css tokenizer
• normalize media/supports/layer to lowercase?
• css minimizer