figma-tokens-flattener 1.0.12 → 1.0.13

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,145 +195,81 @@ 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;
+function processSingleShadow(shadowDef, contextTokens) {
+    if (!shadowDef || typeof shadowDef !== 'object') {
+        console.warn('  processSingleShadow: Ожидаемый объект тени, получен:', shadowDef);
+        return undefined;
     }
 
-    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;
-        }
+    // Проверим наличие необходимых свойств (используем 'in' или 'hasOwn' как рекомендовал тимлид)
+    // Но для простоты и т.к. структура известна, можно просто проверить тип.
+    // Проверим, есть ли хотя бы 'x', 'y', 'color' как минимум.
+    if (typeof shadowDef.x === 'undefined' || typeof shadowDef.y === 'undefined' || typeof shadowDef.color === 'undefined') {
+        console.warn('  processSingleShadow: Неверная структура тени, отсутствуют x, y или color:', shadowDef);
+        return undefined;
     }
 
-    if (!firstShadow.color || typeof firstShadow.color !== 'object' || !firstShadow.color.hasOwnProperty('value')) {
-        return false;
-    }
-
-    if (firstShadow.type?.value !== 'dropShadow' && firstShadow.type !== 'dropShadow') {
-        return false;
-    }
+    // Извлекаем и обрабатываем значения
+    // Используем flattenMapTokens для разрешения ссылок и вычисления выражений
+    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;
-        }
+    // Проверяем, все ли значения числовые (или цвет для color)
+    // flattenMapTokens может вернуть число, строку или undefined
+    if (typeof x !== 'number' || typeof y !== 'number' || typeof blur !== 'number' || typeof spread !== 'number' || typeof color !== 'string') {
+        console.warn(`    Неверный тип значения в тени: x=${x}(${typeof x}), y=${y}(${typeof y}), blur=${blur}(${typeof blur}), spread=${spread}(${typeof spread}), color=${color}(${typeof color})`);
+        return undefined; // Возвращаем undefined, чтобы пропустить эту тень
     }
 
-    return true;
+    // Формируем строку для одной тени
+    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;
-    }
-
-    if (obj.type?.value !== 'dropShadow' && obj.type !== 'dropShadow') {
-        return false;
+function processBoxShadow(shadowData, contextTokens) {
+    let shadowsArray;
+
+    if (Array.isArray(shadowData)) {
+        // Это массив теней
+        shadowsArray = shadowData;
+    } else if (typeof shadowData === 'object' && shadowData !== null) {
+        // Это одиночный объект тени, обернём в массив для унификации
+        shadowsArray = [shadowData];
+    } else {
+        console.warn('  processBoxShadow: Ожидаемый массив или объект тени, получен:', shadowData);
+        return undefined;
     }
 
-    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) {
+        console.warn('  processBoxShadow: Не удалось обработать ни одной тени.');
+        return undefined;
     }
 
-    // Forming a row for one shadow
-    return `${x}px ${y}px ${blur}px ${spread}px ${color}`;
+    // Объединяем все строки теней в одну строку boxShadow
+    return processedShadows.join(', ');
 }
 
-
-/* An auxiliary function for converting the alias token structure. */
 function flattenAliasTokens(aliasTokens, contextTokens) {
     const flattened = {};
     if (!aliasTokens || typeof aliasTokens !== 'object') {
-        console.warn('An object with alias tokens was expected, but received:', aliasTokens);
+        console.warn('  Ожидался объект с alias токенами, но получен:', aliasTokens);
         return flattened;
     }
 
+    console.log('    Вычисление alias токенов...');
+
+    // --- ЗАМЕНЕНО: for...in на Object.keys().forEach() ---
     Object.keys(aliasTokens).forEach((tokenName) => {
         const tokenContent = aliasTokens[tokenName];
 
@@ -336,36 +277,225 @@ 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;
+        // Проверяем, что объект имеет ожидаемую структуру { "value": "..." }
+        // --- ИСПРАВЛЕНО: Используем Object.hasOwn вместо hasOwnProperty ---
+        if (tokenContent && typeof tokenContent === 'object' && Object.hasOwn(tokenContent, 'value')) {
+            // --- НОВАЯ ПРОВЕРКА: boxShadow (новый формат) ---
+            // Проверим, является ли value массивом или объектом с x, y, color
+            if (
+                (Array.isArray(tokenContent.value) && tokenContent.value.length > 0) ||
+                (typeof tokenContent.value === 'object' && tokenContent.value !== null && Object.hasOwn(tokenContent.value, 'x'))
+            ) {
+                // Обработка новой структуры boxShadow (одиночный или множественный)
+                const boxShadowValue = processBoxShadow(tokenContent.value, contextTokens);
+                if (boxShadowValue !== undefined) {
+                    flattened[tokenName] = boxShadowValue;
+                    console.log(`      ${tokenName}: (boxShadow array/object structure) -> ${boxShadowValue}`);
                 } else {
-                    console.warn(`Couldn't form a line for a single shadow ${tokenName}:`, tokenContent);
+                    console.warn(`      ${tokenName}: Не удалось обработать boxShadow структуру.`, tokenContent.value);
+                    // Можно добавить как есть или пропустить
+                    // flattened[tokenName] = tokenContent.value;
                 }
-            } else {
-                console.warn(`Unsupported structure for alias token ${tokenName}:`, tokenContent);
             }
+            // --- КОНЕЦ НОВОЙ ПРОВЕРКИ ---
+            else {
+                // Это стандартный токен: { "value": "..." }
+                const rawValue = tokenContent.value;
+                // Обрабатываем значение с помощью вспомогательной функции, аналогичной для map
+                // Она должна уметь разрешать ссылки и вычислять выражения
+                const processedValue = flattenMapTokens(rawValue, contextTokens);
+                flattened[tokenName] = processedValue;
+                // console.log(`      ${tokenName}: ${rawValue} -> ${processedValue}`); // Опционально: подробное логирование
+            }
+        } else {
+            // --- УБРАНО: Проверки на { "style": { "value": ... } } ---
+            // Неизвестная структура, просто добавим как есть или выведем предупреждение
+            console.warn(`    Неподдерживаемая структура для alias токена ${tokenName}:`, tokenContent);
+            // Можно добавить как есть, если нужно сохранить:
+            // flattened[tokenName] = tokenContent;
         }
-    })
-
+    });
+    // --- КОНЕЦ ИЗМЕНЕНИЯ: Закрывающая скобка для forEach ---
+    console.log(`    Вычислено ${Object.keys(flattened).length} alias токенов.`);
     return flattened;
-};
+}
+
+// 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;
+//         }
+//     }
+
+//     if (!firstShadow.color || typeof firstShadow.color !== 'object' || !firstShadow.color.hasOwnProperty('value')) {
+//         return false;
+//     }
+
+//     if (firstShadow.type?.value !== 'dropShadow' && firstShadow.type !== 'dropShadow') {
+//         return false;
+//     }
+
+//     // 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;
+//         }
+//     }
+
+//     return true;
+// }
+
+// /* 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;
+//     }
+
+//     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);
+//         if (shadowString) {
+//             shadowParts.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
+//     }
+
+//     // Forming a row for one shadow
+//     return `${x}px ${y}px ${blur}px ${spread}px ${color}`;
+// }
+
+
+// /* An auxiliary function for converting the alias token structure. */
+// function flattenAliasTokens(aliasTokens, contextTokens) {
+//     const flattened = {};
+//     if (!aliasTokens || typeof aliasTokens !== 'object') {
+//         console.warn('An object with alias tokens was expected, but received:', aliasTokens);
+//         return flattened;
+//     }
+
+//     Object.keys(aliasTokens).forEach((tokenName) => {
+//         const tokenContent = aliasTokens[tokenName];
+
+//         if (tokenName[0] === tokenName[0].toUpperCase()) {
+//             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;
+//                 } else {
+//                     console.warn(`Couldn't form a line for a single shadow ${tokenName}:`, tokenContent);
+//                 }
+//             } else {
+//                 console.warn(`Unsupported structure for alias token ${tokenName}:`, tokenContent);
+//             }
+//         }
+//     })
+
+//     return flattened;
+// };
 
 function checkAndResolveVarValues(contextTokens) {
     const resolved = {};
@@ -405,8 +535,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 +573,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 +606,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 +626,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.13",
   "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",