@pandacss/generator 0.4.0 → 0.5.0

package/dist/index.mjs

@@ -35,7 +35,7 @@ var artifactsGenerated = (ctx) => {
     !tokens.isEmpty && outdent`
     ${tick} ${quote(outdir, "/tokens")}: the css variables and js function to query your tokens
     `,
-    !patterns.isEmpty() && outdent`
+    !patterns.isEmpty() && !ctx.isTemplateLiteralSyntax && outdent`
     ${tick} ${quote(outdir, "/patterns")}: functions to implement apply common layout patterns
     `,
     !recipes.isEmpty() && outdent`
@@ -102,7 +102,7 @@ import { Obj as Obj2, pipe as pipe3 } from "lil-fp";
 
 // src/artifacts/index.ts
 import { isObject } from "@pandacss/shared";
-import outdent29 from "outdent";
+import outdent41 from "outdent";
 
 // src/artifacts/css/global-css.ts
 var generateGlobalCss = (ctx) => {
@@ -546,8 +546,39 @@ function generateConditions(ctx) {
   };
 }
 
+// src/artifacts/js/conditions.string-literal.ts
+import outdent3 from "outdent";
+function generateStringLiteralConditions(ctx) {
+  return {
+    js: outdent3`
+    ${ctx.file.import("withoutSpace", "../helpers")}
+
+    export const isCondition = (val) => condRegex.test(val)
+
+    const condRegex = /^@|&|&$/
+    const selectorRegex = /&|@/
+
+    export const finalizeConditions = (paths) => {
+      return paths.map((path) => (selectorRegex.test(path) ? \`[\${withoutSpace(path.trim())}]\` : path))
+    }
+
+    export function sortConditions(paths){
+      return paths.sort((a, b) => {
+        const aa = isCondition(a)
+        const bb = isCondition(b)
+        if (aa && !bb) return 1
+        if (!aa && bb) return -1
+        return 0
+      })
+    }
+      `,
+    dts: outdent3`
+  `
+  };
+}
+
 // src/artifacts/js/css-fn.ts
-import { outdent as outdent3 } from "outdent";
+import { outdent as outdent4 } from "outdent";
 var stringify = (v) => JSON.stringify(Object.fromEntries(v), null, 2);
 function generateCssFn(ctx) {
   const {
@@ -557,11 +588,11 @@ function generateCssFn(ctx) {
   } = ctx;
   const { separator } = utility;
   return {
-    dts: outdent3`
+    dts: outdent4`
     import type { SystemStyleObject } from '../types'
     export declare function css(styles: SystemStyleObject): string
     `,
-    js: outdent3`
+    js: outdent4`
     ${ctx.file.import("createCss, createMergeCss, hypenateProperty, withoutSpace", "../helpers")}
     ${ctx.file.import("sortConditions, finalizeConditions", "./conditions")}
 
@@ -604,11 +635,58 @@ function generateCssFn(ctx) {
   };
 }
 
+// src/artifacts/js/css-fn.string-literal.ts
+import { outdent as outdent5 } from "outdent";
+function generateStringLiteralCssFn(ctx) {
+  const {
+    utility,
+    config: { hash, prefix }
+  } = ctx;
+  const { separator } = utility;
+  return {
+    dts: outdent5`
+    export declare function css(template: { raw: readonly string[] | ArrayLike<string> }): string
+    `,
+    js: outdent5`
+    ${ctx.file.import("astish, createCss, withoutSpace", "../helpers")}
+    ${ctx.file.import("sortConditions, finalizeConditions", "./conditions")}
+
+    function transform(prop, value) {
+      const className = \`$\{prop}${separator}$\{withoutSpace(value)}\`
+      return { className }
+    }
+
+    const context = {
+      hash: ${hash ? "true" : "false"},
+      conditions: {
+        shift: sortConditions,
+        finalize: finalizeConditions,
+        breakpoints: { keys: [] },
+      },
+      utility: {
+        prefix: ${prefix ? JSON.stringify(prefix) : void 0},
+        transform,
+        hasShorthand: false,
+        resolveShorthand(prop) {
+          return prop
+        },
+      }
+    }
+
+    const cssFn = createCss(context)
+
+    export const css = (str) => {
+      return cssFn(astish(str[0]))
+    }
+    `
+  };
+}
+
 // src/artifacts/js/cva.ts
-import { outdent as outdent4 } from "outdent";
+import { outdent as outdent6 } from "outdent";
 function generateCvaFn(ctx) {
   return {
-    js: outdent4`
+    js: outdent6`
     ${ctx.file.import("compact, splitProps", "../helpers")}
     ${ctx.file.import("css, mergeCss", "./css")}
 
@@ -674,7 +752,7 @@ function generateCvaFn(ctx) {
     }    
 
     `,
-    dts: outdent4`
+    dts: outdent6`
     import type { RecipeCreatorFn } from '../types/recipe'
 
     export declare const cva: RecipeCreatorFn
@@ -686,10 +764,10 @@ function generateCvaFn(ctx) {
 }
 
 // src/artifacts/js/cx.ts
-import outdent5 from "outdent";
+import outdent7 from "outdent";
 function generateCx() {
   return {
-    js: outdent5`
+    js: outdent7`
     function cx() {
       let str = '',
         i = 0,
@@ -706,7 +784,7 @@ function generateCx() {
    
     export { cx }
   `,
-    dts: outdent5`
+    dts: outdent7`
        type Argument = string | boolean | null | undefined
 
        /** Conditionally join classNames into a single string */
@@ -716,17 +794,17 @@ function generateCx() {
 }
 
 // src/artifacts/js/helpers.ts
-import { outdent as outdent6 } from "outdent";
+import { outdent as outdent8 } from "outdent";
 
 // src/artifacts/generated/helpers.mjs.json
 var helpers_mjs_default = {
-  content: '// src/assert.ts\nfunction isObject(value) {\n  return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/compact.ts\nfunction compact(value) {\n  return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));\n}\n\n// src/condition.ts\nvar isBaseCondition = (v) => v === "base";\nfunction filterBaseConditions(c) {\n  return c.slice().filter((v) => !isBaseCondition(v));\n}\n\n// src/css-important.ts\nvar importantRegex = /!(important)?$/;\nfunction isImportant(value) {\n  return typeof value === "string" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n  return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;\n}\nfunction withoutSpace(str) {\n  return typeof str === "string" ? str.replaceAll(" ", "_") : str;\n}\n\n// src/hash.ts\nfunction toChar(code) {\n  return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n  let name = "";\n  let x;\n  for (x = Math.abs(code); x > 52; x = x / 52 | 0)\n    name = toChar(x % 52) + name;\n  return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n  let i = x.length;\n  while (i)\n    h = h * 33 ^ x.charCodeAt(--i);\n  return h;\n}\nfunction toHash(value) {\n  return toName(toPhash(5381, value) >>> 0);\n}\n\n// src/merge-props.ts\nfunction mergeProps(...sources) {\n  const result = {};\n  for (const source of sources) {\n    for (const [key, value] of Object.entries(source)) {\n      if (isObject(value)) {\n        result[key] = mergeProps(result[key] || {}, value);\n      } else {\n        result[key] = value;\n      }\n    }\n  }\n  return result;\n}\n\n// src/walk-object.ts\nfunction walkObject(target, predicate, options = {}) {\n  const { stop, getKey } = options;\n  function inner(value, path = []) {\n    if (isObject(value) || Array.isArray(value)) {\n      const result = {};\n      for (const [prop, child] of Object.entries(value)) {\n        const key = getKey?.(prop) ?? prop;\n        const childPath = [...path, key];\n        if (stop?.(value, childPath)) {\n          return predicate(value, path);\n        }\n        result[key] = inner(child, childPath);\n      }\n      return result;\n    }\n    return predicate(value, path);\n  }\n  return inner(target);\n}\nfunction mapObject(obj, fn) {\n  if (!isObject(obj))\n    return fn(obj);\n  return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n  return values.reduce((acc, current, index) => {\n    const key = breakpoints[index];\n    if (current != null) {\n      acc[key] = current;\n    }\n    return acc;\n  }, {});\n}\nfunction normalizeShorthand(styles, context) {\n  const { hasShorthand, resolveShorthand } = context.utility;\n  return walkObject(styles, (v) => v, {\n    getKey: (prop) => {\n      return hasShorthand ? resolveShorthand(prop) : prop;\n    }\n  });\n}\nfunction normalizeStyleObject(styles, context) {\n  const { utility, conditions } = context;\n  const { hasShorthand, resolveShorthand } = utility;\n  return walkObject(\n    styles,\n    (value) => {\n      return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n    },\n    {\n      stop: (value) => Array.isArray(value),\n      getKey: (prop) => {\n        return hasShorthand ? resolveShorthand(prop) : prop;\n      }\n    }\n  );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n  shift: (v) => v,\n  finalize: (v) => v,\n  breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n  const { utility, hash, conditions: conds = fallbackCondition } = context;\n  const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n  const hashFn = (conditions, className) => {\n    let result;\n    if (hash) {\n      const baseArray = [...conds.finalize(conditions), className];\n      result = formatClassName(toHash(baseArray.join(":")));\n    } else {\n      const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n      result = baseArray.join(":");\n    }\n    return result;\n  };\n  return (styleObject = {}) => {\n    const normalizedObject = normalizeStyleObject(styleObject, context);\n    const classNames = /* @__PURE__ */ new Set();\n    walkObject(normalizedObject, (value, paths) => {\n      const important = isImportant(value);\n      if (value == null)\n        return;\n      const [prop, ...allConditions] = conds.shift(paths);\n      const conditions = filterBaseConditions(allConditions);\n      const transformed = utility.transform(prop, withoutImportant(sanitize(value)));\n      let className = hashFn(conditions, transformed.className);\n      if (important)\n        className = `${className}!`;\n      classNames.add(className);\n    });\n    return Array.from(classNames).join(" ");\n  };\n}\nfunction compactStyles(...styles) {\n  return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n  function resolve(styles) {\n    const allStyles = compactStyles(...styles);\n    if (allStyles.length === 1)\n      return allStyles;\n    return allStyles.map((style) => normalizeShorthand(style, context));\n  }\n  function mergeCss(...styles) {\n    return mergeProps(...resolve(styles));\n  }\n  function assignCss(...styles) {\n    return Object.assign({}, ...resolve(styles));\n  }\n  return { mergeCss, assignCss };\n}\n\n// src/normalize-html.ts\nvar htmlProps = ["htmlSize", "htmlTranslate", "htmlWidth", "htmlHeight"];\nfunction convert(key) {\n  return htmlProps.includes(key) ? key.replace("html", "").toLowerCase() : key;\n}\nfunction normalizeHTMLProps(props) {\n  return Object.fromEntries(Object.entries(props).map(([key, value]) => [convert(key), value]));\n}\nnormalizeHTMLProps.keys = htmlProps;\n\n// src/split-props.ts\nfunction splitProps(props, ...keys) {\n  const descriptors = Object.getOwnPropertyDescriptors(props);\n  const dKeys = Object.keys(descriptors);\n  const split = (k) => {\n    const clone = {};\n    for (let i = 0; i < k.length; i++) {\n      const key = k[i];\n      if (descriptors[key]) {\n        Object.defineProperty(clone, key, descriptors[key]);\n        delete descriptors[key];\n      }\n    }\n    return clone;\n  };\n  const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));\n  return keys.map(fn).concat(split(dKeys));\n}\n\n// src/memo.ts\nvar memo = (fn) => {\n  const cache = /* @__PURE__ */ new Map();\n  const get = (...args) => {\n    const key = JSON.stringify(args);\n    if (cache.has(key)) {\n      return cache.get(key);\n    }\n    const result = fn(...args);\n    cache.set(key, result);\n    return result;\n  };\n  return get;\n};\n\n// src/hypenate.ts\nvar dashCaseRegex = /[A-Z]/g;\nvar hypenateProperty = memo((property) => {\n  if (property.startsWith("--"))\n    return property;\n  return property.replace(dashCaseRegex, (match) => `-${match.toLowerCase()}`);\n});\nexport {\n  compact,\n  createCss,\n  createMergeCss,\n  filterBaseConditions,\n  hypenateProperty,\n  isBaseCondition,\n  isObject,\n  mapObject,\n  mergeProps,\n  normalizeHTMLProps,\n  splitProps,\n  toHash,\n  walkObject,\n  withoutSpace\n};\n'
+  content: '// src/assert.ts\nfunction isObject(value) {\n  return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/astish.ts\nvar newRule = /(?:([\\u0080-\\uFFFF\\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\\s*)/g;\nvar ruleClean = /\\/\\*[^]*?\\*\\/|\\s\\s+|\\n/g;\nvar astish = (val, tree = [{}]) => {\n  const block = newRule.exec(val.replace(ruleClean, ""));\n  if (!block)\n    return tree[0];\n  if (block[4])\n    tree.shift();\n  else if (block[3])\n    tree.unshift(tree[0][block[3]] = tree[0][block[3]] || {});\n  else\n    tree[0][block[1]] = block[2];\n  return astish(val, tree);\n};\n\n// src/compact.ts\nfunction compact(value) {\n  return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));\n}\n\n// src/condition.ts\nvar isBaseCondition = (v) => v === "base";\nfunction filterBaseConditions(c) {\n  return c.slice().filter((v) => !isBaseCondition(v));\n}\n\n// src/css-important.ts\nvar importantRegex = /!(important)?$/;\nfunction isImportant(value) {\n  return typeof value === "string" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n  return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;\n}\nfunction withoutSpace(str) {\n  return typeof str === "string" ? str.replaceAll(" ", "_") : str;\n}\n\n// src/hash.ts\nfunction toChar(code) {\n  return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n  let name = "";\n  let x;\n  for (x = Math.abs(code); x > 52; x = x / 52 | 0)\n    name = toChar(x % 52) + name;\n  return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n  let i = x.length;\n  while (i)\n    h = h * 33 ^ x.charCodeAt(--i);\n  return h;\n}\nfunction toHash(value) {\n  return toName(toPhash(5381, value) >>> 0);\n}\n\n// src/merge-props.ts\nfunction mergeProps(...sources) {\n  const result = {};\n  for (const source of sources) {\n    for (const [key, value] of Object.entries(source)) {\n      if (isObject(value)) {\n        result[key] = mergeProps(result[key] || {}, value);\n      } else {\n        result[key] = value;\n      }\n    }\n  }\n  return result;\n}\n\n// src/walk-object.ts\nfunction walkObject(target, predicate, options = {}) {\n  const { stop, getKey } = options;\n  function inner(value, path = []) {\n    if (isObject(value) || Array.isArray(value)) {\n      const result = {};\n      for (const [prop, child] of Object.entries(value)) {\n        const key = getKey?.(prop) ?? prop;\n        const childPath = [...path, key];\n        if (stop?.(value, childPath)) {\n          return predicate(value, path);\n        }\n        result[key] = inner(child, childPath);\n      }\n      return result;\n    }\n    return predicate(value, path);\n  }\n  return inner(target);\n}\nfunction mapObject(obj, fn) {\n  if (!isObject(obj))\n    return fn(obj);\n  return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n  return values.reduce((acc, current, index) => {\n    const key = breakpoints[index];\n    if (current != null) {\n      acc[key] = current;\n    }\n    return acc;\n  }, {});\n}\nfunction normalizeShorthand(styles, context) {\n  const { hasShorthand, resolveShorthand } = context.utility;\n  return walkObject(styles, (v) => v, {\n    getKey: (prop) => {\n      return hasShorthand ? resolveShorthand(prop) : prop;\n    }\n  });\n}\nfunction normalizeStyleObject(styles, context) {\n  const { utility, conditions } = context;\n  const { hasShorthand, resolveShorthand } = utility;\n  return walkObject(\n    styles,\n    (value) => {\n      return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n    },\n    {\n      stop: (value) => Array.isArray(value),\n      getKey: (prop) => {\n        return hasShorthand ? resolveShorthand(prop) : prop;\n      }\n    }\n  );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n  shift: (v) => v,\n  finalize: (v) => v,\n  breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n  const { utility, hash, conditions: conds = fallbackCondition } = context;\n  const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n  const hashFn = (conditions, className) => {\n    let result;\n    if (hash) {\n      const baseArray = [...conds.finalize(conditions), className];\n      result = formatClassName(toHash(baseArray.join(":")));\n    } else {\n      const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n      result = baseArray.join(":");\n    }\n    return result;\n  };\n  return (styleObject = {}) => {\n    const normalizedObject = normalizeStyleObject(styleObject, context);\n    const classNames = /* @__PURE__ */ new Set();\n    walkObject(normalizedObject, (value, paths) => {\n      const important = isImportant(value);\n      if (value == null)\n        return;\n      const [prop, ...allConditions] = conds.shift(paths);\n      const conditions = filterBaseConditions(allConditions);\n      const transformed = utility.transform(prop, withoutImportant(sanitize(value)));\n      let className = hashFn(conditions, transformed.className);\n      if (important)\n        className = `${className}!`;\n      classNames.add(className);\n    });\n    return Array.from(classNames).join(" ");\n  };\n}\nfunction compactStyles(...styles) {\n  return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n  function resolve(styles) {\n    const allStyles = compactStyles(...styles);\n    if (allStyles.length === 1)\n      return allStyles;\n    return allStyles.map((style) => normalizeShorthand(style, context));\n  }\n  function mergeCss(...styles) {\n    return mergeProps(...resolve(styles));\n  }\n  function assignCss(...styles) {\n    return Object.assign({}, ...resolve(styles));\n  }\n  return { mergeCss, assignCss };\n}\n\n// src/memo.ts\nvar memo = (fn) => {\n  const cache = /* @__PURE__ */ new Map();\n  const get = (...args) => {\n    const key = JSON.stringify(args);\n    if (cache.has(key)) {\n      return cache.get(key);\n    }\n    const result = fn(...args);\n    cache.set(key, result);\n    return result;\n  };\n  return get;\n};\n\n// src/hypenate.ts\nvar dashCaseRegex = /[A-Z]/g;\nvar hypenateProperty = memo((property) => {\n  if (property.startsWith("--"))\n    return property;\n  return property.replace(dashCaseRegex, (match) => `-${match.toLowerCase()}`);\n});\n\n// src/normalize-html.ts\nvar htmlProps = ["htmlSize", "htmlTranslate", "htmlWidth", "htmlHeight"];\nfunction convert(key) {\n  return htmlProps.includes(key) ? key.replace("html", "").toLowerCase() : key;\n}\nfunction normalizeHTMLProps(props) {\n  return Object.fromEntries(Object.entries(props).map(([key, value]) => [convert(key), value]));\n}\nnormalizeHTMLProps.keys = htmlProps;\n\n// src/split-props.ts\nfunction splitProps(props, ...keys) {\n  const descriptors = Object.getOwnPropertyDescriptors(props);\n  const dKeys = Object.keys(descriptors);\n  const split = (k) => {\n    const clone = {};\n    for (let i = 0; i < k.length; i++) {\n      const key = k[i];\n      if (descriptors[key]) {\n        Object.defineProperty(clone, key, descriptors[key]);\n        delete descriptors[key];\n      }\n    }\n    return clone;\n  };\n  const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));\n  return keys.map(fn).concat(split(dKeys));\n}\nexport {\n  astish,\n  compact,\n  createCss,\n  createMergeCss,\n  filterBaseConditions,\n  hypenateProperty,\n  isBaseCondition,\n  isObject,\n  mapObject,\n  mergeProps,\n  normalizeHTMLProps,\n  splitProps,\n  toHash,\n  walkObject,\n  withoutSpace\n};\n'
 };
 
 // src/artifacts/js/helpers.ts
 function generateHelpers() {
   return {
-    js: outdent6`
+    js: outdent8`
   ${helpers_mjs_default.content}
 
   export function __spreadValues(a, b){
@@ -747,6 +825,8 @@ var is_valid_prop_mjs_default = {
 
 // src/artifacts/js/is-valid-prop.ts
 function generateisValidProp(ctx) {
+  if (ctx.isTemplateLiteralSyntax)
+    return;
   let content = is_valid_prop_mjs_default.content;
   content = content.replace(
     "var userGenerated = []",
@@ -760,7 +840,7 @@ function generateisValidProp(ctx) {
 // src/artifacts/js/pattern.ts
 import { unionType } from "@pandacss/shared";
 import { stringify as stringify2 } from "javascript-stringify";
-import { outdent as outdent7 } from "outdent";
+import { outdent as outdent9 } from "outdent";
 import { match } from "ts-pattern";
 function generatePattern(ctx) {
   if (ctx.patterns.isEmpty())
@@ -778,7 +858,7 @@ function generatePattern(ctx) {
     }
     return {
       name: dashName,
-      dts: outdent7`
+      dts: outdent9`
       import type { SystemStyleObject, ConditionalValue } from '../types'
       import type { PropertyValue } from '../types/prop-type'
       import type { Properties } from '../types/csstype'
@@ -802,7 +882,7 @@ function generatePattern(ctx) {
       }).join("\n	")}
       }
 
-      ${strict ? outdent7`export declare function ${name}(options: ${upperName}Properties): string` : outdent7`
+      ${strict ? outdent9`export declare function ${name}(options: ${upperName}Properties): string` : outdent9`
 
           type ${upperName}Options = ${upperName}Properties & Omit<SystemStyleObject, keyof ${upperName}Properties ${blocklistType}>
 
@@ -811,7 +891,7 @@ function generatePattern(ctx) {
           `}
 
      `,
-      js: outdent7`
+      js: outdent9`
     ${ctx.file.import(helperImports.join(", "), "../helpers")}
     ${ctx.file.import("css", "../css/index")}
 
@@ -828,7 +908,7 @@ transform`)}
 
 // src/artifacts/js/recipe.ts
 import { unionType as unionType2 } from "@pandacss/shared";
-import { outdent as outdent8 } from "outdent";
+import { outdent as outdent10 } from "outdent";
 var stringify3 = (value) => JSON.stringify(value, null, 2);
 var isBooleanValue = (value) => value === "true" || value === "false";
 function generateRecipes(ctx) {
@@ -842,7 +922,7 @@ function generateRecipes(ctx) {
   const createRecipeFn = {
     name: "create-recipe",
     dts: "",
-    js: outdent8`
+    js: outdent10`
    ${ctx.file.import("css", "../css/css")}
    ${ctx.file.import("assertCompoundVariant, getCompoundVariantCss", "../css/cva")}
    ${ctx.file.import("cx", "../css/cx")}
@@ -889,7 +969,7 @@ function generateRecipes(ctx) {
       const { name, description, defaultVariants, compoundVariants } = config;
       return {
         name: dashName,
-        js: outdent8`
+        js: outdent10`
         ${ctx.file.import("splitProps", "../helpers")}
         ${ctx.file.import("createRecipe", "./create-recipe")}
 
@@ -910,7 +990,7 @@ function generateRecipes(ctx) {
           splitVariantProps,
         })
         `,
-        dts: outdent8`
+        dts: outdent10`
         import type { ConditionalValue } from '../types'
         import type { Pretty } from '../types/helpers'
 
@@ -948,7 +1028,7 @@ function generateRecipes(ctx) {
 }
 
 // src/artifacts/js/token.ts
-import outdent9 from "outdent";
+import outdent11 from "outdent";
 function generateTokenJs(ctx) {
   const { tokens } = ctx;
   const map = /* @__PURE__ */ new Map();
@@ -959,7 +1039,7 @@ function generateTokenJs(ctx) {
   });
   const obj = Object.fromEntries(map);
   return {
-    js: outdent9`
+    js: outdent11`
   const tokens = ${JSON.stringify(obj, null, 2)}
 
   export function token(path, fallback) {
@@ -972,7 +1052,7 @@ function generateTokenJs(ctx) {
 
   token.var = tokenVar
   `,
-    dts: outdent9`
+    dts: outdent11`
   import type { Token } from './tokens'
 
   export declare const token: {
@@ -986,11 +1066,11 @@ function generateTokenJs(ctx) {
 }
 
 // src/artifacts/preact-jsx/jsx.ts
-import { outdent as outdent10 } from "outdent";
+import { outdent as outdent12 } from "outdent";
 function generatePreactJsxFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: outdent10`
+    js: outdent12`
     import { h } from 'preact'
     import { forwardRef } from 'preact/compat'
     import { useMemo } from 'preact/hooks'
@@ -1057,7 +1137,7 @@ function generatePreactJsxFactory(ctx) {
 }
 
 // src/artifacts/preact-jsx/pattern.ts
-import { outdent as outdent11 } from "outdent";
+import { outdent as outdent13 } from "outdent";
 import { match as match2 } from "ts-pattern";
 function generatePreactJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
@@ -1066,7 +1146,7 @@ function generatePreactJsxPattern(ctx) {
     const { description, jsxElement = "div" } = pattern.config;
     return {
       name: dashName,
-      js: outdent11`
+      js: outdent13`
       import { h } from 'preact'
       import { forwardRef } from 'preact/compat'
       ${ctx.file.import(factoryName, "./factory")}
@@ -1075,12 +1155,12 @@ function generatePreactJsxPattern(ctx) {
       export const ${jsxName} = forwardRef(function ${jsxName}(props, ref) {
         ${match2(props.length).with(
         0,
-        () => outdent11`
+        () => outdent13`
           const styleProps = ${styleFnName}()
           return h(${factoryName}.${jsxElement}, { ref, ...styleProps, ...props })
           `
       ).otherwise(
-        () => outdent11`
+        () => outdent13`
           const { ${props.join(", ")}, ...restProps } = props
           const styleProps = ${styleFnName}({${props.join(", ")}})
           return h(${factoryName}.${jsxElement}, { ref, ...styleProps, ...restProps })
@@ -1088,7 +1168,7 @@ function generatePreactJsxPattern(ctx) {
       )}
       })    
       `,
-      dts: outdent11`
+      dts: outdent13`
       import type { FunctionComponent } from 'preact'
       import type { ${upperName}Properties } from '../patterns/${dashName}'
       import type { ${typeName} } from '../types/jsx'
@@ -1103,15 +1183,15 @@ function generatePreactJsxPattern(ctx) {
 }
 
 // src/artifacts/preact-jsx/types.ts
-import { outdent as outdent12 } from "outdent";
+import { outdent as outdent14 } from "outdent";
 function generatePreactJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent12`
+    jsxFactory: outdent14`
 import type { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent12`
+    jsxType: outdent14`
 import type { ComponentProps, JSX } from 'preact'
 import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -1145,12 +1225,96 @@ export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>,
   };
 }
 
+// src/artifacts/preact-jsx/jsx.string-literal.ts
+import { outdent as outdent15 } from "outdent";
+function generatePreactJsxStringLiteralFactory(ctx) {
+  const { factoryName, componentName } = ctx.jsx;
+  return {
+    js: outdent15`
+    import { h } from 'preact'
+    import { forwardRef } from 'preact/compat'
+    ${ctx.file.import("css, cx", "../css/index")}
+    
+    function createStyledFn(Dynamic) {
+      return function styledFn(template) {
+        const baseClassName = css(template)
+        const ${componentName} = forwardRef(function ${componentName}(props, ref) {
+          const { as: Element = Dynamic, ...elementProps } = props
+          const classes = () => cx(baseClassName, elementProps.className)
+        
+          return h(Element, {
+            ref,
+            ...elementProps,
+            className: classes(),
+          })
+        })
+        
+        ${componentName}.displayName = \`${factoryName}.\${Dynamic}\`
+        return ${componentName}
+      }
+    }
+    
+    function createJsxFactory() {
+      const cache = new Map()
+    
+      return new Proxy(createStyledFn, {
+        apply(_, __, args) {
+          return createStyledFn(...args)
+        },
+        get(_, el) {
+          if (!cache.has(el)) {
+            cache.set(el, createStyledFn(el))
+          }
+          return cache.get(el)
+        },
+      })
+    }
+
+    export const ${factoryName} = createJsxFactory()
+    `
+  };
+}
+
+// src/artifacts/preact-jsx/types.string-literal.ts
+import { outdent as outdent16 } from "outdent";
+function generatePreactJsxStringLiteralTypes(ctx) {
+  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+  return {
+    jsxFactory: outdent16`
+import type { ${upperName} } from '../types/jsx'
+export declare const ${factoryName}: ${upperName}
+    `,
+    jsxType: outdent16`
+import type { ComponentProps, JSX } from 'preact'
+
+type ElementType = keyof JSX.IntrinsicElements
+
+type Dict = Record<string, unknown>
+
+export type ${componentName}<T extends ElementType> = {
+  (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T>) => JSX.Element
+  displayName?: string
+}
+
+interface JsxFactory {
+  <T extends ElementType>(component: T): ${componentName}<T>
+}
+
+type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K> }
+
+export type ${upperName} = JsxFactory & JsxElements
+
+export type ${typeName}<T extends ElementType> = ComponentProps<T>
+  `
+  };
+}
+
 // src/artifacts/qwik-jsx/jsx.ts
-import { outdent as outdent13 } from "outdent";
+import { outdent as outdent17 } from "outdent";
 function generateQwikJsxFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: outdent13`
+    js: outdent17`
     import { h } from '@builder.io/qwik'
     ${ctx.file.import("css, cx, cva, assignCss", "../css/index")}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
@@ -1214,7 +1378,7 @@ function generateQwikJsxFactory(ctx) {
 }
 
 // src/artifacts/qwik-jsx/pattern.ts
-import { outdent as outdent14 } from "outdent";
+import { outdent as outdent18 } from "outdent";
 import { match as match3 } from "ts-pattern";
 function generateQwikJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
@@ -1223,7 +1387,7 @@ function generateQwikJsxPattern(ctx) {
     const { description, jsxElement = "div" } = pattern.config;
     return {
       name: dashName,
-      js: outdent14`
+      js: outdent18`
       import { h } from '@builder.io/qwik'
       ${ctx.file.import(factoryName, "./factory")}
       ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
@@ -1231,12 +1395,12 @@ function generateQwikJsxPattern(ctx) {
       export const ${jsxName} = function ${jsxName}(props) {
         ${match3(props.length).with(
         0,
-        () => outdent14`
+        () => outdent18`
         const styleProps = ${styleFnName}()
         return h(${factoryName}.${jsxElement}, { ...styleProps, ...props })
           `
       ).otherwise(
-        () => outdent14`
+        () => outdent18`
         const { ${props.join(", ")}, ...restProps } = props
         const styleProps = ${styleFnName}({${props.join(", ")}})
         return h(${factoryName}.${jsxElement}, { ...styleProps, ...restProps })
@@ -1244,7 +1408,7 @@ function generateQwikJsxPattern(ctx) {
       )}
       }
       `,
-      dts: outdent14`
+      dts: outdent18`
       import type { FunctionComponent } from '@builder.io/qwik'
       import type { ${upperName}Properties } from '../patterns/${dashName}'
       import type { ${typeName} } from '../types/jsx'
@@ -1263,15 +1427,15 @@ function generateQwikJsxPattern(ctx) {
 }
 
 // src/artifacts/qwik-jsx/types.ts
-import { outdent as outdent15 } from "outdent";
+import { outdent as outdent19 } from "outdent";
 function generateQwikJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent15`
+    jsxFactory: outdent19`
 import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent15`
+    jsxType: outdent19`
 import type { FunctionComponent, QwikIntrinsicElements } from '@builder.io/qwik'
 import type { Assign as _Assign, JsxStyleProps, PatchedHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -1324,12 +1488,100 @@ export type ${typeName}<T extends ElementType> = Assign<ComponentProps<T>, JsxSt
   };
 }
 
+// src/artifacts/qwik-jsx/jsx.string-literal.ts
+import { outdent as outdent20 } from "outdent";
+function generateQwikJsxStringLiteralFactory(ctx) {
+  const { factoryName, componentName } = ctx.jsx;
+  return {
+    js: outdent20`
+    import { h } from '@builder.io/qwik'
+    ${ctx.file.import("css, cx", "../css/index")}
+    
+    function createStyledFn(Dynamic) {
+      return function styledFn(template) {
+          const baseClassName = css(template)
+          const ${componentName} = function ${componentName}(props) {
+              const { as: Element = Dynamic, ...elementProps } = props
+              const classes = () => cx(baseClassName, elementProps.className)
+          
+              return h(Element, {
+                  ...elementProps,
+                  className: classes(),
+              })
+          }
+          
+          ${componentName}.displayName = \`${factoryName}.\${Dynamic}\`
+          return ${componentName}
+        }
+    }
+    
+    function createJsxFactory() {
+      const cache = new Map()
+    
+      return new Proxy(createStyledFn, {
+        apply(_, __, args) {
+          return createStyledFn(...args)
+        },
+        get(_, el) {
+          if (!cache.has(el)) {
+            cache.set(el, createStyledFn(el))
+          }
+          return cache.get(el)
+        },
+      })
+    }
+
+    export const ${factoryName} = createJsxFactory()
+
+    `
+  };
+}
+
+// src/artifacts/qwik-jsx/types.string-literal.ts
+import { outdent as outdent21 } from "outdent";
+function generateQwikJsxStringLiteralTypes(ctx) {
+  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+  return {
+    jsxFactory: outdent21`
+import { ${upperName} } from '../types/jsx'
+export declare const ${factoryName}: ${upperName}
+    `,
+    jsxType: outdent21`
+import type { FunctionComponent, QwikIntrinsicElements } from '@builder.io/qwik'
+
+type ElementType = keyof QwikIntrinsicElements | FunctionComponent<any>
+
+type ComponentProps<T extends ElementType> = T extends keyof QwikIntrinsicElements
+  ? QwikIntrinsicElements[T]
+  : T extends FunctionComponent<infer P>
+  ? P
+  : never
+
+type Dict = Record<string, unknown>
+
+export type ${componentName}<T extends ElementType> = {
+  (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T>) => JSX.Element
+}
+
+interface JsxFactory {
+  <T extends ElementType>(component: T): ${componentName}<T>
+}
+
+type JsxElements = { [K in keyof QwikIntrinsicElements]: ${componentName}<K> }
+
+export type ${upperName} = JsxFactory & JsxElements
+
+export type ${typeName}<T extends ElementType> = ComponentProps<T>
+  `
+  };
+}
+
 // src/artifacts/react-jsx/jsx.ts
-import { outdent as outdent16 } from "outdent";
+import { outdent as outdent22 } from "outdent";
 function generateReactJsxFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: outdent16`
+    js: outdent22`
     import { createElement, forwardRef, useMemo } from 'react'
     ${ctx.file.import("css, cx, cva, assignCss", "../css/index")}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
@@ -1395,7 +1647,7 @@ function generateReactJsxFactory(ctx) {
 }
 
 // src/artifacts/react-jsx/pattern.ts
-import { outdent as outdent17 } from "outdent";
+import { outdent as outdent23 } from "outdent";
 import { match as match4 } from "ts-pattern";
 function generateReactJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
@@ -1404,7 +1656,7 @@ function generateReactJsxPattern(ctx) {
     const { description, jsxElement = "div" } = pattern.config;
     return {
       name: dashName,
-      js: outdent17`
+      js: outdent23`
       import { createElement, forwardRef } from 'react'
       ${ctx.file.import(factoryName, "./factory")}
       ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
@@ -1412,12 +1664,12 @@ function generateReactJsxPattern(ctx) {
       export const ${jsxName} = forwardRef(function ${jsxName}(props, ref) {
         ${match4(props.length).with(
         0,
-        () => outdent17`
+        () => outdent23`
         const styleProps = ${styleFnName}()
         return createElement(${factoryName}.${jsxElement}, { ref, ...styleProps, ...props })
           `
       ).otherwise(
-        () => outdent17`
+        () => outdent23`
         const { ${props.join(", ")}, ...restProps } = props
         const styleProps = ${styleFnName}({${props.join(", ")}})
         return createElement(${factoryName}.${jsxElement}, { ref, ...styleProps, ...restProps })
@@ -1425,7 +1677,7 @@ function generateReactJsxPattern(ctx) {
       )}
       })    
       `,
-      dts: outdent17`
+      dts: outdent23`
       import type { FunctionComponent } from 'react'
       import type { ${upperName}Properties } from '../patterns/${dashName}'
       import type { ${typeName} } from '../types/jsx'
@@ -1440,15 +1692,15 @@ function generateReactJsxPattern(ctx) {
 }
 
 // src/artifacts/react-jsx/types.ts
-import { outdent as outdent18 } from "outdent";
+import { outdent as outdent24 } from "outdent";
 function generateReactJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent18`
+    jsxFactory: outdent24`
 import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent18`
+    jsxType: outdent24`
 import type { ComponentProps, ElementType } from 'react'
 import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -1471,21 +1723,103 @@ interface JsxFactory {
   <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P): ${componentName}<T, P['__type']>
 }
 
-type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
+type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
+
+export type ${upperName} = JsxFactory & JsxElements
+
+export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+  `
+  };
+}
+
+// src/artifacts/react-jsx/jsx.string-literal.ts
+import { outdent as outdent25 } from "outdent";
+function generateReactJsxStringLiteralFactory(ctx) {
+  const { factoryName, componentName } = ctx.jsx;
+  return {
+    js: outdent25`
+    import { createElement, forwardRef } from 'react'
+    ${ctx.file.import("css, cx", "../css/index")}
+    
+    function createStyledFn(Dynamic) {
+      return function styledFn(template) {
+        const baseClassName = css(template)
+        const ${componentName} = forwardRef(function ${componentName}(props, ref) {
+            const { as: Element = Dynamic, ...elementProps } = props
+            const classes = () => cx(baseClassName, elementProps.className)
+        
+            return createElement(Element, {
+                ref,
+                ...elementProps,
+                className: classes(),
+            })
+        })
+        
+        ${componentName}.displayName = \`${factoryName}.\${Dynamic}\`
+        return ${componentName}
+      }
+    }
+    
+    function createJsxFactory() {
+      const cache = new Map()
+    
+      return new Proxy(createStyledFn, {
+        apply(_, __, args) {
+          return createStyledFn(...args)
+        },
+        get(_, el) {
+          if (!cache.has(el)) {
+            cache.set(el, createStyledFn(el))
+          }
+          return cache.get(el)
+        },
+      })
+    }
+
+    export const ${factoryName} = createJsxFactory()
+
+    `
+  };
+}
+
+// src/artifacts/react-jsx/types.string-literal.ts
+import { outdent as outdent26 } from "outdent";
+function generateReactJsxStringLiteralTypes(ctx) {
+  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+  return {
+    jsxFactory: outdent26`
+import { ${upperName} } from '../types/jsx'
+export declare const ${factoryName}: ${upperName}
+    `,
+    jsxType: outdent26`
+import type { ComponentProps, ElementType } from 'react'
+
+type Dict = Record<string, unknown>
+
+export type ${componentName}<T extends ElementType> = {
+  (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T>) => JSX.Element
+  displayName?: string
+}
+
+interface JsxFactory {
+  <T extends ElementType>(component: T): ${componentName}<T>
+}
+
+type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K> }
 
 export type ${upperName} = JsxFactory & JsxElements
 
-export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+export type ${typeName}<T extends ElementType> = ComponentProps<T>
   `
   };
 }
 
 // src/artifacts/solid-jsx/jsx.ts
-import { outdent as outdent19 } from "outdent";
+import { outdent as outdent27 } from "outdent";
 function generateSolidJsxFactory(ctx) {
   const { componentName, factoryName } = ctx.jsx;
   return {
-    js: outdent19`
+    js: outdent27`
     import { Dynamic } from 'solid-js/web'
     import { mergeProps, splitProps } from 'solid-js'
     import { createComponent } from 'solid-js/web'
@@ -1562,7 +1896,7 @@ function generateSolidJsxFactory(ctx) {
 }
 
 // src/artifacts/solid-jsx/pattern.ts
-import { outdent as outdent20 } from "outdent";
+import { outdent as outdent28 } from "outdent";
 import { match as match5 } from "ts-pattern";
 function generateSolidJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
@@ -1571,7 +1905,7 @@ function generateSolidJsxPattern(ctx) {
     const { description, jsxElement = "div" } = pattern.config;
     return {
       name: dashName,
-      js: outdent20`
+      js: outdent28`
     import { splitProps, mergeProps } from 'solid-js'
     import { createComponent } from 'solid-js/web'
     ${ctx.file.import(factoryName, "./factory")}
@@ -1580,12 +1914,12 @@ function generateSolidJsxPattern(ctx) {
     export function ${jsxName}(props) {
       ${match5(props.length).with(
         0,
-        () => outdent20`
+        () => outdent28`
           const styleProps = ${styleFnName}()
           return createComponent(${factoryName}.${jsxElement}, mergeProps(styleProps, props))
         `
       ).otherwise(
-        () => outdent20`
+        () => outdent28`
           const [patternProps, restProps] = splitProps(props, [${props.map((v) => JSON.stringify(v)).join(", ")}]);
           const styleProps = ${styleFnName}(patternProps)
           return createComponent(${factoryName}.${jsxElement}, mergeProps(styleProps, restProps))
@@ -1593,7 +1927,7 @@ function generateSolidJsxPattern(ctx) {
       )}
     }
     `,
-      dts: outdent20`
+      dts: outdent28`
     import { Component } from 'solid-js'
     import { ${upperName}Properties } from '../patterns/${dashName}'
     import { ${typeName} } from '../types/jsx'
@@ -1608,15 +1942,15 @@ function generateSolidJsxPattern(ctx) {
 }
 
 // src/artifacts/solid-jsx/types.ts
-import { outdent as outdent21 } from "outdent";
+import { outdent as outdent29 } from "outdent";
 function generateSolidJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent21`
+    jsxFactory: outdent29`
 import type { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent21`
+    jsxType: outdent29`
 import type { ComponentProps, Component, JSX } from 'solid-js'
 import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -1650,12 +1984,102 @@ export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>,
   };
 }
 
+// src/artifacts/solid-jsx/jsx.string-literal.ts
+import { outdent as outdent30 } from "outdent";
+function generateSolidJsxStringLiteralFactory(ctx) {
+  const { componentName, factoryName } = ctx.jsx;
+  return {
+    js: outdent30`
+import { mergeProps, splitProps } from 'solid-js'
+import { Dynamic, createComponent } from 'solid-js/web'
+${ctx.file.import("css, cx", "../css/index")}
+
+function createStyled(element) {
+  return function styledFn(template) {
+    const baseClassName = css(template)
+    return function ${componentName}(props) {
+      const mergedProps = mergeProps({ as: element }, props)
+      const [localProps, elementProps] = splitProps(mergedProps, ['as', 'class'])
+      
+      return createComponent(
+        Dynamic,
+        mergeProps(
+          {
+            get component() {
+              return localProps.as
+            },
+            get class() {
+              return cx(baseClassName, localProps.class)
+            },
+          },
+          elementProps,
+        ),
+      )
+    }
+  }
+}
+
+function createJsxFactory() {
+  const cache = new Map()
+
+  return new Proxy(createStyled, {
+    apply(_, __, args) {
+      return createStyled(...args)
+    },
+    get(_, el) {
+      if (!cache.has(el)) {
+        cache.set(el, createStyled(el))
+      }
+      return cache.get(el)
+    },
+  })
+}
+
+export const ${factoryName} = createJsxFactory()
+    `
+  };
+}
+
+// src/artifacts/solid-jsx/types.string-literal.ts
+import { outdent as outdent31 } from "outdent";
+function generateSolidJsxStringLiteralTypes(ctx) {
+  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+  return {
+    jsxFactory: outdent31`
+import type { ${upperName} } from '../types/jsx'
+export declare const ${factoryName}: ${upperName}
+    `,
+    jsxType: outdent31`
+import type { Component, ComponentProps, JSX } from 'solid-js'
+
+type Dict = Record<string, unknown>
+
+type ElementType<P = any> = keyof JSX.IntrinsicElements | Component<P>
+
+export type ${componentName}<T extends ElementType> = {
+    (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T>) => JSX.Element
+    displayName?: string
+}
+
+interface JsxFactory {
+    <T extends ElementType>(component: T): ${componentName}<T>
+}
+
+type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K> }
+
+export type Styled = JsxFactory & JsxElements
+
+export type ${typeName}<T extends ElementType> = ComponentProps<T>
+  `
+  };
+}
+
 // src/artifacts/vue-jsx/jsx.ts
-import { outdent as outdent22 } from "outdent";
+import { outdent as outdent32 } from "outdent";
 function generateVueJsxFactory(ctx) {
   const { factoryName } = ctx.jsx;
   return {
-    js: outdent22`
+    js: outdent32`
     import { defineComponent, h, computed } from 'vue'
     ${ctx.file.import("css, cx, cva, assignCss", "../css/index")}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
@@ -1728,8 +2152,62 @@ function generateVueJsxFactory(ctx) {
   };
 }
 
+// src/artifacts/vue-jsx/jsx.string-literal.ts
+import { outdent as outdent33 } from "outdent";
+function generateVueJsxStringLiteralFactory(ctx) {
+  const { factoryName } = ctx.jsx;
+  return {
+    js: outdent33`
+    import { defineComponent, h, computed } from 'vue'
+    ${ctx.file.import("css, cx", "../css/index")}
+    
+  function createStyled(Dynamic) {
+    function styledFn(template) {
+      const baseClassName = css(template)
+      return defineComponent({
+        name: \`${factoryName}.\${Dynamic}\`,
+        inheritAttrs: false,
+        props: { as: { type: [String, Object], default: Dynamic } },
+        setup(props, { slots, attrs }) {
+          const classes = computed(() => cx(baseClassName, elementProps.className))
+          return () => {
+            return h(
+              props.as,
+              {
+                class: classes.value,
+                ...elementProps,
+              },
+              slots.default && slots.default(),
+            )
+          }
+        },
+      })
+    }
+  }
+    
+    function createJsxFactory() {
+      const cache = new Map()
+    
+      return new Proxy(createStyled, {
+        apply(_, __, args) {
+          return createStyled(...args)
+        },
+        get(_, el) {
+          if (!cache.has(el)) {
+            cache.set(el, createStyled(el))
+          }
+          return cache.get(el)
+        },
+      })
+    }
+
+    export const ${factoryName} = createJsxFactory()
+    `
+  };
+}
+
 // src/artifacts/vue-jsx/pattern.ts
-import { outdent as outdent23 } from "outdent";
+import { outdent as outdent34 } from "outdent";
 function generateVueJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
   return ctx.patterns.details.map((pattern) => {
@@ -1738,7 +2216,7 @@ function generateVueJsxPattern(ctx) {
     const propList = props.map((v) => JSON.stringify(v)).join(", ");
     return {
       name: dashName,
-      js: outdent23`
+      js: outdent34`
     import { defineComponent, h, computed } from 'vue'
     ${ctx.file.import(factoryName, "./factory")}
     ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
@@ -1756,7 +2234,7 @@ function generateVueJsxPattern(ctx) {
         }
     })
     `,
-      dts: outdent23`
+      dts: outdent34`
     import { FunctionalComponent } from 'vue'
     import { ${upperName}Properties } from '../patterns/${dashName}'
     import { ${typeName} } from '../types/jsx'
@@ -1771,15 +2249,15 @@ function generateVueJsxPattern(ctx) {
 }
 
 // src/artifacts/vue-jsx/types.ts
-import { outdent as outdent24 } from "outdent";
+import { outdent as outdent35 } from "outdent";
 function generateVueJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent24`
+    jsxFactory: outdent35`
 import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent24`
+    jsxType: outdent35`
 import type { Component, FunctionalComponent } from 'vue'
 import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -1935,6 +2413,161 @@ type IntrinsicElement =
   };
 }
 
+// src/artifacts/vue-jsx/types.string-literal.ts
+import { outdent as outdent36 } from "outdent";
+function generateVueJsxStringLiteralTypes(ctx) {
+  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+  return {
+    jsxFactory: outdent36`
+import { ${upperName} } from '../types/jsx'
+export declare const ${factoryName}: ${upperName}
+    `,
+    jsxType: outdent36`
+import type { Component, FunctionalComponent } from 'vue'
+
+type IntrinsicElement =
+  | 'a'
+  | 'abbr'
+  | 'address'
+  | 'area'
+  | 'article'
+  | 'aside'
+  | 'audio'
+  | 'b'
+  | 'base'
+  | 'bdi'
+  | 'bdo'
+  | 'blockquote'
+  | 'body'
+  | 'br'
+  | 'button'
+  | 'canvas'
+  | 'caption'
+  | 'cite'
+  | 'code'
+  | 'col'
+  | 'colgroup'
+  | 'data'
+  | 'datalist'
+  | 'dd'
+  | 'del'
+  | 'details'
+  | 'dfn'
+  | 'dialog'
+  | 'div'
+  | 'dl'
+  | 'dt'
+  | 'em'
+  | 'embed'
+  | 'fieldset'
+  | 'figcaption'
+  | 'figure'
+  | 'footer'
+  | 'form'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'head'
+  | 'header'
+  | 'hgroup'
+  | 'hr'
+  | 'html'
+  | 'i'
+  | 'iframe'
+  | 'img'
+  | 'input'
+  | 'ins'
+  | 'kbd'
+  | 'label'
+  | 'legend'
+  | 'li'
+  | 'link'
+  | 'main'
+  | 'map'
+  | 'mark'
+  | 'math'
+  | 'menu'
+  | 'menuitem'
+  | 'meta'
+  | 'meter'
+  | 'nav'
+  | 'noscript'
+  | 'object'
+  | 'ol'
+  | 'optgroup'
+  | 'option'
+  | 'output'
+  | 'p'
+  | 'param'
+  | 'picture'
+  | 'pre'
+  | 'progress'
+  | 'q'
+  | 'rb'
+  | 'rp'
+  | 'rt'
+  | 'rtc'
+  | 'ruby'
+  | 's'
+  | 'samp'
+  | 'script'
+  | 'section'
+  | 'select'
+  | 'slot'
+  | 'small'
+  | 'source'
+  | 'span'
+  | 'strong'
+  | 'style'
+  | 'sub'
+  | 'summary'
+  | 'sup'
+  | 'svg'
+  | 'table'
+  | 'tbody'
+  | 'td'
+  | 'template'
+  | 'textarea'
+  | 'tfoot'
+  | 'th'
+  | 'thead'
+  | 'time'
+  | 'title'
+  | 'tr'
+  | 'track'
+  | 'u'
+  | 'ul'
+  | 'var'
+  | 'video'
+  | 'wbr'
+
+  type ElementType = IntrinsicElement | Component
+
+  type ComponentProps<T extends ElementType> = T extends keyof JSX.IntrinsicElements
+    ? JSX.IntrinsicElements[T]
+    : T extends Component<infer Props>
+    ? Props
+    : never
+
+  type ${componentName}<T extends ElementType> = FunctionalComponent<ComponentProps<T>>
+  >
+
+  interface JsxFactory {
+    <T extends ElementType>(component: T): ${componentName}<T>
+  }
+  
+  type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K> }
+  
+  export type ${upperName} = JsxFactory & JsxElements
+    
+  export type ${typeName}<T extends ElementType> = ComponentProps<T>
+  `
+  };
+}
+
 // src/artifacts/jsx.ts
 var typesMap = {
   react: generateReactJsxTypes,
@@ -1943,10 +2576,18 @@ var typesMap = {
   vue: generateVueJsxTypes,
   qwik: generateQwikJsxTypes
 };
+var typesStringLiteralMap = {
+  react: generateSolidJsxStringLiteralTypes,
+  solid: generateReactJsxStringLiteralTypes,
+  qwik: generateQwikJsxStringLiteralTypes,
+  preact: generatePreactJsxStringLiteralTypes,
+  vue: generateVueJsxStringLiteralTypes
+};
 function generateJsxTypes(ctx) {
   if (!ctx.jsx.framework)
     return;
-  return typesMap[ctx.jsx.framework](ctx);
+  const type = ctx.isTemplateLiteralSyntax ? typesStringLiteralMap[ctx.jsx.framework] : typesMap[ctx.jsx.framework];
+  return type?.(ctx);
 }
 var factoryMap = {
   react: generateReactJsxFactory,
@@ -1955,10 +2596,18 @@ var factoryMap = {
   vue: generateVueJsxFactory,
   qwik: generateQwikJsxFactory
 };
+var factoryStringLiteralMap = {
+  react: generateReactJsxStringLiteralFactory,
+  solid: generateSolidJsxStringLiteralFactory,
+  qwik: generateQwikJsxStringLiteralFactory,
+  preact: generatePreactJsxStringLiteralFactory,
+  vue: generateVueJsxStringLiteralFactory
+};
 function generateJsxFactory(ctx) {
   if (!ctx.jsx.framework)
     return;
-  return factoryMap[ctx.jsx.framework](ctx);
+  const factory = ctx.isTemplateLiteralSyntax ? factoryStringLiteralMap[ctx.jsx.framework] : factoryMap[ctx.jsx.framework];
+  return factory?.(ctx);
 }
 var patternMap = {
   react: generateReactJsxPattern,
@@ -1968,6 +2617,8 @@ var patternMap = {
   qwik: generateQwikJsxPattern
 };
 function generateJsxPatterns(ctx) {
+  if (ctx.isTemplateLiteralSyntax)
+    return [];
   if (ctx.patterns.isEmpty() && !ctx.jsx.framework)
     return [];
   return patternMap[ctx.jsx.framework](ctx);
@@ -2035,7 +2686,7 @@ var recipe_d_ts_default = {
 
 // src/artifacts/generated/pattern.d.ts.json
 var pattern_d_ts_default = {
-  content: "import type { CssProperty, SystemStyleObject } from './system-types'\nimport type { TokenCategory } from '../tokens'\n\ntype Primitive = string | number | boolean | null | undefined\ntype LiteralUnion<T, K extends Primitive = string> = T | (K & Record<never, never>)\n\nexport type PatternProperty =\n  | { type: 'property'; value: CssProperty }\n  | { type: 'enum'; value: string[] }\n  | { type: 'token'; value: TokenCategory; property?: CssProperty }\n  | { type: 'string' | 'boolean' | 'number' }\n\nexport type PatternHelpers = {\n  map: (value: any, fn: (value: string) => string | undefined) => any\n}\n\ntype PatternProperties = Record<string, PatternProperty>\n\ntype Props<T> = Record<LiteralUnion<keyof T>, any>\n\nexport type PatternConfig<T extends PatternProperties = PatternProperties> = {\n  /**\n   * The description of the pattern. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The JSX element rendered by the pattern\n   * @default 'div'\n   */\n  jsxElement?: string\n  /**\n   * The properties of the pattern.\n   */\n  properties: T\n  /**\n   * The css object this pattern will generate.\n   */\n  transform?: (props: Props<T>, helpers: PatternHelpers) => SystemStyleObject\n  /**\n   * The jsx element name this pattern will generate.\n   */\n  jsx?: string\n  /**\n   * Whether to only generate types for the specified properties.\n   * This will disallow css properties\n   */\n  strict?: boolean\n  /**\n   * @experimental\n   * Disallow certain css properties for this pattern\n   */\n  blocklist?: LiteralUnion<CssProperty>[]\n}\n"
+  content: "import type { CssProperty, SystemStyleObject } from './system-types'\nimport type { TokenCategory } from '../tokens'\n\ntype Primitive = string | number | boolean | null | undefined\ntype LiteralUnion<T, K extends Primitive = string> = T | (K & Record<never, never>)\n\nexport type PatternProperty =\n  | { type: 'property'; value: CssProperty }\n  | { type: 'enum'; value: string[] }\n  | { type: 'token'; value: TokenCategory; property?: CssProperty }\n  | { type: 'string' | 'boolean' | 'number' }\n\nexport type PatternHelpers = {\n  map: (value: any, fn: (value: string) => string | undefined) => any\n}\n\ntype PatternProperties = Record<string, PatternProperty>\n\ntype Props<T> = Record<LiteralUnion<keyof T>, any>\n\nexport type PatternConfig<T extends PatternProperties = PatternProperties> = {\n  /**\n   * The description of the pattern. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The JSX element rendered by the pattern\n   * @default 'div'\n   */\n  jsxElement?: string\n  /**\n   * The properties of the pattern.\n   */\n  properties?: T\n  /**\n   * The css object this pattern will generate.\n   */\n  transform?: (props: Props<T>, helpers: PatternHelpers) => SystemStyleObject\n  /**\n   * The jsx element name this pattern will generate.\n   */\n  jsx?: string\n  /**\n   * Whether to only generate types for the specified properties.\n   * This will disallow css properties\n   */\n  strict?: boolean\n  /**\n   * @experimental\n   * Disallow certain css properties for this pattern\n   */\n  blocklist?: LiteralUnion<CssProperty>[]\n}\n"
 };
 
 // src/artifacts/generated/parts.d.ts.json
@@ -2062,9 +2713,9 @@ function getGeneratedTypes() {
 }
 
 // src/artifacts/types/main.ts
-import { outdent as outdent25 } from "outdent";
+import { outdent as outdent37 } from "outdent";
 var generateTypesEntry = () => ({
-  global: outdent25`
+  global: outdent37`
     import type { RecipeVariantRecord, RecipeConfig } from './recipe'
     import type { Parts } from './parts'
     import type { PatternConfig } from './pattern'
@@ -2081,19 +2732,19 @@ var generateTypesEntry = () => ({
       export function defineParts<T extends Parts>(parts: T): (config: Partial<Record<keyof T, SystemStyleObject>>) => Partial<Record<keyof T, SystemStyleObject>>;
     }
     `,
-  index: outdent25`
+  index: outdent37`
     import './global'
     export type { ConditionalValue } from './conditions'
     export type { GlobalStyleObject, JsxStyleProps, SystemStyleObject } from './system-types'
 
     `,
-  helpers: outdent25`
+  helpers: outdent37`
   export type Pretty<T> = T extends infer U ? { [K in keyof U]: U[K] } : never
   `
 });
 
 // src/artifacts/types/prop-types.ts
-import { outdent as outdent26 } from "outdent";
+import { outdent as outdent38 } from "outdent";
 function generatePropTypes(ctx) {
   const {
     config: { strictTokens },
@@ -2101,7 +2752,7 @@ function generatePropTypes(ctx) {
   } = ctx;
   const strictText = `${strictTokens ? "" : " | CssValue<T>"}`;
   const result = [
-    outdent26`
+    outdent38`
     import type { ConditionalValue } from './conditions';
     import type { CssProperties } from './system-types'
     import type { Tokens } from '../tokens'
@@ -2124,7 +2775,7 @@ function generatePropTypes(ctx) {
     result.push(`	${key}: Shorthand<${JSON.stringify(value)}>;`);
   });
   result.push("}");
-  return outdent26`
+  return outdent38`
   ${result.join("\n")}
 
   export type PropertyValue<T extends string> = T extends keyof PropertyTypes
@@ -2137,10 +2788,10 @@ function generatePropTypes(ctx) {
 
 // src/artifacts/types/style-props.ts
 import { allCssProperties } from "@pandacss/is-valid-prop";
-import outdent27 from "outdent";
+import outdent39 from "outdent";
 function generateStyleProps(ctx) {
   const props = new Set(allCssProperties.concat(ctx.utility.keys()));
-  return outdent27`
+  return outdent39`
     import type { ConditionalValue } from './conditions'
     import type { PropertyValue } from './prop-type'
     import type { Token } from '../tokens'
@@ -2157,7 +2808,7 @@ function generateStyleProps(ctx) {
 
 // src/artifacts/types/token-types.ts
 import { capitalize, unionType as unionType3 } from "@pandacss/shared";
-import { outdent as outdent28 } from "outdent";
+import { outdent as outdent40 } from "outdent";
 import pluralize from "pluralize";
 var categories = [
   "zIndex",
@@ -2202,7 +2853,7 @@ function generateTokenTypes(ctx) {
   result.add("} & { [token: string]: never }");
   set.add(Array.from(result).join("\n"));
   set.add(`export type TokenCategory = ${unionType3(categories)}`);
-  return outdent28.string(Array.from(set).join("\n\n"));
+  return outdent40.string(Array.from(set).join("\n\n"));
 }
 
 // src/artifacts/index.ts
@@ -2260,8 +2911,8 @@ function setupTypes(ctx) {
   };
 }
 function setupCss(ctx) {
-  const code = generateCssFn(ctx);
-  const conditions = generateConditions(ctx);
+  const code = ctx.isTemplateLiteralSyntax ? generateStringLiteralCssFn(ctx) : generateCssFn(ctx);
+  const conditions = ctx.isTemplateLiteralSyntax ? generateStringLiteralConditions(ctx) : generateConditions(ctx);
   return {
     dir: ctx.paths.css,
     files: [
@@ -2272,6 +2923,8 @@ function setupCss(ctx) {
   };
 }
 function setupCva(ctx) {
+  if (ctx.isTemplateLiteralSyntax)
+    return;
   const code = generateCvaFn(ctx);
   return {
     dir: ctx.paths.css,
@@ -2297,8 +2950,8 @@ function setupRecipes(ctx) {
     return;
   const indexFiles = files.filter((file) => !file.name.includes("create-recipe"));
   const index = {
-    js: outdent29.string(indexFiles.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
-    dts: outdent29.string(indexFiles.map((file) => `export * from './${file.name}'`).join("\n"))
+    js: outdent41.string(indexFiles.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
+    dts: outdent41.string(indexFiles.map((file) => `export * from './${file.name}'`).join("\n"))
   };
   return {
     dir: ctx.paths.recipe,
@@ -2311,12 +2964,14 @@ function setupRecipes(ctx) {
   };
 }
 function setupPatterns(ctx) {
+  if (ctx.isTemplateLiteralSyntax)
+    return;
   const files = generatePattern(ctx);
   if (!files)
     return;
   const index = {
-    js: outdent29.string(files.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
-    dts: outdent29.string(files.map((file) => `export * from './${file.name}'`).join("\n"))
+    js: outdent41.string(files.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
+    dts: outdent41.string(files.map((file) => `export * from './${file.name}'`).join("\n"))
   };
   return {
     dir: ctx.paths.pattern,
@@ -2336,13 +2991,13 @@ function setupJsx(ctx) {
   const factory = generateJsxFactory(ctx);
   const patterns = generateJsxPatterns(ctx);
   const index = {
-    js: outdent29`
+    js: outdent41`
   ${ctx.file.export("./factory")}
-  ${outdent29.string(patterns.map((file) => ctx.file.export(`./${file.name}`)).join("\n"))}
+  ${outdent41.string(patterns.map((file) => ctx.file.export(`./${file.name}`)).join("\n"))}
   `,
-    dts: outdent29`
+    dts: outdent41`
   export * from './factory'
-  ${outdent29.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
+  ${outdent41.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
   export type { ${ctx.jsx.typeName} } from '../types/jsx'
     `
   };
@@ -2351,7 +3006,7 @@ function setupJsx(ctx) {
     files: [
       ...patterns.map((file) => ({ file: ctx.file.ext(file.name), code: file.js })),
       ...patterns.map((file) => ({ file: `${file.name}.d.ts`, code: file.dts })),
-      { file: ctx.file.ext("is-valid-prop"), code: isValidProp.js },
+      { file: ctx.file.ext("is-valid-prop"), code: isValidProp?.js },
       { file: "factory.d.ts", code: types.jsxFactory },
       { file: ctx.file.ext("factory"), code: factory?.js },
       { file: "index.d.ts", code: index.dts },
@@ -2361,15 +3016,15 @@ function setupJsx(ctx) {
 }
 function setupCssIndex(ctx) {
   const index = {
-    js: outdent29`
+    js: outdent41`
   ${ctx.file.export("./css")}
   ${ctx.file.export("./cx")}
-  ${ctx.file.export("./cva")}
+  ${ctx.isTemplateLiteralSyntax ? "" : ctx.file.export("./cva")}
  `,
-    dts: outdent29`
+    dts: outdent41`
   export * from './css'
   export * from './cx'
-  export * from './cva'
+  ${ctx.isTemplateLiteralSyntax ? "" : `export * from './cva'`}
   `
   };
   return {
@@ -2557,6 +3212,7 @@ var helpers = {
 var getBaseEngine = (conf) => {
   const { config } = conf;
   const theme = config.theme ?? {};
+  const isTemplateLiteralSyntax = config.syntax === "template-literal";
   const hash = {
     tokens: isBool(config.hash) ? config.hash : config.hash?.cssVar,
     className: isBool(config.hash) ? config.hash : config.hash?.className
@@ -2575,12 +3231,12 @@ var getBaseEngine = (conf) => {
   const utility = new Utility({
     prefix: prefix.className,
     tokens,
-    config: config.utilities,
+    config: isTemplateLiteralSyntax ? {} : config.utilities,
     separator: config.separator,
     shorthands: config.shorthands
   });
   const conditions = new Conditions({
-    conditions: config.conditions,
+    conditions: isTemplateLiteralSyntax ? {} : config.conditions,
     breakpoints: config.theme?.breakpoints
   });
   const { textStyles, layerStyles } = theme;
@@ -2618,6 +3274,7 @@ var getBaseEngine = (conf) => {
   };
   return {
     ...conf,
+    isTemplateLiteralSyntax,
     studio,
     hash,
     prefix,
@@ -2699,7 +3356,7 @@ var getPatternEngine = (config) => {
       return Object.entries(patterns).map(([name, pattern]) => ({
         type: "pattern",
         name: pattern.jsx ?? capitalize3(name),
-        props: Object.keys(pattern.properties),
+        props: Object.keys(pattern?.properties ?? {}),
         baseName: name
       }));
     }),
@@ -2739,6 +3396,7 @@ var defaults = (conf) => ({
     jsxFactory: "styled",
     outExtension: "mjs",
     shorthands: true,
+    syntax: "object-literal",
     ...conf.config
   }
 });