Skip to content

docs: use the built-in CSS support of webpack in examples - #740

Merged
alexander-akait merged 2 commits into
mainfrom
claude/webpack-css-examples-tests-u6b8nj
Aug 29, 2026
Merged

docs: use the built-in CSS support of webpack in examples#740
alexander-akait merged 2 commits into
mainfrom
claude/webpack-css-examples-tests-u6b8nj

Conversation

@alexander-akait

Copy link
Copy Markdown
Member

Replaces style-loader/css-loader/mini-css-extract-plugin in the documentation examples with webpack's built-in CSS support (experiments.css + the css/auto module type), and adds tests for that setup.

README

  • Every webpack config example now sets experiments: { css: true } and type: "css/auto" on the rule, and drops style-loader/css-loader from the loader chain (along with the importLoaders options that only existed for css-loader).
  • CSS Modules section rewritten around css/auto (*.module.css) with a css/module variant for treating all matched files as modules; the stale css-loader#modules link now points at the CSS Modules spec.
  • Extract CSS section no longer uses mini-css-extract-plugin — extraction is native, configured through output.cssFilename / output.cssChunkFilename.
  • The sass-based examples (sourceMap, implementation) had their test regex corrected to /\.s[ac]ss$/i — they matched .css while running sass-loader.
  • Added a note that this requires webpack >= 5.87.0, and that css-loader/style-loader still work if preferred, with postcss-loader placed before them.

Tests

  • New test/helpers/getCssCompiler.js compiles fixtures through experiments.css + css/auto with no css-loader-like loader in the chain.
  • New test/builtInCss.test.js covers plain CSS, CSS modules, SugarSS, execute with postcss-js, source maps in the emitted main.css.map, and the invalid-syntax error path. Fixtures in test/fixtures/builtin-css/.
  • test/fixtures/esparser/runManual.mjs no longer references css-loader (it is not a devDependency, so the manual runner was broken) and uses the built-in CSS pipeline.

The existing unit tests keep test/helpers/testLoader.js. With built-in CSS, webpack's CSS parser regenerates the module source as a RawSource and drops the loader's source map at the module level, so the assertions in sourceMap.test.js about the loader's own map (sources, sourcesContent, absolute paths) cannot be made against it — converting them would trade precise loader-output assertions for webpack's composed asset maps.

Full suite passes (132 passed, 4 skipped) and npm run lint is clean.


Generated by Claude Code

@linux-foundation-easycla

linux-foundation-easycla Bot commented Aug 29, 2026

Copy link
Copy Markdown

CLA Signed
The committers listed above are authorized under a signed CLA.

  • ✅ Unknown (b31e0a3)
  • ✅ login: alexander-akait / name: alexander-akait (b31e0a3)

One or more co-authors of this pull request were not found. You must specify co-authors in commit message trailer via:

Co-authored-by: name <email>

Supported Co-authored-by: formats include:

  1. Anything <id+login@users.noreply.github.com> - it will locate your GitHub user by id part.
  2. Anything <login@users.noreply.github.com> - it will locate your GitHub user by login part.
  3. Anything <public-email> - it will locate your GitHub user by public-email part. Note that this email must be made public on Github.
  4. Anything <other-email> - it will locate your GitHub user by other-email part but only if that email was used before for any other CLA as a main commit author.
  5. login <any-valid-email> - it will locate your GitHub user by login part, note that login part must be at least 3 characters long.

Alternatively, if the co-author should not be included, remove the Co-authored-by: line from the commit message.

Please update your commit message(s) by doing git commit --amend and then git push [--force] and then request re-running CLA check via commenting on this pull request:

/easycla

@codecov

codecov Bot commented Aug 29, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 88.23%. Comparing base (438644b) to head (29fd6fe).

Additional details and impacted files
@@           Coverage Diff           @@
##             main     #740   +/-   ##
=======================================
  Coverage   88.23%   88.23%           
=======================================
  Files           3        3           
  Lines         357      357           
  Branches      118      118           
=======================================
  Hits          315      315           
  Misses         38       38           
  Partials        4        4           

☔ 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.

Replace `style-loader`/`css-loader`/`mini-css-extract-plugin` in the
documentation examples with `experiments.css` and the `css/auto` module
type, and cover this setup with tests.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Y38YLRaBZZKSrV2dRiFpi2
@alexander-akait
alexander-akait force-pushed the claude/webpack-css-examples-tests-u6b8nj branch from 0434b31 to b31e0a3 Compare August 29, 2026 12:38
`npm run security` (`npm audit --omit=dev`) fails on the nested
`js-yaml` of `cosmiconfig` (GHSA-h67p-54hq-rp68, GHSA-52cp-r559-cp3m,
GHSA-5p4m-2wfm-xmqj). Lockfile-only bump from 4.1.1 to 4.3.2.
@alexander-akait
alexander-akait merged commit ed3e1f7 into main Aug 29, 2026
19 checks passed
@alexander-akait
alexander-akait deleted the claude/webpack-css-examples-tests-u6b8nj branch August 29, 2026 13:26
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