adding test to work with new test figma file

README.md

@@ -53,7 +53,8 @@ Styles you don't want to be exported as design tokens can be prefixed with an `_
 The plugin also supports custom tokens for `borders`, `radii` & `spaces`.
 
 - Every custom design token must be within a `Frame` with a name starting with `_tokens`.
-- The token itself has to have a name starting with `sizes`, `borders` or `radii` and has to be a `Rectangle` or `Main Component`. This is so that the plugin can identify what is and what isn't a token.
+- The token itself has to have a name starting with `sizes`, `borders` or `radii` and has to be a `Frame`, `Rectangle` or `Main Component`. This is so that the plugin can identify what is and what isn't a token.
+- The token has to be a direct child of a `_token` frame
 
 If you wanted to create a custom spacer token for an `8px` space you would do the following:
 

dist/plugin.js

@@ -27,19 +27,18 @@
          * @param decimalPlaces int
          */
         const roundWithDecimals = (value, decimalPlaces = 2) => {
+            // exit if value is undefined
+            if (value === undefined) {
+                return;
+            }
             // check for correct inputs
-            if (typeof value === 'number' && typeof decimalPlaces === 'number') {
-                // set decimal places
-                const factorOfTen = Math.pow(10, decimalPlaces);
-                // round result and return
-                return Math.round(value * factorOfTen) / factorOfTen;
+            if (typeof value !== 'number' || typeof decimalPlaces !== 'number') {
+                throw new Error(`Invalid parameters, both value "${value}" (${typeof value}) and decimalPlaces "${decimalPlaces}" (${typeof decimalPlaces}) must be of type number`);
             }
-            // return original value of wrong arguments provided
-            return value;
-        };
-        const round = (number, decimalPlaces) => {
+            // set decimal places
             const factorOfTen = Math.pow(10, decimalPlaces);
-            return Math.round(number * factorOfTen) / factorOfTen;
+            // round result and return
+            return Math.round(value * factorOfTen) / factorOfTen;
         };
         exports.default = roundWithDecimals;
     });
@@ -330,9 +329,10 @@
         };
         exports.default = extractEffects;
     });
-    define("src/extractor/extractSizes", ["require", "exports"], function (require, exports) {
+    define("src/extractor/extractSizes", ["require", "exports", "src/utilities/roundWithDecimals"], function (require, exports, roundWithDecimals_4) {
         "use strict";
         Object.defineProperty(exports, "__esModule", { value: true });
+        roundWithDecimals_4 = __importDefault(roundWithDecimals_4);
         const extractSizes = (tokenNodes) => {
             const nodeName = 'sizes';
             // return as object
@@ -343,12 +343,12 @@
                 category: 'size',
                 values: {
                     width: {
-                        value: node.width,
+                        value: roundWithDecimals_4.default(node.width, 2),
                         unit: 'pixel',
                         type: 'number'
                     },
                     height: {
-                        value: node.height,
+                        value: roundWithDecimals_4.default(node.height, 2),
                         unit: 'pixel',
                         type: 'number'
                     }
@@ -357,10 +357,10 @@
         };
         exports.default = extractSizes;
     });
-    define("src/extractor/extractBorders", ["require", "exports", "src/utilities/convertColor", "src/utilities/roundWithDecimals"], function (require, exports, convertColor_3, roundWithDecimals_4) {
+    define("src/extractor/extractBorders", ["require", "exports", "src/utilities/convertColor", "src/utilities/roundWithDecimals"], function (require, exports, convertColor_3, roundWithDecimals_5) {
         "use strict";
         Object.defineProperty(exports, "__esModule", { value: true });
-        roundWithDecimals_4 = __importDefault(roundWithDecimals_4);
+        roundWithDecimals_5 = __importDefault(roundWithDecimals_5);
         const strokeJoins = {
             'MITER': 'miter',
             'BEVEL': 'bevel',
@@ -402,7 +402,7 @@
                         type: 'string'
                     },
                     strokeMiterAngle: {
-                        value: roundWithDecimals_4.default(node.strokeMiterLimit),
+                        value: roundWithDecimals_5.default(node.strokeMiterLimit),
                         unit: 'degree',
                         type: 'number'
                     },
@@ -423,10 +423,10 @@
         };
         exports.default = extractBorders;
     });
-    define("src/extractor/extractRadii", ["require", "exports", "src/utilities/roundWithDecimals"], function (require, exports, roundWithDecimals_5) {
+    define("src/extractor/extractRadii", ["require", "exports", "src/utilities/roundWithDecimals"], function (require, exports, roundWithDecimals_6) {
         "use strict";
         Object.defineProperty(exports, "__esModule", { value: true });
-        roundWithDecimals_5 = __importDefault(roundWithDecimals_5);
+        roundWithDecimals_6 = __importDefault(roundWithDecimals_6);
         const extractRadii = (tokenNodes) => {
             const nodeName = 'radii';
             // get the type of the corner radius
@@ -475,7 +475,7 @@
                         value: getRadiusType(node.cornerRadius),
                         type: 'string'
                     }, radii: getRadii(node), smoothing: {
-                        value: roundWithDecimals_5.default(node.cornerSmoothing),
+                        value: roundWithDecimals_6.default(node.cornerSmoothing, 2),
                         comment: "Percent as decimal from 0.0 - 1.0",
                         type: 'number'
                     } })
@@ -681,7 +681,8 @@
         // the node types that can be used for tokens
         const tokenNodeTypes = [
             'COMPONENT',
-            'RECTANGLE'
+            'RECTANGLE',
+            'FRAME'
         ];
         // the name that token frames have
         const tokenFrameName = '_tokens';

package.json

@@ -8,9 +8,9 @@
     "url": "https://github.com/lukasoppermann/design-tokens.git"
   },
   "scripts": {
-    "start": "npm run build-watch",
+    "start": "npm run test && npm run build-watch",
     "build": "tsc-bundle tsconfig.json",
-    "build-watch": "npm run test && npm run build -- --watch",
+    "build-watch": "npm run build -- --watch",
     "test": "npm run lint && npm run test:unit && npm run test:integration",
     "test:unit": "jest tests/unit",
     "test:integration": "style-dictionary clean --config ./tests/integration/config.json && style-dictionary build --config ./tests/integration/config.json && jest tests/integration --coverage=false",

src/extractor/extractRadii.ts

@@ -56,7 +56,7 @@ const extractRadii: extractorInterface = (tokenNodes: customTokenNodes[]): radiu
       },
       radii: getRadii(node),
       smoothing: {
-        value: roundWithDecimals(node.cornerSmoothing),
+        value: roundWithDecimals(node.cornerSmoothing, 2),
         comment: "Percent as decimal from 0.0 - 1.0",
         type: 'number' as PropertyType
       }

src/extractor/extractSizes.ts

@@ -2,6 +2,7 @@ import extractorInterface from "../../types/extractorInterface"
 import { sizePropertyInterface } from "../../types/propertyObject"
 import { customTokenNodes } from '../../types/tokenNodeTypes'
 import { UnitTypePixel, PropertyType } from '../../types/valueTypes'
+import roundWithDecimals from '../utilities/roundWithDecimals'
 
 const extractSizes: extractorInterface = (tokenNodes: customTokenNodes[]): sizePropertyInterface[] => {
   const nodeName = 'sizes'
@@ -13,12 +14,12 @@ const extractSizes: extractorInterface = (tokenNodes: customTokenNodes[]): sizeP
     category: 'size',
     values: {
       width: {
-        value: node.width,
+        value: roundWithDecimals(node.width, 2),
         unit: 'pixel' as UnitTypePixel,
         type: 'number' as PropertyType
       },
       height: {
-        value: node.height,
+        value: roundWithDecimals(node.height, 2),
         unit: 'pixel' as UnitTypePixel,
         type: 'number' as PropertyType
       }

src/utilities/getTokenFrames.ts

@@ -1,7 +1,8 @@
 // the node types that can be used for tokens
 const tokenNodeTypes = [
   'COMPONENT',
-  'RECTANGLE'
+  'RECTANGLE',
+  'FRAME'
 ]
 // the name that token frames have
 const tokenFrameName = '_tokens'