Fix CSS source maps (#225)

* Fix css source maps

* update test

* update test after cssnano minifies colors

* fix unit test

Author: agubler

package-lock.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",
@@ -109,6 +110,7 @@
     "connect-history-api-fallback": "1.5.0",
     "connect-inject": "0.4.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",

package.json

@@ -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,

src/base.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 = [

src/dist.config.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;');
 			});
 		});
 	});