fix(lwc-compiler): invalid CSS generation when minified is enabled (#552

) * fix(lwc-compiler): invalid CSS generation when minified is enabled * fix: mistaching types in lwc-compiler * test: fix test impacted by plugin order change * Update style.ts * Update style.ts
salesforce · Aug 1, 2018 · f19ebb1 · f19ebb1
1 parent d0cf318
commit f19ebb1
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 12 deletions.
diff --git a/packages/lwc-compiler/src/__tests__/fixtures/expected-styled-prod.js b/packages/lwc-compiler/src/__tests__/fixtures/expected-styled-prod.js
diff --git a/packages/lwc-compiler/src/transformers/__tests__/transform.spec.ts b/packages/lwc-compiler/src/transformers/__tests__/transform.spec.ts
@@ -264,6 +264,7 @@ describe('CSS transform', () => {
             color: var(--bg-color);
             font-size: var(--font-size, 16px);
             margin: var(--margin-small, var(--margin-medium, 20px));
+            border-bottom: 1px solid var(--lwc-border);
         }`;
 
         const expected = `
@@ -274,6 +275,7 @@ describe('CSS transform', () => {
                     color: \${customProperties(\`--bg-color\`)};
                     font-size: \${customProperties(\`--font-size\`, \`16px\`)};
                     margin: \${customProperties(\`--margin-small\`, \`\${customProperties(\`--margin-medium\`, \`20px\`)}\`)};
+                    border-bottom: 1px solid \${customProperties(\`--lwc-border\`)};
                 }\`;
             }
             export default style;
@@ -288,6 +290,35 @@ describe('CSS transform', () => {
         expect(pretify(code)).toBe(pretify(expected));
     });
 
+    it('should transform var functions properly when minification is enabled', async () => {
+        const actual = `div {
+            color: var(--bg-color);
+            font-size: var(--font-size, 16px);
+            margin: var(--margin-small, var(--margin-medium, 20px));
+            border-bottom: 1px solid var(--lwc-border);
+        }`;
+
+        const expected = `
+            import customProperties from '@customProperties';
+
+            function style(token) {
+                return \`div[\${token}]{color:\${customProperties(\`--bg-color\`)};font-size:\${customProperties(\`--font-size\`, \`16px\`)};margin:\${customProperties(\`--margin-small\`, \`\${customProperties(\`--margin-medium\`, \`20px\`)}\`)};border-bottom:1px solid \${customProperties(\`--lwc-border\`)}}\`;
+            }
+            export default style;
+        `;
+
+        const { code } = await transform(actual, 'foo.css', {
+            stylesheetConfig: {
+                customProperties: { resolution: { type: 'module', name: '@customProperties' } },
+            },
+            outputConfig: {
+                minify: true
+            }
+        });
+
+        expect(pretify(code)).toBe(pretify(expected));
+    });
+
     it('should escape grave accents', async () => {
         const actual = `/* Comment with grave accents \`#\` */`;
         const expected = `

diff --git a/packages/lwc-compiler/src/transformers/style.ts b/packages/lwc-compiler/src/transformers/style.ts
@@ -67,30 +67,35 @@ export default async function transformStyle(
     const { minify } = outputConfig;
     const { customProperties } = stylesheetConfig;
 
-    const plugins = [
-        postcssPluginLwc({
-            token: TOKEN_PLACEHOLDER,
-            customProperties: {
-                allowDefinition: customProperties.allowDefinition,
-                transformVar: transformVar(customProperties.resolution),
-            }
-        })
-    ];
+    const postcssPlugins: postcss.AcceptedPlugin[] = [];
 
+    // The LWC plugin produces invalid CSS since it transforms all the var function with actual
+    // javascript function call. The mification plugin produces invalid CSS when it runs after
+    // the LWC plugin.
     if (minify) {
-        plugins.push(
+        postcssPlugins.push(
             cssnano({
                 svgo: false,
                 preset: ['default']
             })
         );
     }
 
+    postcssPlugins.push(
+        postcssPluginLwc({
+            token: TOKEN_PLACEHOLDER,
+            customProperties: {
+                allowDefinition: customProperties.allowDefinition,
+                transformVar: transformVar(customProperties.resolution),
+            }
+        })
+    );
+
     const escapedSource = escapeString(src);
 
     let res;
     try {
-        res = await postcss(plugins).process(escapedSource, {
+        res = await postcss(postcssPlugins).process(escapedSource, {
             from: filename,
         });
     } catch (e) {