Skip to content

Commit 28c1a23

Browse files
filipesilvafilipesilva
committed
feat(build): add style paths
Add `paths/includePaths` functionality for `sass` and `stylus`. Similar functionality for less is blocked by webpack-contrib/less-loader#75. To add paths, use the new entry in `angular-cli.json` app object: ``` "stylePreprocessorOptions": { "includePaths": [ "style-paths" ] }, ``` Fix #1791
1 parent 6d63bb4 commit 28c1a23

10 files changed

+261
-144
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@
116116
"walk-sync": "^0.2.6",
117117
"webpack": "2.2.0-rc.3",
118118
"webpack-dev-server": "2.2.0-rc.0",
119-
"webpack-merge": "^0.14.0",
119+
"webpack-merge": "^2.4.0",
120120
"webpack-sources": "^0.1.3",
121121
"yam": "0.0.18",
122122
"zone.js": "^0.7.2"

‎packages/angular-cli/lib/config/schema.json

+15
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,21 @@
8989
},
9090
"additionalProperties": false
9191
},
92+
"stylePreprocessorOptions": {
93+
"description": "Options to pass to style preprocessors",
94+
"type": "object",
95+
"properties": {
96+
"includePaths": {
97+
"description": "Paths to include. Paths will be resolved to project root.",
98+
"type": "array",
99+
"items": {
100+
"type": "string"
101+
},
102+
"default": []
103+
}
104+
},
105+
"additionalProperties": false
106+
},
92107
"scripts": {
93108
"description": "Global scripts to be included in the build.",
94109
"type": "array",

‎packages/angular-cli/models/webpack-build-common.ts

+18-67
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import * as webpack from 'webpack';
22
import * as path from 'path';
33
import { GlobCopyWebpackPlugin } from '../plugins/glob-copy-webpack-plugin';
4-
import { SuppressEntryChunksWebpackPlugin } from '../plugins/suppress-entry-chunks-webpack-plugin';
54
import { packageChunkSort } from '../utilities/package-chunk-sort';
65
import { BaseHrefWebpackPlugin } from '@angular-cli/base-href-webpack';
7-
import { extraEntryParser, makeCssLoaders, getOutputHashFormat } from './webpack-build-utils';
6+
import { extraEntryParser, lazyChunksFilter, getOutputHashFormat } from './webpack-build-utils';
87

98
const autoprefixer = require('autoprefixer');
109
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
@@ -33,19 +32,22 @@ export function getWebpackCommonConfig(
3332
vendorChunk: boolean,
3433
verbose: boolean,
3534
progress: boolean,
36-
outputHashing: string,
37-
extractCss: boolean,
35+
outputHashing: string
3836
) {
3937

4038
const appRoot = path.resolve(projectRoot, appConfig.root);
4139
const nodeModules = path.resolve(projectRoot, 'node_modules');
4240

4341
let extraPlugins: any[] = [];
4442
let extraRules: any[] = [];
45-
let lazyChunks: string[] = [];
46-
4743
let entryPoints: { [key: string]: string[] } = {};
4844

45+
// figure out which are the lazy loaded entry points
46+
const lazyChunks = lazyChunksFilter([
47+
...extraEntryParser(appConfig.scripts, appRoot, 'scripts'),
48+
...extraEntryParser(appConfig.styles, appRoot, 'styles')
49+
]);
50+
4951
if (appConfig.main) {
5052
entryPoints['main'] = [path.resolve(appRoot, appConfig.main)];
5153
}
@@ -54,51 +56,22 @@ export function getWebpackCommonConfig(
5456
const hashFormat = getOutputHashFormat(outputHashing);
5557

5658
// process global scripts
57-
if (appConfig.scripts && appConfig.scripts.length > 0) {
59+
if (appConfig.scripts.length > 0) {
5860
const globalScripts = extraEntryParser(appConfig.scripts, appRoot, 'scripts');
5961

60-
// add entry points and lazy chunks
61-
globalScripts.forEach(script => {
62-
if (script.lazy) { lazyChunks.push(script.entry); }
63-
entryPoints[script.entry] = (entryPoints[script.entry] || []).concat(script.path);
64-
});
62+
// add script entry points
63+
globalScripts.forEach(script =>
64+
entryPoints[script.entry]
65+
? entryPoints[script.entry].push(script.path)
66+
: entryPoints[script.entry] = [script.path]
67+
);
6568

6669
// load global scripts using script-loader
6770
extraRules.push({
6871
include: globalScripts.map((script) => script.path), test: /\.js$/, loader: 'script-loader'
6972
});
7073
}
7174

72-
// process global styles
73-
if (!appConfig.styles || appConfig.styles.length === 0) {
74-
// create css loaders for component css
75-
extraRules.push(...makeCssLoaders());
76-
} else {
77-
const globalStyles = extraEntryParser(appConfig.styles, appRoot, 'styles');
78-
let extractedCssEntryPoints: string[] = [];
79-
// add entry points and lazy chunks
80-
globalStyles.forEach(style => {
81-
if (style.lazy) { lazyChunks.push(style.entry); }
82-
if (!entryPoints[style.entry]) {
83-
// since this entry point doesn't exist yet, it's going to only have
84-
// extracted css and we can supress the entry point
85-
extractedCssEntryPoints.push(style.entry);
86-
entryPoints[style.entry] = (entryPoints[style.entry] || []).concat(style.path);
87-
} else {
88-
// existing entry point, just push the css in
89-
entryPoints[style.entry].push(style.path);
90-
}
91-
});
92-
93-
// create css loaders for component css and for global css
94-
extraRules.push(...makeCssLoaders(globalStyles.map((style) => style.path)));
95-
96-
if (extractCss && extractedCssEntryPoints.length > 0) {
97-
// don't emit the .js entry point for extracted styles
98-
extraPlugins.push(new SuppressEntryChunksWebpackPlugin({ chunks: extractedCssEntryPoints }));
99-
}
100-
}
101-
10275
if (vendorChunk) {
10376
extraPlugins.push(new webpack.optimize.CommonsChunkPlugin({
10477
name: 'vendor',
@@ -158,26 +131,16 @@ export function getWebpackCommonConfig(
158131
module: {
159132
rules: [
160133
{ enforce: 'pre', test: /\.js$/, loader: 'source-map-loader', exclude: [nodeModules] },
161-
162134
{ test: /\.json$/, loader: 'json-loader' },
163-
{
164-
test: /\.(jpg|png|gif)$/,
165-
loader: `url-loader?name=[name]${hashFormat.file}.[ext]&limit=10000`
166-
},
167135
{ test: /\.html$/, loader: 'raw-loader' },
168-
136+
{ test: /\.(eot|svg)$/, loader: `file-loader?name=[name]${hashFormat.file}.[ext]` },
169137
{
170-
test: /\.(otf|ttf|woff|woff2)$/,
138+
test: /\.(jpg|png|gif|otf|ttf|woff|woff2)$/,
171139
loader: `url-loader?name=[name]${hashFormat.file}.[ext]&limit=10000`
172-
},
173-
{ test: /\.(eot|svg)$/, loader: `file-loader?name=[name]${hashFormat.file}.[ext]` }
140+
}
174141
].concat(extraRules)
175142
},
176143
plugins: [
177-
new ExtractTextPlugin({
178-
filename: `[name]${hashFormat.extract}.bundle.css`,
179-
disable: !extractCss
180-
}),
181144
new HtmlWebpackPlugin({
182145
template: path.resolve(appRoot, appConfig.index),
183146
filename: path.resolve(appConfig.outDir, appConfig.index),
@@ -191,18 +154,6 @@ export function getWebpackCommonConfig(
191154
new webpack.optimize.CommonsChunkPlugin({
192155
minChunks: Infinity,
193156
name: 'inline'
194-
}),
195-
new webpack.LoaderOptionsPlugin({
196-
test: /\.(css|scss|sass|less|styl)$/,
197-
options: {
198-
postcss: [autoprefixer()],
199-
cssLoader: { sourceMap: sourcemap },
200-
sassLoader: { sourceMap: sourcemap },
201-
lessLoader: { sourceMap: sourcemap },
202-
stylusLoader: { sourceMap: sourcemap },
203-
// context needed as a workaround https://github.com/jtangelder/sass-loader/issues/285
204-
context: projectRoot,
205-
},
206157
})
207158
].concat(extraPlugins),
208159
node: {

‎packages/angular-cli/models/webpack-build-production.ts

+1-18
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import * as path from 'path';
22
import * as webpack from 'webpack';
33
import {CompressionPlugin} from '../lib/webpack/compression-plugin';
4-
const autoprefixer = require('autoprefixer');
5-
const postcssDiscardComments = require('postcss-discard-comments');
4+
65

76
declare module 'webpack' {
87
export interface LoaderOptionsPlugin {}
@@ -36,22 +35,6 @@ export const getWebpackProdConfigPartial = function(projectRoot: string,
3635
algorithm: 'gzip',
3736
test: /\.js$|\.html$|\.css$/,
3837
threshold: 10240
39-
}),
40-
// LoaderOptionsPlugin needs to be fully duplicated because webpackMerge will replace it.
41-
new webpack.LoaderOptionsPlugin({
42-
test: /\.(css|scss|sass|less|styl)$/,
43-
options: {
44-
postcss: [
45-
autoprefixer(),
46-
postcssDiscardComments
47-
],
48-
cssLoader: { sourceMap: sourcemap },
49-
sassLoader: { sourceMap: sourcemap },
50-
lessLoader: { sourceMap: sourcemap },
51-
stylusLoader: { sourceMap: sourcemap },
52-
// context needed as a workaround https://github.com/jtangelder/sass-loader/issues/285
53-
context: projectRoot,
54-
}
5538
})
5639
]
5740
};

‎packages/angular-cli/models/webpack-build-styles.ts

+131
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import * as webpack from 'webpack';
2+
import * as path from 'path';
3+
import {
4+
SuppressExtractedTextChunksWebpackPlugin
5+
} from '../plugins/suppress-entry-chunks-webpack-plugin';
6+
import { extraEntryParser, getOutputHashFormat } from './webpack-build-utils';
7+
8+
const postcssDiscardComments = require('postcss-discard-comments');
9+
const autoprefixer = require('autoprefixer');
10+
const ExtractTextPlugin = require('extract-text-webpack-plugin');
11+
12+
/**
13+
* Enumerate loaders and their dependencies from this file to let the dependency validator
14+
* know they are used.
15+
*
16+
* require('raw-loader')
17+
* require('style-loader')
18+
* require('postcss-loader')
19+
* require('css-loader')
20+
* require('stylus')
21+
* require('stylus-loader')
22+
* require('less')
23+
* require('less-loader')
24+
* require('node-sass')
25+
* require('sass-loader')
26+
*/
27+
28+
export function getWebpackStylesConfig(
29+
projectRoot: string,
30+
appConfig: any,
31+
target: string,
32+
sourcemap: boolean,
33+
outputHashing: string,
34+
extractCss: boolean,
35+
) {
36+
37+
const appRoot = path.resolve(projectRoot, appConfig.root);
38+
const entryPoints: { [key: string]: string[] } = {};
39+
const globalStylePaths: string[] = [];
40+
const extraPlugins: any[] = [];
41+
42+
// discard comments in production
43+
const extraPostCssPlugins = target === 'production' ? [postcssDiscardComments] : [];
44+
45+
// determine hashing format
46+
const hashFormat = getOutputHashFormat(outputHashing);
47+
48+
// use includePaths from appConfig
49+
const includePaths: string [] = [];
50+
51+
if (appConfig.stylePreprocessorOptions
52+
&& appConfig.stylePreprocessorOptions.includePaths
53+
&& appConfig.stylePreprocessorOptions.includePaths.length > 0
54+
) {
55+
appConfig.stylePreprocessorOptions.includePaths.forEach((includePath: string) =>
56+
includePaths.push(path.resolve(appRoot, includePath)));
57+
}
58+
59+
// process global styles
60+
if (appConfig.styles.length > 0) {
61+
const globalStyles = extraEntryParser(appConfig.styles, appRoot, 'styles');
62+
// add style entry points
63+
globalStyles.forEach(style =>
64+
entryPoints[style.entry]
65+
? entryPoints[style.entry].push(style.path)
66+
: entryPoints[style.entry] = [style.path]
67+
);
68+
// add global css paths
69+
globalStylePaths.push(...globalStyles.map((style) => style.path));
70+
}
71+
72+
// set base rules to derive final rules from
73+
const baseRules = [
74+
{ test: /\.css$/, loaders: [] },
75+
{ test: /\.scss$|\.sass$/, loaders: ['sass-loader'] },
76+
{ test: /\.less$/, loaders: ['less-loader'] },
77+
// stylus-loader doesn't support webpack.LoaderOptionsPlugin properly,
78+
// so we need to add options in it's query
79+
{ test: /\.styl$/, loaders: [`stylus-loader?${JSON.stringify({
80+
sourceMap: sourcemap,
81+
paths: includePaths
82+
})}`] }
83+
];
84+
85+
const commonLoaders = ['postcss-loader'];
86+
87+
// load component css as raw strings
88+
let rules: any = baseRules.map(({test, loaders}) => ({
89+
exclude: globalStylePaths, test, loaders: ['raw-loader', ...commonLoaders, ...loaders]
90+
}));
91+
92+
// load global css as css files
93+
if (globalStylePaths.length > 0) {
94+
rules.push(...baseRules.map(({test, loaders}) => ({
95+
include: globalStylePaths, test, loaders: ExtractTextPlugin.extract({
96+
remove: false,
97+
loader: ['css-loader', ...commonLoaders, ...loaders],
98+
fallbackLoader: 'style-loader'
99+
})
100+
})));
101+
}
102+
103+
// supress empty .js files in css only entry points
104+
if (extractCss) {
105+
extraPlugins.push(new SuppressExtractedTextChunksWebpackPlugin());
106+
}
107+
108+
return {
109+
entry: entryPoints,
110+
module: { rules },
111+
plugins: [
112+
// extract global css from js files into own css file
113+
new ExtractTextPlugin({
114+
filename: `[name]${hashFormat.extract}.bundle.css`,
115+
disable: !extractCss
116+
}),
117+
new webpack.LoaderOptionsPlugin({
118+
options: {
119+
postcss: [autoprefixer()].concat(extraPostCssPlugins),
120+
cssLoader: { sourceMap: sourcemap },
121+
sassLoader: { sourceMap: sourcemap, includePaths },
122+
// less-loader doesn't support paths
123+
lessLoader: { sourceMap: sourcemap },
124+
// stylus-loader doesn't support LoaderOptionsPlugin properly, options in query instead
125+
// context needed as a workaround https://github.com/jtangelder/sass-loader/issues/285
126+
context: projectRoot,
127+
},
128+
})
129+
].concat(extraPlugins)
130+
};
131+
}

0 commit comments

Comments
 (0)