diff --git a/package-lock.json b/package-lock.json index 814b8abe..45efe49a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -409,9 +409,9 @@ } }, "@dojo/framework": { - "version": "5.0.0-alpha.3", - "resolved": "https://registry.npmjs.org/@dojo/framework/-/framework-5.0.0-alpha.3.tgz", - "integrity": "sha512-n6Cy3t7Zu65ceBM3UfqgBUmyM0F3JGUDIahMhXv4JKkXNaXSaUGuWDdBlRoH3LcEJDk6pj6ZV+J4JYiZ4IyPCQ==", + "version": "5.0.0-alpha.4", + "resolved": "https://registry.npmjs.org/@dojo/framework/-/framework-5.0.0-alpha.4.tgz", + "integrity": "sha512-nqF13sk3NtZNWrpRlhc51m+On50w9F0EEqVdSmO2TsFNSS4v40jhE+NYjgwp6V9pKg4GcA07H0mD78VkB1/sdg==", "requires": { "@types/cldrjs": "0.4.20", "@types/globalize": "0.0.34", @@ -590,7 +590,7 @@ "resolved": "https://registry.npmjs.org/@dojo/webpack-contrib/-/webpack-contrib-5.0.0-alpha.7.tgz", "integrity": "sha512-MTMfKZcAnq05uO0VKuo/0OB4RzvcyI0pmR1C+s2Rky/Fc9SKcaKalQp8XgHJSCq1tNEpiEdB+nszhktpK5JlOw==", "requires": { - "@dojo/framework": "^5.0.0-alpha.3", + "@dojo/framework": "^5.0.0-alpha.4", "acorn": "5.3.0", "acorn-dynamic-import": "3.0.0", "bfj-node4": "5.2.0", @@ -847,6 +847,15 @@ "@types/webpack": "*" } }, + "@types/cssnano": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@types/cssnano/-/cssnano-4.0.0.tgz", + "integrity": "sha512-BC/2ibKZfPIaBLBNzkitdW1IvvX/LKW6/QXGc4Su/tAJ7mQ3f2CKBuGCCKaqGAnoKwzfuC7G/recpkARwdOwuA==", + "dev": true, + "requires": { + "postcss": "5 - 7" + } + }, "@types/diff": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/@types/diff/-/diff-3.5.2.tgz", @@ -2501,9 +2510,9 @@ } }, "caniuse-lite": { - "version": "1.0.30000918", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000918.tgz", - "integrity": "sha512-CAZ9QXGViBvhHnmIHhsTPSWFBujDaelKnUj7wwImbyQRxmXynYqKGi3UaZTSz9MoVh+1EVxOS/DFIkrJYgR3aw==" + "version": "1.0.30000921", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000921.tgz", + "integrity": "sha512-Bu09ciy0lMWLgpYC77I0YGuI8eFRBPPzaSOYJK1jTI64txCphYCqnWbxJYjHABYVt/TYX/p3jNjLBR87u1Bfpw==" }, "capture-stack-trace": { "version": "1.0.1", @@ -3508,14 +3517,25 @@ } }, "css-select": { - "version": "1.2.0", - "resolved": "http://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz", - "integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.0.2.tgz", + "integrity": "sha512-dSpYaDVoWaELjvZ3mS6IKZM/y2PMPa/XYoEfYNZePL4U/XgyxZNroHEHReDx/d+VgXh9VbCTtFqLkFbmeqeaRQ==", "requires": { - "boolbase": "~1.0.0", - "css-what": "2.1", - "domutils": "1.5.1", - "nth-check": "~1.0.1" + "boolbase": "^1.0.0", + "css-what": "^2.1.2", + "domutils": "^1.7.0", + "nth-check": "^1.0.2" + }, + "dependencies": { + "domutils": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz", + "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==", + "requires": { + "dom-serializer": "0", + "domelementtype": "1" + } + } } }, "css-select-base-adapter": { @@ -4600,9 +4620,9 @@ "dev": true }, "electron-to-chromium": { - "version": "1.3.90", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.90.tgz", - "integrity": "sha512-IjJZKRhFbWSOX1w0sdIXgp4CMRguu6UYcTckyFF/Gjtemsu/25eZ+RXwFlV+UWcIueHyQA1UnRJxocTpH5NdGA==" + "version": "1.3.91", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.91.tgz", + "integrity": "sha512-wOWwM4vQpmb97VNkExnwE5e/sUMUb7NXurlEnhE89JOarUp6FOOMKjtTGgj9bmqskZkeRA7u+p0IztJ/y2OP5Q==" }, "elegant-spinner": { "version": "1.0.1", @@ -7188,7 +7208,7 @@ }, "is-accessor-descriptor": { "version": "0.1.6", - "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", + "resolved": "http://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=", "requires": { "kind-of": "^3.0.2" @@ -7259,7 +7279,7 @@ }, "is-data-descriptor": { "version": "0.1.4", - "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", + "resolved": "http://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=", "requires": { "kind-of": "^3.0.2" @@ -7904,9 +7924,9 @@ } }, "just-extend": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/just-extend/-/just-extend-3.0.0.tgz", - "integrity": "sha512-Fu3T6pKBuxjWT/p4DkqGHFRsysc8OauWr4ZRTY9dIx07Y9O0RkoR5jcv28aeD1vuAwhm3nLkDurwLXoALp4DpQ==", + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/just-extend/-/just-extend-4.0.2.tgz", + "integrity": "sha512-FrLwOgm+iXrPV+5zDU6Jqu4gCRXbWEQg2O3SKONsWE4w7AXFRkryS53bpWdaL9cNol+AmR3AEYz6kn+o0fCPnw==", "dev": true }, "kind-of": { @@ -9226,13 +9246,13 @@ "dev": true }, "nise": { - "version": "1.4.7", - "resolved": "https://registry.npmjs.org/nise/-/nise-1.4.7.tgz", - "integrity": "sha512-5cxvo/pEAEHBX5s0zl+zd96BvHHuua/zttIHeQuTWSDjGrWsEHamty8xbZNfocC+fx7NMrle7XHvvxtFxobIZQ==", + "version": "1.4.8", + "resolved": "https://registry.npmjs.org/nise/-/nise-1.4.8.tgz", + "integrity": "sha512-kGASVhuL4tlAV0tvA34yJYZIVihrUt/5bDwpp4tTluigxUr2bBlJeDXmivb6NuEdFkqvdv/Ybb9dm16PSKUhtw==", "dev": true, "requires": { "@sinonjs/formatio": "^3.1.0", - "just-extend": "^3.0.0", + "just-extend": "^4.0.2", "lolex": "^2.3.2", "path-to-regexp": "^1.7.0", "text-encoding": "^0.6.4" @@ -12677,6 +12697,19 @@ "htmlparser2": "~3.3.0", "strip-ansi": "^3.0.0", "utila": "^0.4.0" + }, + "dependencies": { + "css-select": { + "version": "1.2.0", + "resolved": "http://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz", + "integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=", + "requires": { + "boolbase": "~1.0.0", + "css-what": "2.1", + "domutils": "1.5.1", + "nth-check": "~1.0.1" + } + } } }, "repeat-element": { @@ -13741,26 +13774,6 @@ "version": "1.1.2", "resolved": "http://registry.npmjs.org/colors/-/colors-1.1.2.tgz", "integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM=" - }, - "css-select": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.0.2.tgz", - "integrity": "sha512-dSpYaDVoWaELjvZ3mS6IKZM/y2PMPa/XYoEfYNZePL4U/XgyxZNroHEHReDx/d+VgXh9VbCTtFqLkFbmeqeaRQ==", - "requires": { - "boolbase": "^1.0.0", - "css-what": "^2.1.2", - "domutils": "^1.7.0", - "nth-check": "^1.0.2" - } - }, - "domutils": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz", - "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==", - "requires": { - "dom-serializer": "0", - "domelementtype": "1" - } } } }, @@ -14931,9 +14944,9 @@ }, "dependencies": { "@types/node": { - "version": "10.12.14", - "resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.14.tgz", - "integrity": "sha512-0rVcFRhM93kRGAU88ASCjX9Y3FWDCh+33G5Z5evpKOea4xcpLqDGwmo64+DjgaSezTN5j9KdnUzvxhOw7fNciQ==" + "version": "10.12.15", + "resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.15.tgz", + "integrity": "sha512-9kROxduaN98QghwwHmxXO2Xz3MaWf+I1sLVAA6KJDF5xix+IyXVhds0MAfdNwtcpSrzhaTsNB0/jnL86fgUhqA==" }, "@types/webpack": { "version": "4.4.21", diff --git a/package.json b/package.json index c88e962f..d2d6d1f0 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,7 @@ "@types/clean-webpack-plugin": "0.1.2", "@types/connect-history-api-fallback": "1.3.1", "@types/copy-webpack-plugin": "4.4.1", + "@types/cssnano": "4.0.0", "@types/execa": "0.8.0", "@types/express": "4.11.0", "@types/globby": "6.1.0", @@ -108,6 +109,7 @@ "compression-webpack-plugin": "2.0.0", "connect-history-api-fallback": "1.5.0", "css-loader": "1.0.1", + "cssnano": "4.1.7", "eventsource-polyfill": "0.9.6", "express": "4.16.2", "express-static-gzip": "1.1.3", diff --git a/src/base.config.ts b/src/base.config.ts index f576638e..70b03326 100644 --- a/src/base.config.ts +++ b/src/base.config.ts @@ -11,12 +11,14 @@ import * as path from 'path'; import * as tsnode from 'ts-node'; import * as ts from 'typescript'; import * as webpack from 'webpack'; +import * as cssnano from 'cssnano'; const postcssPresetEnv = require('postcss-preset-env'); 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'); @@ -371,6 +373,17 @@ export default function webpackConfigFactory(args: any): webpack.Configuration { new webpack.DefinePlugin({ __MAIN_ENTRY: JSON.stringify(mainEntryPath) }), + new OptimizeCssAssetsPlugin({ + cssProcessor: cssnano, + cssProcessorOptions: { + map: { + inline: false + } + }, + cssProcessorPluginOptions: { + preset: ['default', { calc: false }] + } + }), !singleBundle && new BootstrapPlugin({ entryPath: mainEntryPath, diff --git a/src/dist.config.ts b/src/dist.config.ts index acba9f5f..d0ae8189 100644 --- a/src/dist.config.ts +++ b/src/dist.config.ts @@ -17,7 +17,6 @@ import { WebAppManifest } from './interfaces'; const BrotliPlugin = require('brotli-webpack-plugin'); const CompressionPlugin = require('compression-webpack-plugin'); -const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin'); const WebpackPwaManifest = require('webpack-pwa-manifest'); @@ -43,15 +42,7 @@ function webpackConfig(args: any): webpack.Configuration { config.optimization = { ...config.optimization, - minimizer: [ - new TerserPlugin({ sourceMap: true, cache: true }), - new OptimizeCssAssetsPlugin({ - cssProcessor: require('cssnano'), - cssProcessorPluginOptions: { - preset: ['default', { calc: false }] - } - }) - ] + minimizer: [new TerserPlugin({ sourceMap: true, cache: true })] }; config.plugins = [ diff --git a/tests/integration/build.spec.ts b/tests/integration/build.spec.ts index b02c4f40..dd199fb5 100644 --- a/tests/integration/build.spec.ts +++ b/tests/integration/build.spec.ts @@ -46,19 +46,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:#00f;'); + 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:#00f;'); + expect(css).to.contain('color:var(--primary);'); + expect(css).to.contain('color:red;'); }); }); });