Skip to content

Commit

Permalink
misc(generators/utils/style): refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@misterdev
misterdev committed May 28, 2019
1 parent fb23aa4 commit 392fcfe
Show file tree
Hide file tree
Showing 2 changed files with 148 additions and 131 deletions.
21 changes: 9 additions & 12 deletions packages/generators/init-generator.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { Confirm, Input, List } from "@webpack-cli/webpack-scaffold";
import { WebpackOptions } from "./types";
import entryQuestions from "./utils/entry";
import getBabelPlugin from "./utils/module";
import styleQuestionHandler from "./utils/style";
import styleQuestionHandler, { ILoader, StylingType } from "./utils/style";
import tooltip from "./utils/tooltip";

/**
Expand Down Expand Up @@ -90,12 +90,6 @@ export default class InitGenerator extends Generator {
"new webpack.ProgressPlugin()",
);

if (this.isProd) {
this.configuration.config.webpackOptions.plugins.push(
"new TerserPlugin()",
);
}

let optimizationObj;

if (!this.isProd) {
Expand All @@ -106,6 +100,9 @@ export default class InitGenerator extends Generator {
};
} else {
optimizationObj = {
minimizer: [
"new TerserPlugin()",
],
splitChunks: {
cacheGroups: {
vendors: {
Expand Down Expand Up @@ -136,7 +133,7 @@ export default class InitGenerator extends Generator {
const done: () => {} = this.async();
const self: this = this;
let regExpForStyles: string;
let ExtractUseProps: object[];
let ExtractUseProps: ILoader[];

process.stdout.write(
`\n${logSymbols.info}${chalk.blue(" INFO ")} ` +
Expand Down Expand Up @@ -218,10 +215,10 @@ export default class InitGenerator extends Generator {
this.prompt([
List("stylingType", "Will you use one of the below CSS solutions?", [
"No",
"CSS",
"SASS",
"LESS",
"PostCSS",
StylingType.CSS,
StylingType.SASS,
StylingType.LESS,
StylingType.PostCSS,
]),
]))
.then((stylingTypeAnswer: {
Expand Down
258 changes: 139 additions & 119 deletions packages/generators/utils/style.ts
View file
Original file line number Diff line number Diff line change
@@ -1,168 +1,188 @@
import tooltip from "./tooltip";

export enum StylingType {
CSS = "CSS",
SASS = "SASS",
LESS = "LESS",
PostCSS = "PostCSS",
}

export enum Loader {
CSS = "css-loader",
SASS = "sass-loader",
STYLE = "style-loader",
LESS = "less-loader",
POSTCSS = "postcss-loader",
}

export enum StyleRegex {
CSS = "/\.css$/",
SASS = "/\.(scss|css)$/",
LESS = "/\.(less|css)$/",
PostCSS = "/\.css$/",
}

export interface ILoader {
loader: string;
options?: {
importLoaders?: number;
sourceMap?: boolean;
plugins?: string;
};
}

export default function style(self, stylingType) {
const ExtractUseProps = [];
const ExtractUseProps: ILoader[] = [];
let regExpForStyles = null;

switch (stylingType) {
case "SASS":
case StylingType.CSS:
regExpForStyles = StyleRegex.CSS;

self.dependencies.push(
"sass-loader",
"node-sass",
"style-loader",
"css-loader",
Loader.CSS,
);
regExpForStyles = `${new RegExp(/\.(scss|css)$/)}`;
if (self.isProd) {
if (self.isProf) {
self.dependencies.push(
Loader.STYLE,
);
}

ExtractUseProps.push({
loader: `"${Loader.CSS}"`,
options: {
sourceMap: true,
},
});
if (!self.isProd) {
ExtractUseProps.push(
{
loader: "'css-loader'",
options: {
sourceMap: true,
},
},
{
loader: "'sass-loader'",
options: {
sourceMap: true,
},
loader: `"${Loader.STYLE}"`,
},
);
} else {
ExtractUseProps.push(
{
loader: "'style-loader'",
}
break;

case StylingType.SASS:
regExpForStyles = StyleRegex.SASS;

self.dependencies.push(
"node-sass",
Loader.SASS,
Loader.CSS,
);
if (self.isProf) {
self.dependencies.push(
Loader.STYLE,
);
}

ExtractUseProps.push(
{
loader: `"${Loader.CSS}"`,
options: {
sourceMap: true,
},
{
loader: "'css-loader'",
},
{
loader: `"${Loader.SASS}"`,
options: {
sourceMap: true,
},
},
);
if (!self.isProd) {
ExtractUseProps.push(
{
loader: "'sass-loader'",
loader: `"${Loader.STYLE}"`,
},
);
}
break;
case "LESS":
regExpForStyles = `${new RegExp(/\.(less|css)$/)}`;

case StylingType.LESS:
regExpForStyles = StyleRegex.LESS;

self.dependencies.push(
"less-loader",
"less",
"style-loader",
"css-loader",
Loader.LESS,
Loader.CSS,
);
if (self.isProd) {
ExtractUseProps.push(
{
loader: "'css-loader'",
options: {
sourceMap: true,
},
if (self.isProf) {
self.dependencies.push(
Loader.STYLE,
);
}

ExtractUseProps.push(
{
loader: `"${Loader.CSS}"`,
options: {
sourceMap: true,
},
{
loader: "'less-loader'",
options: {
sourceMap: true,
},
},
{
loader: `"${Loader.LESS}"`,
options: {
sourceMap: true,
},
);
} else {
},
);
if (!self.isProd) {
ExtractUseProps.push(
{
loader: "'css-loader'",
options: {
sourceMap: true,
},
},
{
loader: "'less-loader'",
options: {
sourceMap: true,
},
loader: `"${Loader.STYLE}"`,
},
);
}
break;
case "PostCSS":

case StylingType.PostCSS:
regExpForStyles = StyleRegex.PostCSS;

self.configuration.config.topScope.push(
tooltip.postcss(),
"const autoprefixer = require('autoprefixer');",
"const precss = require('precss');",
"\n",
);

self.dependencies.push(
"style-loader",
"css-loader",
"postcss-loader",
"precss",
"autoprefixer",
Loader.CSS,
Loader.POSTCSS,
);
regExpForStyles = `${new RegExp(/\.css$/)}`;
if (self.isProd) {
ExtractUseProps.push(
{
loader: "'css-loader'",
options: {
importLoaders: 1,
sourceMap: true,
},
},
{
loader: "'postcss-loader'",
options: {
plugins: `function () {
return [
precss,
autoprefixer
];
}`,
},
},
);
} else {
ExtractUseProps.push(
{
loader: "'style-loader'",
},
{
loader: "'css-loader'",
options: {
importLoaders: 1,
sourceMap: true,
},
},
{
loader: "'postcss-loader'",
options: {
plugins: `function () {
return [
precss,
autoprefixer
];
}`,
},
},
if (self.isProf) {
self.dependencies.push(
Loader.STYLE,
);
}
break;
case "CSS":
self.dependencies.push("style-loader", "css-loader");
regExpForStyles = `${new RegExp(/\.css$/)}`;
if (self.isProd) {
ExtractUseProps.push({
loader: "'css-loader'",

ExtractUseProps.push(
{
loader: `"${Loader.CSS}"`,
options: {
importLoaders: 1,
sourceMap: true,
},
});
} else {
},
{
loader: `"${Loader.POSTCSS}"`,
options: {
plugins: `function () {
return [
precss,
autoprefixer
];
}`,
},
},
);
if (!self.isProd) {
ExtractUseProps.push(
{
loader: "'style-loader'",
options: {
sourceMap: true,
},
},
{
loader: "'css-loader'",
loader: `"${Loader.STYLE}"`,
},
);
}
Expand Down

0 comments on commit 392fcfe

Please sign in to comment.