Skip to content

refactor: decompose CSS-Modules parser and move escape handling into the tokenizer#21196

Merged
alexander-akait merged 2 commits into
mainfrom
refactor/css-parser-decomposition
Jun 16, 2026
Merged

refactor: decompose CSS-Modules parser and move escape handling into the tokenizer#21196
alexander-akait merged 2 commits into
mainfrom
refactor/css-parser-decomposition

Conversation

@alexander-akait

@alexander-akait alexander-akait commented Jun 16, 2026

Copy link
Copy Markdown
Member

Summary

Decomposes the CSS-Modules logic in lib/css/CssParser.js into focused helpers and a node-type switch (walkSelectorList, emitComposesWithAnchor, the Declaration visitor), and moves CSS escape resolution into the tokenizer as lazy accessors (Token#unescaped, Node#unescapedName) so the parser reads clean names instead of scattered escape-strip / unescapeIdentifier(source.slice(...)) calls.

Also adds profiling-guided perf that does not overlap #21181: in CssIcssExportDependency codegen, a context-allocation hoist in resolveReferences plus an O(entries²)→O(entries) composes-resolution index (transient, so retained heap is unchanged); and assorted parser allocation cuts (dashed-ident scope stack, known-property export tuples, lazy per-rule composesFiles).

Behavior is unchanged (the CSS suites are byte-identical to baseline) except one correctness fix: function/pseudo names are now fully unescaped, so e.g. \75 rl() resolves to url() (previously only backslashes were stripped).

Rebased onto main after #21181 merged. #21181 independently added some of the same micro-optimizations (a stripBackslashes helper, property-name caching); this PR keeps #21181's orthogonal wins (normalizeUrl/getComments/getReexport fast-paths, lazy webpackIgnored loc, non-modules localIdentifiers sharing) and supersedes its backslash-only stripping with the fuller tokenizer-level unescaping here. Note: the local benchmark (~5–6% on a CSS-Modules fixture) was measured against the pre-#21181 base, so part of that gap is now already upstream — the decomposition, the CssIcss codegen perf, and the correctness fix are the parts unique to this PR.

What kind of change does this PR introduce?

refactor (with perf work in CssIcssExportDependency and a small fix for hex-escaped names).

Did you add tests for your changes?

No new test cases — behavior is covered by the existing CSS suites (ConfigTestCases/ConfigCacheTestCases css, cssParsing-webpack.spectest, walkCssTokens*/cssIdentifier unit tests, cases/css, configCases/css/postcss-modules-plugins), which stay green and byte-identical to baseline. Happy to add a focused case for hex-escaped function/selector names to lock in the correctness fix if preferred.

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?

n/a — internal refactor of CSS-Modules parsing/codegen; no public API or configuration change. A changeset (patch) is included for the escape-resolution fix.

Use of AI

Yes. Developed with AI assistance (Claude Code): used to profile hot paths, propose and apply the decomposition and performance changes, reconcile the rebase onto #21181, and validate each step against the existing CSS test suites and a compile-time/heap benchmark. Every change was reviewed and verified before pushing.

@changeset-bot

changeset-bot Bot commented Jun 16, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 7e4f606

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
webpack Patch

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

…the tokenizer

Decompose the CSS-Modules logic in lib/css/CssParser.js into focused helpers
and a node-type switch (walkSelectorList, emitComposesWithAnchor, the
Declaration visitor), and move CSS escape resolution into the tokenizer as lazy
accessors (Token#unescaped, Node#unescapedName) — superseding backslash-only
stripping with full unescaping, which also fixes hex escapes (e.g. \75 rl ->
url). Add CssIcssExportDependency codegen perf (resolveReferences context-hoist
and a transient composes-name index) plus assorted parser allocation cuts.

Rebased on #21181: keeps its orthogonal optimizations and supersedes its
stripBackslashes / property-name caching with the equivalents here.
@alexander-akait alexander-akait force-pushed the refactor/css-parser-decomposition branch from a0055a0 to 7e4f606 Compare June 16, 2026 17:12
@github-actions

Copy link
Copy Markdown
Contributor

Types Coverage

Coverage after merging refactor/css-parser-decomposition into main will be
99.33%
Coverage Report
FileStmtsBranchesFuncsLinesUncovered Lines
bin
   webpack.js98.77%100%100%98.77%91
examples
   build-common.js100%100%100%100%
   buildAll.js100%100%100%100%
   examples.js100%100%100%100%
   template-common.js98.21%100%100%98.21%72
examples/custom-javascript-parser
   test.filter.js100%100%100%100%
examples/custom-javascript-parser/internals
   acorn-parse.js100%100%100%100%
   meriyah-parse.js100%100%100%100%
   oxc-parse.js91.30%100%100%91.30%140, 142–143, 145, 147, 153–154, 161, 168, 90
examples/markdown
   webpack.config.mjs100%100%100%100%
examples/typescript
   test.filter.js100%100%100%100%
examples/typescript-non-erasable
   test.filter.js50%100%100%50%5
examples/virtual-modules
   test.filter.js100%100%100%100%
examples/wasm-bindgen-esm
   test.filter.js100%100%100%100%
examples/wasm-complex
   test.filter.js100%100%100%100%
examples/wasm-simple
   test.filter.js100%100%100%100%
examples/wasm-simple-source-phase
   test.filter.js100%100%100%100%
lib
   APIPlugin.js100%100%100%100%
   AsyncDependenciesBlock.js100%100%100%100%
   AutomaticPrefetchPlugin.js100%100%100%100%
   BannerPlugin.js100%100%100%100%
   Cache.js98.21%100%100%98.21%101
   CacheFacade.js100%100%100%100%
   Chunk.js99.72%100%100%99.72%39
   ChunkGraph.js100%100%100%100%
   ChunkGroup.js100%100%100%100%
   ChunkTemplate.js100%100%100%100%
   CleanPlugin.js99.15%100%100%99.15%206, 226
   CodeGenerationResults.js100%100%100%100%
   CompatibilityPlugin.js100%100%100%100%
   Compilation.js98.44%100%100%98.44%1609, 1905, 1912, 1920, 1942, 2838, 3317–3318, 3350, 4014, 4044, 4097–4098, 4102, 4107, 4123–4124, 4138–4139, 4144–4145, 4622, 4648, 513, 518, 5456, 5488, 5505, 5521, 5537, 5552, 5577–5578, 5580, 5908, 5913, 5919, 5922, 5934, 5936, 5940, 5956, 5971, 6003, 6057, 6081, 6195, 763–764
   Compiler.js99.56%100%100%99.56%1135–1136, 1144
   ConcatenationScope.js98.59%100%100%98.59%189
   ConditionalInitFragment.js100%100%100%100%
   ConstPlugin.js100%100%100%100%
   ContextExclusionPlugin.js100%100%100%100%
   ContextModule.js100%100%100%100%
   ContextModuleFactory.js97.40%100%100%97.40%258, 395, 418, 420, 424, 433–434
   ContextReplacementPlugin.js100%100%100%100%
   DefinePlugin.js99%100%100%99%171–172, 188, 207, 281
   DependenciesBlock.js100%100%100%100%
   Dependency.js98.15%100%100%98.15%382, 428
   DependencyTemplate.js100%100%100%100%
   DependencyTemplates.js100%100%100%100%
   DotenvPlugin.js98.41%100%100%98.41%378, 391–392
   DynamicEntryPlugin.js100%100%100%100%
   EntryOptionPlugin.js100%100%100%100%
   EntryPlugin.js100%100%100%100%
   Entrypoint.js100%100%100%100%
   EnvironmentPlugin.js97.14%100%100%97.14%49
   ErrorHelpers.js100%100%100%100%
   EvalDevToolModulePlugin.js100%100%100%100%
   EvalSourceMapDevToolPlugin.js100%100%100%100%
   ExportsInfo.js100%100%100%100%
   ExportsInfoApiPlugin.js100%100%100%100%
   ExternalModule.js98.67%100%100%98.67%1062, 1065, 448–452, 600
   ExternalModuleFactoryPlugin.js100%100%100%100%
   ExternalsPlugin.js100%100%100%100%
   FileSystemInfo.js99.50%100%100%99.50%182, 2252–2253, 2256, 2267, 2278, 2289, 278, 3693, 3708, 3732
   FlagAllModulesAsUsedPlugin.js100%100%100%100%
   FlagDependencyExportsPlugin.js98.46%100%100%98.46%425, 434, 436, 440
   FlagDependencyUsagePlugin.js100%100%100%100%
   FlagEntryExportAsUsedPlugin.js100%100%100%100%
   Generator.js100%100%100%100%
   HotModuleReplacementPlugin.js100%100%100%100%
   HotUpdateChunk.js100%100%100%100%
   IgnorePlugin.js100%100%100%100%
   IgnoreWarningsPlugin.js100%100%100%100%
   InitFragment.js100%100%100%100%
   JavascriptMetaInfoPlugin.js100%100%100%100%
   LibraryTemplatePlugin.js100%100%100%100%
   LoaderOptionsPlugin.js100%100%100%100%
   LoaderTargetPlugin.js100%100%100%100%
   MainTemplate.js100%100%100%100%
   ManifestPlugin.js100%100%100%100%
   Module.js98.50%100%100%98.50%1285, 1290, 1350, 1364, 1426, 1435
   ModuleFactory.js100%100%100%100%
   ModuleFilenameHelpers.js98.85%100%100%98.85%106, 108
   ModuleGraph.js99.73%100%100%99.73%1005
   ModuleGraphConnection.js100%100%100%100%
   ModuleInfoHeaderPlugin.js100%100%100%100%
   ModuleNotFoundError.js100%100%100%100%
   ModuleProfile.js100%100%100%100%
   ModuleSourceTypeConstants.js100%100%100%100%
   ModuleTemplate.js100%100%100%100%
   ModuleTypeConstants.js100%100%100%100%
   MultiCompiler.js99.69%100%100%99.69%659
   MultiStats.js100%100%100%100%
   MultiWatching.js100%100%100%100%
   NoEmitOnErrorsPlugin.js100%100%100%100%
   NodeStuffPlugin.js100%100%100%100%
   NormalModule.js97.90%100%100%97.90%1240, 1243, 1260, 1277, 1524, 1558, 1574, 1661, 2017, 2316, 2321–2331, 419, 423, 577
   NormalModuleFactory.js99.47%100%100%99.47%1083, 1392, 486, 498
   NormalModuleReplacementPlugin.js100%100%100%100%
   NullFactory.js100%100%100%100%
   OptimizationStages.js100%100%100%100%
   OptionsApply.js100%100%100%100%
   Parser.js100%100%100%100%
   PlatformPlugin.js100%100%100%100%
   PrefetchPlugin.js100%100%100%100%
   ProgressPlugin.js98.85%100%100%98.85%519–520, 525, 527, 591
   ProvidePlugin.js100%100%100%100%
   RawModule.js100%100%100%100%
   RecordIdsPlugin.js100%100%100%100%
   RequestShortener.js100%100%100%100%
   ResolverFactory.js100%100%100%100%
   RuntimeGlobals.js100%100%100%100%
   RuntimeModule.js100%100%100%100%
   RuntimePlugin.js100%100%100%100%
   RuntimeTemplate.js100%100%100%100%
   SelfModuleFactory.js100%100%100%100%
   SingleEntryPlugin.js100%100%100%100%
   SourceMapDevToolModuleOptionsPlugin.js100%100%100%100%
   SourceMapDevToolPlugin.js98.62%100%100%98.62%220, 224, 226, 419, 430, 891
   Stats.js100%100%100%100%
   Template.js100%100%100%100%
   TemplatedPathPlugin.js99.17%100%100%99.17%176–177
   UseStrictPlugin.js100%100%100%100%
   WarnCaseSensitiveModulesPlugin.js100%100%100%100%
   WarnDeprecatedOptionPlugin.js100%100%100%100%
   WarnNoModeSetPlugin.js100%100%100%100%
   WatchIgnorePlugin.js100%100%100%100%
   Watching.js100%100%100%100%
   WebpackError.js100%100%100%100%
   WebpackIsIncludedPlugin.js100%100%100%100%
   WebpackOptionsApply.js100%100%100%100%
   WebpackOptionsDefaulter.js100%100%100%100%
   buildChunkGraph.js99.87%100%100%99.87%371
   cli.js98.62%100%100%98.62%10, 119, 545, 577, 627, 897
   index.js99.72%100%100%99.72%179
   validateSchema.js94.67%100%100%94.67%100, 87, 89, 98
   webpack.js96.33%100%100%96.33%10, 198, 220, 222
lib/asset
   AssetBytesGenerator.js100%100%100%100%
   AssetBytesParser.js100%100%100%100%
   AssetGenerator.js100%100%100%100%
   AssetModule.js100%100%100%100%
   AssetModulesPlugin.js97.32%100%100%97.32%281, 305, 308, 36, 360, 41
   AssetParser.js100%100%100%100%
   AssetSourceGenerator.js100%100%100%100%
   AssetSourceParser.js100%100%100%100%
   RawDataUrlModule.js100%100%100%100%
lib/async-modules
   AsyncModuleHelpers.js100%100%100%100%
   AwaitDependenciesInitFragment.js100%100%100%100%
   InferAsyncModulesPlugin.js100%100%100%100%
lib/cache
   AddBuildDependenciesPlugin.js100%100%100%100%
   AddManagedPathsPlugin.js100%100%100%100%
   IdleFileCachePlugin.js97.92%100%100%97.92%71, 83, 91
   MemoryCachePlugin.js95.83%100%100%95.83%33
   MemoryWithGcCachePlugin.js93.15%100%100%93.15%106, 113–114, 122, 89
   PackFileCacheStrategy.js96.40%100%100%96.40%1250, 1350, 1354, 1416, 628, 647, 657–659, 661, 677–678, 683, 686, 688, 693, 698, 722, 728, 762, 768, 774, 779, 790, 799, 804–805, 807, 824, 830–831, 833
   ResolverCachePlugin.js100%100%100%100%
   getLazyHashedEtag.js100%100%100%100%
   mergeEtags.js100%100%100%100%
lib/config
   browserslistTargetHandler.js100%100%100%100%
   defaults.js99.31%100%100%99.31%1439–1441, 1449, 274, 277, 282, 286
   normalization.js99.01%100%100%99.01%191–192, 258, 273
   target.js100%100%100%100%
lib/container
   ContainerEntryDependency.js100%100%100%100%
   ContainerEntryModule.js100%100%100%100%
   ContainerEntryModuleFactory.js100%100%100%100%

@github-actions

github-actions Bot commented Jun 16, 2026

Copy link
Copy Markdown
Contributor

This PR is packaged and the instant preview is available (7552543).

Install it locally:

  • npm
npm i -D webpack@https://pkg.pr.new/webpack@7552543
  • yarn
yarn add -D webpack@https://pkg.pr.new/webpack@7552543
  • pnpm
pnpm add -D webpack@https://pkg.pr.new/webpack@7552543

@codecov

codecov Bot commented Jun 16, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 97.15762% with 11 lines in your changes missing coverage. Please review.
✅ Project coverage is 92.71%. Comparing base (b6d570d) to head (7e4f606).
⚠️ Report is 2 commits behind head on main.

Files with missing lines Patch % Lines
lib/css/CssParser.js 96.82% 11 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main   #21196      +/-   ##
==========================================
+ Coverage   92.69%   92.71%   +0.02%     
==========================================
  Files         588      588              
  Lines       64122    64146      +24     
  Branches    17799    17793       -6     
==========================================
+ Hits        59435    59473      +38     
+ Misses       4687     4673      -14     
Flag Coverage Δ
css-parsing 28.70% <10.59%> (+0.02%) ⬆️
html5lib 31.18% <1.03%> (-0.02%) ⬇️
integration 88.68% <97.15%> (+0.02%) ⬆️
test262 45.57% <1.03%> (+0.01%) ⬆️
unit 41.04% <1.03%> (-0.02%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@codspeed-hq

codspeed-hq Bot commented Jun 16, 2026

Copy link
Copy Markdown

Merging this PR will not alter performance

⚠️ Different runtime environments detected

Some benchmarks with significant performance changes were compared across different runtime environments,
which may affect the accuracy of the results.

Open the report in CodSpeed to investigate

⚡ 2 improved benchmarks
❌ 3 regressed benchmarks
✅ 139 untouched benchmarks

Warning

Please fix the performance issues or acknowledge them on CodSpeed.

Performance Changes

Mode Benchmark BASE HEAD Efficiency
Memory benchmark "asset-modules-bytes", scenario '{"name":"mode-development-rebuild","mode":"development","watch":true}' 321.2 KB 859.3 KB -62.63%
Memory benchmark "many-modules-esm", scenario '{"name":"mode-production","mode":"production"}' 7.8 MB 10.1 MB -23.07%
Memory benchmark "many-chunks-esm", scenario '{"name":"mode-production","mode":"production"}' 7.7 MB 9.9 MB -22.48%
Memory benchmark "asset-modules-inline", scenario '{"name":"mode-development-rebuild","mode":"development","watch":true}' 1,293.8 KB 324.4 KB ×4
Memory benchmark "css-modules", scenario '{"name":"mode-production","mode":"production"}' 10 MB 7.2 MB +38.54%

Tip

Investigate this regression by commenting @codspeedbot fix this regression on this PR, or directly use the CodSpeed MCP with your agent.


Comparing refactor/css-parser-decomposition (7e4f606) with main (0db8bbb)

Open in CodSpeed

@alexander-akait alexander-akait merged commit 7552543 into main Jun 16, 2026
66 checks passed
@alexander-akait alexander-akait deleted the refactor/css-parser-decomposition branch June 16, 2026 19:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant