Skip to content

feat(create-webpack-app): stop asking about HTML and CSS #4836

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
alexander-akait wants to merge 1 commit into
base: main
Choose a base branch
from
+346 −656
Open

feat(create-webpack-app): stop asking about HTML and CSS #4836

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/init-no-html-css-questions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"create-webpack-app": minor
---

feat: stop asking about HTML and CSS in `init`, keeping one question for the CSS preprocessors webpack does not cover
1 change: 1 addition & 0 deletions .cspell.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@
"splitted",
"Statsv",
"styl",
"stylesheet",
"Tanjiro",
"tapable",
"taskkill",
Expand Down
5 changes: 5 additions & 0 deletions packages/create-webpack-app/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,11 @@ Available templates:
- [`vue`](https://vuejs.org/)
- [`svelte`](https://svelte.dev/)

Every template scaffolds `index.html` as the entry point of the project and relies on
webpack's built-in HTML and CSS support (webpack >= 5.109), so the generated projects
carry no `html-webpack-plugin`, `css-loader`, `style-loader` or `mini-css-extract-plugin`.
A Sass/Less/Stylus project adds only its preprocessor loader.

Available templates for `loader` and `plugin` generators:

- `default` (used by default when nothing specified) - generate bootstrap code
76 changes: 24 additions & 52 deletions packages/create-webpack-app/src/generators/init/default.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,12 +33,6 @@ export default async function defaultInitGenerator(plop: NodePlopAPI) {
message: "Would you like to use Webpack Dev server?",
default: true,
},
{
type: "confirm",
name: "html",
message: "Do you want to simplify the creation of HTML files for your bundle?",
default: true,
},
{
type: "confirm",
name: "workboxWebpackPlugin",
Expand All @@ -47,33 +41,10 @@ export default async function defaultInitGenerator(plop: NodePlopAPI) {
},
{
type: "list",
name: "cssType",
message: "Which of the following CSS solution do you want to use?",
choices: ["none", "CSS only", "SASS", "LESS", "Stylus"],
default: "CSS only",
filter: (input: string, answers: Answers) => {
if (input === "none") {
answers.isCSS = false;
answers.isPostCSS = false;
} else if (input === "CSS only") {
answers.isCSS = true;
}
return input;
},
},
{
type: "confirm",
name: "isCSS",
message: (answers: Answers) =>
`Will you be using CSS styles along with ${answers.cssType} in your project?`,
when: (answers: Answers) => answers.cssType !== "CSS only",
default: true,
},
{
type: "confirm",
name: "isPostCSS",
message: "Do you want to use PostCSS in your project?",
default: (answers: Answers) => answers.cssType === "CSS only",
name: "cssPreprocessor",
message: "Which CSS preprocessor do you want to use?",
choices: ["none", "SASS", "LESS", "Stylus"],
default: "none",
},
{
type: "list",
Expand Down Expand Up @@ -109,22 +80,22 @@ export default async function defaultInitGenerator(plop: NodePlopAPI) {
devDependencies.push("workbox-webpack-plugin");
}

if (answers.isPostCSS) {
devDependencies.push("postcss-loader", "postcss", "autoprefixer");
}

if (answers.cssType !== "none") {
switch (answers.cssType) {
case "SASS":
devDependencies.push("sass-loader", "sass");
break;
case "LESS":
devDependencies.push("less-loader", "less");
break;
case "Stylus":
devDependencies.push("stylus-loader", "stylus");
break;
}
switch (answers.cssPreprocessor) {
case "SASS":
answers.styleExtension = "scss";
devDependencies.push("sass-loader", "sass");
break;
case "LESS":
answers.styleExtension = "less";
devDependencies.push("less-loader", "less");
break;
case "Stylus":
answers.styleExtension = "styl";
devDependencies.push("stylus-loader", "stylus");
break;
default:
answers.styleExtension = "css";
break;
}

const files: FileRecord[] = [
Expand Down Expand Up @@ -158,9 +129,10 @@ export default async function defaultInitGenerator(plop: NodePlopAPI) {
break;
}

if (answers.isPostCSS) {
files.push({ filePath: "postcss.config.js", fileType: "text" });
}
files.push({
filePath: `./src/styles.${answers.styleExtension}`,
fileType: "text",
});

for (const file of files) {
actions.push({
Expand Down
90 changes: 26 additions & 64 deletions packages/create-webpack-app/src/generators/init/react.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,33 +49,10 @@ export default async function reactInitGenerator(plop: NodePlopAPI) {
},
{
type: "list",
name: "cssType",
message: "Which of the following CSS solution do you want to use?",
choices: ["none", "CSS only", "SASS", "LESS", "Stylus"],
default: "CSS only",
filter: (input: string, answers: Answers) => {
if (input === "none") {
answers.isCSS = false;
answers.isPostCSS = false;
} else if (input === "CSS only") {
answers.isCSS = true;
}
return input;
},
},
{
type: "confirm",
name: "isCSS",
message: (answers: Answers) =>
`Will you be using CSS styles along with ${answers.cssType} in your project?`,
when: (answers: Answers) => answers.cssType !== "CSS only",
default: true,
},
{
type: "confirm",
name: "isPostCSS",
message: "Do you want to use PostCSS in your project?",
default: (answers: Answers) => answers.cssType === "CSS only",
name: "cssPreprocessor",
message: "Which CSS preprocessor do you want to use?",
choices: ["none", "SASS", "LESS", "Stylus"],
default: "none",
},
{
type: "list",
Expand All @@ -94,7 +71,6 @@ export default async function reactInitGenerator(plop: NodePlopAPI) {
actions: function actions(answers: Answers) {
// setting some default values based on the answers
const actions: ActionType[] = [];
answers.html = true;
answers.devServer = true;
switch (answers.langType) {
case "ES6":
Expand All @@ -109,32 +85,28 @@ export default async function reactInitGenerator(plop: NodePlopAPI) {
devDependencies.push("typescript", "ts-loader", "@types/react", "@types/react-dom");
break;
}
if (answers.isPostCSS) {
devDependencies.push("postcss-loader", "postcss", "autoprefixer");
}
if (answers.cssType === "none") {
answers.isCSS = false;
answers.isPostCSS = false;
} else {
switch (answers.cssType) {
case "CSS only":
answers.isCSS = true;
break;
case "SASS":
devDependencies.push("sass-loader", "sass");
break;
case "LESS":
devDependencies.push("less-loader", "less");
break;
case "Stylus":
devDependencies.push("stylus-loader", "stylus");
break;
}
}
if (answers.workboxWebpackPlugin) {
devDependencies.push("workbox-webpack-plugin");
}

switch (answers.cssPreprocessor) {
case "SASS":
answers.styleExtension = "scss";
devDependencies.push("sass-loader", "sass");
break;
case "LESS":
answers.styleExtension = "less";
devDependencies.push("less-loader", "less");
break;
case "Stylus":
answers.styleExtension = "styl";
devDependencies.push("stylus-loader", "stylus");
break;
default:
answers.styleExtension = "css";
break;
}

const files: FileRecord[] = [
{ filePath: "./index.html", fileType: "text" },
{
Expand Down Expand Up @@ -173,20 +145,10 @@ export default async function reactInitGenerator(plop: NodePlopAPI) {
break;
}

switch (answers.cssType) {
case "CSS only":
files.push({ filePath: "./src/styles/global.css", fileType: "text" });
break;
case "SASS":
files.push({ filePath: "./src/styles/global.scss", fileType: "text" });
break;
case "LESS":
files.push({ filePath: "./src/styles/global.less", fileType: "text" });
break;
case "Stylus":
files.push({ filePath: "./src/styles/global.styl", fileType: "text" });
break;
}
files.push({
filePath: `./src/styles/global.${answers.styleExtension}`,
fileType: "text",
});

for (const file of files) {
actions.push({
Expand Down
88 changes: 24 additions & 64 deletions packages/create-webpack-app/src/generators/init/svelte.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,33 +40,10 @@ export default async function svelteInitGenerator(plop: NodePlopAPI) {
},
{
type: "list",
name: "cssType",
message: "Which of the following CSS solution do you want to use?",
choices: ["none", "CSS only", "SASS", "LESS", "Stylus"],
default: "CSS only",
filter: (input: string, answers: Answers) => {
if (input === "none") {
answers.isCSS = false;
answers.isPostCSS = false;
} else if (input === "CSS only") {
answers.isCSS = true;
}
return input;
},
},
{
type: "confirm",
name: "isCSS",
message: (answers: Answers) =>
`Will you be using CSS styles along with ${answers.cssType} in your project?`,
when: (answers: Answers) => answers.cssType !== "CSS only",
default: true,
},
{
type: "confirm",
name: "isPostCSS",
message: "Do you want to use PostCSS in your project?",
default: (answers: Answers) => answers.cssType === "CSS only",
name: "cssPreprocessor",
message: "Which CSS preprocessor do you want to use?",
choices: ["none", "SASS", "LESS", "Stylus"],
default: "none",
},
{
type: "list",
Expand All @@ -85,7 +62,6 @@ export default async function svelteInitGenerator(plop: NodePlopAPI) {
actions: function actions(answers: Answers) {
// setting some default values based on the answers
const actions: ActionType[] = [];
answers.html = true;
answers.devServer = true;

switch (answers.langType) {
Expand All @@ -97,32 +73,26 @@ export default async function svelteInitGenerator(plop: NodePlopAPI) {
break;
}

if (answers.isPostCSS) {
devDependencies.push("postcss-loader", "postcss", "autoprefixer");
}

if (answers.workboxWebpackPlugin) {
devDependencies.push("workbox-webpack-plugin");
}

if (answers.cssType === "none") {
answers.isCSS = false;
answers.isPostCSS = false;
} else {
switch (answers.cssType) {
case "CSS only":
answers.isCSS = true;
break;
case "SASS":
devDependencies.push("sass-loader", "sass");
break;
case "LESS":
devDependencies.push("less-loader", "less");
break;
case "Stylus":
devDependencies.push("stylus-loader", "stylus");
break;
}
switch (answers.cssPreprocessor) {
case "SASS":
answers.styleExtension = "scss";
devDependencies.push("sass-loader", "sass");
break;
case "LESS":
answers.styleExtension = "less";
devDependencies.push("less-loader", "less");
break;
case "Stylus":
answers.styleExtension = "styl";
devDependencies.push("stylus-loader", "stylus");
break;
default:
answers.styleExtension = "css";
break;
}

const files: FileRecord[] = [
Expand Down Expand Up @@ -159,20 +129,10 @@ export default async function svelteInitGenerator(plop: NodePlopAPI) {
files.push({ filePath: "./src/store/index.js", fileType: "text" });
}

switch (answers.cssType) {
case "CSS only":
files.push({ filePath: "./src/styles/global.css", fileType: "text" });
break;
case "SASS":
files.push({ filePath: "./src/styles/global.scss", fileType: "text" });
break;
case "LESS":
files.push({ filePath: "./src/styles/global.less", fileType: "text" });
break;
case "Stylus":
files.push({ filePath: "./src/styles/global.styl", fileType: "text" });
break;
}
files.push({
filePath: `./src/styles/global.${answers.styleExtension}`,
fileType: "text",
});

for (const file of files) {
actions.push({
Expand Down
Loading
Loading