@pandacss/generator 0.0.0-dev-20230720154108 → 0.0.0-dev-20230721153104

package/dist/index.js

@@ -624,16 +624,22 @@ function generateCssFn(ctx) {
   return {
     dts: import_outdent4.outdent`
     import type { SystemStyleObject } from '../types'
-    export declare function css(styles: SystemStyleObject): string
+
+    interface CssFunction {
+      (styles: SystemStyleObject): string
+      raw: (styles: SystemStyleObject) => SystemStyleObject
+    }
+
+    export declare const css: CssFunction;
     `,
     js: import_outdent4.outdent`
     ${ctx.file.import("createCss, createMergeCss, hypenateProperty, withoutSpace", "../helpers")}
     ${ctx.file.import("sortConditions, finalizeConditions", "./conditions")}
 
     const classNameMap = ${stringify(utility.entries())}
-    
+
     const shorthands = ${stringify(utility.shorthands)}
-    
+
     const breakpointKeys = ${JSON.stringify(conditions.breakpoints.keys)}
 
     const hasShorthand = ${utility.hasShorthand ? "true" : "false"}
@@ -663,6 +669,7 @@ function generateCssFn(ctx) {
     }
 
     export const css = createCss(context)
+    css.raw = (styles) => styles
 
     export const { mergeCss, assignCss } = createMergeCss(context)
     `
@@ -926,8 +933,13 @@ function generatePattern(ctx) {
 
           type ${upperName}Options = ${upperName}Properties & Omit<SystemStyleObject, keyof ${upperName}Properties ${blocklistType}>
 
+          interface ${upperName}PatternFn {
+            (options?: ${upperName}Options): string
+            raw: (options: ${upperName}Options) => ${upperName}Options
+          }
+
           ${description ? `/** ${description} */` : ""}
-          export declare function ${name}(options?: ${upperName}Options): string
+          export declare const ${name}: ${upperName}PatternFn;
           `}
 
      `,
@@ -941,6 +953,7 @@ transform`)}
     export const ${styleFnName} = (styles = {}) => ${name}Config.transform(styles, { map: mapObject })
 
     export const ${name} = (styles) => css(${styleFnName}(styles))
+    ${name}.raw = (styles) => styles
     `
     };
   });
@@ -1050,6 +1063,7 @@ function generateRecipes(ctx) {
         interface ${upperName}Recipe {
           __type: ${upperName}VariantProps
           (props?: ${upperName}VariantProps): string
+          raw: (props?: ${upperName}VariantProps) => ${upperName}VariantProps
           variantMap: ${upperName}VariantMap
           variantKeys: Array<keyof ${upperName}Variant>
           splitVariantProps<Props extends ${upperName}VariantProps>(props: Props): [${upperName}VariantProps, Pretty<Omit<Props, keyof ${upperName}VariantProps>>]
@@ -1737,12 +1751,16 @@ import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
     jsxType: import_outdent25.outdent`
-import type { ComponentProps, ElementType } from 'react'
+import type { ComponentPropsWithoutRef, ElementType, ElementRef, Ref } from 'react'
 import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
 
 type Dict = Record<string, unknown>
 
+type ComponentProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'ref'> & {
+  ref?: Ref<ElementRef<T>>
+}
+
 export type ${componentName}<T extends ElementType, P extends Dict = {}> = {
   (props: JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>): JSX.Element
   displayName?: string
@@ -1828,10 +1846,14 @@ import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
     jsxType: import_outdent27.outdent`
-import type { ComponentProps, ElementType } from 'react'
+import type { ComponentPropsWithoutRef, ElementType, ElementRef, Ref } from 'react'
 
 type Dict = Record<string, unknown>
 
+type ComponentProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'ref'> & {
+  ref?: Ref<ElementRef<T>>
+}
+
 export type ${componentName}<T extends ElementType> = {
   (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T>) => JSX.Element
   displayName?: string

package/dist/index.mjs

@@ -593,16 +593,22 @@ function generateCssFn(ctx) {
   return {
     dts: outdent4`
     import type { SystemStyleObject } from '../types'
-    export declare function css(styles: SystemStyleObject): string
+
+    interface CssFunction {
+      (styles: SystemStyleObject): string
+      raw: (styles: SystemStyleObject) => SystemStyleObject
+    }
+
+    export declare const css: CssFunction;
     `,
     js: outdent4`
     ${ctx.file.import("createCss, createMergeCss, hypenateProperty, withoutSpace", "../helpers")}
     ${ctx.file.import("sortConditions, finalizeConditions", "./conditions")}
 
     const classNameMap = ${stringify(utility.entries())}
-    
+
     const shorthands = ${stringify(utility.shorthands)}
-    
+
     const breakpointKeys = ${JSON.stringify(conditions.breakpoints.keys)}
 
     const hasShorthand = ${utility.hasShorthand ? "true" : "false"}
@@ -632,6 +638,7 @@ function generateCssFn(ctx) {
     }
 
     export const css = createCss(context)
+    css.raw = (styles) => styles
 
     export const { mergeCss, assignCss } = createMergeCss(context)
     `
@@ -895,8 +902,13 @@ function generatePattern(ctx) {
 
           type ${upperName}Options = ${upperName}Properties & Omit<SystemStyleObject, keyof ${upperName}Properties ${blocklistType}>
 
+          interface ${upperName}PatternFn {
+            (options?: ${upperName}Options): string
+            raw: (options: ${upperName}Options) => ${upperName}Options
+          }
+
           ${description ? `/** ${description} */` : ""}
-          export declare function ${name}(options?: ${upperName}Options): string
+          export declare const ${name}: ${upperName}PatternFn;
           `}
 
      `,
@@ -910,6 +922,7 @@ transform`)}
     export const ${styleFnName} = (styles = {}) => ${name}Config.transform(styles, { map: mapObject })
 
     export const ${name} = (styles) => css(${styleFnName}(styles))
+    ${name}.raw = (styles) => styles
     `
     };
   });
@@ -1019,6 +1032,7 @@ function generateRecipes(ctx) {
         interface ${upperName}Recipe {
           __type: ${upperName}VariantProps
           (props?: ${upperName}VariantProps): string
+          raw: (props?: ${upperName}VariantProps) => ${upperName}VariantProps
           variantMap: ${upperName}VariantMap
           variantKeys: Array<keyof ${upperName}Variant>
           splitVariantProps<Props extends ${upperName}VariantProps>(props: Props): [${upperName}VariantProps, Pretty<Omit<Props, keyof ${upperName}VariantProps>>]
@@ -1706,12 +1720,16 @@ import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
     jsxType: outdent25`
-import type { ComponentProps, ElementType } from 'react'
+import type { ComponentPropsWithoutRef, ElementType, ElementRef, Ref } from 'react'
 import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
 
 type Dict = Record<string, unknown>
 
+type ComponentProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'ref'> & {
+  ref?: Ref<ElementRef<T>>
+}
+
 export type ${componentName}<T extends ElementType, P extends Dict = {}> = {
   (props: JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>): JSX.Element
   displayName?: string
@@ -1797,10 +1815,14 @@ import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
     jsxType: outdent27`
-import type { ComponentProps, ElementType } from 'react'
+import type { ComponentPropsWithoutRef, ElementType, ElementRef, Ref } from 'react'
 
 type Dict = Record<string, unknown>
 
+type ComponentProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'ref'> & {
+  ref?: Ref<ElementRef<T>>
+}
+
 export type ${componentName}<T extends ElementType> = {
   (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T>) => JSX.Element
   displayName?: string

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "0.0.0-dev-20230720154108",
+  "version": "0.0.0-dev-20230721153104",
   "description": "The css generator for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -20,17 +20,17 @@
     "pluralize": "8.0.0",
     "postcss": "8.4.25",
     "ts-pattern": "5.0.1",
-    "@pandacss/core": "0.0.0-dev-20230720154108",
-    "@pandacss/is-valid-prop": "0.0.0-dev-20230720154108",
-    "@pandacss/logger": "0.0.0-dev-20230720154108",
-    "@pandacss/shared": "0.0.0-dev-20230720154108",
-    "@pandacss/token-dictionary": "0.0.0-dev-20230720154108",
-    "@pandacss/types": "0.0.0-dev-20230720154108"
+    "@pandacss/core": "0.0.0-dev-20230721153104",
+    "@pandacss/is-valid-prop": "0.0.0-dev-20230721153104",
+    "@pandacss/logger": "0.0.0-dev-20230721153104",
+    "@pandacss/shared": "0.0.0-dev-20230721153104",
+    "@pandacss/token-dictionary": "0.0.0-dev-20230721153104",
+    "@pandacss/types": "0.0.0-dev-20230721153104"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.30",
     "hookable": "5.5.3",
-    "@pandacss/fixture": "0.0.0-dev-20230720154108"
+    "@pandacss/fixture": "0.0.0-dev-20230721153104"
   },
   "scripts": {
     "prebuild": "tsx scripts/prebuild.ts",