change filterByName to filter method

lukasoppermann · Oct 3, 2020 · f8f5a9e · f8f5a9e
1 parent 5a5ef45
commit f8f5a9e
Show file tree

Hide file tree

Showing 12 changed files with 48 additions and 57 deletions.
diff --git a/dist/plugin.js b/dist/plugin.js
@@ -61,22 +61,9 @@
         };
         exports.convertRgbaObjectToString = (rgbaObject) => `rgba(${rgbaObject.r}, ${rgbaObject.g}, ${rgbaObject.b}, ${rgbaObject.a})`;
     });
-    define("src/utilities/filterByNameProperty", ["require", "exports"], function (require, exports) {
+    define("src/extractor/extractColors", ["require", "exports", "src/utilities/convertColor", "src/utilities/roundWithDecimals"], function (require, exports, convertColor_1, roundWithDecimals_2) {
         "use strict";
         Object.defineProperty(exports, "__esModule", { value: true });
-        const excludeUnderscoreStyles = true;
-        const filterByNameProperty = (objects) => {
-            if (excludeUnderscoreStyles === true) {
-                return objects.filter(style => style.name.trim().substr(0, 1) !== '_');
-            }
-            return objects;
-        };
-        exports.default = filterByNameProperty;
-    });
-    define("src/extractor/extractColors", ["require", "exports", "src/utilities/convertColor", "src/utilities/filterByNameProperty", "src/utilities/roundWithDecimals"], function (require, exports, convertColor_1, filterByNameProperty_1, roundWithDecimals_2) {
-        "use strict";
-        Object.defineProperty(exports, "__esModule", { value: true });
-        filterByNameProperty_1 = __importDefault(filterByNameProperty_1);
         roundWithDecimals_2 = __importDefault(roundWithDecimals_2);
         const gradientType = {
             "GRADIENT_LINEAR": "linear",
@@ -119,7 +106,7 @@
         };
         const extractColors = (tokenNodes) => {
             // get all paint styles
-            return filterByNameProperty_1.default(tokenNodes)
+            return tokenNodes
                 // remove images fills from tokens
                 .map(node => {
                 node.paints = node.paints.filter(paint => paint.type !== "IMAGE");
@@ -138,10 +125,9 @@
         };
         exports.default = extractColors;
     });
-    define("src/extractor/extractGrids", ["require", "exports", "src/utilities/filterByNameProperty"], function (require, exports, filterByNameProperty_2) {
+    define("src/extractor/extractGrids", ["require", "exports"], function (require, exports) {
         "use strict";
         Object.defineProperty(exports, "__esModule", { value: true });
-        filterByNameProperty_2 = __importDefault(filterByNameProperty_2);
         const gridValues = (grid) => ({
             pattern: {
                 value: grid.pattern.toLowerCase()
@@ -185,7 +171,7 @@
             } })));
         const extractGrids = (tokenNodes) => {
             // get grid styles
-            return filterByNameProperty_2.default(tokenNodes).map(node => ({
+            return tokenNodes.map(node => ({
                 name: node.name,
                 description: node.description || null,
                 category: 'grid',
@@ -194,10 +180,9 @@
         };
         exports.default = extractGrids;
     });
-    define("src/extractor/extractFonts", ["require", "exports", "src/utilities/filterByNameProperty", "src/utilities/roundWithDecimals"], function (require, exports, filterByNameProperty_3, roundWithDecimals_3) {
+    define("src/extractor/extractFonts", ["require", "exports", "src/utilities/roundWithDecimals"], function (require, exports, roundWithDecimals_3) {
         "use strict";
         Object.defineProperty(exports, "__esModule", { value: true });
-        filterByNameProperty_3 = __importDefault(filterByNameProperty_3);
         roundWithDecimals_3 = __importDefault(roundWithDecimals_3);
         const textDecorations = {
             'NONE': 'none',
@@ -212,7 +197,7 @@
         };
         const extractFonts = (tokenNodes) => {
             // get raw text styles
-            return filterByNameProperty_3.default(tokenNodes).map(node => ({
+            return tokenNodes.map(node => ({
                 name: node.name,
                 description: node.description || undefined,
                 values: {
@@ -263,10 +248,9 @@
         };
         exports.default = extractFonts;
     });
-    define("src/extractor/extractEffects", ["require", "exports", "src/utilities/convertColor", "src/utilities/filterByNameProperty"], function (require, exports, convertColor_2, filterByNameProperty_4) {
+    define("src/extractor/extractEffects", ["require", "exports", "src/utilities/convertColor"], function (require, exports, convertColor_2) {
         "use strict";
         Object.defineProperty(exports, "__esModule", { value: true });
-        filterByNameProperty_4 = __importDefault(filterByNameProperty_4);
         const effectType = {
             "LAYER_BLUR": 'layerBlur',
             "BACKGROUND_BLUR": 'backgroundBlur',
@@ -318,7 +302,7 @@
         });
         const extractEffects = (tokenNodes) => {
             // get effect styles
-            return filterByNameProperty_4.default(tokenNodes).map(node => ({
+            return tokenNodes.map(node => ({
                 name: node.name,
                 description: node.description || null,
                 category: 'effect',
@@ -675,6 +659,14 @@
         };
         exports.default = tokenExport;
     });
+    define("src/utilities/filterByNameProperty", ["require", "exports"], function (require, exports) {
+        "use strict";
+        Object.defineProperty(exports, "__esModule", { value: true });
+        const filterByPropertyName = (prefix = '_', exclude = true) => {
+            return (object) => (object.name.trim().substr(0, prefix.length) !== prefix) === exclude;
+        };
+        exports.default = filterByPropertyName;
+    });
     define("src/utilities/getTokenFrames", ["require", "exports"], function (require, exports) {
         "use strict";
         Object.defineProperty(exports, "__esModule", { value: true });
@@ -713,20 +705,24 @@
         };
         exports.default = getTokenFrames;
     });
-    define("src/utilities/buildFigmaData", ["require", "exports", "src/utilities/getTokenFrames"], function (require, exports, getTokenFrames_1) {
+    define("src/utilities/buildFigmaData", ["require", "exports", "src/utilities/filterByNameProperty", "src/utilities/getTokenFrames"], function (require, exports, filterByNameProperty_1, getTokenFrames_1) {
         "use strict";
         Object.defineProperty(exports, "__esModule", { value: true });
+        filterByNameProperty_1 = __importDefault(filterByNameProperty_1);
         getTokenFrames_1 = __importDefault(getTokenFrames_1);
         const buildFigmaData = (figma) => {
             // use spread operator because the original is readOnly
             const tokenFrames = getTokenFrames_1.default([...figma.root.children]);
+            // filter options
+            const filterPrefix = '_';
+            const filterExclude = true;
             // get data from figma
             return {
                 tokenFrames: tokenFrames,
-                paintStyles: figma.getLocalPaintStyles(),
-                gridStyles: figma.getLocalGridStyles(),
-                textStyles: figma.getLocalTextStyles(),
-                effectStyles: figma.getLocalEffectStyles()
+                paintStyles: figma.getLocalPaintStyles().filter(filterByNameProperty_1.default(filterPrefix, filterExclude)),
+                gridStyles: figma.getLocalGridStyles().filter(filterByNameProperty_1.default(filterPrefix, filterExclude)),
+                textStyles: figma.getLocalTextStyles().filter(filterByNameProperty_1.default(filterPrefix, filterExclude)),
+                effectStyles: figma.getLocalEffectStyles().filter(filterByNameProperty_1.default(filterPrefix, filterExclude)),
             };
         };
         exports.default = buildFigmaData;

diff --git a/src/extractor/extractColors.ts b/src/extractor/extractColors.ts
@@ -2,7 +2,6 @@ import extractorInterface from '../../types/extractorInterface'
 import { colorPropertyInterface, fillValuesType, gradientValuesType } from '../../types/propertyObject'
 import { GradientType, PropertyType } from '../../types/valueTypes'
 import { convertPaintToRgba, roundRgba } from '../utilities/convertColor'
-import filterByNameProperty from '../utilities/filterByNameProperty'
 import roundWithDecimals from '../utilities/roundWithDecimals'
 
 const gradientType = {
@@ -48,7 +47,7 @@ const extractFills = (paint): fillValuesType | gradientValuesType => {
 
 const extractColors: extractorInterface = (tokenNodes: PaintStyle[]): colorPropertyInterface[] => {
   // get all paint styles
-  return filterByNameProperty(tokenNodes)
+  return tokenNodes
   // remove images fills from tokens
   .map(node => {
     node.paints = node.paints.filter(paint => paint.type !== "IMAGE")

diff --git a/src/extractor/extractEffects.ts b/src/extractor/extractEffects.ts
@@ -2,7 +2,6 @@ import extractorInterface from '../../types/extractorInterface'
 import { effectPropertyInterface } from '../../types/propertyObject'
 import { EffectType, UnitTypePixel, PropertyType } from '../../types/valueTypes'
 import { roundRgba } from '../utilities/convertColor'
-import filterByNameProperty from '../utilities/filterByNameProperty'
 
 const effectType = {
   "LAYER_BLUR": 'layerBlur',
@@ -58,7 +57,7 @@ const shadowValues = effect => ({
 
 const extractEffects: extractorInterface = (tokenNodes: EffectStyle[]): effectPropertyInterface[] => {
   // get effect styles
-  return filterByNameProperty(tokenNodes).map(node => ({
+  return tokenNodes.map(node => ({
     name: node.name,
     description: node.description || null,
     category: 'effect',

diff --git a/src/extractor/extractFonts.ts b/src/extractor/extractFonts.ts
@@ -1,7 +1,6 @@
 import extractorInterface from '../../types/extractorInterface'
 import { fontPropertyInterface } from '../../types/propertyObject'
 import { UnitTypePixel, TextCase, TextDecoration, NumericUnitTypes, PropertyType } from '../../types/valueTypes'
-import filterByNameProperty from '../utilities/filterByNameProperty'
 import roundWithDecimals from '../utilities/roundWithDecimals'
 
 const textDecorations = {
@@ -19,7 +18,7 @@ const textCases = {
 
 const extractFonts: extractorInterface = (tokenNodes: TextStyle[]): fontPropertyInterface[] => {
   // get raw text styles
-  return filterByNameProperty(tokenNodes).map(node => ({
+  return tokenNodes.map(node => ({
     name: node.name,
     description: node.description || undefined,
     values: {

diff --git a/src/extractor/extractGrids.ts b/src/extractor/extractGrids.ts
@@ -1,7 +1,6 @@
 import extractorInterface from '../../types/extractorInterface'
 import { gridPropertyInterface } from '../../types/propertyObject'
 import { GridAlignment, GridPattern, PropertyType } from '../../types/valueTypes'
-import filterByNameProperty from '../utilities/filterByNameProperty'
 
 const gridValues = (grid: GridLayoutGrid) => ({
   pattern: {
@@ -58,7 +57,7 @@ const rowColumnValues = (grid: RowsColsLayoutGrid) => ({
 
 const extractGrids: extractorInterface = (tokenNodes: GridStyle[]): gridPropertyInterface[] => {
   // get grid styles
-  return filterByNameProperty(tokenNodes).map(node => ({
+  return tokenNodes.map(node => ({
     name: node.name,
     description: node.description || null,
     category: 'grid',

diff --git a/src/utilities/buildFigmaData.ts b/src/utilities/buildFigmaData.ts
@@ -1,16 +1,20 @@
 import { figmaDataType } from '../../types/figmaDataType'
+import filterByNameProperty from './filterByNameProperty'
 import getTokenFrames from './getTokenFrames'
 
 const buildFigmaData = (figma: PluginAPI): figmaDataType => {
   // use spread operator because the original is readOnly
   const tokenFrames = getTokenFrames([...figma.root.children])
+  // filter options
+  const filterPrefix = '_'
+  const filterExclude = true
   // get data from figma
   return {
     tokenFrames: tokenFrames,
-    paintStyles: figma.getLocalPaintStyles(),
-    gridStyles: figma.getLocalGridStyles(),
-    textStyles: figma.getLocalTextStyles(),
-    effectStyles: figma.getLocalEffectStyles()
+    paintStyles: figma.getLocalPaintStyles().filter(filterByNameProperty(filterPrefix, filterExclude)),
+    gridStyles: figma.getLocalGridStyles().filter(filterByNameProperty(filterPrefix, filterExclude)),
+    textStyles: figma.getLocalTextStyles().filter(filterByNameProperty(filterPrefix, filterExclude)),
+    effectStyles: figma.getLocalEffectStyles().filter(filterByNameProperty(filterPrefix, filterExclude)),
   }
 }
 

diff --git a/src/utilities/filterByNameProperty.ts b/src/utilities/filterByNameProperty.ts
@@ -1,15 +1,10 @@
-const excludeUnderscoreStyles = true
-
 type objectWithNameProperty = {
   name: string,
   [key: string]: any
 }
 
-const filterByNameProperty = (objects: objectWithNameProperty[]): any[] => {
-  if (excludeUnderscoreStyles === true) {
-    return objects.filter(style => style.name.trim().substr(0, 1) !== '_')
-  }
-  return objects
+const filterByPropertyName = (prefix: string = '_', exclude: boolean = true) => {
+  return (object: objectWithNameProperty) => (object.name.trim().substr(0, prefix.length) !== prefix) === exclude
 }
 
-export default filterByNameProperty
+export default filterByPropertyName
diff --git a/tests/files/design-tokens.json b/tests/files/design-tokens.json
@@ -2,7 +2,7 @@
   "sizes": {
     "32": {
       "category": "size",
-      "comment": "32px spacer component",
+      "comment": "32.72px spacer component",
       "value": 32.72,
       "type": "number",
       "unit": "pixel"

diff --git a/tests/integration/data/cssOutput.data.ts b/tests/integration/data/cssOutput.data.ts
@@ -1,6 +1,6 @@
 export default 
 `:root {
-  --sizes-32: 32.72; /* 32px spacer component */
+  --sizes-32: 32.72; /* 32.72px spacer component */
   --sizes-frame: 32;
   --sizes-rect: 32;
   --sizes-shape-in-component: 32; /* Should use 32px not 20 from inside shape */

diff --git a/tests/integration/data/variables.css b/tests/integration/data/variables.css
@@ -1,10 +1,10 @@
 /**
  * Do not edit directly
- * Generated on Fri, 02 Oct 2020 14:06:02 GMT
+ * Generated on Fri, 02 Oct 2020 21:40:41 GMT
  */
 
 :root {
-  --sizes-32: 32.72; /* 32px spacer component */
+  --sizes-32: 32.72; /* 32.72px spacer component */
   --sizes-frame: 32;
   --sizes-rect: 32;
   --sizes-shape-in-component: 32; /* Should use 32px not 20 from inside shape */

diff --git a/tests/unit/filterByNameProperty.test.ts b/tests/unit/filterByNameProperty.test.ts
@@ -2,7 +2,7 @@ import filterByNameProperty from '../../src/utilities/filterByNameProperty'
 
 describe("getTokenStyles", () => {
   test("exclude _ prefix", () => {
-    expect(filterByNameProperty([
+    expect([
       {
         id: "valid",
         type: "PAINT",
@@ -15,7 +15,7 @@ describe("getTokenStyles", () => {
         name: '_invalid',
         description: ''
       }
-    ])).toStrictEqual([
+    ].filter(filterByNameProperty())).toStrictEqual([
       {
         id: "valid",
         type: "PAINT",

diff --git a/types/propertyObject.d.ts b/types/propertyObject.d.ts
@@ -30,7 +30,7 @@ export type fontPropertyInterface = propertyObject & {
     letterSpacing: numericPropertyType,
     lineHeight: {
       value: number | "normal"
-      unit: "pixel" | "percent" | "auto"
+      unit: string // "pixel" | "percent" | "auto"
     },
     paragraphIndent: numericPropertyType,
     paragraphSpacing: numericPropertyType,
@@ -71,7 +71,7 @@ export type gradientValuesType = {
 }
 
 export type colorPropertyInterface = propertyObject & {
-  values: fillValuesType | gradientValuesType
+  values: (fillValuesType | gradientValuesType)[]
 }
 
 export type sizePropertyInterface = propertyObject & {