Graham/angular-cli
1
0
Fork 0
mirror of https://github.com/angular/angular-cli.git synced 2025-05-15 18:13:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(@angular-devkit/build-angular): use nested Webpack rules to define style processing

Browse Source 
By using Webpack's nested rule and `oneOf` rule support, a large amount of conditional logic and array processing can be removed from the Webpack style configuration generator function.
This commit is contained in:
Charles Lyding 2021-03-03 14:18:32 -05:00 committed by Filipe Silva
parent 1a8b11fab6
commit 1b5798dba3
1 changed files with 123 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

195
packages/angular_devkit/build_angular/src/webpack/configs/styles.ts
View File

@ -21,7 +21,7 @@ import {
import { assetNameTemplateFactory, getOutputHashFormat, normalizeExtraEntryPoints } from '../utils/helpers';
// tslint:disable-next-line:no-big-function
export function getStylesConfig(wco: WebpackConfigOptions) {
export function getStylesConfig(wco: WebpackConfigOptions): webpack.Configuration {
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const postcssImports = require('postcss-import');
const postcssPresetEnv: typeof import('postcss-preset-env') = require('postcss-preset-env');
@ -90,71 +90,6 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
sassImplementation = require('sass');
}
// set base rules to derive final rules from
const baseRules: { test: RegExp, use: webpack.RuleSetUseItem[] }[] = [
{ test: /\.css$/, use: [] },
{
test: /\.scss$|\.sass$/,
use: [
{
loader: require.resolve('resolve-url-loader'),
options: {
sourceMap: cssSourceMap,
},
},
{
loader: require.resolve('sass-loader'),
options: {
implementation: sassImplementation,
sourceMap: true,
sassOptions: {
// bootstrap-sass requires a minimum precision of 8
precision: 8,
includePaths,
// Use expanded as otherwise sass will remove comments that are needed for autoprefixer
// Ex: /* autoprefixer grid: autoplace */
// tslint:disable-next-line: max-line-length
// See: https://github.com/webpack-contrib/sass-loader/blob/45ad0be17264ceada5f0b4fb87e9357abe85c4ff/src/getSassOptions.js#L68-L70
outputStyle: 'expanded',
},
},
},
],
},
{
test: /\.less$/,
use: [
{
loader: require.resolve('less-loader'),
options: {
implementation: require('less'),
sourceMap: cssSourceMap,
lessOptions: {
javascriptEnabled: true,
paths: includePaths,
},
},
},
],
},
{
test: /\.styl$/,
use: [
{
loader: require.resolve('stylus-loader'),
options: {
sourceMap: cssSourceMap,
stylusOptions: {
compress: false,
sourceMap: { comment: false },
paths: includePaths,
},
},
},
],
},
];
const assetNameTemplate = assetNameTemplateFactory(hashFormat);
const extraPostcssPlugins: import('postcss').Plugin[] = [];
@ -248,9 +183,29 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
&& !buildOptions.sourceMap.hidden
);
const rules: webpack.RuleSetRule[] = baseRules.map(({ test, use }) => ({
if (buildOptions.extractCss) {
// extract global css from js files into own css file.
extraPlugins.push(
new MiniCssExtractPlugin({ filename: `[name]${hashFormat.extract}.css` }),
);
if (!buildOptions.hmr) {
// don't remove `.js` files for `.css` when we are using HMR these contain HMR accept codes.
// suppress empty .js files in css only entry points.
extraPlugins.push(new SuppressExtractedTextChunksWebpackPlugin());
}
}
// Rule for all supported style types
const styleRule: webpack.RuleSetRule = {
test: /\.(?:css|scss|sass|less|styl)$/,
rules: [
// Setup processing rules for global and component styles
{
oneOf: [
// Component styles are all styles except defined global styles
{
exclude: globalStylePaths,
test,
use: [
{ loader: require.resolve('raw-loader') },
{
@ -260,17 +215,11 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
postcssOptions: postcssOptionsCreator(componentsSourceMap, false),
},
},
...use,
],
}));
// load global css as css files
if (globalStylePaths.length > 0) {
rules.push(
...baseRules.map(({ test, use }) => {
return {
},
// Global styles are only defined global styles
{
include: globalStylePaths,
test,
use: [
buildOptions.extractCss
? {
@ -292,29 +241,85 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
sourceMap: !!cssSourceMap,
},
},
...use,
],
},
],
},
// Setup preprocessor rules for all styles
{
oneOf: [
// No preprocessing required for CSS
{ test: /\.css$/, use: [] },
{
test: /\.scss$|\.sass$/,
use: [
{
loader: require.resolve('resolve-url-loader'),
options: {
sourceMap: cssSourceMap,
},
},
{
loader: require.resolve('sass-loader'),
options: {
implementation: sassImplementation,
sourceMap: true,
sassOptions: {
// bootstrap-sass requires a minimum precision of 8
precision: 8,
includePaths,
// Use expanded as otherwise sass will remove comments that are needed for autoprefixer
// Ex: /* autoprefixer grid: autoplace */
// tslint:disable-next-line: max-line-length
// See: https://github.com/webpack-contrib/sass-loader/blob/45ad0be17264ceada5f0b4fb87e9357abe85c4ff/src/getSassOptions.js#L68-L70
outputStyle: 'expanded',
},
},
},
],
},
{
test: /\.less$/,
use: [
{
loader: require.resolve('less-loader'),
options: {
implementation: require('less'),
sourceMap: cssSourceMap,
lessOptions: {
javascriptEnabled: true,
paths: includePaths,
},
},
},
],
},
{
test: /\.styl$/,
use: [
{
loader: require.resolve('stylus-loader'),
options: {
sourceMap: cssSourceMap,
stylusOptions: {
compress: false,
sourceMap: { comment: false },
paths: includePaths,
},
},
},
],
},
],
},
],
};
}),
);
}
if (buildOptions.extractCss) {
// extract global css from js files into own css file.
extraPlugins.push(
new MiniCssExtractPlugin({ filename: `[name]${hashFormat.extract}.css` }),
);
if (!buildOptions.hmr) {
// don't remove `.js` files for `.css` when we are using HMR these contain HMR accept codes.
// suppress empty .js files in css only entry points.
extraPlugins.push(new SuppressExtractedTextChunksWebpackPlugin());
}
}
return {
entry: entryPoints,
module: { rules },
module: {
rules: [styleRule],
},
plugins: extraPlugins,
};
}