Skip to content

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

Merged
alexander-akait merged 1 commit into
mainfrom
claude/webpack-css-examples-tests-gn9qbl
Aug 29, 2026
Merged

docs: use the built-in CSS support of webpack in examples#1336
alexander-akait merged 1 commit into
mainfrom
claude/webpack-css-examples-tests-gn9qbl

Conversation

@alexander-akait

Copy link
Copy Markdown
Member

Updates the README examples to use webpack's built-in CSS support (experiments.css + the css/auto module type) instead of chaining style-loader and css-loader, and covers that setup with tests.

Docs

  • Every configuration example now sets type: "css/auto" on the rule and experiments: { css: true }, with style-loader/css-loader removed from the use arrays (11 examples, including the two source-map examples that also passed sourceMap to css-loader).
  • The getting-started notes lead with the built-in support; a note after the first example keeps the style-loader/css-loader chain documented as the alternative for anyone on that setup.
  • "Extracts CSS into separate files" gains the built-in CSS support as option 1 (with output.cssFilename/cssChunkFilename); mini-css-extract-plugin, Asset Modules, extract-loader and file-loader are kept and renumbered 2–5.
  • The url(...) and source-map prose now refers to webpack handling the generated CSS rather than to css-loader specifically.

Tests

  • test/helpers/getCompiler.js accepts css: true, which enables experiments.css, sets type: "css/auto", swaps output.library for output.cssFilename, and drops the test loader, since webpack consumes the loader result itself. A config.experiments passthrough was added too.
  • New test/helpers/getCodeFromCssBundle.js reads the emitted CSS asset.
  • test/loader.test.js: "should work with the built-in CSS support of webpack" for all four implementation/API combinations across both syntaxes. The snapshots also show webpack's CSS pipeline resolving the @import "./file.css" in the fixture.
  • test/sourceMap-options.test.js: "should generate source maps with the built-in CSS support of webpack", asserting the emitted main.bundle.css.map.

Verification

  • npm run test:base passes; snapshot regeneration only added entries, the existing snapshots are unchanged.
  • npm run lint (eslint, cspell, tsc --noEmit, prettier) is clean.

No changeset is included, as this only touches documentation and tests without any runtime change.

🤖 Generated with Claude Code

https://claude.ai/code/session_013PtW7eezwuQP5epLFMrAky


Generated by Claude Code

@changeset-bot

changeset-bot Bot commented Aug 29, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: ffa01b8

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@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 (ffa01b8)
  • ✅ login: alexander-akait / name: alexander-akait (ffa01b8)

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 96.67%. Comparing base (7b81867) to head (ffa01b8).

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #1336   +/-   ##
=======================================
  Coverage   96.67%   96.67%           
=======================================
  Files           2        2           
  Lines         901      901           
=======================================
  Hits          871      871           
  Misses         30       30           

☔ 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 the `style-loader`/`css-loader` chains in the README examples with
webpack's built-in CSS support (`experiments.css` and the `css/auto` module
type), keeping the loader-based setup documented as an alternative. Add the
built-in CSS support as the first recommended way to extract stylesheets.

Cover the documented setup with tests: `getCompiler` can now build with
`experiments.css` enabled and `css/auto` (without the test loader), and new
tests assert the emitted CSS and its source map.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013PtW7eezwuQP5epLFMrAky
@alexander-akait
alexander-akait force-pushed the claude/webpack-css-examples-tests-gn9qbl branch from 03481e1 to ffa01b8 Compare August 29, 2026 12:22
@alexander-akait
alexander-akait merged commit a28ab73 into main Aug 29, 2026
16 checks passed
@alexander-akait
alexander-akait deleted the claude/webpack-css-examples-tests-gn9qbl branch August 29, 2026 12:50
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