From 3de2560357bbcd7761f8b031a356a611d50fe02c Mon Sep 17 00:00:00 2001 From: Anthony Gubler Date: Sat, 27 Oct 2018 10:28:31 +0100 Subject: [PATCH 1/3] Optimise generated css --- package-lock.json | 20 ++++++++++++++++++++ package.json | 1 + src/base.config.ts | 7 +++++++ 3 files changed, 28 insertions(+) diff --git a/package-lock.json b/package-lock.json index 307bef35..bc68e957 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7706,6 +7706,16 @@ "graceful-fs": "^4.1.9" } }, + "last-call-webpack-plugin": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/last-call-webpack-plugin/-/last-call-webpack-plugin-2.1.2.tgz", + "integrity": "sha512-CZc+m2xZm51J8qSwdODeiiNeqh8CYkKEq6Rw8IkE4i/4yqf2cJhjQPsA6BtAV970ePRNhwEOXhy2U5xc5Jwh9Q==", + "dev": true, + "requires": { + "lodash": "^4.17.4", + "webpack-sources": "^1.0.1" + } + }, "latest-version": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-2.0.0.tgz", @@ -9595,6 +9605,16 @@ } } }, + "optimize-css-assets-webpack-plugin": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-3.2.0.tgz", + "integrity": "sha512-Fjn7wyyadPAriuH2DHamDQw5B8GohEWbroBkKoPeP+vSF2PIAPI7WDihi8WieMRb/At4q7Ea7zTKaMDuSoIAAg==", + "dev": true, + "requires": { + "cssnano": "^3.4.0", + "last-call-webpack-plugin": "^2.1.2" + } + }, "optionator": { "version": "0.8.2", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz", diff --git a/package.json b/package.json index eeca810a..2de3ac95 100644 --- a/package.json +++ b/package.json @@ -125,6 +125,7 @@ "loader-utils": "1.1.0", "log-symbols": "2.1.0", "log-update": "2.3.0", + "optimize-css-assets-webpack-plugin": "3.2.0", "ora": "1.3.0", "pkg-dir": "2.0.0", "postcss-import": "12.0.0", diff --git a/src/base.config.ts b/src/base.config.ts index 726bc010..43aabe17 100644 --- a/src/base.config.ts +++ b/src/base.config.ts @@ -17,6 +17,7 @@ const postcssImport = require('postcss-import'); const IgnorePlugin = require('webpack/lib/IgnorePlugin'); const slash = require('slash'); const WrapperPlugin = require('wrapper-webpack-plugin'); +const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const basePath = process.cwd(); const srcPath = path.join(basePath, 'src'); @@ -324,6 +325,12 @@ export default function webpackConfigFactory(args: any): WebpackConfiguration { filename: 'main.css', allChunks: true }), + new OptimizeCssAssetsPlugin({ + cssProcessor: require('cssnano'), + cssProcessorPluginOptions: { + preset: ['default'] + } + }), new webpack.NamedChunksPlugin(), new webpack.NamedModulesPlugin(), (args.externals || isTest) && From 8f20c8fc9bb72341045a50a2533e6cc7f3d702d0 Mon Sep 17 00:00:00 2001 From: Anthony Gubler Date: Sat, 27 Oct 2018 10:50:27 +0100 Subject: [PATCH 2/3] remove space --- tests/integration/build.spec.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/tests/integration/build.spec.ts b/tests/integration/build.spec.ts index 7e757f1e..2838a77d 100644 --- a/tests/integration/build.spec.ts +++ b/tests/integration/build.spec.ts @@ -43,19 +43,19 @@ Currently Rendered by BTR: false` it('correctly inlines and resolves external variables for legacy builds', () => { cy.request('/test-app/output/dev-app/main.css').then((response) => { const css = response.body; - expect(css).to.contain('color: var(--foreground-color);'); - expect(css).to.contain('color: blue;'); - expect(css).to.contain('color: var(--primary);'); - expect(css).to.contain('color: red;'); + expect(css).to.contain('color:var(--foreground-color);'); + expect(css).to.contain('color:blue;'); + expect(css).to.contain('color:var(--primary);'); + expect(css).to.contain('color:red;'); }); }); it('correctly inlines and resolves external variables for evergreen builds', () => { cy.request('/test-app/output/dev-app-evergreen/main.css').then((response) => { const css = response.body; - expect(css).to.contain('color: var(--foreground-color);'); - expect(css).to.contain('color: blue;'); - expect(css).to.contain('color: var(--primary);'); - expect(css).to.contain('color: red;'); + expect(css).to.contain('color:var(--foreground-color);'); + expect(css).to.contain('color:blue;'); + expect(css).to.contain('color:var(--primary);'); + expect(css).to.contain('color:red;'); }); }); }); From 4d7f5eef32d38c159f03d7b5100fe2ae84db17dd Mon Sep 17 00:00:00 2001 From: Anthony Gubler Date: Wed, 14 Nov 2018 11:13:41 +0000 Subject: [PATCH 3/3] Exclude calc from the css optimisations --- src/base.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/base.config.ts b/src/base.config.ts index 43aabe17..2b6c45f1 100644 --- a/src/base.config.ts +++ b/src/base.config.ts @@ -328,7 +328,7 @@ export default function webpackConfigFactory(args: any): WebpackConfiguration { new OptimizeCssAssetsPlugin({ cssProcessor: require('cssnano'), cssProcessorPluginOptions: { - preset: ['default'] + preset: ['default', { calc: false }] } }), new webpack.NamedChunksPlugin(),