docs: use the built-in CSS support of webpack in examples - #475
Merged
Conversation
Rewrite the `README.md` examples to use webpack's built-in CSS support (the `css/auto` module type plus `experiments.css`) instead of chaining the loader with `css-loader` and `style-loader`, add sections about `css-loader`/`style-loader` chaining and CSS modules, and update the production/extracting notes accordingly. Cover the same setup with tests: a new `getCssCompiler` helper builds with `experiments.css` enabled and the new `test/builtin-css.test.js` checks the emitted CSS, `@import`, `url()`, CSS modules, source maps and errors. The test runner now only picks up `test/*.test.js`, so JavaScript fixtures are not treated as test files. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01R5LK1NnJYsgthMpP5iqZ3C
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #475 +/- ##
=======================================
Coverage 96.21% 96.21%
=======================================
Files 2 2
Lines 1269 1269
=======================================
Hits 1221 1221
Misses 48 48 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Updates the documentation examples to use the built-in CSS support of webpack (the
css/automodule type together withexperiments.css) instead of chaining the loader withcss-loaderandstyle-loader, in line with whatless-loaderdoes, and covers the same setup with tests.Documentation
Every
webpack.config.jsexample now looks like this:This covers "Getting Started" (with a note that
experiments.csshas to be enabled) and all option examples (stylusOptionsobject/function,sourceMap,webpackImporter,additionalDatastring/sync/async,implementation), as well as the examples section (normal usage, source maps, nib, importing JSON files, Stylus resolver).Additionally:
css-loaderandstyle-loader" section — the built-in CSS support is not mandatory, so chaining withcss-loaderandstyle-loaderis still documented as the alternative.type: "css/auto",*.module.stylfiles are treated as CSS modules.output.cssFilename/output.cssChunkFilenameconfigure the file names, and theMiniCssExtractPluginis only needed when chaining withcss-loader.Tests
test/helpers/getCssCompiler.js, which builds withexperiments.cssenabled and thecss/automodule type, i.e. the configuration from the documentation.test/builtin-css.test.js, which checks the emitted CSS asset for a basic file,@import,url()(the referenced image is emitted as an asset), CSS modules (exported class names and the generated CSS), source maps (the.mapasset and its sources) and a broken file.test/*.test.js, otherwise the new JavaScript fixture is treated as a test file. The glob is passed as the last argument intestandtest:coverage, because Node stops parsing its own flags after the first positional argument (npm run test:coveragestill writescoverage.lcov).npm test(lint + 153 tests) passes.Generated by Claude Code