fix(style-compiler): upgrade postcss and cssnano (#1633)

packages/@lwc/style-compiler/package.json

@@ -14,8 +14,8 @@
         "dist/"
     ],
     "dependencies": {
-        "cssnano": "~3.10.0",
-        "postcss": "~7.0.5",
+        "cssnano-preset-default": "~4.0.7",
+        "postcss": "~7.0.24",
         "postcss-selector-parser": "~6.0.2",
         "postcss-value-parser": "~4.0.2"
     },

packages/@lwc/style-compiler/src/postcss-minify-plugins.ts

@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+import cssnanoPreset from 'cssnano-preset-default';
+
+const CSS_NANO_PRESET_OPTIONS = {
+    svgo: {
+        // The svgo plugin is async and need to be excluded.
+        exclude: true,
+    },
+};
+
+/**
+ * cssnano decided to make its APIs asynchronous with v4. Because the LWC compiler transform API is
+ * synchronous we can't use cssnano directly. For now we use the css-nano-preset-default and filter
+ * out the plugins that are async.
+ * https://github.com/cssnano/cssnano/blob/master/packages/cssnano-preset-default/src/index.js
+ *
+ * We may switch back to cssnano if/when they decide to go back to a synchronous API:
+ * https://github.com/cssnano/cssnano/issues/68
+ */
+export default function() {
+    const { plugins } = cssnanoPreset(CSS_NANO_PRESET_OPTIONS);
+
+    return plugins
+        .filter(([_, options]) => !options || !options.exclude)
+        .map(([plugin, options]) => plugin(options));
+}

packages/@lwc/style-compiler/src/transform.ts

@@ -5,10 +5,10 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 import postcss from 'postcss';
-import cssnano from 'cssnano';
 
 import serialize from './serialize';
-import postcssPluginLwc from './lwc-postcss-plugin';
+import postcssLwc from './postcss-lwc-plugin';
+import postcssMinify from './postcss-minify-plugins';
 
 export interface Config {
     /** CSS custom properties configuration */
@@ -26,18 +26,6 @@ export interface Config {
     };
 }
 
-const CSS_NANO_CONFIG = {
-    preset: ['default'],
-
-    // Disable SVG compression, since it prevent the compiler to be bundle by webpack since
-    // it dynamically require the svgo package: https://github.com/svg/svgo
-    svgo: false,
-
-    // Disable zindex normalization, since it only works when it works only if the rules
-    // css file contains all the selectors applied on the page.
-    zindex: false,
-};
-
 export function transform(src: string, id: string, config: Config = {}): { code: string } {
     if (src === '') {
         return { code: 'export default undefined' };
@@ -49,16 +37,19 @@ export function transform(src: string, id: string, config: Config = {}): { code:
     );
     const minify = config.outputConfig && config.outputConfig.minify;
 
-    const plugins = [
-        postcssPluginLwc({
-            customProperties: { allowDefinition, collectVarFunctions },
+    let plugins = [
+        postcssLwc({
+            customProperties: {
+                allowDefinition,
+                collectVarFunctions,
+            },
         }),
     ];
 
     if (minify) {
-        // We are unshifting to ensure minification runs before lwc
-        // This is important because we clone declarations that can't be mangled by the minifier.
-        plugins.unshift(cssnano(CSS_NANO_CONFIG));
+        // It's important to run the postcss minification plugins before the LWC one because we
+        // need to clone the CSS declarations and they shouldn't be mangled by the minifier.
+        plugins = [...postcssMinify(), ...plugins];
     }
 
     const result = postcss(plugins).process(src, { from: id });

packages/@lwc/style-compiler/src/utils/message.ts

@@ -6,21 +6,24 @@
  */
 import { ResultMessage } from 'postcss';
 
-export interface ImportMessage extends ResultMessage {
+interface ImportMessage extends ResultMessage {
     type: 'import';
     id: string;
 }
 
-export interface VarFunctionMessage extends ResultMessage {
+interface VarFunctionMessage extends ResultMessage {
     type: 'var-function';
     original: string;
 }
 
+const PLUGIN_NAME = '@lwc/style-compiler';
+
 const IMPORT_TYPE = 'import';
 const VAR_FUNCTION_TYPE = 'var-function';
 
 export function importMessage(id: string): ImportMessage {
     return {
+        plugin: PLUGIN_NAME,
         type: IMPORT_TYPE,
         id,
     };
@@ -31,7 +34,11 @@ export function isImportMessage(message: any): message is ImportMessage {
 }
 
 export function varFunctionMessage(original: string): VarFunctionMessage {
-    return { type: VAR_FUNCTION_TYPE, original };
+    return {
+        plugin: PLUGIN_NAME,
+        type: VAR_FUNCTION_TYPE,
+        original,
+    };
 }
 
 export function isVarFunctionMessage(message: any): message is VarFunctionMessage {

packages/@lwc/style-compiler/tsconfig.json

@@ -2,7 +2,6 @@
     "extends": "../../../tsconfig.json",
 
     "compilerOptions": {
-        "noImplicitAny": false,
         "strictFunctionTypes": false,
 
         "outDir": "dist/commonjs",

packages/@lwc/style-compiler/typings/cssnano.d.ts → packages/@lwc/style-compiler/typings/cssnano-preset-default.d.ts

@@ -4,7 +4,13 @@
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-declare module 'cssnano' {
-    const nano: any;
-    export = nano;
+declare module 'cssnano-preset-default' {
+    import { Plugin } from 'postcss';
+
+    const preset: (
+        config: any
+    ) => {
+        plugins: [Plugin<any>, any];
+    };
+    export default preset;
 }