figma-tokens-flattener 1.0.12 → 1.0.14

package/index.js

@@ -49,11 +49,15 @@ function flattenSeedTokens(seedTokens) {
 
         let valueToUse;
 
-        if (tokenObj.hasOwnProperty('value')) {
+        if (Object.hasOwn(tokenObj, 'value') && typeof tokenObj.value === 'object' && tokenObj.value !== null && Object.hasOwn(tokenObj.value, 'style')) {
+            valueToUse = tokenObj.value.style;
+        }
+
+        else if (Object.hasOwn(tokenObj, 'value')) {
             valueToUse = tokenObj.value;
         }
 
-        else if (tokenObj.hasOwnProperty('style') && tokenObj.style && typeof tokenObj.style === 'object' && tokenObj.style.hasOwnProperty('value')) {
+        else if (Object.hasOwn(tokenObj, 'style') && tokenObj.style && typeof tokenObj.style === 'object' && Object.hasOwn(tokenObj.style, 'value')) {
             valueToUse = tokenObj.style.value;
         }
 
@@ -72,6 +76,7 @@ function flattenSeedTokens(seedTokens) {
 
         flattened[tokenName] = valueToUse;
     })
+
     return flattened;
 }
 
@@ -190,138 +195,62 @@ function flattenMapTokensWrapper(mapTokens, seedContext) {
 }
 
 /* Alias */
-function isDropShadowStructure(obj) {
-    if (!obj || typeof obj !== 'object') {
-        return false;
-    }
-
-    const keys = Object.keys(obj);
-    if (keys.length === 0) {
-        return false;
-    }
-
-    for (const key of keys) {
-        if (isNaN(key)) {
-            return false;
-        }
-    }
-
-    const firstShadow = obj[keys[0]];
-    if (!firstShadow || typeof firstShadow !== 'object') {
-        return false;
-    }
-
-    const expectedProps = ['x', 'y', 'blur', 'spread', 'color', 'type'];
-    for (const prop of expectedProps) {
-        if (!firstShadow.hasOwnProperty(prop)) {
-            return false;
-        }
-    }
 
-    for (const coordProp of ['x', 'y', 'blur', 'spread']) {
-        if (!firstShadow[coordProp] || typeof firstShadow[coordProp] !== 'object' || !firstShadow[coordProp].hasOwnProperty('value')) {
-            return false;
-        }
+function processSingleShadow(shadowDef, contextTokens) {
+    if (!shadowDef || typeof shadowDef !== 'object') {
+        return undefined;
     }
 
-    if (!firstShadow.color || typeof firstShadow.color !== 'object' || !firstShadow.color.hasOwnProperty('value')) {
-        return false;
+    if (typeof shadowDef.x === 'undefined' || typeof shadowDef.y === 'undefined' || typeof shadowDef.color === 'undefined') {
+        console.warn('Invalid shadow structure, missing x, y or color:', shadowDef);
+        return undefined;
     }
 
-    if (firstShadow.type?.value !== 'dropShadow' && firstShadow.type !== 'dropShadow') {
-        return false;
-    }
+    const x = flattenMapTokens(shadowDef.x, contextTokens);
+    const y = flattenMapTokens(shadowDef.y, contextTokens);
+    const blur = flattenMapTokens(shadowDef.blur || '0', contextTokens);
+    const spread = flattenMapTokens(shadowDef.spread || '0', contextTokens);
+    const color = flattenMapTokens(shadowDef.color, contextTokens);
 
-    // If the first shadow has passed the test, we will check the rest.
-    for (const key of keys) {
-        const shadow = obj[key];
-        if (!shadow || typeof shadow !== 'object') {
-            return false;
-        }
-        for (const coordProp of ['x', 'y', 'blur', 'spread']) {
-            if (!shadow[coordProp] || typeof shadow[coordProp] !== 'object' || !shadow[coordProp].hasOwnProperty('value')) {
-                return false;
-            }
-        }
-        if (!shadow.color || typeof shadow.color !== 'object' || !shadow.color.hasOwnProperty('value')) {
-            return false;
-        }
-        if (shadow.type?.value !== 'dropShadow' && shadow.type !== 'dropShadow') {
-            return false;
-        }
+    if (typeof x !== 'number' || typeof y !== 'number' || typeof blur !== 'number' || typeof spread !== 'number' || typeof color !== 'string') {
+        console.warn(`Invalid value type in shadow: x=${x}(${typeof x}), y=${y}(${typeof y}), blur=${blur}(${typeof blur}), spread=${spread}(${typeof spread}), color=${color}(${typeof color})`);
+        return undefined;
     }
 
-    return true;
+    // Forming a line for one shadow
+    return `${x}px ${y}px ${blur}px ${spread}px ${color}`;
 }
 
-/* Checks whether the object is a single dropShadow structure. */
-function isSingleDropShadowStructure(obj) {
-    if (!obj || typeof obj !== 'object') {
-        return false;
-    }
-
-    const expectedProps = ['x', 'y', 'blur', 'spread', 'color', 'type'];
-    for (const prop of expectedProps) {
-        if (!obj.hasOwnProperty(prop)) {
-            return false;
-        }
-    }
-
-    for (const coordProp of ['x', 'y', 'blur', 'spread']) {
-        if (!obj[coordProp] || typeof obj[coordProp] !== 'object' || !obj[coordProp].hasOwnProperty('value')) {
-            return false;
-        }
-    }
-
-    if (!obj.color || typeof obj.color !== 'object' || !obj.color.hasOwnProperty('value')) {
-        return false;
+function processBoxShadow(shadowData, contextTokens) {
+    let shadowsArray;
+
+    if (Array.isArray(shadowData)) {
+        // This is an array of shadows
+        shadowsArray = shadowData;
+    } else if (typeof shadowData === 'object' && shadowData !== null) {
+        // This is a single shadow object
+        shadowsArray = [shadowData];
+    } else {
+        console.warn('Expected array or shadow object, received::', shadowData);
+        return undefined;
     }
 
-    if (obj.type?.value !== 'dropShadow' && obj.type !== 'dropShadow') {
-        return false;
-    }
-
-    return true;
-}
-
-/* Collects the boxShadow string from the dropShadow structure (multiple). */
-function buildBoxShadowString(shadowStructure, contextTokens) {
-    const shadowParts = [];
-    const keys = Object.keys(shadowStructure).sort((a, b) => parseInt(a) - parseInt(b));
-
-    for (const key of keys) {
-        const shadowDef = shadowStructure[key];
-        const shadowString = buildSingleShadowString(shadowDef, contextTokens);
+    const processedShadows = [];
+    for (const shadowDef of shadowsArray) {
+        const shadowString = processSingleShadow(shadowDef, contextTokens);
         if (shadowString) {
-            shadowParts.push(shadowString);
+            processedShadows.push(shadowString);
         }
     }
 
-    // Combine all the shadows into one line
-    return shadowParts.join(', ');
-}
-
-/* Collects a row for one shadow from the dropShadow structure. */
-function buildSingleShadowString(singleShadowDef, contextTokens) {
-    // Extracting and calculating the values
-    const x = flattenMapTokens(singleShadowDef.x.value, contextTokens);
-    const y = flattenMapTokens(singleShadowDef.y.value, contextTokens);
-    const blur = flattenMapTokens(singleShadowDef.blur.value, contextTokens);
-    const spread = flattenMapTokens(singleShadowDef.spread.value, contextTokens);
-    const color = flattenMapTokens(singleShadowDef.color.value, contextTokens);
-
-    // Checking if all values are numeric (or color)
-    if (typeof x !== 'number' || typeof y !== 'number' || typeof blur !== 'number' || typeof spread !== 'number' || typeof color !== 'string') {
-        console.warn(`Invalid value type in dropShadow: x=${x}(${typeof x}), y=${y}(${typeof y}), blur=${blur}(${typeof blur}), spread=${spread}(${typeof spread}), color=${color}(${typeof color})`);
-        return undefined; // Returning undefined to skip this shadow
+    if (processedShadows.length === 0) {
+        return undefined;
     }
 
-    // Forming a row for one shadow
-    return `${x}px ${y}px ${blur}px ${spread}px ${color}`;
+    // Combining all the shadow lines into one boxShadow line
+    return processedShadows.join(', ');
 }
 
-
-/* An auxiliary function for converting the alias token structure. */
 function flattenAliasTokens(aliasTokens, contextTokens) {
     const flattened = {};
     if (!aliasTokens || typeof aliasTokens !== 'object') {
@@ -336,36 +265,30 @@ function flattenAliasTokens(aliasTokens, contextTokens) {
             return;
         }
 
-        if (tokenContent && typeof tokenContent === 'object' && tokenContent.hasOwnProperty('value')) {
-            const rawValue = tokenContent.value;
-            const processedValue = flattenMapTokens(rawValue, contextTokens);
-
-            flattened[tokenName] = processedValue;
-        } else {
-            // It can be a complex token, for example, a boxShadow (multiple or single)
-            if (isDropShadowStructure(tokenContent)) {
-
-                // boxShadow structure processing (multiple)
-                const boxShadowValue = buildBoxShadowString(tokenContent, contextTokens);
-                flattened[tokenName] = boxShadowValue;
-
-            } else if (isSingleDropShadowStructure(tokenContent)) {
-                // Processing the structure of a single shadow
-                const singleShadowValue = buildSingleShadowString(tokenContent, contextTokens);
-
-                if (singleShadowValue) {
-                    flattened[tokenName] = singleShadowValue;
+        if (tokenContent && typeof tokenContent === 'object' && Object.hasOwn(tokenContent, 'value')) {
+            if (
+                (Array.isArray(tokenContent.value) && tokenContent.value.length > 0) ||
+                (typeof tokenContent.value === 'object' && tokenContent.value !== null && Object.hasOwn(tokenContent.value, 'x'))
+            ) {
+                const boxShadowValue = processBoxShadow(tokenContent.value, contextTokens);
+                if (boxShadowValue !== undefined) {
+                    flattened[tokenName] = boxShadowValue;
                 } else {
-                    console.warn(`Couldn't form a line for a single shadow ${tokenName}:`, tokenContent);
+                    console.warn(`${tokenName}: The boxShadow structure could not be processed.`, tokenContent.value);
                 }
-            } else {
-                console.warn(`Unsupported structure for alias token ${tokenName}:`, tokenContent);
             }
+            else {
+                const rawValue = tokenContent.value;
+                const processedValue = flattenMapTokens(rawValue, contextTokens);
+                flattened[tokenName] = processedValue;
+            }
+        } else {
+            console.warn(`Unsupported structure for alias token ${tokenName}:`, tokenContent);
         }
-    })
+    });
 
     return flattened;
-};
+}
 
 function checkAndResolveVarValues(contextTokens) {
     const resolved = {};
@@ -405,8 +328,8 @@ function flattenDefaultValueTokens(defaultTokens) {
 
     const extractRefKey = (value) => {
         if (typeof value !== 'string') return null;
-        const tokenMatch  = value.match(/^\s*\{([^}]+)\}\s*$/);
-        return tokenMatch  ? tokenMatch [1].trim() : null;
+        const tokenMatch = value.match(/^\s*\{([^}]+)\}\s*$/);
+        return tokenMatch ? tokenMatch[1].trim() : null;
     };
 
     // 2) Iterative resolution of "{key}" links
@@ -443,11 +366,11 @@ function flattenDefaultValueTokens(defaultTokens) {
     }
 
     // 3) Returning numeric values only
-    const numericTokens  = {};
+    const numericTokens = {};
     for (const [tokenName, tokenValue] of Object.entries(resolved)) {
-        if (typeof tokenValue === 'number' && Number.isFinite(tokenValue)) numericTokens [tokenName] = tokenValue;
+        if (typeof tokenValue === 'number' && Number.isFinite(tokenValue)) numericTokens[tokenName] = tokenValue;
     }
-    return numericTokens ;
+    return numericTokens;
 }
 
 /* Components */
@@ -476,23 +399,7 @@ function flattenComponentsTokens(componentsTokens, contextTokens) {
                 const processedValue = flattenMapTokens(rawValue, contextTokens);
                 processedComponentTokens[tokenName] = processedValue;
             } else {
-                // It can be a token with a nested structure, for example, lineType.style.value
-                if (tokenDefinition && typeof tokenDefinition === 'object' && tokenDefinition.style && typeof tokenDefinition.style === 'object' && Object.hasOwn(tokenDefinition.style, 'value')) {
-                    const rawValue = tokenDefinition.style.value;
-
-                    const processedValue = flattenMapTokens(rawValue, contextTokens);
-                    processedComponentTokens[tokenName] = processedValue;
-
-                } else {
-                    if (isDropShadowStructure(tokenDefinition)) {
-                        // Processing of the boxShadowSecondary structure (multiple)
-                        const boxShadowValue = buildBoxShadowString(tokenDefinition, contextTokens);
-                        processedComponentTokens[tokenName] = boxShadowValue;
-
-                    } else {
-                        console.warn(`Unsupported token structure ${componentName}.${tokenName}:`, tokenDefinition);
-                    }
-                }
+                console.warn(`Unsupported token structure ${componentName}.${tokenName}:`, tokenDefinition);
             }
         })
 
@@ -512,7 +419,7 @@ function flatten() {
         config = JSON.parse(configContent);
     } catch (configError) {
         if (configError.code === 'ENOENT') {
-            console.log('The configuration file is simple-token-transformer-config.json was not found. We use the path - the root directory.');
+            console.log('The configuration file is figma-tokens-flattener-config.json was not found. We use the path - the root directory.');
         } else {
             console.error('Error when reading or parsing the configuration file:', configError.message);
             // Continue with an empty configuration, by default

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "figma-tokens-flattener",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "description": "A tool for transforming Ant Design tokens from Tokens Studio for Figma (Single file) into flat style mappings for light and dark themes.",
   "main": "index.js",
     "bin": {
     "figma-tokens-flattener": "index.js"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "test:local": "node index.js"
   },
   "keywords": ["figma", "design-tokens", "tokens", "json", "flattener", "transformer", "parser"],
   "author": "Yurii Sudarskii",