Skip to content

feat(css): add exportType style to inject styles into DOM#20579

Merged
alexander-akait merged 7 commits intomainfrom
feat/css_style
Mar 10, 2026
Merged

feat(css): add exportType style to inject styles into DOM#20579
alexander-akait merged 7 commits intomainfrom
feat/css_style

Conversation

@xiaoxiaojx
Copy link
Copy Markdown
Member

Summary
feat(css): add exportType style to inject styles into DOM

What kind of change does this PR introduce?
feat

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?
update exportType options

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Mar 4, 2026

🦋 Changeset detected

Latest commit: c9535d2

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

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

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

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 4, 2026

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

Install it locally:

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

@codspeed-hq
Copy link
Copy Markdown

codspeed-hq Bot commented Mar 4, 2026

Merging this PR will degrade performance by 51.04%

⚡ 5 improved benchmarks
❌ 2 regressed benchmarks
✅ 137 untouched benchmarks

⚠️ Please fix the performance issues or acknowledge them on CodSpeed.

Performance Changes

Mode Benchmark BASE HEAD Efficiency
Memory benchmark "many-chunks-esm", scenario '{"name":"mode-production","mode":"production"}' 8.7 MB 6.9 MB +26.73%
Memory benchmark "many-modules-commonjs", scenario '{"name":"mode-development-rebuild","mode":"development","watch":true}' 807.3 KB 388.1 KB ×2.1
Memory benchmark "many-modules-esm", scenario '{"name":"mode-production","mode":"production"}' 9.7 MB 6.8 MB +43.21%
Memory benchmark "asset-modules-source", scenario '{"name":"mode-development-rebuild","mode":"development","watch":true}' 266.3 KB 389.2 KB -31.57%
Memory benchmark "many-modules-esm", scenario '{"name":"mode-development","mode":"development"}' 1.4 MB 1.1 MB +21.87%
Memory benchmark "many-chunks-commonjs", scenario '{"name":"mode-production","mode":"production"}' 9.5 MB 7.5 MB +27.06%
Memory benchmark "many-modules-esm", scenario '{"name":"mode-development-rebuild","mode":"development","watch":true}' 391 KB 798.5 KB -51.04%

Comparing feat/css_style (c9535d2) with main (d6927b4)

Open in CodSpeed

Comment thread lib/css/CssInjectStyleRuntimeModule.js Outdated
]),
"}"
]),
"}",
Copy link
Copy Markdown
Member

@alexander-akait alexander-akait Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we don't need here options.attributes, let's add a hook like we have LoadScriptRuntimeModule - createScript, let's add here createStyle and pass the code to hook,

Also let's set:

'script.setAttribute("data-webpack", dataWebpackPrefix + key);'

just look at LoadScriptRuntimeModule, key is module id in our case

Comment thread lib/css/CssInjectStyleRuntimeModule.js Outdated
"};"
]),
"}",
"",
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we need to add a check here, is target universal we should generate it, if web we should not generate it, because in web we always have document

Comment thread lib/css/CssInjectStyleRuntimeModule.js Outdated
"var item = list[i];",
"var identifier = item[0];",
"",
"var indexByIdentifier = findIndex(identifier);",
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can rewrite it and improve perfomance using data-webpack-module-id data attribute, so we will no need to go all style tags, we already will know what we should remove or update, the same for other part of generated code

Comment thread lib/css/CssInjectStyleRuntimeModule.js Outdated
]),
"}",
"",
"function domAPI(options) {",
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we can simplify domAPI and avoid this function at all injection, logic there we need to call it, we have it in style-loader due we don't have hooks and we will need to pass options from style-loader, here we have hooks so maybe things can be simplified and if somebody want to modify logic we will just introduce more hooks

Copy link
Copy Markdown
Member

@alexander-akait alexander-akait left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks very good, let's improve couple things and rebase and we can merge

@xiaoxiaojx
Copy link
Copy Markdown
Member Author

@alexander-akait Thanks for the great suggestion

Comment thread lib/css/CssInjectStyleRuntimeModule.js Outdated
),
"",
"var head = document.head || document.getElementsByTagName('head')[0];",
"head.appendChild(element);",
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let's use document.head.appendChild(style), also let's rename to style, we are using this pattern everywhere, not sure why we have this fallback in style-loader

Copy link
Copy Markdown
Member

@alexander-akait alexander-akait left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And let's add target: ["node", "web"] here, we should export CSS modules classes and no actions with DOM, like we are doing with link

@alexander-akait
Copy link
Copy Markdown
Member

And we can merge, thank you ❤️

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 9, 2026

Types Coverage

Coverage after merging feat/css_style into main will be
98.94%
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.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%
lib
   APIPlugin.js100%100%100%100%
   AbstractMethodError.js100%100%100%100%
   AsyncDependenciesBlock.js100%100%100%100%
   AsyncDependencyToInitialChunkError.js100%100%100%100%
   AutomaticPrefetchPlugin.js100%100%100%100%
   BannerPlugin.js100%100%100%100%
   Cache.js98.21%100%100%98.21%87
   CacheFacade.js100%100%100%100%
   CaseSensitiveModulesWarning.js100%100%100%100%
   Chunk.js99.72%100%100%99.72%37
   ChunkGraph.js100%100%100%100%
   ChunkGroup.js100%100%100%100%
   ChunkRenderError.js100%100%100%100%
   ChunkTemplate.js100%100%100%100%
   CleanPlugin.js98.72%100%100%98.72%196, 216, 371
   CodeGenerationError.js100%100%100%100%
   CodeGenerationResults.js100%100%100%100%
   CommentCompilationWarning.js100%100%100%100%
   CompatibilityPlugin.js100%100%100%100%
   Compilation.js98.54%100%100%98.54%1510, 1799, 1806, 1814, 1836, 2712, 3130, 3778, 3807, 3859–3860, 3864, 3869, 3885–3886, 3900–3901, 3906–3907, 4369, 4395, 469, 474, 5078, 5158, 5173, 5198–5199, 5201, 5517, 5522, 5528, 5531, 5543, 5545, 5549, 5565, 5580, 5611, 5665, 5689, 5799, 680–681
   Compiler.js99.56%100%100%99.56%1092–1093, 1101
   ConcatenationScope.js98.59%100%100%98.59%166
   ConcurrentCompilationError.js100%100%100%100%
   ConditionalInitFragment.js100%100%100%100%
   ConstPlugin.js100%100%100%100%
   ContextExclusionPlugin.js100%100%100%100%
   ContextModule.js100%100%100%100%
   ContextModuleFactory.js97.75%100%100%97.75%253, 385, 410, 435, 439, 450
   ContextReplacementPlugin.js100%100%100%100%
   CssModule.js81.32%100%100%81.32%152, 157–172
   DefinePlugin.js98.92%100%100%98.92%153–154, 170, 189, 263
   DelegatedModule.js95.24%100%100%95.24%240–244
   DelegatedModuleFactoryPlugin.js98.15%100%100%98.15%103
   DelegatedPlugin.js100%100%100%100%
   DependenciesBlock.js100%100%100%100%
   Dependency.js98.13%100%100%98.13%351, 381
   DependencyTemplate.js100%100%100%100%
   DependencyTemplates.js100%100%100%100%
   DllEntryPlugin.js100%100%100%100%
   DllModule.js100%100%100%100%
   DllModuleFactory.js100%100%100%100%
   DllPlugin.js100%100%100%100%
   DllReferencePlugin.js100%100%100%100%
   DotenvPlugin.js97.88%100%100%97.88%235, 375, 388–389
   DynamicEntryPlugin.js100%100%100%100%
   EntryOptionPlugin.js100%100%100%100%
   EntryPlugin.js100%100%100%100%
   Entrypoint.js100%100%100%100%
   EnvironmentNotSupportAsyncWarning.js100%100%100%100%
   EnvironmentPlugin.js97.14%100%100%97.14%48
   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.86%100%100%98.86%384–388, 525
   ExternalModuleFactoryPlugin.js100%100%100%100%
   ExternalsPlugin.js100%100%100%100%
   FalseIIFEUmdWarning.js100%100%100%100%
   FileSystemInfo.js99.49%100%100%99.49%168, 2140–2141, 2144, 2155, 2166, 2177, 261, 3495, 3510, 3534
   FlagAllModulesAsUsedPlugin.js100%100%100%100%
   FlagDependencyExportsPlugin.js98.74%100%100%98.74%396, 398, 402
   FlagDependencyUsagePlugin.js100%100%100%100%
   FlagEntryExportAsUsedPlugin.js100%100%100%100%
   Generator.js100%100%100%100%
   GraphHelpers.js100%100%100%100%
   HarmonyLinkingError.js100%100%100%100%
   HookWebpackError.js100%100%100%100%
   HotModuleReplacementPlugin.js100%100%100%100%
   HotUpdateChunk.js100%100%100%100%
   IgnoreErrorModuleFactory.js100%100%100%100%
   IgnorePlugin.js100%100%100%100%
   IgnoreWarningsPlugin.js100%100%100%100%
   InitFragment.js100%100%100%100%
   InvalidDependenciesModuleWarning.js100%100%100%100%
   JavascriptMetaInfoPlugin.js100%100%100%100%
   LibManifestPlugin.js97.14%100%100%97.14%114, 117
   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.49%100%100%98.49%1186, 1191, 1234, 1247, 1304, 1312
   ModuleBuildError.js100%100%100%100%
   ModuleDependencyError.js100%100%100%100%
   ModuleDependencyWarning.js100%100%100%100%
   ModuleError.js100%100%100%100%
   ModuleFactory.js100%100%100%100%
   ModuleFilenameHelpers.js98.85%100%100%98.85%105, 107
   ModuleGraph.js99.73%100%100%99.73%942
   ModuleGraphConnection.js100%100%100%100%
   ModuleHashingError.js100%100%100%100%
   ModuleInfoHeaderPlugin.js100%100%100%100%
   ModuleNotFoundError.js100%100%100%100%
   ModuleParseError.js100%100%100%100%
   ModuleProfile.js100%100%100%100%
   ModuleRestoreError.js100%100%100%100%
   ModuleSourceTypeConstants.js100%100%100%100%
   ModuleStoreError.js100%100%100%100%
   ModuleTemplate.js100%100%100%100%
   ModuleTypeConstants.js100%100%100%100%
   ModuleWarning.js100%100%100%100%
   MultiCompiler.js99.69%100%100%99.69%619
   MultiStats.js100%100%100%100%
   MultiWatching.js100%100%100%100%
   NoEmitOnErrorsPlugin.js100%100%100%100%
   NoModeWarning.js100%100%100%100%
   NodeStuffInWebError.js100%100%100%100%
   NodeStuffPlugin.js100%100%100%100%
   NormalModule.js97.78%100%100%97.78%1032, 1048, 1135, 1765, 1770–1780, 214, 722, 740, 757, 998
   NormalModuleFactory.js99.46%100%100%99.46%1032, 1337, 447, 459
   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.75%100%100%98.75%431–432, 437, 439, 503
   ProvidePlugin.js100%100%100%100%
   RawModule.js100%100%100%100%
   RecordIdsPlugin.js100%100%100%100%
   RequestShortener.js100%100%100%100%
   RequireJsStuffPlugin.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%
   SizeFormatHelpers.js100%100%100%100%
   SourceMapDevToolModuleOptionsPlugin.js100%100%100%100%
   SourceMapDevToolPlugin.js99.16%100%100%99.16%265–266, 608
   Stats.js100%100%100%100%
   Template.js100%100%100%100%
   TemplatedPathPlugin.js98.84%100%100%98.84%128–129
   UnhandledSchemeError.js100%100%100%100%
   UnsupportedFeatureWarning.js100%100%100%100%
   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.js96.97%100%100%96.97%43
   WebpackIsIncludedPlugin.js100%100%100%100%
   WebpackOptionsApply.js100%100%100%100%
   WebpackOptionsDefaulter.js100%100%100%100%
   buildChunkGraph.js99.87%100%100%99.87%317
   cli.js98.71%100%100%98.71%109, 453, 485, 527, 785
   formatLocation.js100%100%100%100%
   index.js100%100%100%100%
   validateSchema.js94.67%100%100%94.67%86, 88, 97, 99
   webpack.js97.22%100%100%97.22%186, 208, 210
lib/asset
   AssetBytesGenerator.js100%100%100%100%
   AssetBytesParser.js100%100%100%100%
   AssetGenerator.js100%100%100%100%
   AssetModulesPlugin.js97.77%100%100%97.77%282, 306, 309, 361, 39
   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%70, 82, 90
   MemoryCachePlugin.js95.83%100%100%95.83%33
   MemoryWithGcCachePlugin.js93.15%100%100%93.15%104, 111–112, 120, 87
   PackFileCacheStrategy.js96.40%100%100%96.40%1225,

@alexander-akait alexander-akait merged commit 915293e into main Mar 10, 2026
55 checks passed
@alexander-akait alexander-akait deleted the feat/css_style branch March 10, 2026 10:48
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.

2 participants