Optimise generated CSS (#195)

* Optimise generated css

* remove space

* Exclude calc from the css optimisations

Author: agubler

package-lock.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",

package.json

@@ -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', { calc: false }]
+				}
+			}),
 			new webpack.NamedChunksPlugin(),
 			new webpack.NamedModulesPlugin(),
 			(args.externals || isTest) &&

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