Preserve case of css custom variables. Fixes #648

cssnano · Oct 25, 2018 · 4d0faf6 · 4d0faf6
1 parent 1b27f28
commit 4d0faf6
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 46 deletions.
diff --git a/packages/postcss-merge-longhand/src/__tests__/borders.js b/packages/postcss-merge-longhand/src/__tests__/borders.js
@@ -540,3 +540,16 @@ test(
     'h1{border:2px solid #fff;border-color:inherit}',
     'h1{border:2px solid;border-color:inherit}',
 );
+
+test(
+    'Should preserve case of css custom properties #648',
+    passthroughCSS,
+    'h1{border:1px solid rgba(var(--fooBar));}',
+);
+
+test(
+    'should overwrite some border-width props and save fallbacks and preserve case #648 2',
+    processCSS,
+    'h1{border-top-width:10px;border-right-width:var(--fooBar);border-right-width:15px;border-bottom-width:var(--fooBar);border-bottom-width:20px;border-left-width:25px;border-top-width:var(--fooBar);border-left-width:var(--fooBar)}',
+    'h1{border-width:10px 15px 20px 25px;border-top-width:var(--fooBar);border-left-width:var(--fooBar)}'
+);
diff --git a/packages/postcss-merge-longhand/src/lib/parseWsc.js b/packages/postcss-merge-longhand/src/lib/parseWsc.js
@@ -1,46 +1,53 @@
-import {list} from 'postcss';
-import {isWidth, isStyle, isColor} from './validateWsc';
-
-const none = /^\s*(none|medium)(\s+none(\s+(none|currentcolor))?)?\s*$/i;
-
-export default function parseWsc (value) {
-    if (none.test(value)) {
-        return [ 'medium', 'none', 'currentcolor'];
-    }
-
-    let width, style, color;
-
-    const values = list.space(value);
-    if (values.length > 1 && isStyle(values[1]) && values[0].toLowerCase() === 'none') {
-        values.unshift();
-        width = '0';
-    }
-
-    const unknown = [];
-
-    values.forEach(v => {
-        if (isStyle(v)) {
-            style = v.toLowerCase();
-        } else if (isWidth(v)) {
-            width = v.toLowerCase();
-        } else if (isColor(v)) {
-            color = v.toLowerCase();
-        } else {
-            unknown.push(v);
-        }
-    });
-
-    if (unknown.length) {
-        if (!width && style && color) {
-            width = unknown.pop();
-        }
-        if (width && !style && color) {
-            style = unknown.pop();
-        }
-        if (width && style && !color) {
-            color = unknown.pop();
-        }
-    }
-
-    return [ width, style, color ];
-}
+import {list} from 'postcss';
+import {isWidth, isStyle, isColor} from './validateWsc';
+
+const none = /^\s*(none|medium)(\s+none(\s+(none|currentcolor))?)?\s*$/i;
+
+const varRE = /(^.*var)(.*\(.*--.*\))(.*)/i;
+const varPreserveCase = p => `${p[1].toLowerCase()}${p[2]}${p[3].toLowerCase()}`;
+const toLower = v => {
+    const match = varRE.exec(v);
+    return match ? varPreserveCase(match) : v.toLowerCase();
+};
+
+export default function parseWsc (value) {
+    if (none.test(value)) {
+        return [ 'medium', 'none', 'currentcolor'];
+    }
+
+    let width, style, color;
+
+    const values = list.space(value);
+    if (values.length > 1 && isStyle(values[1]) && values[0].toLowerCase() === 'none') {
+        values.unshift();
+        width = '0';
+    }
+
+    const unknown = [];
+
+    values.forEach(v => {
+        if (isStyle(v)) {
+            style = toLower(v);
+        } else if (isWidth(v)) {
+            width = toLower(v);
+        } else if (isColor(v)) {
+            color = toLower(v);
+        } else {
+            unknown.push(v);
+        }
+    });
+
+    if (unknown.length) {
+        if (!width && style && color) {
+            width = unknown.pop();
+        }
+        if (width && !style && color) {
+            style = unknown.pop();
+        }
+        if (width && style && !color) {
+            color = unknown.pop();
+        }
+    }
+
+    return [ width, style, color ];
+}