fix parsing of functions with color values

UX-and-I · Jul 3, 2020 · 095896e · 095896e
1 parent ac4d24a
commit 095896e
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 22 deletions.
diff --git a/demo/src/styles/_variables.css b/demo/src/styles/_variables.css
@@ -98,16 +98,18 @@
 
   --text-dark: var(--n900);
   --text-light: var(--n0);
+
+  --gradient: linear-gradient(90deg, #f00 0%, #0f0 50%, #f00 100%);
 }
 
 /** 
  * @tokens Gradients
  * @presenter Gradient
  */
- :root {
-   --gradient-primary-linear: linear-gradient(#b3d3ff, #3c81ff);
-   --gradient-primary-radial: radial-gradient(#b3d3ff, #3c81ff);
- }
+:root {
+  --gradient-primary-linear: linear-gradient(#b3d3ff, #3c81ff);
+  --gradient-primary-radial: radial-gradient(#b3d3ff, #3c81ff);
+}
 
 /**
  * @tokens Durations

diff --git a/demo/src/styles/_variables.less b/demo/src/styles/_variables.less
@@ -15,6 +15,7 @@
 @brand-dark: @b600;
 @hsl: hsl(0, 100%, 50%);
 @hsla: hsla(0, 100%, 50%, 0.5);
+@gradient: linear-gradient(90deg, #f00 0%, #0f0 50%, #f00 100%);
 
 /**
  * @tokens Less: Border Radius

diff --git a/demo/src/styles/_variables.scss b/demo/src/styles/_variables.scss
@@ -15,6 +15,7 @@ $brand: $b400;
 $brand-dark: $b600;
 $hsl: hsl(0, 100%, 50%);
 $hsla: hsla(0, 100%, 50%, 0.5);
+$gradient: linear-gradient(90deg, #f00 0%, #0f0 50%, #f00 100%);
 
 /**
  * @tokens SCSS: Border Radius

diff --git a/src/components/presenter/ColorToken.tsx b/src/components/presenter/ColorToken.tsx
@@ -7,5 +7,5 @@ interface Props {
 }
 
 export const ColorToken = (props: Props) => {
-  return <Box style={{ backgroundColor: props.color }} />;
+  return <Box style={{ background: props.color }} />;
 };
diff --git a/src/parsers/less.parser.spec.ts b/src/parsers/less.parser.spec.ts
@@ -25,6 +25,7 @@ const TEST_FILES = {
      @blue: blue;
      @red: red;
      @hsl: hsl(0, 100%, 50%);
+     @gradient: linear-gradient(90deg, #f00 50%, #0f0 100%);
   `,
   withAliases: `/**
     * @tokens Colors
@@ -161,6 +162,13 @@ describe('LessParser', () => {
               editable: false,
               key: '@hsl',
               value: 'hsl(0, 100%, 50%)'
+            },
+            {
+              aliases: [],
+              description: '',
+              editable: false,
+              key: '@gradient',
+              value: 'linear-gradient(90deg, #f00 50%, #0f0 100%)'
             }
           ]
         }

diff --git a/src/parsers/less.parser.ts b/src/parsers/less.parser.ts
@@ -218,21 +218,16 @@ export class LessParser implements Parser {
     return { ...tokenGroup, tokens };
   }
 
-  private mapPropertyValue(value: any, reduce = true): string {
-    const rawValue = this.reducePropertyValues(value);
-
-    if (value.contains('color')) {
-      return this.addValueUnit(rawValue, 'color');
-    }
-
-    return rawValue;
+  private mapPropertyValue(value: any): string {
+    return this.reducePropertyValues(value);
   }
 
   private reducePropertyValues(value: any, reduced = ''): string {
     return value.content
       .reduce((v: string, node: any, index: number, list: any) => {
         if (typeof node.content === 'string') {
-          node.content = this.addValueUnit(node.content, value.type);
+          const type = value.type === 'percentage' ? value.type : node.type;
+          node.content = this.addValueUnit(node.content, type);
         }
 
         if (value.type === 'function' && index > 0) {

diff --git a/src/parsers/scss.parser.spec.ts b/src/parsers/scss.parser.spec.ts
@@ -25,6 +25,7 @@ const TEST_FILES = {
      $blue: blue;
      $red: red;
      $hsl: hsl(0, 100%, 50%);
+     $gradient: linear-gradient(90deg, #f00 50%, #0f0 100%);
   `,
   withAliases: `/**
     * @tokens Colors
@@ -161,6 +162,13 @@ describe('ScssParser', () => {
               editable: false,
               key: '$hsl',
               value: 'hsl(0, 100%, 50%)'
+            },
+            {
+              aliases: [],
+              description: '',
+              editable: false,
+              key: '$gradient',
+              value: 'linear-gradient(90deg, #f00 50%, #0f0 100%)'
             }
           ]
         }

diff --git a/src/parsers/scss.parser.ts b/src/parsers/scss.parser.ts
@@ -219,21 +219,16 @@ export class ScssParser implements Parser {
   }
 
   private mapPropertyValue(value: any): string {
-    const rawValue = this.reducePropertyValues(value);
-
-    if (value.contains('color')) {
-      return this.addValueUnit(rawValue, 'color');
-    }
-
-    return rawValue;
+    return this.reducePropertyValues(value);
   }
 
   private reducePropertyValues(value: any, reduced = ''): string {
     return value.content
       .filter((node: any) => node.type !== 'default' && node.type !== 'global')
       .reduce((v: string, node: any, index: number, list: any) => {
         if (typeof node.content === 'string') {
-          node.content = this.addValueUnit(node.content, value.type);
+          const type = value.type === 'percentage' ? value.type : node.type;
+          node.content = this.addValueUnit(node.content, type);
         }
 
         if (value.type === 'function' && index > 0) {