merged main and fixed tests

lukasoppermann · Jun 29, 2022 · efbf128 · efbf128
1 parent 1909d80
commit efbf128
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 21 deletions.
diff --git a/src/extractor/extractColors.ts b/src/extractor/extractColors.ts
@@ -13,7 +13,7 @@ const transparentFill: fillValuesType = {
   fill: {
     value: { r: 0, g: 0, b: 0, a: 0 },
     type: 'color',
-    blendMode: 'NORMAL'
+    blendMode: 'normal'
   }
 }
 
@@ -61,7 +61,7 @@ const extractFills = (paint): fillValuesType | gradientValuesType => {
       fill: {
         value: convertPaintToRgba(paint),
         type: 'color' as PropertyType,
-        blendMode: paint.blendMode.toLowerCase()
+        blendMode: paint.blendMode?.toLowerCase() || 'normal'
       }
     }
   }

diff --git a/src/transformer/standardTransformer.ts b/src/transformer/standardTransformer.ts
@@ -165,7 +165,8 @@ const fillValueTransformer = (token): StandardTokenDataInterface | StandardToken
   if (token.extensions && token.extensions[config.key.extensionPluginData] && token.extensions[config.key.extensionPluginData].alias) {
     return {
       type: Object.hasOwnProperty.call(token.values[0], 'fill') ? 'color' : 'custom-gradient',
-      value: `{${token.extensions[config.key.extensionPluginData].alias}}`
+      value: `{${token.extensions[config.key.extensionPluginData].alias}}`,
+      blendMode: token.values[0]?.fill?.blendMode?.toLowerCase() || 'normal'
     }
   }
   // no alias, use value

diff --git a/tests/integration/data/original.variables.css b/tests/integration/data/original.variables.css
@@ -168,6 +168,7 @@
   --color-colors-ref-blue: #044aff; /* Some other description */
   --color-colors-special-characters: #40df50; /* Emoji */
   --color-colors-special-characters-nderung: #3456af;
+  --color-invalid-empty: rgba(0, 0, 0, 0);
   --grid-multiple-0-pattern: columns;
   --grid-multiple-0-section-size: 1;
   --grid-multiple-0-gutter-size: 20;

diff --git a/tests/integration/data/standard.variables.css b/tests/integration/data/standard.variables.css
@@ -46,6 +46,7 @@
   --color-colors-ref-blue: rgb(4, 74, 255); /* Some other description */
   --color-colors-special-characters: rgb(64, 223, 80); /* Emoji */
   --color-colors-special-characters-nderung: rgb(52, 86, 175);
+  --color-invalid-empty: rgba(0, 0, 0, 0);
   --grid-multiple-0: [object Object];
   --grid-multiple-1: [object Object];
   --grid-multiple-2: [object Object];

diff --git a/tests/unit/data/extractedFigmaTokens.data.ts b/tests/unit/data/extractedFigmaTokens.data.ts
@@ -579,7 +579,8 @@ export const extractedFigmaTokens = {
       {
         fill: {
           value: { r: 255, g: 230, b: 0, a: 1 },
-          type: 'color'
+          type: 'color',
+          blendMode: 'NORMAL'
         }
       }
     ],
@@ -594,6 +595,7 @@ export const extractedFigmaTokens = {
     category: 'color' as tokenCategoryType,
     exportKey: 'color' as tokenExportKeyType,
     description: 'a color token',
+    blendMode: 'NORMAL',
     values: [
       {
         fill: {
@@ -618,13 +620,15 @@ export const extractedFigmaTokens = {
       {
         fill: {
           value: { r: 255, g: 230, b: 0, a: 1 },
-          type: 'color'
+          type: 'color',
+          blendMode: 'NORMAL'
         }
       },
       {
         fill: {
           value: { r: 0, g: 100, b: 255, a: 0.5 },
-          type: 'color'
+          type: 'color',
+          blendMode: 'NORMAL'
         }
       }
     ],
@@ -730,7 +734,8 @@ export const extractedFigmaTokens = {
       {
         fill: {
           value: { r: 0, g: 100, b: 255, a: 0.5 },
-          type: 'color'
+          type: 'color',
+          blendMode: 'normal'
         }
       }
     ],
@@ -749,7 +754,8 @@ export const extractedFigmaTokens = {
       {
         fill: {
           value: { r: 255, g: 230, b: 0, a: 1 },
-          type: 'color'
+          type: 'color',
+          blendMode: 'normal'
         }
       },
       {

diff --git a/tests/unit/data/transformedStandardTokens.data.ts b/tests/unit/data/transformedStandardTokens.data.ts
@@ -332,6 +332,7 @@ export const transformedStandardTokens = {
     description: 'a color token',
     type: 'color',
     value: '#ffe600ff',
+    blendMode: 'normal',
     extensions: {
       'org.lukasoppermann.figmaDesignTokens': {
         exportKey: 'color'
@@ -343,6 +344,7 @@ export const transformedStandardTokens = {
     description: 'a color token',
     type: 'color',
     value: '{{color}}',
+    blendMode: 'normal',
     extensions: {
       'org.lukasoppermann.figmaDesignTokens': {
         exportKey: 'color',
@@ -360,11 +362,13 @@ export const transformedStandardTokens = {
     description: 'a multi color token',
     0: {
       type: 'color',
-      value: '#ffe600ff'
+      value: '#ffe600ff',
+      blendMode: 'normal'
     },
     1: {
       type: 'color',
-      value: '#0064ff80'
+      value: '#0064ff80',
+      blendMode: 'normal'
     }
   },
   /**
@@ -394,7 +398,8 @@ export const transformedStandardTokens = {
     },
     1: {
       value: '#0064ff80',
-      type: 'color'
+      type: 'color',
+      blendMode: 'normal'
     }
   },
   colorAndGradient: {
@@ -407,7 +412,8 @@ export const transformedStandardTokens = {
     description: 'a color and gradient token',
     0: {
       value: '#ffe600ff',
-      type: 'color'
+      type: 'color',
+      blendMode: 'normal'
     },
     1: {
       type: 'custom-gradient',

diff --git a/tests/unit/extractColors.test.ts b/tests/unit/extractColors.test.ts
@@ -23,7 +23,8 @@ describe('extracting color fills', () => {
               b: 186,
               g: 26,
               r: 255
-            }
+            },
+            blendMode: 'normal'
           }
         }]
       },
@@ -47,7 +48,8 @@ describe('extracting color fills', () => {
               b: 186,
               g: 26,
               r: 255
-            }
+            },
+            blendMode: 'normal'
           }
         }]
       },
@@ -70,7 +72,8 @@ describe('extracting color fills', () => {
               b: 0,
               g: 0,
               r: 0
-            }
+            },
+            blendMode: 'normal'
           }
         }]
       },
@@ -93,7 +96,8 @@ describe('extracting color fills', () => {
               b: 255,
               g: 255,
               r: 255
-            }
+            },
+            blendMode: 'normal'
           }
         }]
       },
@@ -116,7 +120,8 @@ describe('extracting color fills', () => {
               b: 186,
               g: 26,
               r: 255
-            }
+            },
+            blendMode: 'normal'
           }
         }, {
           gradientType: {
@@ -234,7 +239,8 @@ describe('extracting color fills', () => {
                 b: 230,
                 g: 128,
                 r: 51
-              }
+              },
+              blendMode: 'normal'
             }
           }
         ]
@@ -262,7 +268,8 @@ describe('extracting color fills', () => {
               b: 186,
               g: 26,
               r: 255
-            }
+            },
+            blendMode: 'normal'
           }
         }]
       },
@@ -286,7 +293,8 @@ describe('extracting color fills', () => {
               b: 186,
               g: 26,
               r: 255
-            }
+            },
+            blendMode: 'normal'
           }
         }]
       }

diff --git a/types/valueTypes.d.ts b/types/valueTypes.d.ts
@@ -5,7 +5,7 @@ export type ColorRgba = {
   a: number
 }
 
-export type BlendType = 'NORMAL' | 'DARKEN' | 'MULTIPLY' | 'COLOR_BURN' | 'LIGHTEN' | 'SCREEN' | 'COLOR_DODGE' | 'OVERLAY' | 'SOFT_LIGHT' | 'HARD_LIGHT' |  'DIFFERENCE' | 'EXCLUSION' | 'HUE' | 'SATURATION' | 'COLOR' | 'LUMINOSITY'
+export type BlendType = 'normal' | 'darken' | 'multiply' | 'color_burn' | 'lighten' | 'screen' | 'color_dodge' | 'overlay' | 'soft_light' | 'hard_light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity'
 
 export type GradientType = 'linear' | 'radial' | 'angular' | 'diamond'
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,7 +23,8 @@ describe('extracting color fills', () => { @@
                   b: 186,
                   g: 26,
                   r: 255
-                }
+                },
+                blendMode: 'normal'
               }
             }]
           },
@@ Expand All / @@ -47,7 +48,8 @@ describe('extracting color fills', () => { @@
                   b: 186,
                   g: 26,
                   r: 255
-                }
+                },
+                blendMode: 'normal'
               }
             }]
           },
@@ Expand All / @@ -70,7 +72,8 @@ describe('extracting color fills', () => { @@
                   b: 0,
                   g: 0,
                   r: 0
-                }
+                },
+                blendMode: 'normal'
               }
             }]
           },
@@ Expand All / @@ -93,7 +96,8 @@ describe('extracting color fills', () => { @@
                   b: 255,
                   g: 255,
                   r: 255
-                }
+                },
+                blendMode: 'normal'
               }
             }]
           },
@@ Expand All / @@ -116,7 +120,8 @@ describe('extracting color fills', () => { @@
                   b: 186,
                   g: 26,
                   r: 255
-                }
+                },
+                blendMode: 'normal'
               }
             }, {
               gradientType: {
@@ Expand Down Expand Up / @@ -234,7 +239,8 @@ describe('extracting color fills', () => { @@
                     b: 230,
                     g: 128,
                     r: 51
-                  }
+                  },
+                  blendMode: 'normal'
                 }
               }
             ]
@@ Expand Down Expand Up / @@ -262,7 +268,8 @@ describe('extracting color fills', () => { @@
                   b: 186,
                   g: 26,
                   r: 255
-                }
+                },
+                blendMode: 'normal'
               }
             }]
           },
@@ Expand All / @@ -286,7 +293,8 @@ describe('extracting color fills', () => { @@
                   b: 186,
                   g: 26,
                   r: 255
-                }
+                },
+                blendMode: 'normal'
               }
             }]
           }
@@ Expand Down @@