Document webpack change: feat: CSS import and allow to hook module creation

[webpack-bot]

A pull request by @alexander-akait was merged and maintainers requested a documentation change.

See pull request: webpack/webpack#17057

---

fixes webpack/webpack#15892

Here:

• new hook for override NormalModule
• support supports(...) in @import at-rule
• support layer(...) in @import at-rule
• support media in @import at-rule
• bug fixes in CSS parser
• fixed allow to have multiple @import with the same url and different layer/supports(...)/media
• fixes generate the same identifiers in head on windows/linux/macos
• supports anonomuos layer
• tests from css-loader and mini-css-extract-plugin
• data: in @import
• cache test
• source maps test
• fix bug when we have comments in media
• refactor comment logic
• bug with multiple ((())) and function stack

What we need to solve the next:

• group top level external imports
• external import with media/etc
• inherit layer, supports(...) and media from parent module? i.e. nested @import
• normalize @media/@supports/@layer to lowercase?
• improve layer indentifier detection
• supports style resolution in package.json and test it
• pathinfo for @import
• unstable ?hash generation in --webpack-main when you have multiple same modules
• external imports with #

Summary

🤖 Generated by Copilot at 972f53a

This pull request adds a new feature of css layering, which allows grouping css modules into different layers with different conditions. It introduces a new CSS module type, a new CssModule class, and a new createModuleClass hook map. It also modifies the CssModulesPlugin, the CssParser, and the CssImportDependency classes to handle the new syntax and dependencies. It updates the internalSerializables map to support the serialization of the CssModule class. It adds several test cases and files to verify the functionality and output of the css layering feature.

Details

🤖 Generated by Copilot at 972f53a

• Implement the css layering feature, which allows css modules to be grouped into different layers with different conditions (link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link)
• Add the word "csslayer" to the cspell.json file to avoid spelling errors (link)
• Add a new file CssModule.js that defines a custom module class for css files, which can store the layer, supports and media conditions of the css import dependency (link)
• Add a new constant CSS to the ModuleTypeConstants.js file and export it for other modules to identify css modules (link, link)
• Add a new hook map createModuleClass to the NormalModuleFactory class that allows plugins to register hooks for different module types and return a module class (link)
• Modify the create method of the NormalModuleFactory class to use the createModuleClass hook map and fallback to the NormalModule class if no module class is returned (link)
• Modify the CssModulesPlugin.js file to import the CssModule and PrefixSource classes and register hooks for the CSS module type (link)
• Simplify the apply method of the CssModulesPlugin class by replacing the for loops for registering hooks with a single for loop that iterates over an array of css module types (link)
• Add logic to the apply method of the CssModulesPlugin class to wrap the css source with layer, supports and media conditions if the module has them, using the ConcatSource and PrefixSource classes (link)
• Rename the CSS_MODE_AT_IMPORT_EXPECT_SUPPORTS and CSS_MODE_AT_IMPORT_EXPECT_MEDIA constants to CSS_MODE_AT_IMPORT_EXPECT_LAYER_OR_SUPPORTS_OR_MEDIA in the CssParser.js file and update the explanation for the mode (link, link)
• Remove the modePos variable from the CssParser class and use the lastPos property of the modeData object instead (link)
• Modify the walkCssTokens function call in the CssParser class to add two more conditions to the isSelector callback, add logic to handle the url and string tokens depending on the mode, add logic to handle the @import at-rule and initialize the modeData object, add logic to handle the semicolon token and create a new CssImportDependency, add a new function callback to handle the var function in the CSS_MODE_IN_LOCAL_RULE mode and create a new CssSelfLocalIdentifierDependency, declare the lastFunction variable, add logic to handle the close parenthesis token depending on the mode and the last function, and remove the duplicate function callback (link, link, link, link, link, link, link, link, link)
• Modify the constructor of the CssImportDependency class to add a new parameter and property called layer that stores the layer condition of the css import (link)
• Modify the category getter of the CssImportDependency class to return "style" instead of "css-import" to align with the new module type for css files (link)
• Add the getResourceIdentifier, serialize and deserialize methods to the CssImportDependency class to identify, serialize and deserialize the layer, supports and media conditions of the css import (link)
• Add a new entry for the CssModule class to the internalSerializables.js file to enable the serialization and deserialization of the class (link)
• Create test cases for css imports in the test/configCases/css/css-import folder, which verify the css layering feature (link, link, link, link, link, link)
  • Add a new file imported.css that defines a simple css rule that sets the background color of the body element to green (link)
  • Add a new file index.js that imports the style.css file and defines a test case that checks the computed style of the body element after loading the css file (link)
  • Add a new file print.css that defines a simple css rule that sets the background color of the body element to black (link)
  • Add a new file style.css that contains multiple css imports with different conditions, such as layer, supports and media, and defines a simple css rule that sets the background color of the body element to red (link)
  • Add a new file test.config.js that exports a moduleScope function that runs before each test case and creates a link element that loads the bundle0.css file, which is the output file of the webpack compilation (link)
  • Add a new file webpack.config.js that exports a webpack configuration object that sets the target to "web", the mode to "development", and enables the css experiment (link)