feat: use token.name instead of static {category}.{prop} syntax (#2270

)
chakra-ui · Feb 27, 2024 · 34d94cf · 34d94cf
1 parent fde37d8
commit 34d94cf
Show file tree

Hide file tree

Showing 5 changed files with 2,101 additions and 35 deletions.
diff --git a/.changeset/bright-stingrays-drum.md b/.changeset/bright-stingrays-drum.md
@@ -0,0 +1,33 @@
+---
+'@pandacss/token-dictionary': patch
+'@pandacss/generator': patch
+'@pandacss/core': patch
+---
+
+Unify the token path syntax when using `formatTokenName`
+
+Example with the following config:
+
+```ts
+import { defineConfig } from '@pandacss/dev'
+
+export default defineConfig({
+  hooks: {
+    'tokens:created': ({ configure }) => {
+      configure({
+        formatTokenName: (path: string[]) => '$' + path.join('-'),
+      })
+    },
+  },
+})
+```
+
+Will now allow you to use the following syntax for token path:
+
+```diff
+- css({ boxShadow: '10px 10px 10px {colors.$primary}' })
++ css({ boxShadow: '10px 10px 10px {$colors-primary}' })
+
+- token.var('colors.$primary')
++ token.var('$colors-black')
+```
diff --git a/packages/core/__tests__/rule-processor.test.ts b/packages/core/__tests__/rule-processor.test.ts
@@ -86,8 +86,8 @@ describe('rule processor', () => {
     const result = css(
       {
         margin: '$2',
-        p: '{spacing.$2}',
-        mx: 'token(spacing.$2)',
+        p: '{$spacing-2}',
+        mx: 'token($spacing-2)',
         my: '-$2',
         color: '$blue-300',
       },
@@ -104,8 +104,8 @@ describe('rule processor', () => {
     expect(result.className).toMatchInlineSnapshot(`
       [
         "m_\\$2",
-        "p_\\{spacing\\.\\$2\\}",
-        "mx_token\\(spacing\\.\\$2\\)",
+        "p_\\{\\$spacing-2\\}",
+        "mx_token\\(\\$spacing-2\\)",
         "my_-\\$2",
         "text_\\$blue-300",
       ]
@@ -116,11 +116,11 @@ describe('rule processor', () => {
           margin: var(--spacing-2);
       }
 
-        .p_\\{spacing\\.\\$2\\} {
+        .p_\\{\\$spacing-2\\} {
           padding: var(--spacing-2);
       }
 
-        .mx_token\\(spacing\\.\\$2\\) {
+        .mx_token\\(\\$spacing-2\\) {
           margin-inline: var(--spacing-2);
       }
 
@@ -135,6 +135,35 @@ describe('rule processor', () => {
     `)
   })
 
+  test('token() with formatTokenName', () => {
+    const result = css(
+      {
+        mx: 'token($spacing-2)',
+      },
+      {
+        hooks: {
+          'tokens:created': ({ configure }) => {
+            configure({
+              formatTokenName: (path: string[]) => '$' + path.join('-'),
+            })
+          },
+        },
+      },
+    )
+    expect(result.className).toMatchInlineSnapshot(`
+      [
+        "mx_token\\(\\$spacing-2\\)",
+      ]
+    `)
+    expect(result.css).toMatchInlineSnapshot(`
+      "@layer utilities {
+        .mx_token\\(\\$spacing-2\\) {
+          margin-inline: var(--spacing-2);
+      }
+      }"
+    `)
+  })
+
   test('simple - hash: true', () => {
     const result = css(
       {