diff --git a/src/transformer/standardTransformer.ts b/src/transformer/standardTransformer.ts index ffbf2f8..d15eef6 100644 --- a/src/transformer/standardTransformer.ts +++ b/src/transformer/standardTransformer.ts @@ -5,6 +5,7 @@ import roundWithDecimals from '../utilities/roundWithDecimals' import { tokenExtensions } from './tokenExtensions' import config from '@config/config' import { changeNotation } from '@src/utilities/changeNotation' +import { Settings } from '../../types/settings' const lineHeightToDimension = (values): number => { if (values.lineHeight.unit === 'pixel') { @@ -257,13 +258,13 @@ const valueTransformer = { opacity: opacityValueTransformer } -const transformVariable = ({ values, category }): StandardTokenDataInterface => { +const transformVariable = ({ values, category }, settings: Settings): StandardTokenDataInterface => { const refRegEx = /^{[^{}]*}$/ // is alias if (refRegEx.test(values)) { return { type: category as StandardTokenTypes, - value: changeNotation(values, '/', '.') + value: changeNotation(values, '/', '.', settings.nameConversion) } } if (category === 'color') { @@ -297,7 +298,7 @@ const transformer = (token: internalTokenInterface, settings): StandardTokenInte return { name: token.name, description: token.description, - ...transformVariable(token), + ...transformVariable(token, settings), ...tokenExtensions(token, settings) } } diff --git a/src/utilities/changeNotation.ts b/src/utilities/changeNotation.ts index a5c7ba1..90417a3 100644 --- a/src/utilities/changeNotation.ts +++ b/src/utilities/changeNotation.ts @@ -1,3 +1,5 @@ -export const changeNotation = (name, currentDelimiter = '/', desiredDelimiter = '.') => { - return name.split(currentDelimiter).join(desiredDelimiter).toLowerCase() +import transformName from './transformName' + +export const changeNotation = (name: string, currentDelimiter = '/', desiredDelimiter = '.', nameConversion: string = 'default') => { + return name.split(currentDelimiter).map(group => transformName(group, nameConversion)).join(desiredDelimiter).toLowerCase() } diff --git a/src/utilities/getVariables.ts b/src/utilities/getVariables.ts index ba6bd88..59406d4 100644 --- a/src/utilities/getVariables.ts +++ b/src/utilities/getVariables.ts @@ -8,23 +8,25 @@ import { changeNotation } from './changeNotation' import { getVariableTypeByValue } from './getVariableTypeByValue' import roundWithDecimals from './roundWithDecimals' import { Settings } from '@typings/settings' +import transformName from './transformName' -const extractVariable = (variable, value) => { +const extractVariable = (variable, value, settings: Settings) => { let category: tokenCategoryType = 'color' let values = {} if (value.type === 'VARIABLE_ALIAS') { const resolvedAlias = figma.variables.getVariableById(value.id) const collection = figma.variables.getVariableCollectionById(resolvedAlias.variableCollectionId) + const aliasVariable = `${collection.name.toLocaleLowerCase()}/${resolvedAlias.name}` return { name: variable.name, description: variable.description || undefined, exportKey: tokenTypes.variables.key as tokenExportKeyType, category: getVariableTypeByValue(Object.values(resolvedAlias.valuesByMode)[0]), - values: `{${collection.name.toLowerCase()}.${changeNotation(resolvedAlias.name, '/', '.')}}`, + values: `{${changeNotation(aliasVariable, '/', '.', settings.nameConversion)}}`, // this is being stored so we can properly update the design tokens later to account for all // modes when using aliases - aliasCollectionName: collection.name.toLowerCase(), + aliasCollectionName: transformName(collection.name.toLowerCase(), settings.nameConversion), aliasModes: collection.modes } } @@ -61,29 +63,28 @@ const extractVariable = (variable, value) => { } } -const processAliasModes = (variables) => { - return variables.reduce((collector, variable) => { +const processAliasModes = (variables, settings: Settings) => { + return variables.reduce((collector, variableWithModes) => { // nothing needs to be done to variables that have no alias modes, or only one mode - if (!variable.aliasModes || variable.aliasModes.length < 2) { - collector.push(variable) + if (!variableWithModes.aliasModes || variableWithModes.aliasModes.length < 2) { + collector.push(variableWithModes) return collector } - const { aliasModes, aliasCollectionName } = variable + const { aliasModes, aliasCollectionName, ...variableWithoutModes } = variableWithModes - // this was only added for this function to process that data so before we return the variables, we can remove it - delete variable.aliasModes - delete variable.aliasCollectionName - - for (const aliasMode of aliasModes) { - const modeBasedVariable = { ...variable } - modeBasedVariable.values = modeBasedVariable.values.replace(new RegExp(`({${aliasCollectionName}.)`, "i"), `{${aliasCollectionName}.${aliasMode.name}.`) - - collector.push(modeBasedVariable) - } - - return collector + return [ + ...collector, + ...aliasModes.map(aliasMode => { + const aliasModeName = transformName(aliasMode.name, settings.nameConversion) + + return { + ...variableWithoutModes, + values: variableWithoutModes.values.replace(new RegExp(`({${aliasCollectionName}.)`, "i"), `{${aliasCollectionName}.${aliasModeName}.`) + }; + }) + ] }, []) } @@ -99,16 +100,17 @@ export const getVariables = (figma: PluginAPI, settings: Settings) => { // return each mode value as a separate variable return Object.entries(variable.valuesByMode).map(([id, value]) => { // Only add mode if there's more than one - let addMode = settings.modeReference && modes.length > 1 + const addMode = settings.modeReference && modes.length > 1 + const currentMode = addMode && modes.find(({ modeId }) => modeId === id) return { - ...extractVariable(variable, value), + ...extractVariable(variable, value, settings), // name is contstructed from collection, mode and variable name - name: addMode ? `${collection}/${modes.find(({ modeId }) => modeId === id).name}/${variable.name}` : `${collection}/${variable.name}`, + name: currentMode ? `${collection}/${currentMode.name}/${variable.name}` : `${collection}/${variable.name}`, // add mnetadata to extensions extensions: { [config.key.extensionPluginData]: { - mode: settings.modeReference ? modes.find(({ modeId }) => modeId === id).name : undefined, + mode: settings.modeReference ? currentMode.name : undefined, collection: collection, scopes: variable.scopes, [config.key.extensionVariableStyleId]: variable.id, @@ -118,5 +120,5 @@ export const getVariables = (figma: PluginAPI, settings: Settings) => { } }) }) - return settings.modeReference ? processAliasModes(variables.flat()) : variables.flat(); + return settings.modeReference ? processAliasModes(variables.flat(), settings) : variables.flat(); } \ No newline at end of file