fix references (#704)

* fix references * changeset
primer · Jul 24, 2023 · aeb3b30 · aeb3b30
1 parent 3532f60
commit aeb3b30
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 26 deletions.
diff --git a/.changeset/empty-ties-begin.md b/.changeset/empty-ties-begin.md
@@ -0,0 +1,5 @@
+---
+'@primer/primitives': patch
+---
+
+fix for figma references
diff --git a/src/formats/jsonFigma.ts b/src/formats/jsonFigma.ts
@@ -1,20 +1,22 @@
 import StyleDictionary from 'style-dictionary'
 import {format} from 'prettier'
 import type {FormatterArguments} from 'style-dictionary/types/Format'
+import {transformNamePathToFigma} from '../transformers/namePathToFigma'
 const {sortByReference} = StyleDictionary.formatHelpers
 
-const replaceRegEx = /(?:{|})/g
-
 const isReference = (string: string): boolean => /^\{([^\\]*)\}$/g.test(string)
 
-const getReference = (dictionary: StyleDictionary.Dictionary, refString: string) => {
+const getReference = (
+  dictionary: StyleDictionary.Dictionary,
+  refString: string,
+  platform: StyleDictionary.Platform,
+) => {
   if (isReference(refString)) {
     // retrieve reference token
     const refToken = dictionary.getReferences(refString)[0]
     // return full reference
-    return [refToken.attributes?.collection, ...refToken.path].filter(Boolean).join('/')
+    return [refToken.attributes?.collection, transformNamePathToFigma(refToken, platform)].filter(Boolean).join('/')
   }
-  return undefined
 }
 
 const getFigmaType = (type: string): string => {
@@ -31,25 +33,20 @@ const getFigmaType = (type: string): string => {
  * @param arguments [FormatterArguments](https://github.com/amzn/style-dictionary/blob/main/types/Format.d.ts)
  * @returns formatted `string`
  */
-export const jsonFigma: StyleDictionary.Formatter = ({
-  dictionary,
-  file: _file,
-  platform: _platform,
-}: FormatterArguments) => {
+export const jsonFigma: StyleDictionary.Formatter = ({dictionary, file: _file, platform}: FormatterArguments) => {
   // sort tokens by reference
   const tokens = dictionary.allTokens.sort(sortByReference(dictionary)).map(token => {
     const {attributes, value, $type, comment: description, original, alpha, mix} = token
     const {mode, collection, scopes} = attributes || {}
-    const tokenName = token.name.replace(replaceRegEx, '')
     return {
-      name: tokenName,
+      name: token.name,
       value,
       type: getFigmaType($type),
       alpha,
       isMix: mix ? true : undefined,
       description,
-      refId: [collection, tokenName].filter(Boolean).join('/'),
-      reference: getReference(dictionary, original.value),
+      refId: [collection, token.name].filter(Boolean).join('/'),
+      reference: getReference(dictionary, original.value, platform),
       collection,
       mode,
       scopes,

diff --git a/src/transformers/namePathToFigma.ts b/src/transformers/namePathToFigma.ts
@@ -1,5 +1,21 @@
 import type StyleDictionary from 'style-dictionary'
 
+export const transformNamePathToFigma = (
+  token: StyleDictionary.TransformedToken,
+  options?: StyleDictionary.Platform,
+): string => {
+  let pathArray = token.path
+  if (['fgColor', 'borderColor', 'bgColor'].includes(pathArray[0]) && pathArray.length === 3) {
+    pathArray = [pathArray[0], `${pathArray[1]}-${pathArray[2]}`]
+  }
+  return (
+    [options?.prefix, ...pathArray]
+      // remove undefined if exists
+      .filter((part: unknown): part is string => typeof part === 'string')
+      .join('/')
+  )
+}
+
 /**
  * @description converts the [TransformedToken's](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts) `.path` array to a specific figma name
  * @type name transformer — [StyleDictionary.NameTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
@@ -8,16 +24,5 @@ import type StyleDictionary from 'style-dictionary'
  */
 export const namePathToFigma: StyleDictionary.Transform = {
   type: `name`,
-  transformer: (token: StyleDictionary.TransformedToken, options?: StyleDictionary.Platform): string => {
-    let pathArray = token.path
-    if (['fgColor', 'borderColor', 'bgColor'].includes(pathArray[0]) && pathArray.length === 3) {
-      pathArray = [pathArray[0], `${pathArray[1]}-${pathArray[2]}`]
-    }
-    return (
-      [options?.prefix, ...pathArray]
-        // remove undefined if exists
-        .filter((part: unknown): part is string => typeof part === 'string')
-        .join('/')
-    )
-  },
+  transformer: transformNamePathToFigma,
 }