Skip to content

Commit 7e6a55c

Browse files
committed
fix(css): cssnano for minifying css, and optimize postcss and autoprefixer
Fixes #1152
1 parent 448a7d9 commit 7e6a55c

23 files changed

Lines changed: 646 additions & 268 deletions

package.json

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,9 @@
5858
"typescript": "~2.9.1"
5959
},
6060
"devDependencies": {
61-
"@types/autoprefixer": "^6.7.3",
61+
"@types/autoprefixer": "^9.1.0",
6262
"@types/chokidar": "^1.7.4",
63+
"@types/cssnano": "^4.0.0",
6364
"@types/fs-extra": "^5.0.0",
6465
"@types/glob": "^7.1.1",
6566
"@types/is-glob": "^4.0.0",
@@ -74,10 +75,10 @@
7475
"@types/semver": "^5.5.0",
7576
"@types/ws": "^5.1.2",
7677
"ansi-colors": "~3.0.6",
77-
"autoprefixer": "^8.2.0",
78-
"clean-css": "4.2.1",
78+
"autoprefixer": "9.3.0",
7979
"conventional-changelog-cli": "^1.3.5",
8080
"css-what": "2.1.0",
81+
"cssnano": "4.1.7",
8182
"estree-walker": "0.5.2",
8283
"execa": "^0.8.0",
8384
"fast-deep-equal": "^2.0.1",
@@ -97,7 +98,7 @@
9798
"opn": "5.4.0",
9899
"parse5": "5.1.0",
99100
"pixelmatch": "4.0.2",
100-
"postcss": "6.0.21",
101+
"postcss": "7.0.5",
101102
"puppeteer": "~1.7.0",
102103
"rollup": "0.65.0",
103104
"rollup-plugin-commonjs": "9.1.8",

scripts/build-compiler.js

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -120,9 +120,8 @@ if (success) {
120120
function updateBuildIds(buildId, input) {
121121
// __BUILDID__
122122
// __BUILDID:TRANSPILE__
123-
// __BUILDID:MINIFYSTYLE__
123+
// __BUILDID:OPTIMIZECSS__
124124
// __BUILDID:MINIFYJS__
125-
// __BUILDID:AUTOPREFIXCSS__
126125

127126
let output = input;
128127

@@ -135,18 +134,15 @@ function updateBuildIds(buildId, input) {
135134
let transpileId = transpilePkg.name + transpilePkg.version + CACHE_BUSTER;
136135
output = output.replace(/__BUILDID:TRANSPILE__/g, transpileId);
137136

138-
let minifyStylePkg = require('../node_modules/clean-css/package.json');
139-
let minifyStyleId = minifyStylePkg.name + minifyStylePkg.version + CACHE_BUSTER;
140-
output = output.replace(/__BUILDID:MINIFYSTYLE__/g, minifyStyleId);
141-
142137
let minifyJsPkg = require('../node_modules/terser/package.json');
143138
let minifyJsId = minifyJsPkg.name + minifyJsPkg.version + CACHE_BUSTER;
144139
output = output.replace(/__BUILDID:MINIFYJS__/g, minifyJsId);
145140

146141
let autoprefixerPkg = require('../node_modules/autoprefixer/package.json');
142+
let cssnanoPkg = require('../node_modules/cssnano/package.json');
147143
let postcssPkg = require('../node_modules/postcss/package.json');
148-
let autoPrefixerId = autoprefixerPkg.name + autoprefixerPkg.version + '_' + postcssPkg.name + postcssPkg.version + CACHE_BUSTER;
149-
output = output.replace(/__BUILDID:AUTOPREFIXCSS__/g, autoPrefixerId);
144+
let id = autoprefixerPkg.name + autoprefixerPkg.version + '_' + cssnanoPkg.name + cssnanoPkg.version + '_' + postcssPkg.name + postcssPkg.version + '_' + CACHE_BUSTER;
145+
output = output.replace(/__BUILDID:OPTIMIZECSS__/g, id);
150146

151147
return output;
152148
}

scripts/build-prod.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ fs.emptyDirSync(DIST_LICENSES);
3232
[
3333
'ansi-colors',
3434
'autoprefixer',
35-
'clean-css',
35+
'cssnano',
3636
'css-what',
3737
'glob',
3838
'is-glob',

scripts/build-sys-node.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,14 @@ function bundleExternal(entryFileName) {
7373
// bundle this import
7474
callback();
7575
},
76+
resolve: {
77+
alias: {
78+
'postcss': path.resolve(__dirname, '..', 'node_modules', 'postcss'),
79+
'source-map': path.resolve(__dirname, '..', 'node_modules', 'source-map'),
80+
'chalk': path.resolve(__dirname, 'helpers', 'empty.js'),
81+
'cssnano-preset-default': path.resolve(__dirname, 'helpers', 'cssnano-preset-default'),
82+
}
83+
},
7684
optimization: {
7785
minimize: false
7886
},
Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
/**
2+
* @author Ben Briggs
3+
* @license MIT
4+
* @module cssnano:preset:default
5+
* @overview
6+
*
7+
* This default preset for cssnano only includes transforms that make no
8+
* assumptions about your CSS other than what is passed in. In previous
9+
* iterations of cssnano, assumptions were made about your CSS which caused
10+
* output to look different in certain use cases, but not others. These
11+
* transforms have been moved from the defaults to other presets, to make
12+
* this preset require only minimal configuration.
13+
*/
14+
15+
// const cssDeclarationSorter = require('css-declaration-sorter');
16+
const postcssDiscardComments = require('postcss-discard-comments');
17+
const postcssReduceInitial = require('postcss-reduce-initial');
18+
const postcssMinifyGradients = require('postcss-minify-gradients');
19+
// const postcssSvgo = require('postcss-svgo');
20+
const postcssReduceTransforms = require('postcss-reduce-transforms');
21+
const postcssConvertValues = require('postcss-convert-values');
22+
// const postcssCalc = require('postcss-calc');
23+
const postcssColormin = require('postcss-colormin').default;
24+
const postcssOrderedValues = require('postcss-ordered-values');
25+
const postcssMinifySelectors = require('postcss-minify-selectors');
26+
const postcssMinifyParams = require('postcss-minify-params');
27+
// const postcssNormalizeCharset = require('postcss-normalize-charset');
28+
const postcssMinifyFontValues = require('postcss-minify-font-values');
29+
const postcssNormalizeUrl = require('postcss-normalize-url');
30+
const postcssMergeLonghand = require('postcss-merge-longhand');
31+
const postcssDiscardDuplicates = require('postcss-discard-duplicates');
32+
// const postcssDiscardOverridden = require('postcss-discard-overridden');
33+
const postcssNormalizeRepeatStyle = require('postcss-normalize-repeat-style');
34+
const postcssMergeRules = require('postcss-merge-rules');
35+
const postcssDiscardEmpty = require('postcss-discard-empty');
36+
const postcssUniqueSelectors = require('postcss-unique-selectors');
37+
const postcssNormalizeString = require('postcss-normalize-string');
38+
const postcssNormalizePositions = require('postcss-normalize-positions');
39+
const postcssNormalizeWhitespace = require('postcss-normalize-whitespace');
40+
// const postcssNormalizeUnicode = require('postcss-normalize-unicode');
41+
const postcssNormalizeDisplayValues = require('postcss-normalize-display-values');
42+
// const postcssNormalizeTimingFunctions = require('postcss-normalize-timing-functions');
43+
const rawCache = require('cssnano-util-raw-cache');
44+
45+
const defaultOpts = {
46+
convertValues: {
47+
length: false,
48+
},
49+
// normalizeCharset: {
50+
// add: false,
51+
// },
52+
cssDeclarationSorter: {
53+
exclude: true,
54+
},
55+
};
56+
57+
module.exports = function defaultPreset (opts = {}) {
58+
const options = Object.assign({}, defaultOpts, opts);
59+
60+
const plugins = [
61+
[postcssDiscardComments, options.discardComments],
62+
[postcssMinifyGradients, options.minifyGradients],
63+
[postcssReduceInitial, options.reduceInitial],
64+
// [postcssSvgo, options.svgo],
65+
[postcssNormalizeDisplayValues, options.normalizeDisplayValues],
66+
[postcssReduceTransforms, options.reduceTransforms],
67+
[postcssColormin, options.colormin],
68+
// [postcssNormalizeTimingFunctions, options.normalizeTimingFunctions],
69+
// [postcssCalc, options.calc],
70+
[postcssConvertValues, options.convertValues],
71+
[postcssOrderedValues, options.orderedValues],
72+
[postcssMinifySelectors, options.minifySelectors],
73+
[postcssMinifyParams, options.minifyParams],
74+
// [postcssNormalizeCharset, options.normalizeCharset],
75+
// [postcssDiscardOverridden, options.discardOverridden],
76+
[postcssNormalizeString, options.normalizeString],
77+
// [postcssNormalizeUnicode, options.normalizeUnicode],
78+
[postcssMinifyFontValues, options.minifyFontValues],
79+
[postcssNormalizeUrl, options.normalizeUrl],
80+
[postcssNormalizeRepeatStyle, options.normalizeRepeatStyle],
81+
[postcssNormalizePositions, options.normalizePositions],
82+
[postcssNormalizeWhitespace, options.normalizeWhitespace],
83+
[postcssMergeLonghand, options.mergeLonghand],
84+
[postcssDiscardDuplicates, options.discardDuplicates],
85+
[postcssMergeRules, options.mergeRules],
86+
[postcssDiscardEmpty, options.discardEmpty],
87+
[postcssUniqueSelectors, options.uniqueSelectors],
88+
// [cssDeclarationSorter, options.cssDeclarationSorter],
89+
[rawCache, options.rawCache],
90+
];
91+
92+
return {plugins};
93+
}

scripts/helpers/empty.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = {};

src/compiler/html/minify-inline-content.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as d from '../../declarations';
22
import { minifyJs } from '../minifier';
3-
import { minifyStyle } from '../style/minify-style';
3+
import { optimizeCss } from '../style/optimize-css';
44

55

66
export async function minifyInlineScripts(config: d.Config, compilerCtx: d.CompilerCtx, doc: Document, diagnostics: d.Diagnostic[]) {
@@ -103,6 +103,6 @@ export function canMinifyInlineStyle(style: HTMLStyleElement) {
103103

104104
async function minifyInlineStyle(config: d.Config, compilerCtx: d.CompilerCtx, diagnostics: d.Diagnostic[], style: HTMLStyleElement) {
105105
if (canMinifyInlineStyle(style)) {
106-
style.innerHTML = await minifyStyle(config, compilerCtx, diagnostics, style.innerHTML);
106+
style.innerHTML = await optimizeCss(config, compilerCtx, diagnostics, style.innerHTML, null, true);
107107
}
108108
}

src/compiler/style/auto-prefix-css-main.ts

Lines changed: 0 additions & 28 deletions
This file was deleted.

src/compiler/style/component-styles.ts

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import * as d from '../../declarations';
2-
import { autoprefixCssMain } from './auto-prefix-css-main';
32
import { buildError, catchError, hasFileExtension, normalizePath } from '../util';
43
import { DEFAULT_STYLE_MODE, ENCAPSULATION } from '../../util/constants';
54
import { getComponentStylesCache, setComponentStylesCache } from './cached-styles';
6-
import { minifyStyle } from './minify-style';
5+
import { optimizeCss } from './optimize-css';
76
import { runPluginTransforms } from '../plugin/plugin';
87
import { scopeComponentCss } from './scope-css';
98

@@ -186,16 +185,8 @@ async function setStyleText(config: d.Config, compilerCtx: d.CompilerCtx, buildC
186185
filePath = externalStyle.absolutePath;
187186
}
188187

189-
// auto add css prefixes
190-
const autoprefixConfig = config.autoprefixCss;
191-
if (autoprefixConfig !== false) {
192-
styleMeta.compiledStyleText = await autoprefixCssMain(config, compilerCtx, styleMeta.compiledStyleText, autoprefixConfig);
193-
}
194-
195-
if (config.minifyCss) {
196-
// minify css
197-
styleMeta.compiledStyleText = await minifyStyle(config, compilerCtx, buildCtx.diagnostics, styleMeta.compiledStyleText, filePath);
198-
}
188+
// auto add css prefixes and minifies when configured
189+
styleMeta.compiledStyleText = await optimizeCss(config, compilerCtx, buildCtx.diagnostics, styleMeta.compiledStyleText, filePath, true);
199190

200191
if (requiresScopedStyles(cmpMeta.encapsulationMeta, config)) {
201192
// only create scoped styles if we need to

src/compiler/style/global-styles.ts

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import * as d from '../../declarations';
2-
import { autoprefixCssMain } from './auto-prefix-css-main';
32
import { buildError, catchError, normalizePath, pathJoin } from '../util';
43
import { getCssImports } from './css-imports';
54
import { getGlobalStyleFilename } from '../app/app-file-naming';
6-
import { minifyStyle } from './minify-style';
5+
import { optimizeCss } from './optimize-css';
76
import { runPluginTransforms } from '../plugin/plugin';
87

98

@@ -40,17 +39,7 @@ async function loadGlobalStyle(config: d.Config, compilerCtx: d.CompilerCtx, bui
4039

4140
const transformResults = await runPluginTransforms(config, compilerCtx, buildCtx, filePath);
4241

43-
styleText = transformResults.code;
44-
45-
// auto add css prefixes
46-
const autoprefixConfig = config.autoprefixCss;
47-
if (autoprefixConfig !== false) {
48-
styleText = await autoprefixCssMain(config, compilerCtx, styleText, autoprefixConfig);
49-
}
50-
51-
if (config.minifyCss) {
52-
styleText = await minifyStyle(config, compilerCtx, buildCtx.diagnostics, styleText, filePath);
53-
}
42+
styleText = await optimizeCss(config, compilerCtx, buildCtx.diagnostics, transformResults.code, filePath, true);
5443

5544
} catch (e) {
5645
const d = buildError(buildCtx.diagnostics);

0 commit comments

Comments
 (0)