@pandacss/node 0.0.0-dev-20230117105201 → 0.0.0-dev-20230118114316

package/dist/index.js

@@ -207,8 +207,8 @@ function generateCssFn(ctx) {
     export declare function css(styles: SystemStyleObject): string
     `,
     js: import_outdent2.outdent`
-    import { createCss, withoutSpace } from "../helpers"
-    import { sortConditions, finalizeConditions } from "./conditions"
+    import { createCss, withoutSpace } from '../helpers'
+    import { sortConditions, finalizeConditions } from './conditions'
 
     const classNameMap = ${stringify(utility.entries())}
     
@@ -221,9 +221,9 @@ function generateCssFn(ctx) {
     const resolveShorthand = (prop) => shorthands[prop] || prop
 
     function transform(prop, value) {
-      let key = resolveShorthand(prop)
-      let propKey = classNameMap[key] || prop
-      let className = \`$\{propKey}${separator}$\{withoutSpace(value)}\`
+      const key = resolveShorthand(prop)
+      const propKey = classNameMap[key] || prop
+      const className = \`$\{propKey}${separator}$\{withoutSpace(value)}\`
       return { className }
     }
 
@@ -246,27 +246,51 @@ function generateCssFn(ctx) {
   };
 }
 
-// src/generators/css-map.ts
+// src/generators/cva.ts
 var import_outdent3 = require("outdent");
-function generateCssMap() {
+function generateCvaFn() {
   return {
     js: import_outdent3.outdent`
-    import { css } from "./css"
+    import { compact, deepMerge } from '../helpers'
+    import { css } from './css'
     
-    export function cssMap(obj){
-      return (...args) => {
-        const finalCss = args.reduce((acc, arg) => {
-            Object.assign(acc, obj[arg]);
-            return acc;
-        }, {})
-        return css(finalCss);
+    export function cva(config) {
+      const { base = {}, variants = {}, defaultVariants = {} } = config
+      return (props) => {
+        const computedVariants = { ...defaultVariants, ...compact(props) }
+        let result = { ...base }
+        for (const [key, value] of Object.entries(computedVariants)) {
+          if (variants[key]?.[value]) {
+            result = deepMerge(result, variants[key][value])
+          }
+        }
+        return css(result)
       }
     }
     `,
     dts: import_outdent3.outdent`
-    import { SystemStyleObject } from "../types"
-    
-    export declare function cssMap<T extends string>(obj: Record<T, SystemStyleObject>): (...args: Array<T>) => string;
+    import { SystemStyleObject } from '../types'
+
+    type StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T
+
+    type Variants = Record<string, Record<string, SystemStyleObject>>
+
+    type VariantSelection<T extends Variants> = {
+      [Variant in keyof T]?: StringToBoolean<keyof T[Variant]>
+    }
+
+    type AtomicRecipe<T extends Variants> = {
+      base?: SystemStyleObject
+      variants?: T | Variants
+      defaultVariants?: VariantSelection<T>
+    }
+
+    type VariantFn<T extends Variants> = (props: VariantSelection<T>) => string
+
+    export type VariantProps<T extends VariantFn<Variants>> = Parameters<T>[0]
+
+    export declare function cva<T extends Variants>(recipe?: AtomicRecipe<T>): VariantFn<T>
+
     `
   };
 }
@@ -342,8 +366,9 @@ function generatePreactJsxFactory(ctx) {
     import { h } from 'preact'
     import { forwardRef } from 'preact/compat'
     import { useMemo } from 'preact/hooks'
-    import { isCssProperty } from './is-valid-prop'
     import { css, cx } from '../css'
+    import { deepMerge } from '../helpers'
+    import { isCssProperty } from './is-valid-prop'
   
     const htmlProps = ['htmlSize', 'htmlTranslate', 'htmlWidth', 'htmlHeight']
 
@@ -373,8 +398,8 @@ function generatePreactJsxFactory(ctx) {
         const [styleProps, elementProps] = useMemo(() => splitProps(restProps), [restProps])
     
         function classes(){
-          const { css: cssStyles, ...otherStyles } = styleProps
-          const atomicClass = css({ ...otherStyles, ...cssStyles })
+          const { css: cssStyles, sx: sxStyles, ...otherStyles } = styleProps
+          const atomicClass = css(deepMerge(otherStyles, cssStyles, sxStyles))
           return cx(atomicClass, elementProps.className)
         }
     
@@ -551,8 +576,9 @@ function generateReactJsxFactory(ctx) {
   return {
     js: import_outdent9.outdent`
     import { forwardRef, useMemo } from 'react'
-    import { isCssProperty } from './is-valid-prop'
     import { css, cx } from '../css'
+    import { deepMerge } from '../helpers'
+    import { isCssProperty } from './is-valid-prop'
 
     const htmlProps = ['htmlSize', 'htmlTranslate', 'htmlWidth', 'htmlHeight']
 
@@ -582,8 +608,8 @@ function generateReactJsxFactory(ctx) {
         const [styleProps, elementProps] = useMemo(() => splitProps(restProps), [restProps])
     
         function classes(){
-          const { css: cssStyles, ...otherStyles } = styleProps
-          const atomicClass = css({ ...otherStyles, ...cssStyles })
+          const { css: cssStyles, sx: sxStyles, ...otherStyles } = styleProps
+          const atomicClass = css(deepMerge(otherStyles, cssStyles, sxStyles))
           return cx(atomicClass, elementProps.className)
         }
     
@@ -762,8 +788,9 @@ function generateSolidJsxFactory(ctx) {
     js: import_outdent13.outdent`
     import { Dynamic } from 'solid-js/web'
     import { mergeProps, splitProps } from 'solid-js'
-    import { allCssProperties } from './is-valid-prop'
     import { css, cx } from '../css'
+    import { deepMerge } from '../helpers'
+    import { allCssProperties } from './is-valid-prop'
 
     const htmlProps = ['htmlSize', 'htmlTranslate', 'htmlWidth', 'htmlHeight']
 
@@ -791,8 +818,8 @@ function generateSolidJsxFactory(ctx) {
         )
     
         const classes = () => {
-          const { css: cssStyles, ...otherStyles } = styleProps
-          const atomicClass = css({ ...otherStyles, ...cssStyles })
+          const { css: cssStyles, sx: sxStyles, ...otherStyles } = styleProps
+          const atomicClass = css(deepMerge(otherStyles, cssStyles, sxStyles))
           return cx(atomicClass, localProps.class, localProps.className)
         }
     
@@ -1094,7 +1121,7 @@ function generatePropTypes(utility, strict) {
     ? ConditionalValue<PropertyTypes[T]${strictText}>
     : T extends keyof CSSProperties
     ? ConditionalValue<CSSProperties[T]>
-    : never
+    : ConditionalValue<string | number>
   `;
 }
 
@@ -1418,8 +1445,13 @@ function generateCssType(ctx) {
     `,
     styleProps: import_outdent22.default`
     import { PropertyValue } from './prop-type'
+    import { Token } from './token'
+
+    type CssVarProperties = {
+      [key in \`--\${string}\`]?: Token | (string & {}) | (number & {})
+    }
   
-    export type SystemProperties = {
+    export type SystemProperties = CssVarProperties & {
       ${Array.from(propList).map((v) => `	${v}?: PropertyValue<'${v}'>`).join("\n")}
     }
     `
@@ -1488,13 +1520,13 @@ function setupCss(ctx) {
     ]
   };
 }
-function setupCssMap(ctx) {
-  const code = generateCssMap();
+function setupCva(ctx) {
+  const code = generateCvaFn();
   return {
     dir: ctx.paths.css,
     files: [
-      { file: "css-map.mjs", code: code.js },
-      { file: "css-map.d.ts", code: code.dts }
+      { file: "cva.mjs", code: code.js },
+      { file: "cva.d.ts", code: code.dts }
     ]
   };
 }
@@ -1575,7 +1607,7 @@ function setupCssIndex(ctx) {
   const code = import_outdent23.default`
   export * from './css'
   export * from './cx'
-  export * from './css-map'
+  export * from './cva'
  `;
   return {
     dir: ctx.paths.css,
@@ -1597,7 +1629,7 @@ function generateSystem(ctx) {
     setupDesignTokens(ctx),
     setupKeyframes(ctx),
     setupTypes(ctx),
-    setupCssMap(ctx),
+    setupCva(ctx),
     setupCx(ctx),
     setupCss(ctx),
     setupRecipes(ctx),
@@ -2037,10 +2069,8 @@ function createContext(conf, io = fileSystem) {
     collector.css.forEach((result) => {
       sheet.processAtomic(result.data);
     });
-    collector.cssMap.forEach((result) => {
-      for (const data of Object.values(result.data)) {
-        sheet.processAtomic(data);
-      }
+    collector.cva.forEach((result) => {
+      sheet.processAtomicRecipe(result.data);
     });
     collector.jsx.forEach((result) => {
       const { data, type, name } = result;

package/dist/index.mjs

@@ -161,8 +161,8 @@ function generateCssFn(ctx) {
     export declare function css(styles: SystemStyleObject): string
     `,
     js: outdent2`
-    import { createCss, withoutSpace } from "../helpers"
-    import { sortConditions, finalizeConditions } from "./conditions"
+    import { createCss, withoutSpace } from '../helpers'
+    import { sortConditions, finalizeConditions } from './conditions'
 
     const classNameMap = ${stringify(utility.entries())}
     
@@ -175,9 +175,9 @@ function generateCssFn(ctx) {
     const resolveShorthand = (prop) => shorthands[prop] || prop
 
     function transform(prop, value) {
-      let key = resolveShorthand(prop)
-      let propKey = classNameMap[key] || prop
-      let className = \`$\{propKey}${separator}$\{withoutSpace(value)}\`
+      const key = resolveShorthand(prop)
+      const propKey = classNameMap[key] || prop
+      const className = \`$\{propKey}${separator}$\{withoutSpace(value)}\`
       return { className }
     }
 
@@ -200,27 +200,51 @@ function generateCssFn(ctx) {
   };
 }
 
-// src/generators/css-map.ts
+// src/generators/cva.ts
 import { outdent as outdent3 } from "outdent";
-function generateCssMap() {
+function generateCvaFn() {
   return {
     js: outdent3`
-    import { css } from "./css"
+    import { compact, deepMerge } from '../helpers'
+    import { css } from './css'
     
-    export function cssMap(obj){
-      return (...args) => {
-        const finalCss = args.reduce((acc, arg) => {
-            Object.assign(acc, obj[arg]);
-            return acc;
-        }, {})
-        return css(finalCss);
+    export function cva(config) {
+      const { base = {}, variants = {}, defaultVariants = {} } = config
+      return (props) => {
+        const computedVariants = { ...defaultVariants, ...compact(props) }
+        let result = { ...base }
+        for (const [key, value] of Object.entries(computedVariants)) {
+          if (variants[key]?.[value]) {
+            result = deepMerge(result, variants[key][value])
+          }
+        }
+        return css(result)
       }
     }
     `,
     dts: outdent3`
-    import { SystemStyleObject } from "../types"
-    
-    export declare function cssMap<T extends string>(obj: Record<T, SystemStyleObject>): (...args: Array<T>) => string;
+    import { SystemStyleObject } from '../types'
+
+    type StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T
+
+    type Variants = Record<string, Record<string, SystemStyleObject>>
+
+    type VariantSelection<T extends Variants> = {
+      [Variant in keyof T]?: StringToBoolean<keyof T[Variant]>
+    }
+
+    type AtomicRecipe<T extends Variants> = {
+      base?: SystemStyleObject
+      variants?: T | Variants
+      defaultVariants?: VariantSelection<T>
+    }
+
+    type VariantFn<T extends Variants> = (props: VariantSelection<T>) => string
+
+    export type VariantProps<T extends VariantFn<Variants>> = Parameters<T>[0]
+
+    export declare function cva<T extends Variants>(recipe?: AtomicRecipe<T>): VariantFn<T>
+
     `
   };
 }
@@ -296,8 +320,9 @@ function generatePreactJsxFactory(ctx) {
     import { h } from 'preact'
     import { forwardRef } from 'preact/compat'
     import { useMemo } from 'preact/hooks'
-    import { isCssProperty } from './is-valid-prop'
     import { css, cx } from '../css'
+    import { deepMerge } from '../helpers'
+    import { isCssProperty } from './is-valid-prop'
   
     const htmlProps = ['htmlSize', 'htmlTranslate', 'htmlWidth', 'htmlHeight']
 
@@ -327,8 +352,8 @@ function generatePreactJsxFactory(ctx) {
         const [styleProps, elementProps] = useMemo(() => splitProps(restProps), [restProps])
     
         function classes(){
-          const { css: cssStyles, ...otherStyles } = styleProps
-          const atomicClass = css({ ...otherStyles, ...cssStyles })
+          const { css: cssStyles, sx: sxStyles, ...otherStyles } = styleProps
+          const atomicClass = css(deepMerge(otherStyles, cssStyles, sxStyles))
           return cx(atomicClass, elementProps.className)
         }
     
@@ -505,8 +530,9 @@ function generateReactJsxFactory(ctx) {
   return {
     js: outdent9`
     import { forwardRef, useMemo } from 'react'
-    import { isCssProperty } from './is-valid-prop'
     import { css, cx } from '../css'
+    import { deepMerge } from '../helpers'
+    import { isCssProperty } from './is-valid-prop'
 
     const htmlProps = ['htmlSize', 'htmlTranslate', 'htmlWidth', 'htmlHeight']
 
@@ -536,8 +562,8 @@ function generateReactJsxFactory(ctx) {
         const [styleProps, elementProps] = useMemo(() => splitProps(restProps), [restProps])
     
         function classes(){
-          const { css: cssStyles, ...otherStyles } = styleProps
-          const atomicClass = css({ ...otherStyles, ...cssStyles })
+          const { css: cssStyles, sx: sxStyles, ...otherStyles } = styleProps
+          const atomicClass = css(deepMerge(otherStyles, cssStyles, sxStyles))
           return cx(atomicClass, elementProps.className)
         }
     
@@ -716,8 +742,9 @@ function generateSolidJsxFactory(ctx) {
     js: outdent13`
     import { Dynamic } from 'solid-js/web'
     import { mergeProps, splitProps } from 'solid-js'
-    import { allCssProperties } from './is-valid-prop'
     import { css, cx } from '../css'
+    import { deepMerge } from '../helpers'
+    import { allCssProperties } from './is-valid-prop'
 
     const htmlProps = ['htmlSize', 'htmlTranslate', 'htmlWidth', 'htmlHeight']
 
@@ -745,8 +772,8 @@ function generateSolidJsxFactory(ctx) {
         )
     
         const classes = () => {
-          const { css: cssStyles, ...otherStyles } = styleProps
-          const atomicClass = css({ ...otherStyles, ...cssStyles })
+          const { css: cssStyles, sx: sxStyles, ...otherStyles } = styleProps
+          const atomicClass = css(deepMerge(otherStyles, cssStyles, sxStyles))
           return cx(atomicClass, localProps.class, localProps.className)
         }
     
@@ -1048,7 +1075,7 @@ function generatePropTypes(utility, strict) {
     ? ConditionalValue<PropertyTypes[T]${strictText}>
     : T extends keyof CSSProperties
     ? ConditionalValue<CSSProperties[T]>
-    : never
+    : ConditionalValue<string | number>
   `;
 }
 
@@ -1372,8 +1399,13 @@ function generateCssType(ctx) {
     `,
     styleProps: outdent22`
     import { PropertyValue } from './prop-type'
+    import { Token } from './token'
+
+    type CssVarProperties = {
+      [key in \`--\${string}\`]?: Token | (string & {}) | (number & {})
+    }
   
-    export type SystemProperties = {
+    export type SystemProperties = CssVarProperties & {
       ${Array.from(propList).map((v) => `	${v}?: PropertyValue<'${v}'>`).join("\n")}
     }
     `
@@ -1442,13 +1474,13 @@ function setupCss(ctx) {
     ]
   };
 }
-function setupCssMap(ctx) {
-  const code = generateCssMap();
+function setupCva(ctx) {
+  const code = generateCvaFn();
   return {
     dir: ctx.paths.css,
     files: [
-      { file: "css-map.mjs", code: code.js },
-      { file: "css-map.d.ts", code: code.dts }
+      { file: "cva.mjs", code: code.js },
+      { file: "cva.d.ts", code: code.dts }
     ]
   };
 }
@@ -1529,7 +1561,7 @@ function setupCssIndex(ctx) {
   const code = outdent23`
   export * from './css'
   export * from './cx'
-  export * from './css-map'
+  export * from './cva'
  `;
   return {
     dir: ctx.paths.css,
@@ -1551,7 +1583,7 @@ function generateSystem(ctx) {
     setupDesignTokens(ctx),
     setupKeyframes(ctx),
     setupTypes(ctx),
-    setupCssMap(ctx),
+    setupCva(ctx),
     setupCx(ctx),
     setupCss(ctx),
     setupRecipes(ctx),
@@ -1998,10 +2030,8 @@ function createContext(conf, io = fileSystem) {
     collector.css.forEach((result) => {
       sheet.processAtomic(result.data);
     });
-    collector.cssMap.forEach((result) => {
-      for (const data of Object.values(result.data)) {
-        sheet.processAtomic(data);
-      }
+    collector.cva.forEach((result) => {
+      sheet.processAtomicRecipe(result.data);
     });
     collector.jsx.forEach((result) => {
       const { data, type, name } = result;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/node",
-  "version": "0.0.0-dev-20230117105201",
+  "version": "0.0.0-dev-20230118114316",
   "description": "The core css panda library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -30,15 +30,15 @@
     "telejson": "7.0.4",
     "ts-pattern": "4.1.3",
     "ts-morph": "17.0.1",
-    "@pandacss/types": "0.0.0-dev-20230117105201",
-    "@pandacss/is-valid-prop": "0.0.0-dev-20230117105201",
-    "@pandacss/error": "0.0.0-dev-20230117105201",
-    "@pandacss/parser": "0.0.0-dev-20230117105201",
-    "@pandacss/shared": "0.0.0-dev-20230117105201",
-    "@pandacss/token-dictionary": "0.0.0-dev-20230117105201",
-    "@pandacss/logger": "0.0.0-dev-20230117105201",
-    "@pandacss/core": "0.0.0-dev-20230117105201",
-    "@pandacss/config": "0.0.0-dev-20230117105201"
+    "@pandacss/types": "0.0.0-dev-20230118114316",
+    "@pandacss/is-valid-prop": "0.0.0-dev-20230118114316",
+    "@pandacss/error": "0.0.0-dev-20230118114316",
+    "@pandacss/parser": "0.0.0-dev-20230118114316",
+    "@pandacss/shared": "0.0.0-dev-20230118114316",
+    "@pandacss/token-dictionary": "0.0.0-dev-20230118114316",
+    "@pandacss/logger": "0.0.0-dev-20230118114316",
+    "@pandacss/core": "0.0.0-dev-20230118114316",
+    "@pandacss/config": "0.0.0-dev-20230118114316"
   },
   "devDependencies": {
     "@types/fs-extra": "11.0.1",
@@ -46,7 +46,7 @@
     "@types/glob-parent": "^5.1.1",
     "@types/pluralize": "0.0.29",
     "@types/lodash.merge": "4.6.7",
-    "@pandacss/fixture": "0.0.0-dev-20230117105201"
+    "@pandacss/fixture": "0.0.0-dev-20230118114316"
   },
   "scripts": {
     "build": "tsup src/index.ts --format=cjs,esm --shims --dts",