fix: css.raw typings (#2561)

chakra-ui · May 4, 2024 · 99be6f1 · 99be6f1
1 parent 7223282
commit 99be6f1
Show file tree

Hide file tree

Showing 6 changed files with 463 additions and 16 deletions.
diff --git a/.changeset/violet-birds-tie.md b/.changeset/violet-birds-tie.md
@@ -0,0 +1,6 @@
+---
+'@pandacss/generator': patch
+---
+
+Fix `css.raw` typings after recent ([0.39.0](https://github.com/chakra-ui/panda/discussions/2560)) changes allowing
+arrays of `SystemStyleObject`
diff --git a/packages/generator/__tests__/generate-css-fn.test.ts b/packages/generator/__tests__/generate-css-fn.test.ts
@@ -10,16 +10,20 @@ describe('generate css-fn', () => {
 
       type Styles = SystemStyleObject | undefined | null | false
 
+      interface CssRawFunction {
+        (styles: Styles): SystemStyleObject
+        (styles: Styles[]): SystemStyleObject
+        (...styles: Array<Styles | Styles[]>): SystemStyleObject
+        (styles: Styles): SystemStyleObject
+      }
+
       interface CssFunction {
         (styles: Styles): string
         (styles: Styles[]): string
         (...styles: Array<Styles | Styles[]>): string
         (styles: Styles): string
 
-        raw: (styles: Styles) => string
-        raw: (styles: Styles[]) => string
-        raw: (...styles: Array<Styles | Styles[]>) => string
-        raw: (styles: Styles) => string
+        raw: CssRawFunction
       }
 
       export declare const css: CssFunction;",
@@ -96,16 +100,20 @@ describe('generate css-fn', () => {
 
       type Styles = SystemStyleObject | undefined | null | false
 
+      interface CssRawFunction {
+        (styles: Styles): SystemStyleObject
+        (styles: Styles[]): SystemStyleObject
+        (...styles: Array<Styles | Styles[]>): SystemStyleObject
+        (styles: Styles): SystemStyleObject
+      }
+
       interface CssFunction {
         (styles: Styles): string
         (styles: Styles[]): string
         (...styles: Array<Styles | Styles[]>): string
         (styles: Styles): string
 
-        raw: (styles: Styles) => string
-        raw: (styles: Styles[]) => string
-        raw: (...styles: Array<Styles | Styles[]>) => string
-        raw: (styles: Styles) => string
+        raw: CssRawFunction
       }
 
       export declare const css: CssFunction;",

diff --git a/packages/generator/src/artifacts/js/css-fn.ts b/packages/generator/src/artifacts/js/css-fn.ts
@@ -12,16 +12,20 @@ export function generateCssFn(ctx: Context) {
 
     type Styles = SystemStyleObject | undefined | null | false
 
+    interface CssRawFunction {
+      (styles: Styles): SystemStyleObject
+      (styles: Styles[]): SystemStyleObject
+      (...styles: Array<Styles | Styles[]>): SystemStyleObject
+      (styles: Styles): SystemStyleObject
+    }
+
     interface CssFunction {
       (styles: Styles): string
       (styles: Styles[]): string
       (...styles: Array<Styles | Styles[]>): string
       (styles: Styles): string
 
-      raw: (styles: Styles) => string
-      raw: (styles: Styles[]) => string
-      raw: (...styles: Array<Styles | Styles[]>) => string
-      raw: (styles: Styles) => string
+      raw: CssRawFunction
     }
 
     export declare const css: CssFunction;

diff --git a/packages/studio/styled-system/css/css.d.ts b/packages/studio/styled-system/css/css.d.ts
@@ -3,16 +3,20 @@ import type { SystemStyleObject } from '../types/index';
 
 type Styles = SystemStyleObject | undefined | null | false
 
+interface CssRawFunction {
+  (styles: Styles): SystemStyleObject
+  (styles: Styles[]): SystemStyleObject
+  (...styles: Array<Styles | Styles[]>): SystemStyleObject
+  (styles: Styles): SystemStyleObject
+}
+
 interface CssFunction {
   (styles: Styles): string
   (styles: Styles[]): string
   (...styles: Array<Styles | Styles[]>): string
   (styles: Styles): string
 
-  raw: (styles: Styles) => string
-  raw: (styles: Styles[]) => string
-  raw: (...styles: Array<Styles | Styles[]>) => string
-  raw: (styles: Styles) => string
+  raw: CssRawFunction
 }
 
 export declare const css: CssFunction;
diff --git a/sandbox/codegen/__tests__/css.test.ts b/sandbox/codegen/__tests__/css.test.ts
@@ -123,3 +123,243 @@ describe('css', () => {
     expect(className).toMatchInlineSnapshot(`"fs_12px bg_red.600"`)
   })
 })
+
+describe('css.raw', () => {
+  test('native CSS prop and value', () => {
+    const styles = css.raw({ display: 'flex' })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "display": "flex",
+      }
+    `)
+  })
+
+  test('token value', () => {
+    const styles = css.raw({ color: 'blue.300' })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "color": "blue.300",
+      }
+    `)
+  })
+
+  test('utility prop', () => {
+    const styles = css.raw({ srOnly: true })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "srOnly": true,
+      }
+    `)
+  })
+
+  test('shorthand prop', () => {
+    const styles = css.raw({ bg: 'red' })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "bg": "red",
+      }
+    `)
+  })
+
+  test('object condition prop', () => {
+    const styles = css.raw({ bg: { _hover: 'yellow.100' } })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "bg": {
+          "_hover": "yellow.100",
+        },
+      }
+    `)
+  })
+
+  test('condition prop', () => {
+    const styles = css.raw({ _hover: { bg: 'yellow.200' } })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "_hover": {
+          "bg": "yellow.200",
+        },
+      }
+    `)
+  })
+
+  test('nested condition prop', () => {
+    const styles = css.raw({ _hover: { _dark: { bg: 'pink' } } })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "_hover": {
+          "_dark": {
+            "bg": "pink",
+          },
+        },
+      }
+    `)
+  })
+
+  test('arbitrary value', () => {
+    const styles = css.raw({ color: '#fff' })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "color": "#fff",
+      }
+    `)
+  })
+
+  test('arbitrary selector', () => {
+    const styles = css.raw({ ['&:data-panda']: { display: 'flex' } })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "&:data-panda": {
+          "display": "flex",
+        },
+      }
+    `)
+  })
+
+  test('responsive condition', () => {
+    const styles = css.raw({ sm: { bg: 'purple' } })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "sm": {
+          "bg": "purple",
+        },
+      }
+    `)
+  })
+
+  test('responsive array syntax prop', () => {
+    const styles = css.raw({ bg: ['cyan.100', 'cyan.200', null, undefined, 'cyan.300'] })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "bg": [
+          "cyan.100",
+          "cyan.200",
+          null,
+          undefined,
+          "cyan.300",
+        ],
+      }
+    `)
+  })
+
+  test('using inline token helper - in value', () => {
+    const styles = css.raw({ border: '1px solid token(colors.blue.400)' })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "border": "1px solid token(colors.blue.400)",
+      }
+    `)
+  })
+
+  test('using inline token helper - in condition', () => {
+    const styles = css.raw({ '@media screen and (min-width: token(sizes.4xl))': { bg: 'blue.500' } })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "@media screen and (min-width: token(sizes.4xl))": {
+          "bg": "blue.500",
+        },
+      }
+    `)
+  })
+
+  test('nested condition prop with array syntax', () => {
+    const styles = css.raw({ _hover: { _dark: { bg: ['pink.100', 'pink.200'] } } })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "_hover": {
+          "_dark": {
+            "bg": [
+              "pink.100",
+              "pink.200",
+            ],
+          },
+        },
+      }
+    `)
+  })
+
+  test('same prop', () => {
+    const styles = css.raw({ bgColor: 'red.100', backgroundColor: 'red.200' })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "backgroundColor": "red.200",
+        "bgColor": "red.100",
+      }
+    `)
+
+    const styles2 = css.raw({ backgroundColor: 'red.300', bgColor: 'red.400' })
+
+    expect(styles2).toMatchInlineSnapshot(`
+      {
+        "backgroundColor": "red.300",
+        "bgColor": "red.400",
+      }
+    `)
+  })
+
+  test('merging styles', () => {
+    const styles = css.raw({ fontSize: 'sm', bgColor: 'red.500' }, { backgroundColor: 'red.600' })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "backgroundColor": "red.600",
+        "fontSize": "sm",
+      }
+    `)
+  })
+
+  test('merging styles with nested conditions', () => {
+    const styles = css.raw({ fontSize: 'sm', _hover: { color: 'green.100' } }, { _hover: { color: 'green.200' } })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "_hover": {
+          "color": "green.200",
+        },
+        "fontSize": "sm",
+      }
+    `)
+  })
+
+  test('merging styles with object condition prop', () => {
+    const styles = css.raw({ fontSize: 'md' }, { fontSize: { base: 'lg', sm: 'xs' } })
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "fontSize": {
+          "base": "lg",
+          "sm": "xs",
+        },
+      }
+    `)
+  })
+
+  test('merging styles with array item', () => {
+    const styles = css.raw({ fontSize: 'sm', bgColor: 'red.500' }, [
+      { backgroundColor: 'red.600' },
+      { fontSize: '12px' },
+    ])
+
+    expect(styles).toMatchInlineSnapshot(`
+      {
+        "backgroundColor": "red.600",
+        "fontSize": "12px",
+      }
+    `)
+  })
+})