Skip to content

Commit 9536ae5

Browse files
jkurijkuri
committed
chore(css): css preprocessors support enhancement
1 parent b8ddeec commit 9536ae5

File tree

10 files changed

+116
-15
lines changed

10 files changed

+116
-15
lines changed

‎addon/ng2/blueprints/ng2/files/__path__/index.html

+7-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
<meta charset="utf-8">
55
<title><%= jsComponentName %></title>
66
<base href="/">
7-
87
<meta name="viewport" content="width=device-width, initial-scale=1">
98
<link rel="icon" type="image/x-icon" href="favicon.ico"><% if (isMobile) { %>
109
<meta name="apple-mobile-web-app-capable" content="yes">
@@ -22,9 +21,15 @@
2221
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon-180x180.png">
2322
<link rel="apple-touch-startup-image" href="/icons/apple-touch-icon-180x180.png">
2423
<% } %>
25-
24+
<% if (!arguments[0].files) {
25+
print (`<## _.forEach(files.css, css => { ##><link rel="stylesheet" type="text/css" href="<##- css ##>"><## }) ##>`);
26+
} %>
2627
</head>
2728
<body>
2829
<<%= prefix %>-root>Loading...</<%= prefix %>-root>
30+
31+
<% if (!arguments[0].files) {
32+
print (`<## _.forEach(files.js, js => { ##><script src="<##- js ##>"><## }) ##>`);
33+
} %>
2934
</body>
3035
</html>

‎addon/ng2/blueprints/ng2/files/__path__/style.__styleext__

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body <% if (styleExt !== 'sass') { %>{<% } %>
2+
background: #F9F9F9;
3+
<% if (styleExt !== 'sass') { %>}<% } %>

‎addon/ng2/blueprints/ng2/files/angular-cli.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@
77
{
88
"main": "<%= sourceDir %>/main.ts",
99
"tsconfig": "<%= sourceDir %>/tsconfig.json",
10-
"mobile": <%= isMobile %>
10+
"mobile": <%= isMobile %>,
11+
"styles": {
12+
"src/style.<%= styleExt %>": { "output": "style.css", "autoImported": true }
13+
}
1114
}
1215
],
1316
"addons": [],

‎addon/ng2/models/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@ export * from './webpack-build-production';
44
export * from './webpack-build-development';
55
export * from './webpack-build-mobile';
66
export * from './webpack-build-utils';
7+
export * from './webpack-build-css';

‎addon/ng2/models/webpack-build-common.ts

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import * as path from 'path';
22
import * as CopyWebpackPlugin from 'copy-webpack-plugin';
3-
import * as HtmlWebpackPlugin from 'html-webpack-plugin';
43
import * as webpack from 'webpack';
54
import { ForkCheckerPlugin } from 'awesome-typescript-loader';
65
import { CliConfig } from './config';
76

87
export function getWebpackCommonConfig(projectRoot: string, sourceDir: string) {
98
return {
9+
name: 'main',
1010
devtool: 'inline-source-map',
1111
resolve: {
1212
extensions: ['', '.ts', '.js'],
@@ -60,10 +60,6 @@ export function getWebpackCommonConfig(projectRoot: string, sourceDir: string) {
6060
},
6161
plugins: [
6262
new ForkCheckerPlugin(),
63-
new HtmlWebpackPlugin({
64-
template: path.resolve(projectRoot, `./${sourceDir}/index.html`),
65-
chunksSortMode: 'dependency'
66-
}),
6763
new webpack.optimize.CommonsChunkPlugin({
6864
name: ['polyfills']
6965
}),
@@ -73,7 +69,10 @@ export function getWebpackCommonConfig(projectRoot: string, sourceDir: string) {
7369
filename: 'inline.js',
7470
sourceMapFilename: 'inline.map'
7571
}),
76-
new CopyWebpackPlugin([{from: path.resolve(projectRoot, './public'), to: path.resolve(projectRoot, './dist')}])
72+
new CopyWebpackPlugin([{
73+
from: path.resolve(projectRoot, './public'),
74+
to: path.resolve(projectRoot, './dist')
75+
}])
7776
],
7877
node: {
7978
global: 'window',

‎addon/ng2/models/webpack-build-css.ts

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import * as path from 'path';
2+
import * as ExtractTextPlugin from 'extract-text-webpack-plugin';
3+
import * as existsSync from 'exists-sync';
4+
import { CliConfig } from './config';
5+
6+
export function getWebpackCSSConfig(projectRoot: string, sourceDir: string) {
7+
const styles = CliConfig.fromProject().apps.map(app => app.styles);
8+
let entries = {};
9+
10+
styles.forEach(style => {
11+
for (let src in style) {
12+
if (existsSync(path.resolve(projectRoot, src))) {
13+
entries[style[src].output] = path.resolve(projectRoot, `./${src}`);
14+
}
15+
}
16+
});
17+
18+
return {
19+
name: 'styles',
20+
resolve: {
21+
root: path.resolve(projectRoot)
22+
},
23+
context: path.resolve(__dirname),
24+
entry: entries,
25+
output: {
26+
path: path.resolve(projectRoot, './dist'),
27+
filename: '[name]'
28+
},
29+
module: {
30+
loaders: [
31+
{ test: /\.css$/i, loader: ExtractTextPlugin.extract(['css-loader']) },
32+
{ test: /\.sass$|\.scss$/i, loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader']) },
33+
{ test: /\.less$/i, loader: ExtractTextPlugin.extract(['css-loader', 'less-loader']) },
34+
{ test: /\.styl$/i, loader: ExtractTextPlugin.extract(['css-loader', 'stylus-loader']) }
35+
]
36+
},
37+
plugins: [
38+
new ExtractTextPlugin('[name]')
39+
]
40+
}
41+
};

‎addon/ng2/models/webpack-config.ts

+22-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import * as path from 'path';
22
import * as fs from 'fs';
33
import * as webpackMerge from 'webpack-merge';
4+
import * as AssetsPlugin from 'assets-webpack-plugin';
5+
import { HtmlCliPlugin } from '../utilities/html-cli-plugin';
46
import { CliConfig } from './config';
57
import { NgCliEnvironmentPlugin } from '../utilities/environment-plugin';
68
import {
@@ -9,6 +11,7 @@ import {
911
getWebpackProdConfigPartial,
1012
getWebpackMobileConfigPartial,
1113
getWebpackMobileProdConfigPartial
14+
getWebpackCSSConfig
1215
} from './';
1316

1417
export class NgCliWebpackConfig {
@@ -22,6 +25,7 @@ export class NgCliWebpackConfig {
2225
private webpackMaterialE2EConfig: any;
2326
private webpackMobileConfigPartial: any;
2427
private webpackMobileProdConfigPartial: any;
28+
private webpackCSSConfig: any;
2529

2630
constructor(public ngCliProject: any, public target: string, public environment: string) {
2731
const sourceDir = CliConfig.fromProject().defaults.sourceDir;
@@ -31,6 +35,7 @@ export class NgCliWebpackConfig {
3135
this.webpackBaseConfig = getWebpackCommonConfig(this.ngCliProject.root, sourceDir);
3236
this.webpackDevConfigPartial = getWebpackDevConfigPartial(this.ngCliProject.root, sourceDir);
3337
this.webpackProdConfigPartial = getWebpackProdConfigPartial(this.ngCliProject.root, sourceDir);
38+
this.webpackCSSConfig = getWebpackCSSConfig(this.ngCliProject.root, sourceDir);
3439

3540
if (CliConfig.fromProject().apps[0].mobile){
3641
this.webpackMobileConfigPartial = getWebpackMobileConfigPartial(this.ngCliProject.root, sourceDir);
@@ -40,20 +45,34 @@ export class NgCliWebpackConfig {
4045
}
4146

4247
this.generateConfig();
43-
this.config.plugins.unshift(new NgCliEnvironmentPlugin({
48+
this.config[0].plugins.unshift(new NgCliEnvironmentPlugin({
4449
path: path.resolve(this.ngCliProject.root, `./${sourceDir}/app/environments/`),
4550
src: 'environment.ts',
4651
dest: `environment.${this.environment}.ts`
4752
}));
53+
54+
const assetsPluginInstance = new AssetsPlugin({ filename: 'cli.assets.json' });
55+
const htmlCliPlugin = new HtmlCliPlugin();
56+
57+
this.config.forEach(conf => {
58+
conf.plugins.push(assetsPluginInstance);
59+
conf.plugins.push(htmlCliPlugin);
60+
});
4861
}
4962

5063
generateConfig(): void {
5164
switch (this.target) {
5265
case "development":
53-
this.config = webpackMerge(this.webpackBaseConfig, this.webpackDevConfigPartial);
66+
this.config = [
67+
webpackMerge(this.webpackBaseConfig, this.webpackDevConfigPartial),
68+
this.webpackCSSConfig
69+
];
5470
break;
5571
case "production":
56-
this.config = webpackMerge(this.webpackBaseConfig, this.webpackProdConfigPartial);
72+
this.config = [
73+
webpackMerge(this.webpackBaseConfig, this.webpackProdConfigPartial),
74+
this.webpackCSSConfig
75+
];
5776
break;
5877
default:
5978
throw new Error("Invalid build target. Only 'development' and 'production' are available.");

‎addon/ng2/tasks/serve-webpack.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ module.exports = Task.extend({
1818
var config: NgCliWebpackConfig = new NgCliWebpackConfig(this.project, commandOptions.target, commandOptions.environment).config;
1919
// This allows for live reload of page when changes are made to repo.
2020
// https://webpack.github.io/docs/webpack-dev-server.html#inline-mode
21-
config.entry.main.unshift(`webpack-dev-server/client?http://${commandOptions.host}:${commandOptions.port}/`);
21+
config[0].entry.main.unshift(`webpack-dev-server/client?http://${commandOptions.host}:${commandOptions.port}/`);
2222
webpackCompiler = webpack(config);
2323

2424
webpackCompiler.apply(new ProgressPlugin({

‎addon/ng2/utilities/html-cli-plugin.ts

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import * as fs from 'fs';
2+
import * as path from 'path';
3+
import * as _ from 'lodash';
4+
import { CliConfig } from '../models/config';
5+
6+
export class HtmlCliPlugin {
7+
apply(compiler) {
8+
compiler.plugin('done', this.generateIndexHtml);
9+
}
10+
11+
generateIndexHtml(stats) {
12+
const sourceDir = CliConfig.fromProject().defaults.sourceDir;
13+
const indexHtml = path.resolve(sourceDir, 'index.html');
14+
const projectRoot = path.resolve(sourceDir, '..');
15+
const assetsPath = path.resolve(projectRoot, 'cli.assets.json');
16+
const destHtml = path.resolve(stats.compilation.compiler.outputPath, 'index.html');
17+
const contents = JSON.parse(fs.readFileSync(assetsPath, 'utf8'));
18+
let files = { js: [], css: [] };
19+
20+
Object.keys(contents).forEach(key => {
21+
let type = Object.keys(contents[key])[0];
22+
files[type].unshift(contents[key][type]);
23+
});
24+
25+
let tpl = _.template(fs.readFileSync(indexHtml, 'utf8').replace(/##/g, '%'));
26+
fs.writeFileSync(destHtml, tpl({ files: files }), 'utf8');
27+
}
28+
29+
}

‎package.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
"@types/rimraf": "0.0.25-alpha",
3737
"@types/webpack": "^1.12.22-alpha",
3838
"angular2-template-loader": "^0.4.0",
39+
"assets-webpack-plugin": "^3.4.0",
3940
"awesome-typescript-loader": "^2.1.1",
4041
"chalk": "^1.1.3",
4142
"compression-webpack-plugin": "^0.3.1",
@@ -48,11 +49,11 @@
4849
"exit": "^0.1.2",
4950
"exports-loader": "^0.6.3",
5051
"expose-loader": "^0.7.1",
52+
"extract-text-webpack-plugin": "^2.0.0-beta.3",
5153
"file-loader": "^0.8.5",
5254
"fs-extra": "^0.30.0",
5355
"glob": "^7.0.3",
5456
"handlebars": "^4.0.5",
55-
"html-webpack-plugin": "^2.19.0",
5657
"istanbul-instrumenter-loader": "^0.2.0",
5758
"json-loader": "^0.5.4",
5859
"karma-sourcemap-loader": "^0.3.7",
@@ -74,7 +75,7 @@
7475
"remap-istanbul": "^0.6.4",
7576
"resolve": "^1.1.7",
7677
"rimraf": "^2.5.3",
77-
"sass-loader": "^3.2.0",
78+
"sass-loader": "^3.2.3",
7879
"shelljs": "^0.7.0",
7980
"silent-error": "^1.0.0",
8081
"source-map-loader": "^0.1.5",

0 commit comments

Comments
 (0)