[node-build-scripts] fix(generate-css-variables): whitespace in maps (#…

…5991)
palantir · Mar 2, 2023 · cfde6bd · cfde6bd · adidahiya · Mar 2, 2023
1 parent 5b0687f
commit cfde6bd
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 5 deletions.
diff --git a/packages/core/src/common/_variables.scss b/packages/core/src/common/_variables.scss
@@ -141,7 +141,7 @@ $pt-dark-input-intent-box-shadow-colors: (
   "primary": $blue4,
   "success": $green4,
   "warning": $orange4,
-  "danger" : $red4,
+  "danger": $red4,
 ) !default;
 
 $pt-dark-dialog-box-shadow: $pt-dark-elevation-shadow-3 !default;

diff --git a/packages/node-build-scripts/src/__tests__/__fixtures__/expected/variables.less b/packages/node-build-scripts/src/__tests__/__fixtures__/expected/variables.less
@@ -23,4 +23,5 @@
 @test-map: {
   first: #111418;
   second: #ffffff;
+  third: #5f6b7c;
 };
diff --git a/packages/node-build-scripts/src/__tests__/__fixtures__/expected/variables.scss b/packages/node-build-scripts/src/__tests__/__fixtures__/expected/variables.scss
@@ -23,4 +23,5 @@ $pt-dark-popover-border-color: hsl(215deg, 3%, 38%) !default;
 $test-map: (
   "first": #111418,
   "second": #ffffff,
+  "third": #5f6b7c,
 ) !default;
diff --git a/packages/node-build-scripts/src/__tests__/__fixtures__/input/_variables.scss b/packages/node-build-scripts/src/__tests__/__fixtures__/input/_variables.scss
@@ -27,6 +27,7 @@ $pt-text-color-disabled: rgba($gray1, 0.6) !default;
 $pt-dark-divider-white: rgba($white, 0.2) !default;
 $pt-dark-popover-border-color: hsl(215deg, 3%, 38%) !default;
 $test-map: (
-  "first": $black,
+  "first" : $black,
   "second": $white,
+  "third" : $gray1,
 ) !default;
diff --git a/packages/node-build-scripts/src/cssVariables.mjs b/packages/node-build-scripts/src/cssVariables.mjs
@@ -86,7 +86,7 @@ function printVariable(value, allVariables, outputType) {
                     } else if (line === ")") {
                         return "}";
                     } else {
-                        return line.replace(/"(\S+)": (.+),/, (_substr, key, value) => `${key}: ${value.trim()};`);
+                        return line.replace(/"(\S+)"\s*: (.+),/, (_substr, key, value) => `${key}: ${value.trim()};`);
                     }
                 })
                 .join("\n");
@@ -149,12 +149,12 @@ export function generateLessVariables(parsedInput) {
         const lessBlock = lessVariablesArray
             .join("\n")
             .replace(/rgba\((\$[\w-]+), ([\d\.]+)\)/g, (_match, color, opacity) => `fade(${color}, ${+opacity * 100}%)`)
-            // special case for hsl(), which supports a value like '270deg' in its first argument in Sass, but in Less we must omit the 'deg'
-            .replace(/hsl\(([0-9]+)deg, (.+)\)/g, (_match, degrees, rest) => `hsl(${degrees}, ${rest})`)
             .replace(
                 /rgba\((\$[\w-]+), (\$[\w-]+)\)/g,
                 (_match, color, variable) => `fade(${color}, ${variable} * 100%)`,
             )
+            // special case for hsl(), which supports a value like '270deg' in its first argument in Sass, but in Less we must omit the 'deg'
+            .replace(/hsl\(([0-9]+)deg, (.+)\)/g, (_match, degrees, rest) => `hsl(${degrees}, ${rest})`)
             .replace(/\$/g, "@");
 
         variablesLess = `${variablesLess}${lessBlock}\n\n`;