Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[fix] update variable values to include name conversion #301

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
[fix] update variable values to include name conversion
burn2delete committed Jan 20, 2024

Unverified

This commit is not signed, but one or more authors requires that any commit attributed to them is signed.
commit 6e20bcb3163c5392672e07035b6f98ebf04a235a
7 changes: 4 additions & 3 deletions src/transformer/standardTransformer.ts
Original file line number Diff line number Diff line change
@@ -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)
}
}
6 changes: 4 additions & 2 deletions src/utilities/changeNotation.ts
Original file line number Diff line number Diff line change
@@ -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()
}
6 changes: 3 additions & 3 deletions src/utilities/getVariables.ts
Original file line number Diff line number Diff line change
@@ -9,7 +9,7 @@ import { getVariableTypeByValue } from './getVariableTypeByValue'
import roundWithDecimals from './roundWithDecimals'
import { Settings } from '@typings/settings'

const extractVariable = (variable, value) => {
const extractVariable = (variable, value, settings: Settings) => {
let category: tokenCategoryType = 'color'
let values = {}
if (value.type === 'VARIABLE_ALIAS') {
@@ -20,7 +20,7 @@ const extractVariable = (variable, value) => {
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: `{${collection.name.toLowerCase()}.${changeNotation(resolvedAlias.name, '/', '.', settings.nameConversion)}}`,

// this is being stored so we can properly update the design tokens later to account for all
// modes when using aliases
@@ -101,7 +101,7 @@ export const getVariables = (figma: PluginAPI, settings: Settings) => {
// Only add mode if there's more than one
let addMode = settings.modeReference && modes.length > 1
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}`,