fix(css): disable postcss merge-longhand due to css vars bug

Author: adamdbradley

scripts/helpers/cssnano-preset-default.js

@@ -27,7 +27,7 @@ const postcssMinifyParams = require('postcss-minify-params');
 // const postcssNormalizeCharset = require('postcss-normalize-charset');
 const postcssMinifyFontValues = require('postcss-minify-font-values');
 const postcssNormalizeUrl = require('postcss-normalize-url');
-const postcssMergeLonghand = require('postcss-merge-longhand');
+// const postcssMergeLonghand = require('postcss-merge-longhand');
 const postcssDiscardDuplicates = require('postcss-discard-duplicates');
 // const postcssDiscardOverridden = require('postcss-discard-overridden');
 const postcssNormalizeRepeatStyle = require('postcss-normalize-repeat-style');
@@ -80,7 +80,7 @@ module.exports = function defaultPreset (opts = {}) {
     [postcssNormalizeRepeatStyle, options.normalizeRepeatStyle],
     [postcssNormalizePositions, options.normalizePositions],
     [postcssNormalizeWhitespace, options.normalizeWhitespace],
-    [postcssMergeLonghand, options.mergeLonghand],
+    // [postcssMergeLonghand, options.mergeLonghand],
     [postcssDiscardDuplicates, options.discardDuplicates],
     [postcssMergeRules, options.mergeRules],
     [postcssDiscardEmpty, options.discardEmpty],

src/compiler/style/test/optimize-css.spec.ts

@@ -243,21 +243,36 @@ describe('optimizeCss',  () => {
     expect(output).toBe(`h1{width:calc(10px - (100px / var(--test)))}`);
   });
 
-  it('merge-longhand', async () => {
-    config.minifyCss = true;
-    const styleText = `
-      h1 {
-        margin-top: 10px;
-        margin-right: 20px;
-        margin-bottom: 10px;
-        margin-left: 20px;
-      }
-    `;
-    const output = await optimizeCss(config, compilerCtx, diagnostics, styleText, null, true);
-
-    expect(diagnostics).toHaveLength(0);
-    expect(output).toBe(`h1{margin:10px 20px}`);
-  });
+  // it('merge-longhand', async () => {
+  //   config.minifyCss = true;
+  //   const styleText = `
+  //     h1 {
+  //       margin-top: 10px;
+  //       margin-right: 20px;
+  //       margin-bottom: 10px;
+  //       margin-left: 20px;
+  //     }
+  //   `;
+  //   const output = await optimizeCss(config, compilerCtx, diagnostics, styleText, null, true);
+
+  //   expect(diagnostics).toHaveLength(0);
+  //   expect(output).toBe(`h1{margin:10px 20px}`);
+  // });
+
+  // it('merge-longhand w/ css vars', async () => {
+  //   config.minifyCss = true;
+  //   const styleText = `
+  //     a {
+  //       border-width: var(--border-width);
+  //       border-style: var(--border-style);
+  //       border-color: var(--btn-border-color);
+  //     }
+  //   `;
+  //   const output = await optimizeCss(config, compilerCtx, diagnostics, styleText, null, true);
+
+  //   expect(diagnostics).toHaveLength(0);
+  //   expect(output).toBe(`a{border:none}`);
+  // });
 
   it('discard-duplicates', async () => {
     config.minifyCss = true;