Skip to content

Commit a141bbb

Browse files
rishabh3112rishabh3112
authored
feat: allow all css possibilities for default template (#2544)
1 parent 665d993 commit a141bbb

5 files changed

Lines changed: 317 additions & 47 deletions

File tree

‎packages/generators/init-template/default/webpack.configjs.tpl‎

Lines changed: 11 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -25,39 +25,32 @@ module.exports = {
2525
{
2626
test: /\\.(js|jsx)$/,
2727
loader: 'babel-loader',
28-
},
29-
<% } %><% if (langType == "Typescript") { %>
28+
},<% } %><% if (langType == "Typescript") { %>
3029
{
3130
test: /\\.(ts|tsx)$/,
3231
loader: 'ts-loader',
3332
exclude: ['/node_modules/'],
34-
},
35-
<% } %><% if (cssType == 'CSS') { %>
33+
},<% } %><% if (isCSS && !isPostCSS) { %>
3634
{
3735
test: /\.css$/i,
38-
use: ['style-loader', 'css-loader'],
39-
},
40-
<% } %><% if (cssType == 'SASS') { %>
36+
use: ['style-loader','css-loader'],
37+
},<% } %><% if (cssType == 'SASS') { %>
4138
{
4239
test: /\.s[ac]ss$/i,
43-
use: ['style-loader', 'css-loader', 'sass-loader'],
44-
},
45-
<% } %><% if (cssType == 'LESS') { %>
40+
use: ['style-loader', 'css-loader', <% if (isPostCSS) { %>'postcss-loader', <% } %>'sass-loader'],
41+
},<% } %><% if (cssType == 'LESS') { %>
4642
{
4743
test: /\.less$/i,
48-
loader: 'less-loader',
49-
},
50-
<% } %><% if (cssType == 'Stylus') { %>
44+
use: [<% if (isPostCSS) { %>'style-loader', 'css-loader', 'postcss-loader', <% } %>'less-loader'],
45+
},<% } %><% if (cssType == 'Stylus') { %>
5146
{
5247
test: /\.styl$/,
53-
loader: 'stylus-loader',
54-
},
55-
<% } %><% if (cssType == 'PostCSS') { %>
48+
use: [<% if (isPostCSS) { %>'style-loader', 'css-loader', 'postcss-loader', <% } %>'stylus-loader'],
49+
},<% } %><% if (isPostCSS && isCSS) { %>
5650
{
5751
test: /\.css$/i,
5852
use: ['style-loader', 'css-loader', 'postcss-loader'],
59-
},
60-
<% } %>
53+
},<% } %>
6154
{
6255
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
6356
type: 'asset',

‎packages/generators/src/handlers/default.ts‎

Lines changed: 34 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -51,20 +51,38 @@ export async function questions(self: CustomGenerator, Question: Record<string,
5151
self.dependencies = [...self.dependencies, 'html-webpack-plugin'];
5252
}
5353

54+
// Store all answers for generation
55+
self.answers = { ...self.answers, langType, devServer, htmlWebpackPlugin };
56+
5457
// Handle CSS solutions
5558
const { cssType } = await Question.List(
5659
self,
5760
'cssType',
5861
'Which of the following CSS solutions do you want to use?',
59-
['none', 'CSS', 'SASS', 'LESS', 'Stylus', 'PostCSS'],
62+
['none', 'CSS only', 'SASS', 'LESS', 'Stylus'],
6063
'none',
6164
self.force,
6265
);
6366

67+
if (cssType == 'none') {
68+
self.answers = { ...self.answers, cssType, isCSS: false, isPostCSS: false };
69+
return;
70+
}
71+
72+
const { isCSS } =
73+
cssType != 'CSS only'
74+
? await Question.Confirm(self, 'isCSS', `Will you be using CSS styles along with ${cssType} in your project?`, true, self.force)
75+
: { isCSS: true };
76+
77+
const { isPostCSS } = await Question.Confirm(
78+
self,
79+
'isPostCSS',
80+
'Will you be using PostCSS in your project?',
81+
cssType == 'CSS only',
82+
self.force,
83+
);
84+
6485
switch (cssType) {
65-
case 'CSS':
66-
self.dependencies = [...self.dependencies, 'style-loader', 'css-loader'];
67-
break;
6886
case 'SASS':
6987
self.dependencies = [...self.dependencies, 'sass-loader', 'sass'];
7088
break;
@@ -74,12 +92,17 @@ export async function questions(self: CustomGenerator, Question: Record<string,
7492
case 'Stylus':
7593
self.dependencies = [...self.dependencies, 'stylus-loader', 'stylus'];
7694
break;
77-
case 'PostCSS':
78-
self.dependencies = [...self.dependencies, 'postcss-loader', 'postcss', 'autoprefixer'];
7995
}
8096

81-
// store all answers for generation
82-
self.answers = { ...self.answers, langType, devServer, htmlWebpackPlugin, cssType };
97+
if (isCSS) {
98+
self.dependencies = [...self.dependencies, 'style-loader', 'css-loader'];
99+
}
100+
101+
if (isPostCSS) {
102+
self.dependencies = [...self.dependencies, 'postcss-loader', 'postcss', 'autoprefixer'];
103+
}
104+
105+
self.answers = { ...self.answers, cssType, isCSS, isPostCSS };
83106
}
84107

85108
/**
@@ -121,10 +144,8 @@ export function generate(self: CustomGenerator): void {
121144
break;
122145
}
123146

124-
// Generate CSS language essentials
125-
switch (self.answers.cssType) {
126-
case 'PostCSS':
127-
self.fs.copyTpl(resolveFile('postcss.config.js'), self.destinationPath('postcss.config.js'));
128-
break;
147+
// Generate postcss configuration
148+
if (self.answers.isPostCSS) {
149+
self.fs.copyTpl(resolveFile('postcss.config.js'), self.destinationPath('postcss.config.js'));
129150
}
130151
}

‎test/init/__snapshots__/init.test.js.snap.webpack4‎

Lines changed: 112 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -227,7 +227,6 @@ module.exports = {
227227
test: /\\\\\\\\.(js|jsx)$/,
228228
loader: 'babel-loader',
229229
},
230-
231230
{
232231
test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
233232
type: 'asset',
@@ -345,7 +344,6 @@ module.exports = {
345344
loader: 'ts-loader',
346345
exclude: ['/node_modules/'],
347346
},
348-
349347
{
350348
test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
351349
type: 'asset',
@@ -400,9 +398,8 @@ module.exports = {
400398
rules: [
401399
{
402400
test: /\\\\.less$/i,
403-
loader: 'less-loader',
401+
use: ['less-loader'],
404402
},
405-
406403
{
407404
test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
408405
type: 'asset',
@@ -436,7 +433,65 @@ module.exports = {
436433
test: /\\\\.css$/i,
437434
use: ['style-loader', 'css-loader', 'postcss-loader'],
438435
},
436+
{
437+
test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
438+
type: 'asset',
439+
},
440+
441+
// Add your rules for custom modules here
442+
// Learn more about loaders from https://webpack.js.org/loaders/
443+
],
444+
},
445+
};
446+
"
447+
`;
448+
449+
exports[`init command should use sass and css with postcss in project when selected 1`] = `
450+
Object {
451+
"description": "My webpack project",
452+
"devDependencies": Object {
453+
"autoprefixer": "x.x.x",
454+
"css-loader": "x.x.x",
455+
"postcss": "x.x.x",
456+
"postcss-loader": "x.x.x",
457+
"sass": "x.x.x",
458+
"sass-loader": "x.x.x",
459+
"style-loader": "x.x.x",
460+
"webpack": "x.x.x",
461+
"webpack-cli": "x.x.x",
462+
},
463+
"name": "my-webpack-project",
464+
"scripts": Object {
465+
"build": "webpack --mode=production",
466+
},
467+
"version": "1.0.0",
468+
}
469+
`;
439470

471+
exports[`init command should use sass and css with postcss in project when selected 2`] = `
472+
"// Generated using webpack-cli http://github.com/webpack-cli
473+
const path = require('path');
474+
475+
module.exports = {
476+
mode: 'development',
477+
entry: './src/index.js',
478+
output: {
479+
path: path.resolve(__dirname, 'dist'),
480+
},
481+
plugins: [
482+
// Add your plugins here
483+
// Learn more obout plugins from https://webpack.js.org/configuration/plugins/
484+
],
485+
module: {
486+
rules: [
487+
{
488+
test: /\\\\.s[ac]ss$/i,
489+
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
490+
},
491+
{
492+
test: /\\\\.css$/i,
493+
use: ['style-loader', 'css-loader', 'postcss-loader'],
494+
},
440495
{
441496
test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
442497
type: 'asset',
@@ -490,7 +545,59 @@ module.exports = {
490545
test: /\\\\.s[ac]ss$/i,
491546
use: ['style-loader', 'css-loader', 'sass-loader'],
492547
},
548+
{
549+
test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
550+
type: 'asset',
551+
},
552+
553+
// Add your rules for custom modules here
554+
// Learn more about loaders from https://webpack.js.org/loaders/
555+
],
556+
},
557+
};
558+
"
559+
`;
560+
561+
exports[`init command should use sass with postcss in project when selected 1`] = `
562+
Object {
563+
"description": "My webpack project",
564+
"devDependencies": Object {
565+
"autoprefixer": "x.x.x",
566+
"postcss": "x.x.x",
567+
"postcss-loader": "x.x.x",
568+
"sass": "x.x.x",
569+
"sass-loader": "x.x.x",
570+
"webpack": "x.x.x",
571+
"webpack-cli": "x.x.x",
572+
},
573+
"name": "my-webpack-project",
574+
"scripts": Object {
575+
"build": "webpack --mode=production",
576+
},
577+
"version": "1.0.0",
578+
}
579+
`;
493580

581+
exports[`init command should use sass with postcss in project when selected 2`] = `
582+
"// Generated using webpack-cli http://github.com/webpack-cli
583+
const path = require('path');
584+
585+
module.exports = {
586+
mode: 'development',
587+
entry: './src/index.js',
588+
output: {
589+
path: path.resolve(__dirname, 'dist'),
590+
},
591+
plugins: [
592+
// Add your plugins here
593+
// Learn more obout plugins from https://webpack.js.org/configuration/plugins/
594+
],
595+
module: {
596+
rules: [
597+
{
598+
test: /\\\\.s[ac]ss$/i,
599+
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
600+
},
494601
{
495602
test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
496603
type: 'asset',
@@ -542,9 +649,8 @@ module.exports = {
542649
rules: [
543650
{
544651
test: /\\\\.styl$/,
545-
loader: 'stylus-loader',
652+
use: ['stylus-loader'],
546653
},
547-
548654
{
549655
test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
550656
type: 'asset',

0 commit comments

Comments
 (0)