Skip to content

Commit

Permalink
feat: allow all css possibilities for default template (#2544)
Browse files Browse the repository at this point in the history
  • Loading branch information
@rishabh3112
rishabh3112 committed Mar 25, 2021
1 parent 665d993 commit a141bbb
Show file tree
Hide file tree
Showing 5 changed files with 317 additions and 47 deletions.
29 changes: 11 additions & 18 deletions packages/generators/init-template/default/webpack.configjs.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,39 +25,32 @@ module.exports = {
{
test: /\\.(js|jsx)$/,
loader: 'babel-loader',
},
<% } %><% if (langType == "Typescript") { %>
},<% } %><% if (langType == "Typescript") { %>
{
test: /\\.(ts|tsx)$/,
loader: 'ts-loader',
exclude: ['/node_modules/'],
},
<% } %><% if (cssType == 'CSS') { %>
},<% } %><% if (isCSS && !isPostCSS) { %>
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
<% } %><% if (cssType == 'SASS') { %>
use: ['style-loader','css-loader'],
},<% } %><% if (cssType == 'SASS') { %>
{
test: /\.s[ac]ss$/i,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
<% } %><% if (cssType == 'LESS') { %>
use: ['style-loader', 'css-loader', <% if (isPostCSS) { %>'postcss-loader', <% } %>'sass-loader'],
},<% } %><% if (cssType == 'LESS') { %>
{
test: /\.less$/i,
loader: 'less-loader',
},
<% } %><% if (cssType == 'Stylus') { %>
use: [<% if (isPostCSS) { %>'style-loader', 'css-loader', 'postcss-loader', <% } %>'less-loader'],
},<% } %><% if (cssType == 'Stylus') { %>
{
test: /\.styl$/,
loader: 'stylus-loader',
},
<% } %><% if (cssType == 'PostCSS') { %>
use: [<% if (isPostCSS) { %>'style-loader', 'css-loader', 'postcss-loader', <% } %>'stylus-loader'],
},<% } %><% if (isPostCSS && isCSS) { %>
{
test: /\.css$/i,
use: ['style-loader', 'css-loader', 'postcss-loader'],
},
<% } %>
},<% } %>
{
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
type: 'asset',
Expand Down
47 changes: 34 additions & 13 deletions packages/generators/src/handlers/default.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,20 +51,38 @@ export async function questions(self: CustomGenerator, Question: Record<string,
self.dependencies = [...self.dependencies, 'html-webpack-plugin'];
}

// Store all answers for generation
self.answers = { ...self.answers, langType, devServer, htmlWebpackPlugin };

// Handle CSS solutions
const { cssType } = await Question.List(
self,
'cssType',
'Which of the following CSS solutions do you want to use?',
['none', 'CSS', 'SASS', 'LESS', 'Stylus', 'PostCSS'],
['none', 'CSS only', 'SASS', 'LESS', 'Stylus'],
'none',
self.force,
);

if (cssType == 'none') {
self.answers = { ...self.answers, cssType, isCSS: false, isPostCSS: false };
return;
}

const { isCSS } =
cssType != 'CSS only'
? await Question.Confirm(self, 'isCSS', `Will you be using CSS styles along with ${cssType} in your project?`, true, self.force)
: { isCSS: true };

const { isPostCSS } = await Question.Confirm(
self,
'isPostCSS',
'Will you be using PostCSS in your project?',
cssType == 'CSS only',
self.force,
);

switch (cssType) {
case 'CSS':
self.dependencies = [...self.dependencies, 'style-loader', 'css-loader'];
break;
case 'SASS':
self.dependencies = [...self.dependencies, 'sass-loader', 'sass'];
break;
Expand All @@ -74,12 +92,17 @@ export async function questions(self: CustomGenerator, Question: Record<string,
case 'Stylus':
self.dependencies = [...self.dependencies, 'stylus-loader', 'stylus'];
break;
case 'PostCSS':
self.dependencies = [...self.dependencies, 'postcss-loader', 'postcss', 'autoprefixer'];
}

// store all answers for generation
self.answers = { ...self.answers, langType, devServer, htmlWebpackPlugin, cssType };
if (isCSS) {
self.dependencies = [...self.dependencies, 'style-loader', 'css-loader'];
}

if (isPostCSS) {
self.dependencies = [...self.dependencies, 'postcss-loader', 'postcss', 'autoprefixer'];
}

self.answers = { ...self.answers, cssType, isCSS, isPostCSS };
}

/**
Expand Down Expand Up @@ -121,10 +144,8 @@ export function generate(self: CustomGenerator): void {
break;
}

// Generate CSS language essentials
switch (self.answers.cssType) {
case 'PostCSS':
self.fs.copyTpl(resolveFile('postcss.config.js'), self.destinationPath('postcss.config.js'));
break;
// Generate postcss configuration
if (self.answers.isPostCSS) {
self.fs.copyTpl(resolveFile('postcss.config.js'), self.destinationPath('postcss.config.js'));
}
}
118 changes: 112 additions & 6 deletions test/init/__snapshots__/init.test.js.snap.webpack4
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,6 @@ module.exports = {
test: /\\\\\\\\.(js|jsx)$/,
loader: 'babel-loader',
},

{
test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
type: 'asset',
Expand Down Expand Up @@ -345,7 +344,6 @@ module.exports = {
loader: 'ts-loader',
exclude: ['/node_modules/'],
},

{
test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
type: 'asset',
Expand Down Expand Up @@ -400,9 +398,8 @@ module.exports = {
rules: [
{
test: /\\\\.less$/i,
loader: 'less-loader',
use: ['less-loader'],
},

{
test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
type: 'asset',
Expand Down Expand Up @@ -436,7 +433,65 @@ module.exports = {
test: /\\\\.css$/i,
use: ['style-loader', 'css-loader', 'postcss-loader'],
},
{
test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
type: 'asset',
},

// Add your rules for custom modules here
// Learn more about loaders from https://webpack.js.org/loaders/
],
},
};
"
`;

exports[`init command should use sass and css with postcss in project when selected 1`] = `
Object {
"description": "My webpack project",
"devDependencies": Object {
"autoprefixer": "x.x.x",
"css-loader": "x.x.x",
"postcss": "x.x.x",
"postcss-loader": "x.x.x",
"sass": "x.x.x",
"sass-loader": "x.x.x",
"style-loader": "x.x.x",
"webpack": "x.x.x",
"webpack-cli": "x.x.x",
},
"name": "my-webpack-project",
"scripts": Object {
"build": "webpack --mode=production",
},
"version": "1.0.0",
}
`;

exports[`init command should use sass and css with postcss in project when selected 2`] = `
"// Generated using webpack-cli http://github.com/webpack-cli
const path = require('path');

module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
},
plugins: [
// Add your plugins here
// Learn more obout plugins from https://webpack.js.org/configuration/plugins/
],
module: {
rules: [
{
test: /\\\\.s[ac]ss$/i,
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
},
{
test: /\\\\.css$/i,
use: ['style-loader', 'css-loader', 'postcss-loader'],
},
{
test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
type: 'asset',
Expand Down Expand Up @@ -490,7 +545,59 @@ module.exports = {
test: /\\\\.s[ac]ss$/i,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
type: 'asset',
},

// Add your rules for custom modules here
// Learn more about loaders from https://webpack.js.org/loaders/
],
},
};
"
`;

exports[`init command should use sass with postcss in project when selected 1`] = `
Object {
"description": "My webpack project",
"devDependencies": Object {
"autoprefixer": "x.x.x",
"postcss": "x.x.x",
"postcss-loader": "x.x.x",
"sass": "x.x.x",
"sass-loader": "x.x.x",
"webpack": "x.x.x",
"webpack-cli": "x.x.x",
},
"name": "my-webpack-project",
"scripts": Object {
"build": "webpack --mode=production",
},
"version": "1.0.0",
}
`;

exports[`init command should use sass with postcss in project when selected 2`] = `
"// Generated using webpack-cli http://github.com/webpack-cli
const path = require('path');

module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
},
plugins: [
// Add your plugins here
// Learn more obout plugins from https://webpack.js.org/configuration/plugins/
],
module: {
rules: [
{
test: /\\\\.s[ac]ss$/i,
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
},
{
test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
type: 'asset',
Expand Down Expand Up @@ -542,9 +649,8 @@ module.exports = {
rules: [
{
test: /\\\\.styl$/,
loader: 'stylus-loader',
use: ['stylus-loader'],
},

{
test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
type: 'asset',
Expand Down
Loading

0 comments on commit a141bbb

Please sign in to comment.