Skip to content

fix(css): keep the space before an SVG data: URL the minifier rewrites - #22880

Merged
alexander-akait merged 2 commits into
webpack:mainfrom
lazerg:fix/css-minify-svg-url-space
Oct 24, 2026
Merged

alexander-akait merged 2 commits into
webpack:mainfrom
lazerg:fix/css-minify-svg-url-space

Conversation

@lazerg

@lazerg lazerg commented Oct 23, 2026 •

Copy link
Copy Markdown
Contributor

Summary

Fixes #22877

A deferred SVG data: URL printed as a bare marker, so the join dropped the spaces around it (redurl(…)). The marker now sits inside url(…), spaced like any other url().

/* before */ .b{background:redurl(data:image/svg+xml,)center}
/* after */  .b{background:red url(data:image/svg+xml,) center}

What kind of change does this PR introduce?

fix

Did you add tests for your changes?

Yes, test/unitCases/css/printer.unittest.js.

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

Use of AI

Yes, Claude Code helped trace the cause and draft the fix. I reproduced and verified it locally.

Summary by CodeRabbit

  • Bug Fixes
    • Fixed CSS minification for backgrounds that combine multiple components with SVG data URLs. Spaces separating the components are now preserved, while the SVG URLs can still be optimized. This prevents minified background declarations from losing the separation between a component and its following URL. The change applies when SVG optimization is enabled and supports backgrounds containing more than one SVG data URL.

@changeset-bot

changeset-bot Bot commented Oct 23, 2026 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: c279d5b

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

@coderabbitai coderabbitai Bot added the area: css CSS support (lib/css) label Oct 23, 2026
@coderabbitai

coderabbitai Bot commented Oct 23, 2026 •

Copy link
Copy Markdown
Contributor

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
📥 Commits

Reviewing files that changed from the base of the PR and between 97a5485 and c279d5b.

📒 Files selected for processing: 1
  • lib/css/syntax-printer.js
🚧 Files skipped from review as they are similar to previous changes: 1
  • lib/css/syntax-printer.js

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 8 remain after this review.

📝 Walkthrough

The CSS printer now preserves the url( opener when it defers SVG data URL output. A unit test checks that minification retains spaces before two SVG data URLs in background declarations.

Changes: SVG data URL spacing

Layer / File(s) Summary
Deferred URL output and regression coverage
lib/css/syntax-printer.js, test/unitCases/css/printer.unittest.js, .changeset/060-css-minify-svg-url-space.md
Both URL printing paths pass the url( opener to _deferDataUrl. The deferred output includes the opener and closing ), while the stored build result excludes the wrapper. The test checks optimized SVG data URLs and preserved spaces. The changeset records a patch release.

Suggested labels: area: css

Priority: ➖ Normal

Change: Bug fix · Severity of issue fixed: Medium

Merge Risk: ⚪ Minimal · up to c279d

The change preserves spacing around the tested SVG data URLs, with no identified issue requiring a fix before merge.

Pre-merge checks: Passed 3 · Inconclusive 1

Failed Failed checks: 1 inconclusive

Check name Status Explanation Resolution
Title check Inconclusive The title uses the required Conventional Commit form and accurately describes the CSS SVG data URL spacing fix. The branch prefix is not provided, so the required type-to-branch-prefix match cannot be… Provide the branch name or branch prefix to verify that it matches the fix type.
Passed Passed checks: 3 passed
Check name Status Explanation
Description Check Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check Passed Issue #22877 requires the CSS minifier to preserve the separator before SVG data: URLs and to include automated coverage. lib/css/syntax-printer.js now defers the url( wrapper with the marker an…
Out of Scope Changes check Passed The source change fixes the linked SVG data: URL spacing issue. The unit test verifies the fix. The changeset documents the same behavior. No unrelated change is shown in the reviewed scope.
Full details: Linked Issues check

Explanation

Issue #22877 requires the CSS minifier to preserve the separator before SVG data: URLs and to include automated coverage. lib/css/syntax-printer.js now defers the url( wrapper with the marker and restores the closing ). test/unitCases/css/printer.unittest.js covers two SVG data: URLs and verifies the preserved spaces and optimized SVG output.

Full details: Title check

Explanation

The title uses the required Conventional Commit form and accurately describes the CSS SVG data URL spacing fix. The branch prefix is not provided, so the required type-to-branch-prefix match cannot be verified.

Resolution

Provide the branch name or branch prefix to verify that it matches the fix type.

  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@github-actions

Copy link
Copy Markdown
Contributor

Reported by Types Coverage #2102 for c279d5b, computed by this pull request's own code.

Types Coverage

Coverage after merging fix/css-minify-svg-url-space into main will be
99.28%
Coverage Report
FileStmtsBranchesFuncsLinesUncovered Lines
bin
   webpack.js98.84%100%100%98.84%113
declarations
   WebpackOptions.ts99.94%100%100%99.94%4240
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.js100%100%100%100%
examples/markdown
   webpack.config.mjs100%100%100%100%
examples/module-federation
   test.filter.js100%100%100%100%
examples/reexport-components
   test.filter.js100%100%100%100%
examples/ssr
   test.filter.js100%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-emscripten
   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
   Chunk.js100%100%100%100%
   Compilation.js98.72%100%100%98.72%1784, 2096, 2103, 2111, 2133, 2136, 3122, 3681, 3724, 4313, 4317, 4443, 4464, 4589, 4626, 4633, 4686–4687, 4691, 4696, 4712–4713, 4727–4728, 4733–4734, 5262, 5288, 6138, 6155, 6173, 6189, 6204, 6229, 6232, 6644, 6647–6648, 6653, 6668, 6751, 6775, 856–857
   Compiler.js98.81%100%100%98.81%1107, 1144, 1147, 1323–1324, 1332, 848, 932, 972
   Dependency.js100%100%100%100%
   DependencyTemplate.js100%100%100%100%
   EntryPlugin.js100%100%100%100%
   Entrypoint.js100%100%100%100%
   ExternalsPlugin.js100%100%100%100%
   FileSystemInfo.js100%100%100%100%
   InitFragment.js100%100%100%100%
   LibraryTemplatePlugin.js100%100%100%100%
   ModuleFilenameHelpers.js100%100%100%100%
   ModuleNotFoundError.js100%100%100%100%
   MultiCompiler.js98.91%100%100%98.91%489, 561, 748, 813
   NormalModule.js100%100%100%100%
   NullFactory.js100%100%100%100%
   ProgressPlugin.js100%100%100%100%
   RawModule.js100%100%100%100%
   RequestShortener.js100%100%100%100%
   SingleEntryPlugin.js100%100%100%100%
   WebpackError.js100%100%100%100%
   index.js100%100%100%100%
   webpack.js98.59%100%100%98.59%306, 308
lib/asset
   AssetBytesGenerator.js100%100%100%100%
   AssetBytesParser.js91.67%100%100%91.67%27
   AssetGenerator.js100%100%100%100%
   AssetModule.js100%100%100%100%
   AssetModulesPlugin.js98.45%100%100%98.45%334, 360, 363, 493, 58
   AssetParser.js96.15%100%100%96.15%47
   AssetSourceGenerator.js100%100%100%100%
   AssetSourceParser.js91.67%100%100%91.67%27
   RawDataUrlModule.js100%100%100%100%
   WebManifestGenerator.js100%100%100%100%
   WebManifestParser.js100%100%100%100%
lib/async-modules
   AsyncModuleHelpers.js100%100%100%100%
   AwaitDependenciesInitFragment.js100%100%100%100%
   InferAsyncModulesPlugin.js100%100%100%100%
   isGeneratorLowered.js100%100%100%100%
lib/bun
   BunTargetPlugin.js100%100%100%100%
lib/cache
   AddBuildDependenciesPlugin.js100%100%100%100%
   AddManagedPathsPlugin.js100%100%100%100%
   Cache.js98.25%100%100%98.25%104
   CacheFacade.js100%100%100%100%
   IdleFileCachePlugin.js97.92%100%100%97.92%75, 87, 95
   MemoryCachePlugin.js92%100%100%92%33, 42
   MemoryWithGcCachePlugin.js93.42%100%100%93.42%106, 120–121, 130, 88
   PackFileCacheStrategy.js96.54%100%100%96.54%1304, 1404, 1408, 1470, 1716, 1796, 1819, 1849, 684, 703, 713–715, 717, 733–734, 739, 742, 744, 749, 754, 779, 785, 819, 825, 831, 836, 847, 856, 861–862, 864, 881, 887–888, 890
   ResolverCachePlugin.js100%100%100%100%
   getLazyHashedEtag.js100%100%100%100%
   mergeEtags.js100%100%100%100%
lib/config
   OptionsApply.js100%100%100%100%
   PlatformPlugin.js100%100%100%100%
   WebpackOptionsApply.js100%100%100%100%
   WebpackOptionsDefaulter.js100%100%100%100%
   browserslistTargetHandler.js100%100%100%100%
   cli.js98.89%100%100%98.89%114, 549, 581, 631
   defaults.js99.59%100%100%99.59%1633–1635, 1643, 288, 548
   defineConfig.js100%100%100%100%
   getClaimedAssetTypes.js100%100%100%100%
   normalization.js99.14%100%100%99.14%285–286, 356, 371
   target.js100%100%100%100%
   validateSchema.js94.67%100%100%94.67%100, 87, 89, 98
lib/container
   ContainerEntryDependency.js100%100%100%100%
   ContainerEntryModule.js100%100%100%100%
   ContainerEntryModuleFactory.js100%100%100%100%
   ContainerExposedDependency.js100%100%100%100%
   ContainerPlugin.js100%100%100%100%
   ContainerReferencePlugin.js100%100%100%100%
   FallbackDependency.js100%100%100%100%
   FallbackItemDependency.js100%100%100%100%
   FallbackModule.js100%100%100%100%
   FallbackModuleFactory.js100%100%100%100%
   HoistContainerReferencesPlugin.js100%100%100%100%
   ModuleFederationPlugin.js100%100%100%100%
   RemoteModule.js100%100%100%100%
   RemoteRuntimeModule.js100%100%100%100%
   RemoteToExternalDependency.js100%100%100%100%
   declaredRemotes.js100%100%100%100%
   moduleFederationHooks.js100%100%100%100%
   options.js100%100%100%100%
lib/context
   ContextExclusionPlugin.js100%100%100%100%
   ContextModule.js99.88%100%100%99.88%1495
   ContextModuleFactory.js95.70%100%100%95.70%230, 257, 276, 280–281, 289, 466, 487, 492, 534, 543, 545, 549, 552, 558–559
   ContextReplacementPlugin.js100%100%100%100%
lib/css
   CssGenerator.js99.29%100%100%99.29%1085, 129, 305, 837
   CssInjectStyleRuntimeModule.js100%100%100%100%
   CssLoadingRuntimeModule.js100%100%100%100%
   CssModule.js100%100%100%100%
   CssModulesPlugin.js98.72%100%100%98.72%217, 418, 432, 445, 458, 481, 494, 507, 520
   CssParser.js99.76%100%100%99.76%1090, 2425, 3072, 3075, 3081, 3514, 943
   CssServerStylesRuntimeModule.js100%100%100%100%
   conventions.js100%100%100%100%
   cssMinify.js100%100%100%100%
   data.js99.84%100%100%99.84%229, 5605
   syntax-parser.js99.69%100%100%99.69%11236–11237, 11789–11790, 11827, 12037, 12086, 14482, 14543–14546, 14651–14652, 14750–14751, 15524, 15820, 15822, 16377, 16769, 16811, 19152, 2631, 3338, 3340, 3345, 3364, 4113, 4119
   syntax-printer.js99.33%100%100%99.33%2611–2612, 2614–2615, 2617–2618, 2623, 2893–2896, 2989, 356, 3690, 4115, 4251, 4928, 5242, 6143, 730
   syntax.js100%100%100%100%
   topologicalSort.js100%100%100%100%
lib/debug
   ProfilingPlugin.js100%100%100%100%
lib/define
   DefinePlugin.js99.42%100%100%99.42%1488, 936, 938, 943, 967
   DotenvPlugin.js97.61%100%100%97.61%276, 395, 443, 456–457
   EnvironmentPlugin.js100%100%100%100%
lib/deno
   DenoTargetPlugin.js100%100%100%100%
lib/dependencies
   ConstDependency.js100%100%100%100%
   ContextElementDependency.js100%100%100%100%
   NullDependency.js100%100%100%100%
lib/dependencies/amd
   AMDDefineDependency.js100%100%100%100%
   AMDDefineDependencyParserPlugin.js100%100%100%100%
   AMDPlugin.js99.31%100%100%99.31%54
   AMDRequireArrayDependency.js100%100%100%100%
   AMDRequireContextDependency.js100%100%100%100%
   AMDRequireDependenciesBlock.js100%100%100%100%
   AMDRequireDependenciesBlockParserPlugin.js100%100%100%100%
   AMDRequireDependency.js100%100%100%100%
   AMDRequireItemDependency.js100%100%100%100%
   AMDRuntimeModules.js95.45%100%100%95.45%65
   LocalModule.js100%100%100%100%
   LocalModuleDependency.js100%100%100%100%
   LocalModulesHelpers.js100%100%100%100%
   RequireJsStuffPlugin.js100%100%100%100%
   UnsupportedDependency.js100%100%100%100%
lib/dependencies/commonjs
   CommonJsDependencyHelpers.js98.63%100%100%98.63%43
   CommonJsExportRequireDependency.js99.21%100%100%99.21%413,

@github-actions

Copy link
Copy Markdown
Contributor

Reported by Code Size #5539 for c279d5b, computed by this pull request's own code.

Generated code size

Comparing base (706e46f) to head (c279d5b). Merging this pull request will not change the code webpack generates.

What moved Tests Assets Gzip Raw Test edit
Changed, test untouched 0 0 — — —
Changed, test edited 0 0 — — —
New 0 0 — — —
Deleted 0 0 — — —
Unchanged — 9109 — — —

Read Changed, test untouched first: the test is byte-identical on both sides, so webpack generated the difference. Changed, test edited moved partly because the test did — Test edit is how many bytes the test gained, and a bundle that grew by less is not a regression. New and Deleted are whole files, not deltas — a new asset was created, not grown, so it reads gray (⚪ added) — and adding tests cannot bury a real change. Gzip decides, because that is what users download; raw is the tiebreak, and brotli and zstd are per asset below.

No asset changed size.

No runtime gained or lost a runtime module.

Built test/configCases with the defaults a user gets: 2280 test(s), 9109 asset(s), 101 emitted nothing.

@alexander-akait
alexander-akait merged commit 63e2d8e into webpack:main Oct 24, 2026
63 of 64 checks passed
@github-actions

Copy link
Copy Markdown
Contributor

This PR is packaged and the instant preview of its latest commit is available.

Install it locally:

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

@codspeed

codspeed Bot commented Oct 24, 2026

Copy link
Copy Markdown

Merging this PR will improve performance by 93.74%

2 warnings, 1 note

⚠️ 111 benchmarks are dominated by system calls

System calls cannot be simulated consistently and are left out of the measure. The reported value understates the real cost. Switch to the Walltime instrument to measure them.

Learn more about system calls

See affected benchmarks

⚠️ Base and head ran on different runner types

Some benchmarks with significant performance changes were compared across different runner types, so the changes might not come from the code. Run base and head on the same runner type, or use CodSpeed Macro Runners for more stable results.

Learn more about Macro Runners

Open the report in CodSpeed to investigate

ℹ️ 46 benchmarks have no flamegraph

The flamegraph wasn't generated: most of the time was spent in runtime internals, which would leave nothing useful to analyze.

See affected benchmarks

⚡ 2 improved benchmarks
✅ 337 untouched benchmarks

Performance Changes

Mode Benchmark BASE HEAD Efficiency
⚡ Memory benchmark "three-long", scenario '{"name":"mode-development-rebuild","mode":"development","watch":true}' 417.4 KB 139 KB ×3
⚡ Memory benchmark "loader-babel", scenario '{"name":"mode-production","mode":"production"}' 671.2 KB 537.1 KB +24.96%

Tip

Curious why performance improved? Comment @codspeedbot explain why performance improved on this PR, or directly use the CodSpeed MCP with your agent.


Comparing lazerg:fix/css-minify-svg-url-space (c279d5b) with main (706e46f)

Open in CodSpeed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: css CSS support (lib/css)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

CSS minifier removes the space before url() when the URL is an SVG data: URL (transparent url(…) → transparenturl(…))

2 participants