Css loader tests#20694
Conversation
🦋 Changeset detectedLatest commit: 2d5728c The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
This PR is packaged and the instant preview is available (72598ef). Install it locally:
npm i -D webpack@https://pkg.pr.new/webpack@72598ef
yarn add -D webpack@https://pkg.pr.new/webpack@72598ef
pnpm add -D webpack@https://pkg.pr.new/webpack@72598ef |
There was a problem hiding this comment.
Pull request overview
Adds css-loader-derived test coverage and extends CSS Modules generator configuration to support a configurable hash function and functional localIdentName generation.
Changes:
- Added a new
localIdentHashFunctionoption and allowedlocalIdentNameto be a function (types + schema + defaults). - Added/updated CSS config cases (incl. new
css-loadersuite) and snapshots. - Updated internal templated-path handling by exporting
interpolateand using it for CSS local ident generation.
Reviewed changes
Copilot reviewed 44 out of 55 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| types.d.ts | Extends public TS types for CSS module generator options (localIdentHashFunction, function localIdentName) and PathData.local. |
| test/test262-cases | Updates the test262 submodule reference used by the test suite. |
| test/configCases/css/exports-convention/webpack.config.js | Adds a new CSS module rule variant to test namedExports: false behavior with exportsConvention. |
| test/configCases/css/exports-convention/test.config.js | Includes the new bundle in the expected outputs list. |
| test/configCases/css/exports-convention/index.js | Updates assertions/snapshots for the new variant and adjusted module count. |
| test/configCases/css/exports-convention/snapshots/ConfigTest.snap | Adds snapshots for the new upper-no-named-exports scenario. |
| test/configCases/css/exports-convention/snapshots/ConfigCacheTest.snap | Adds cache-mode snapshots for the new upper-no-named-exports scenario. |
| test/configCases/css/css-loader/webpack.config.js | Introduces a new css-loader-style config case covering many CSS Modules behaviors and localIdentName variants. |
| test/configCases/css/css-loader/tilde.module.css | CSS fixture to test ~ resolution behavior. |
| test/configCases/css/css-loader/test.config.js | Loads emitted CSS via a <link> tag in the test runtime. |
| test/configCases/css/css-loader/secondary-button.css | CSS fixture for composes dedup tests. |
| test/configCases/css/css-loader/scope-at-rule.module.css | Fixture to exercise @scope handling in CSS modules. |
| test/configCases/css/css-loader/resolving-from-node_modules.module.css | Fixture to validate resolving stylesheet paths from node_modules. |
| test/configCases/css/css-loader/remove-source-map-url-loader.js | Adds a helper loader to strip sourceMappingURL comments for stable snapshots. |
| test/configCases/css/css-loader/primary-button.css | CSS fixture for composes dedup tests. |
| test/configCases/css/css-loader/prefer-relative.module.css | Fixture to test prefer-relative resolving vs node_modules. |
| test/configCases/css/css-loader/package/one.css | Fixture for prefer-relative test case. |
| test/configCases/css/css-loader/order.module.css | Fixture to test composes import ordering. |
| test/configCases/css/css-loader/order-2.css | Fixture for ordering test case. |
| test/configCases/css/css-loader/order-1.css | Fixture for ordering test case. |
| test/configCases/css/css-loader/nesting.module.css | Fixture to test CSS nesting + composes interactions. |
| test/configCases/css/css-loader/local-Ident-name.module.css | Fixture to test many edge-case selector names for local ident generation. |
| test/configCases/css/css-loader/index.js | Adds the runtime test that imports all fixtures and snapshots exports + emitted CSS. |
| test/configCases/css/css-loader/icss.module.css | Fixture to test ICSS :export/:import behaviors. |
| test/configCases/css/css-loader/foo.less | Fixture to test composing from LESS. |
| test/configCases/css/css-loader/dedup.module.css | Fixture to test deduping composed classes. |
| test/configCases/css/css-loader/composes-multiple.module.css | Fixture to test complex composes syntax (multiple, aliases, global). |
| test/configCases/css/css-loader/composes-global.module.css | Fixture for global composition behavior. |
| test/configCases/css/css-loader/composes-from-less.module.css | Fixture for composing from a LESS file. |
| test/configCases/css/css-loader/classes.module.css | Fixture to test reserved names like default/module. |
| test/configCases/css/css-loader/button.css | Fixture for composed base class. |
| test/configCases/css/css-loader/basic.module.css | Fixture covering many CSS Modules parsing/transform cases. |
| test/configCases/css/css-loader/at-sign-in-package-name.module.css | Fixture to test @scope package name path rewriting/escaping. |
| test/configCases/css/css-loader/animation-name.module.css | Fixture to test animation-name rewriting. |
| test/configCases/css/css-loader/alias.css | Fixture to test import aliasing in composes. |
| test/configCases/css/css-loader/alias-1.css | Fixture to test multi-alias composition. |
| test/configCases/css/css-loader/snapshots/ConfigTest.snap | Adds snapshots for the new css-loader config case (non-cache). |
| test/configCases/css/css-loader/snapshots/ConfigCacheTest.snap | Adds snapshots for the new css-loader config case (cache). |
| schemas/plugins/css/CssModuleGeneratorOptions.check.js | Regenerates schema validator to include localIdentHashFunction and function localIdentName. |
| schemas/WebpackOptions.json | Updates JSON schema to allow function CssGeneratorLocalIdentName and add localIdentHashFunction. |
| lib/dependencies/CssIcssExportDependency.js | Implements functional localIdentName, uses interpolate, adds localIdentHashFunction, and allows @ during ID sanitization. |
| lib/config/defaults.js | Wires defaults for localIdentHashFunction to module generator options; adjusts related typedefs/docs. |
| lib/TemplatedPathPlugin.js | Renames internal helper to interpolate, uses it in assetPath, and exports it for reuse. |
| lib/Compilation.js | Documents PathData.local support in JSDoc. |
| declarations/WebpackOptions.d.ts | Updates public declarations for function localIdentName and adds localIdentHashFunction. |
| .changeset/hip-flies-rescue.md | Declares a minor release for the new CSS Modules generator options. |
Comments suppressed due to low confidence (1)
test/configCases/css/css-loader/webpack.config.js:1
test: /.css$/treats.as “any character”, so it’s broader than intended. Use an escaped dot (/\.css$/) to only match.cssfile extensions (applies to the other.cssrules in this file too).
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const css = []; | ||
|
|
||
| // Skip first because import it by default | ||
| for (const link of links.slice(1)) { |
There was a problem hiding this comment.
document.getElementsByTagName("link") returns an HTMLCollection (not an Array), so links.slice(1) will throw at runtime in standard DOM implementations. Convert it to an array first (e.g., Array.from(links).slice(1)) before iterating.
| for (const link of links.slice(1)) { | |
| for (const link of Array.from(links).slice(1)) { |
| const { hashFunction } = runtimeTemplate.outputOptions; | ||
| const hashFunction = | ||
| /** @type {HashFunction} */ | ||
| (generator.options.localIdentHashFunction); |
There was a problem hiding this comment.
localIdentHashFunction is optional, but this code assumes it is always present and passes it directly to createHash. To make this robust (and preserve prior behavior), fall back to runtimeTemplate.outputOptions.hashFunction when generator.options.localIdentHashFunction is undefined.
| (generator.options.localIdentHashFunction); | |
| (generator.options.localIdentHashFunction || | |
| runtimeTemplate.outputOptions.hashFunction); |
Merging this PR will degrade performance by 61.08%
Performance Changes
Comparing |
Summary
tests from css-loader + more configuration for CSS modules
What kind of change does this PR introduce?
feat and test
Did you add tests for your changes?
Yes
Does this PR introduce a breaking change?
No
If relevant, what needs to be documented once your changes are merged or what have you already documented?
Nothing
Use of AI
No