feat(create-webpack-app): stop asking about HTML and CSS - #4836
Open
alexander-akait wants to merge 4 commits into
Open
feat(create-webpack-app): stop asking about HTML and CSS#4836alexander-akait wants to merge 4 commits into
alexander-akait wants to merge 4 commits into
Conversation
webpack handles both out of the box, so the templates no longer ask whether to simplify HTML creation, which CSS solution to use, whether PostCSS is wanted or whether CSS should be extracted. `index.html` is always the entry point, a stylesheet is always scaffolded, and one question remains for the preprocessors webpack does not cover, wired through a `type: "css/auto"` rule that adds only sass-loader/less-loader/stylus-loader. Also fixes what the generated projects needed to build and run: `baseUrl` for the Vue TypeScript `paths`, a fully specified `./router/index.js` import under `"type": "module"`, Svelte 5's `mount()` instead of `new App()`, and style-module declarations for the TypeScript templates.
🦋 Changeset detectedLatest commit: 606178d The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
Contributor
|
This PR is packaged and the instant preview is available (606178d). Install it locally:
npm i -D create-webpack-app@https://pkg.pr.new/create-webpack-app@606178d webpack-cli@https://pkg.pr.new/webpack-cli@606178d
yarn add -D create-webpack-app@https://pkg.pr.new/create-webpack-app@606178d webpack-cli@https://pkg.pr.new/webpack-cli@606178d
pnpm add -D create-webpack-app@https://pkg.pr.new/create-webpack-app@606178d webpack-cli@https://pkg.pr.new/webpack-cli@606178d |
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #4836 +/- ##
==========================================
+ Coverage 93.37% 94.78% +1.40%
==========================================
Files 14 14
Lines 5407 5391 -16
Branches 790 799 +9
==========================================
+ Hits 5049 5110 +61
+ Misses 356 280 -76
+ Partials 2 1 -1
Continue to review full report in Codecov by Harness.
🚀 New features to boost your workflow:
|
…ssor The single CSS question now lists every tool webpack does not cover itself: PostCSS, Sass, Less, Stylus, and each preprocessor combined with PostCSS. A preprocessor rule then reads `use: ["postcss-loader", "sass-loader"]`, which webpack applies right to left, so the stylesheet is compiled first and PostCSS runs over the result. PostCSS also scaffolds `postcss.config.js` — in every template now, not just the default one — and asks for `experiments.css`, since its `.css` rule turns the automatic detection off. Covers the answer handling with a test that builds each generator's action list without running it, so all four templates and all eight answers are exercised in a second instead of an install apiece.
The default template no longer installs ts-loader or registers a rule for it: webpack strips the types itself. `typescript` stays for the editor and for the `check:types` script (`tsc --noEmit`, since the build type checks nothing), `tsconfig.json` gains `noEmit`, and `package.json` records the Node.js floor type stripping needs. This also gets the template off ts-loader 9, which crashes on TypeScript 7. The React, Vue and Svelte templates keep ts-loader: stripping handles neither `.tsx` nor the single-file components those loaders produce.
Type stripping is erasable syntax only and checks nothing, so a project that wants type checking, decorators, enums or `.tsx` still needs a loader. The default template asks which to use and defaults to webpack's built-in support; `ts-loader` restores the rule and the dependency. Every template that installs ts-loader now pins `typescript@5` with it: its latest release declares `typescript: "*"` but throws `Cannot read properties of undefined (reading 'fileExists')` on TypeScript 7. `tsconfig.json` also loses `noEmit`, which stopped ts-loader from emitting anything; `check:types` passes the flag itself.
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
1 participant
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.
Summary
#4833 moved the
inittemplates onto webpack's built-in HTML and CSS support, but the questions about them stayed. Since webpack handles both out of the box,initno longer asks whether to simplify HTML creation, which CSS solution to use, whether PostCSS is wanted, or whether CSS should be extracted:index.htmlis always the entry point and a stylesheet is always scaffolded. One question remains for the preprocessors webpack does not cover (SASS/LESS/Stylus), wired through atype: "css/auto"rule that adds only the preprocessor loader. The default template goes from 9 questions to 5. Refs #4833.Generating and building each template also surfaced three defects that predate both PRs and are fixed here:
baseUrlfor the Vue TypeScriptpaths(TS5090), a fully specified./router/index.jsimport under"type": "module", and Svelte 5'smount()instead ofnew App(), which rendered a blank page.What kind of change does this PR introduce?
feat
Did you add tests for your changes?
Yes —
test/create-webpack-app/init/init.test.jsgains a case asserting the HTML/CSS questions are gone and that the generated config and dependencies carry nohtml-webpack-plugin/css-loader/mini-css-extract-plugin, plus a case covering the preprocessor path (type: "css/auto"with onlysass-loader); the prompt sequences and snapshots are updated. Beyond the suite, each template was generated and production-built, and the emitteddist/index.htmlloaded in Chromium: every one renders with its stylesheet applied and no page errors, SASS/LESS variants included.Does this PR introduce a breaking change?
No for generated projects. The prompts change, so the
cssType,isCSS,isPostCSSandhtmlanswers are replaced by a singlecssPreprocessoranswer — this only affects anything driving the generator with pre-supplied answers.If relevant, what needs to be documented once your changes are merged or what have you already documented?
Documented in this PR:
packages/create-webpack-app/README.mdnotes that every template relies on webpack's built-in HTML and CSS support, and each template's generatedREADME.mdexplains that the page is the entry point and how to add a preprocessor.Use of AI
Yes. Claude Code made the template and generator edits and ran the verification described above — generating every template, building it, and loading the result in a browser. I reviewed the diff and the verification output before submitting.
Generated by Claude Code