@pandacss/generator 0.3.2 → 0.5.0

package/dist/index.mjs

@@ -11,6 +11,7 @@ __export(messages_exports, {
   buildComplete: () => buildComplete,
   codegenComplete: () => codegenComplete,
   configExists: () => configExists,
+  configWatch: () => configWatch,
   getMessages: () => getMessages,
   noExtract: () => noExtract,
   thankYou: () => thankYou,
@@ -34,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`
@@ -79,6 +80,9 @@ var noExtract = () => outdent`
 var watch = () => outdent`
   Watching for file changes...
   `;
+var configWatch = () => outdent`
+  Watching for config file changes...
+  `;
 var buildComplete = (count) => outdent`
   Successfully extracted css from ${count} file(s) ✨
   `;
@@ -89,7 +93,8 @@ var getMessages = (ctx) => ({
   codegenComplete,
   noExtract,
   watch,
-  buildComplete
+  buildComplete,
+  configWatch
 });
 
 // src/generator.ts
@@ -97,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) => {
@@ -541,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 {
@@ -552,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")}
 
@@ -599,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")}
 
@@ -669,7 +752,7 @@ function generateCvaFn(ctx) {
     }    
 
     `,
-    dts: outdent4`
+    dts: outdent6`
     import type { RecipeCreatorFn } from '../types/recipe'
 
     export declare const cva: RecipeCreatorFn
@@ -681,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,
@@ -701,7 +784,7 @@ function generateCx() {
    
     export { cx }
   `,
-    dts: outdent5`
+    dts: outdent7`
        type Argument = string | boolean | null | undefined
 
        /** Conditionally join classNames into a single string */
@@ -711,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){
@@ -737,11 +820,13 @@ function generateHelpers() {
 
 // src/artifacts/generated/is-valid-prop.mjs.json
 var is_valid_prop_mjs_default = {
-  content: '// src/index.ts\nvar userGenerated = [];\nvar allCssProperties = [\n  "MsAccelerator",\n  "MsBlockProgression",\n  "MsContentZoomChaining",\n  "MsContentZooming",\n  "MsContentZoomLimit",\n  "MsContentZoomLimitMax",\n  "MsContentZoomLimitMin",\n  "MsContentZoomSnap",\n  "MsContentZoomSnapPoints",\n  "MsContentZoomSnapType",\n  "MsFilter",\n  "MsFlowFrom",\n  "MsFlowInto",\n  "MsGridColumns",\n  "MsGridRows",\n  "MsHighContrastAdjust",\n  "MsHyphenateLimitChars",\n  "MsHyphenateLimitLines",\n  "MsHyphenateLimitZone",\n  "MsImeAlign",\n  "MsOverflowStyle",\n  "MsScrollbar3dlightColor",\n  "MsScrollbarArrowColor",\n  "MsScrollbarBaseColor",\n  "MsScrollbarDarkshadowColor",\n  "MsScrollbarFaceColor",\n  "MsScrollbarHighlightColor",\n  "MsScrollbarShadowColor",\n  "MsScrollbarTrackColor",\n  "MsScrollChaining",\n  "MsScrollLimit",\n  "MsScrollLimitXMax",\n  "MsScrollLimitXMin",\n  "MsScrollLimitYMax",\n  "MsScrollLimitYMin",\n  "MsScrollRails",\n  "MsScrollSnapPointsX",\n  "MsScrollSnapPointsY",\n  "MsScrollSnapType",\n  "MsScrollSnapX",\n  "MsScrollSnapY",\n  "MsScrollTranslation",\n  "MsTextAutospace",\n  "MsTouchSelect",\n  "MsUserSelect",\n  "MsWrapFlow",\n  "MsWrapMargin",\n  "MsWrapThrough",\n  "MozAppearance",\n  "MozBinding",\n  "MozBorderBottomColors",\n  "MozBorderLeftColors",\n  "MozBorderRightColors",\n  "MozBorderTopColors",\n  "MozContextProperties",\n  "MozFloatEdge",\n  "MozForceBrokenImageIcon",\n  "MozImageRegion",\n  "MozOrient",\n  "MozOutlineRadius",\n  "MozOutlineRadiusBottomleft",\n  "MozOutlineRadiusBottomright",\n  "MozOutlineRadiusTopleft",\n  "MozOutlineRadiusTopright",\n  "MozStackSizing",\n  "MozTextBlink",\n  "MozUserFocus",\n  "MozUserInput",\n  "MozUserModify",\n  "MozWindowDragging",\n  "MozWindowShadow",\n  "WebkitAppearance",\n  "WebkitBorderBefore",\n  "WebkitBorderBeforeColor",\n  "WebkitBorderBeforeStyle",\n  "WebkitBorderBeforeWidth",\n  "WebkitBoxReflect",\n  "WebkitLineClamp",\n  "WebkitMask",\n  "WebkitMaskAttachment",\n  "WebkitMaskClip",\n  "WebkitMaskComposite",\n  "WebkitMaskImage",\n  "WebkitMaskOrigin",\n  "WebkitMaskPosition",\n  "WebkitMaskPositionX",\n  "WebkitMaskPositionY",\n  "WebkitMaskRepeat",\n  "WebkitMaskRepeatX",\n  "WebkitMaskRepeatY",\n  "WebkitMaskSize",\n  "WebkitOverflowScrolling",\n  "WebkitTapHighlightColor",\n  "WebkitTextFillColor",\n  "WebkitTextStroke",\n  "WebkitTextStrokeColor",\n  "WebkitTextStrokeWidth",\n  "WebkitTouchCallout",\n  "WebkitUserModify",\n  "accentColor",\n  "alignContent",\n  "alignItems",\n  "alignSelf",\n  "alignTracks",\n  "all",\n  "animation",\n  "animationComposition",\n  "animationDelay",\n  "animationDirection",\n  "animationDuration",\n  "animationFillMode",\n  "animationIterationCount",\n  "animationName",\n  "animationPlayState",\n  "animationTimingFunction",\n  "animationTimeline",\n  "appearance",\n  "aspectRatio",\n  "azimuth",\n  "backdropFilter",\n  "backfaceVisibility",\n  "background",\n  "backgroundAttachment",\n  "backgroundBlendMode",\n  "backgroundClip",\n  "backgroundColor",\n  "backgroundImage",\n  "backgroundOrigin",\n  "backgroundPosition",\n  "backgroundPositionX",\n  "backgroundPositionY",\n  "backgroundRepeat",\n  "backgroundSize",\n  "blockOverflow",\n  "blockSize",\n  "border",\n  "borderBlock",\n  "borderBlockColor",\n  "borderBlockStyle",\n  "borderBlockWidth",\n  "borderBlockEnd",\n  "borderBlockEndColor",\n  "borderBlockEndStyle",\n  "borderBlockEndWidth",\n  "borderBlockStart",\n  "borderBlockStartColor",\n  "borderBlockStartStyle",\n  "borderBlockStartWidth",\n  "borderBottom",\n  "borderBottomColor",\n  "borderBottomLeftRadius",\n  "borderBottomRightRadius",\n  "borderBottomStyle",\n  "borderBottomWidth",\n  "borderCollapse",\n  "borderColor",\n  "borderEndEndRadius",\n  "borderEndStartRadius",\n  "borderImage",\n  "borderImageOutset",\n  "borderImageRepeat",\n  "borderImageSlice",\n  "borderImageSource",\n  "borderImageWidth",\n  "borderInline",\n  "borderInlineEnd",\n  "borderInlineColor",\n  "borderInlineStyle",\n  "borderInlineWidth",\n  "borderInlineEndColor",\n  "borderInlineEndStyle",\n  "borderInlineEndWidth",\n  "borderInlineStart",\n  "borderInlineStartColor",\n  "borderInlineStartStyle",\n  "borderInlineStartWidth",\n  "borderLeft",\n  "borderLeftColor",\n  "borderLeftStyle",\n  "borderLeftWidth",\n  "borderRadius",\n  "borderRight",\n  "borderRightColor",\n  "borderRightStyle",\n  "borderRightWidth",\n  "borderSpacing",\n  "borderStartEndRadius",\n  "borderStartStartRadius",\n  "borderStyle",\n  "borderTop",\n  "borderTopColor",\n  "borderTopLeftRadius",\n  "borderTopRightRadius",\n  "borderTopStyle",\n  "borderTopWidth",\n  "borderWidth",\n  "bottom",\n  "boxAlign",\n  "boxDecorationBreak",\n  "boxDirection",\n  "boxFlex",\n  "boxFlexGroup",\n  "boxLines",\n  "boxOrdinalGroup",\n  "boxOrient",\n  "boxPack",\n  "boxShadow",\n  "boxSizing",\n  "breakAfter",\n  "breakBefore",\n  "breakInside",\n  "captionSide",\n  "caret",\n  "caretColor",\n  "caretShape",\n  "clear",\n  "clip",\n  "clipPath",\n  "color",\n  "printColorAdjust",\n  "colorScheme",\n  "columnCount",\n  "columnFill",\n  "columnGap",\n  "columnRule",\n  "columnRuleColor",\n  "columnRuleStyle",\n  "columnRuleWidth",\n  "columnSpan",\n  "columnWidth",\n  "columns",\n  "contain",\n  "containIntrinsicSize",\n  "containIntrinsicBlockSize",\n  "containIntrinsicHeight",\n  "containIntrinsicInlineSize",\n  "containIntrinsicWidth",\n  "content",\n  "contentVisibility",\n  "counterIncrement",\n  "counterReset",\n  "counterSet",\n  "cursor",\n  "direction",\n  "display",\n  "emptyCells",\n  "filter",\n  "flex",\n  "flexBasis",\n  "flexDirection",\n  "flexFlow",\n  "flexGrow",\n  "flexShrink",\n  "flexWrap",\n  "float",\n  "font",\n  "fontFamily",\n  "fontFeatureSettings",\n  "fontKerning",\n  "fontLanguageOverride",\n  "fontOpticalSizing",\n  "fontVariationSettings",\n  "fontSize",\n  "fontSizeAdjust",\n  "fontSmooth",\n  "fontStretch",\n  "fontStyle",\n  "fontSynthesis",\n  "fontVariant",\n  "fontVariantAlternates",\n  "fontVariantCaps",\n  "fontVariantEastAsian",\n  "fontVariantLigatures",\n  "fontVariantNumeric",\n  "fontVariantPosition",\n  "fontWeight",\n  "forcedColorAdjust",\n  "gap",\n  "grid",\n  "gridArea",\n  "gridAutoColumns",\n  "gridAutoFlow",\n  "gridAutoRows",\n  "gridColumn",\n  "gridColumnEnd",\n  "gridColumnGap",\n  "gridColumnStart",\n  "gridGap",\n  "gridRow",\n  "gridRowEnd",\n  "gridRowGap",\n  "gridRowStart",\n  "gridTemplate",\n  "gridTemplateAreas",\n  "gridTemplateColumns",\n  "gridTemplateRows",\n  "hangingPunctuation",\n  "height",\n  "hyphenateCharacter",\n  "hyphenateLimitChars",\n  "hyphens",\n  "imageOrientation",\n  "imageRendering",\n  "imageResolution",\n  "imeMode",\n  "initialLetter",\n  "initialLetterAlign",\n  "inlineSize",\n  "inputSecurity",\n  "inset",\n  "insetBlock",\n  "insetBlockEnd",\n  "insetBlockStart",\n  "insetInline",\n  "insetInlineEnd",\n  "insetInlineStart",\n  "isolation",\n  "justifyContent",\n  "justifyItems",\n  "justifySelf",\n  "justifyTracks",\n  "left",\n  "letterSpacing",\n  "lineBreak",\n  "lineClamp",\n  "lineHeight",\n  "lineHeightStep",\n  "listStyle",\n  "listStyleImage",\n  "listStylePosition",\n  "listStyleType",\n  "margin",\n  "marginBlock",\n  "marginBlockEnd",\n  "marginBlockStart",\n  "marginBottom",\n  "marginInline",\n  "marginInlineEnd",\n  "marginInlineStart",\n  "marginLeft",\n  "marginRight",\n  "marginTop",\n  "marginTrim",\n  "mask",\n  "maskBorder",\n  "maskBorderMode",\n  "maskBorderOutset",\n  "maskBorderRepeat",\n  "maskBorderSlice",\n  "maskBorderSource",\n  "maskBorderWidth",\n  "maskClip",\n  "maskComposite",\n  "maskImage",\n  "maskMode",\n  "maskOrigin",\n  "maskPosition",\n  "maskRepeat",\n  "maskSize",\n  "maskType",\n  "masonryAutoFlow",\n  "mathDepth",\n  "mathShift",\n  "mathStyle",\n  "maxBlockSize",\n  "maxHeight",\n  "maxInlineSize",\n  "maxLines",\n  "maxWidth",\n  "minBlockSize",\n  "minHeight",\n  "minInlineSize",\n  "minWidth",\n  "mixBlendMode",\n  "objectFit",\n  "objectPosition",\n  "offset",\n  "offsetAnchor",\n  "offsetDistance",\n  "offsetPath",\n  "offsetPosition",\n  "offsetRotate",\n  "opacity",\n  "order",\n  "orphans",\n  "outline",\n  "outlineColor",\n  "outlineOffset",\n  "outlineStyle",\n  "outlineWidth",\n  "overflow",\n  "overflowAnchor",\n  "overflowBlock",\n  "overflowClipBox",\n  "overflowClipMargin",\n  "overflowInline",\n  "overflowWrap",\n  "overflowX",\n  "overflowY",\n  "overscrollBehavior",\n  "overscrollBehaviorBlock",\n  "overscrollBehaviorInline",\n  "overscrollBehaviorX",\n  "overscrollBehaviorY",\n  "padding",\n  "paddingBlock",\n  "paddingBlockEnd",\n  "paddingBlockStart",\n  "paddingBottom",\n  "paddingInline",\n  "paddingInlineEnd",\n  "paddingInlineStart",\n  "paddingLeft",\n  "paddingRight",\n  "paddingTop",\n  "pageBreakAfter",\n  "pageBreakBefore",\n  "pageBreakInside",\n  "paintOrder",\n  "perspective",\n  "perspectiveOrigin",\n  "placeContent",\n  "placeItems",\n  "placeSelf",\n  "pointerEvents",\n  "position",\n  "quotes",\n  "resize",\n  "right",\n  "rotate",\n  "rowGap",\n  "rubyAlign",\n  "rubyMerge",\n  "rubyPosition",\n  "scale",\n  "scrollbarColor",\n  "scrollbarGutter",\n  "scrollbarWidth",\n  "scrollBehavior",\n  "scrollMargin",\n  "scrollMarginBlock",\n  "scrollMarginBlockStart",\n  "scrollMarginBlockEnd",\n  "scrollMarginBottom",\n  "scrollMarginInline",\n  "scrollMarginInlineStart",\n  "scrollMarginInlineEnd",\n  "scrollMarginLeft",\n  "scrollMarginRight",\n  "scrollMarginTop",\n  "scrollPadding",\n  "scrollPaddingBlock",\n  "scrollPaddingBlockStart",\n  "scrollPaddingBlockEnd",\n  "scrollPaddingBottom",\n  "scrollPaddingInline",\n  "scrollPaddingInlineStart",\n  "scrollPaddingInlineEnd",\n  "scrollPaddingLeft",\n  "scrollPaddingRight",\n  "scrollPaddingTop",\n  "scrollSnapAlign",\n  "scrollSnapCoordinate",\n  "scrollSnapDestination",\n  "scrollSnapPointsX",\n  "scrollSnapPointsY",\n  "scrollSnapStop",\n  "scrollSnapType",\n  "scrollSnapTypeX",\n  "scrollSnapTypeY",\n  "scrollTimeline",\n  "scrollTimelineAxis",\n  "scrollTimelineName",\n  "shapeImageThreshold",\n  "shapeMargin",\n  "shapeOutside",\n  "tabSize",\n  "tableLayout",\n  "textAlign",\n  "textAlignLast",\n  "textCombineUpright",\n  "textDecoration",\n  "textDecorationColor",\n  "textDecorationLine",\n  "textDecorationSkip",\n  "textDecorationSkipInk",\n  "textDecorationStyle",\n  "textDecorationThickness",\n  "textEmphasis",\n  "textEmphasisColor",\n  "textEmphasisPosition",\n  "textEmphasisStyle",\n  "textIndent",\n  "textJustify",\n  "textOrientation",\n  "textOverflow",\n  "textRendering",\n  "textShadow",\n  "textSizeAdjust",\n  "textTransform",\n  "textUnderlineOffset",\n  "textUnderlinePosition",\n  "top",\n  "touchAction",\n  "transform",\n  "transformBox",\n  "transformOrigin",\n  "transformStyle",\n  "transition",\n  "transitionDelay",\n  "transitionDuration",\n  "transitionProperty",\n  "transitionTimingFunction",\n  "translate",\n  "unicodeBidi",\n  "userSelect",\n  "verticalAlign",\n  "visibility",\n  "whiteSpace",\n  "widows",\n  "width",\n  "willChange",\n  "wordBreak",\n  "wordSpacing",\n  "wordWrap",\n  "writingMode",\n  "zIndex",\n  "zoom",\n  ...userGenerated\n];\nvar properties = new Map(allCssProperties.map((prop) => [prop, true]));\nfunction memo(fn) {\n  const cache = /* @__PURE__ */ Object.create(null);\n  return (arg) => {\n    if (cache[arg] === void 0)\n      cache[arg] = fn(arg);\n    return cache[arg];\n  };\n}\nvar isCssProperty = memo((prop) => {\n  return properties.has(prop) || prop.startsWith("--");\n});\nexport {\n  allCssProperties,\n  isCssProperty\n};\n'
+  content: '// src/index.ts\nvar userGenerated = [];\nvar allCssProperties = [\n  "MsAccelerator",\n  "MsBlockProgression",\n  "MsContentZoomChaining",\n  "MsContentZooming",\n  "MsContentZoomLimit",\n  "MsContentZoomLimitMax",\n  "MsContentZoomLimitMin",\n  "MsContentZoomSnap",\n  "MsContentZoomSnapPoints",\n  "MsContentZoomSnapType",\n  "MsFilter",\n  "MsFlowFrom",\n  "MsFlowInto",\n  "MsGridColumns",\n  "MsGridRows",\n  "MsHighContrastAdjust",\n  "MsHyphenateLimitChars",\n  "MsHyphenateLimitLines",\n  "MsHyphenateLimitZone",\n  "MsImeAlign",\n  "MsOverflowStyle",\n  "MsScrollbar3dlightColor",\n  "MsScrollbarArrowColor",\n  "MsScrollbarBaseColor",\n  "MsScrollbarDarkshadowColor",\n  "MsScrollbarFaceColor",\n  "MsScrollbarHighlightColor",\n  "MsScrollbarShadowColor",\n  "MsScrollbarTrackColor",\n  "MsScrollChaining",\n  "MsScrollLimit",\n  "MsScrollLimitXMax",\n  "MsScrollLimitXMin",\n  "MsScrollLimitYMax",\n  "MsScrollLimitYMin",\n  "MsScrollRails",\n  "MsScrollSnapPointsX",\n  "MsScrollSnapPointsY",\n  "MsScrollSnapType",\n  "MsScrollSnapX",\n  "MsScrollSnapY",\n  "MsScrollTranslation",\n  "MsTextAutospace",\n  "MsTouchSelect",\n  "MsUserSelect",\n  "MsWrapFlow",\n  "MsWrapMargin",\n  "MsWrapThrough",\n  "MozAppearance",\n  "MozBinding",\n  "MozBorderBottomColors",\n  "MozBorderLeftColors",\n  "MozBorderRightColors",\n  "MozBorderTopColors",\n  "MozContextProperties",\n  "MozFloatEdge",\n  "MozForceBrokenImageIcon",\n  "MozImageRegion",\n  "MozOrient",\n  "MozOutlineRadius",\n  "MozOutlineRadiusBottomleft",\n  "MozOutlineRadiusBottomright",\n  "MozOutlineRadiusTopleft",\n  "MozOutlineRadiusTopright",\n  "MozStackSizing",\n  "MozTextBlink",\n  "MozUserFocus",\n  "MozUserInput",\n  "MozUserModify",\n  "MozWindowDragging",\n  "MozWindowShadow",\n  "WebkitAppearance",\n  "WebkitBorderBefore",\n  "WebkitBorderBeforeColor",\n  "WebkitBorderBeforeStyle",\n  "WebkitBorderBeforeWidth",\n  "WebkitBoxReflect",\n  "WebkitLineClamp",\n  "WebkitMask",\n  "WebkitMaskAttachment",\n  "WebkitMaskClip",\n  "WebkitMaskComposite",\n  "WebkitMaskImage",\n  "WebkitMaskOrigin",\n  "WebkitMaskPosition",\n  "WebkitMaskPositionX",\n  "WebkitMaskPositionY",\n  "WebkitMaskRepeat",\n  "WebkitMaskRepeatX",\n  "WebkitMaskRepeatY",\n  "WebkitMaskSize",\n  "WebkitOverflowScrolling",\n  "WebkitTapHighlightColor",\n  "WebkitTextFillColor",\n  "WebkitTextStroke",\n  "WebkitTextStrokeColor",\n  "WebkitTextStrokeWidth",\n  "WebkitTouchCallout",\n  "WebkitUserModify",\n  "accentColor",\n  "alignContent",\n  "alignItems",\n  "alignSelf",\n  "alignTracks",\n  "all",\n  "animation",\n  "animationComposition",\n  "animationDelay",\n  "animationDirection",\n  "animationDuration",\n  "animationFillMode",\n  "animationIterationCount",\n  "animationName",\n  "animationPlayState",\n  "animationTimingFunction",\n  "animationTimeline",\n  "appearance",\n  "aspectRatio",\n  "azimuth",\n  "backdropFilter",\n  "backfaceVisibility",\n  "background",\n  "backgroundAttachment",\n  "backgroundBlendMode",\n  "backgroundClip",\n  "backgroundColor",\n  "backgroundImage",\n  "backgroundOrigin",\n  "backgroundPosition",\n  "backgroundPositionX",\n  "backgroundPositionY",\n  "backgroundRepeat",\n  "backgroundSize",\n  "blockOverflow",\n  "blockSize",\n  "border",\n  "borderBlock",\n  "borderBlockColor",\n  "borderBlockStyle",\n  "borderBlockWidth",\n  "borderBlockEnd",\n  "borderBlockEndColor",\n  "borderBlockEndStyle",\n  "borderBlockEndWidth",\n  "borderBlockStart",\n  "borderBlockStartColor",\n  "borderBlockStartStyle",\n  "borderBlockStartWidth",\n  "borderBottom",\n  "borderBottomColor",\n  "borderBottomLeftRadius",\n  "borderBottomRightRadius",\n  "borderBottomStyle",\n  "borderBottomWidth",\n  "borderCollapse",\n  "borderColor",\n  "borderEndEndRadius",\n  "borderEndStartRadius",\n  "borderImage",\n  "borderImageOutset",\n  "borderImageRepeat",\n  "borderImageSlice",\n  "borderImageSource",\n  "borderImageWidth",\n  "borderInline",\n  "borderInlineEnd",\n  "borderInlineColor",\n  "borderInlineStyle",\n  "borderInlineWidth",\n  "borderInlineEndColor",\n  "borderInlineEndStyle",\n  "borderInlineEndWidth",\n  "borderInlineStart",\n  "borderInlineStartColor",\n  "borderInlineStartStyle",\n  "borderInlineStartWidth",\n  "borderLeft",\n  "borderLeftColor",\n  "borderLeftStyle",\n  "borderLeftWidth",\n  "borderRadius",\n  "borderRight",\n  "borderRightColor",\n  "borderRightStyle",\n  "borderRightWidth",\n  "borderSpacing",\n  "borderStartEndRadius",\n  "borderStartStartRadius",\n  "borderStyle",\n  "borderTop",\n  "borderTopColor",\n  "borderTopLeftRadius",\n  "borderTopRightRadius",\n  "borderTopStyle",\n  "borderTopWidth",\n  "borderWidth",\n  "bottom",\n  "boxAlign",\n  "boxDecorationBreak",\n  "boxDirection",\n  "boxFlex",\n  "boxFlexGroup",\n  "boxLines",\n  "boxOrdinalGroup",\n  "boxOrient",\n  "boxPack",\n  "boxShadow",\n  "boxSizing",\n  "breakAfter",\n  "breakBefore",\n  "breakInside",\n  "captionSide",\n  "caret",\n  "caretColor",\n  "caretShape",\n  "clear",\n  "clip",\n  "clipPath",\n  "color",\n  "colorScheme",\n  "columnCount",\n  "columnFill",\n  "columnGap",\n  "columnRule",\n  "columnRuleColor",\n  "columnRuleStyle",\n  "columnRuleWidth",\n  "columnSpan",\n  "columnWidth",\n  "columns",\n  "contain",\n  "containIntrinsicSize",\n  "containIntrinsicBlockSize",\n  "containIntrinsicHeight",\n  "containIntrinsicInlineSize",\n  "containIntrinsicWidth",\n  "container",\n  "containerName",\n  "containerType",\n  "content",\n  "contentVisibility",\n  "counterIncrement",\n  "counterReset",\n  "counterSet",\n  "cursor",\n  "direction",\n  "display",\n  "emptyCells",\n  "filter",\n  "flex",\n  "flexBasis",\n  "flexDirection",\n  "flexFlow",\n  "flexGrow",\n  "flexShrink",\n  "flexWrap",\n  "float",\n  "font",\n  "fontFamily",\n  "fontFeatureSettings",\n  "fontKerning",\n  "fontLanguageOverride",\n  "fontOpticalSizing",\n  "fontPalette",\n  "fontVariationSettings",\n  "fontSize",\n  "fontSizeAdjust",\n  "fontSmooth",\n  "fontStretch",\n  "fontStyle",\n  "fontSynthesis",\n  "fontVariant",\n  "fontVariantAlternates",\n  "fontVariantCaps",\n  "fontVariantEastAsian",\n  "fontVariantEmoji",\n  "fontVariantLigatures",\n  "fontVariantNumeric",\n  "fontVariantPosition",\n  "fontWeight",\n  "forcedColorAdjust",\n  "gap",\n  "grid",\n  "gridArea",\n  "gridAutoColumns",\n  "gridAutoFlow",\n  "gridAutoRows",\n  "gridColumn",\n  "gridColumnEnd",\n  "gridColumnGap",\n  "gridColumnStart",\n  "gridGap",\n  "gridRow",\n  "gridRowEnd",\n  "gridRowGap",\n  "gridRowStart",\n  "gridTemplate",\n  "gridTemplateAreas",\n  "gridTemplateColumns",\n  "gridTemplateRows",\n  "hangingPunctuation",\n  "height",\n  "hyphenateCharacter",\n  "hyphenateLimitChars",\n  "hyphens",\n  "imageOrientation",\n  "imageRendering",\n  "imageResolution",\n  "imeMode",\n  "initialLetter",\n  "initialLetterAlign",\n  "inlineSize",\n  "inputSecurity",\n  "inset",\n  "insetBlock",\n  "insetBlockEnd",\n  "insetBlockStart",\n  "insetInline",\n  "insetInlineEnd",\n  "insetInlineStart",\n  "isolation",\n  "justifyContent",\n  "justifyItems",\n  "justifySelf",\n  "justifyTracks",\n  "left",\n  "letterSpacing",\n  "lineBreak",\n  "lineClamp",\n  "lineHeight",\n  "lineHeightStep",\n  "listStyle",\n  "listStyleImage",\n  "listStylePosition",\n  "listStyleType",\n  "margin",\n  "marginBlock",\n  "marginBlockEnd",\n  "marginBlockStart",\n  "marginBottom",\n  "marginInline",\n  "marginInlineEnd",\n  "marginInlineStart",\n  "marginLeft",\n  "marginRight",\n  "marginTop",\n  "marginTrim",\n  "mask",\n  "maskBorder",\n  "maskBorderMode",\n  "maskBorderOutset",\n  "maskBorderRepeat",\n  "maskBorderSlice",\n  "maskBorderSource",\n  "maskBorderWidth",\n  "maskClip",\n  "maskComposite",\n  "maskImage",\n  "maskMode",\n  "maskOrigin",\n  "maskPosition",\n  "maskRepeat",\n  "maskSize",\n  "maskType",\n  "masonryAutoFlow",\n  "mathDepth",\n  "mathShift",\n  "mathStyle",\n  "maxBlockSize",\n  "maxHeight",\n  "maxInlineSize",\n  "maxLines",\n  "maxWidth",\n  "minBlockSize",\n  "minHeight",\n  "minInlineSize",\n  "minWidth",\n  "mixBlendMode",\n  "objectFit",\n  "objectPosition",\n  "offset",\n  "offsetAnchor",\n  "offsetDistance",\n  "offsetPath",\n  "offsetPosition",\n  "offsetRotate",\n  "opacity",\n  "order",\n  "orphans",\n  "outline",\n  "outlineColor",\n  "outlineOffset",\n  "outlineStyle",\n  "outlineWidth",\n  "overflow",\n  "overflowAnchor",\n  "overflowBlock",\n  "overflowClipBox",\n  "overflowClipMargin",\n  "overflowInline",\n  "overflowWrap",\n  "overflowX",\n  "overflowY",\n  "overscrollBehavior",\n  "overscrollBehaviorBlock",\n  "overscrollBehaviorInline",\n  "overscrollBehaviorX",\n  "overscrollBehaviorY",\n  "padding",\n  "paddingBlock",\n  "paddingBlockEnd",\n  "paddingBlockStart",\n  "paddingBottom",\n  "paddingInline",\n  "paddingInlineEnd",\n  "paddingInlineStart",\n  "paddingLeft",\n  "paddingRight",\n  "paddingTop",\n  "page",\n  "pageBreakAfter",\n  "pageBreakBefore",\n  "pageBreakInside",\n  "paintOrder",\n  "perspective",\n  "perspectiveOrigin",\n  "placeContent",\n  "placeItems",\n  "placeSelf",\n  "pointerEvents",\n  "position",\n  "printColorAdjust",\n  "quotes",\n  "resize",\n  "right",\n  "rotate",\n  "rowGap",\n  "rubyAlign",\n  "rubyMerge",\n  "rubyPosition",\n  "scale",\n  "scrollbarColor",\n  "scrollbarGutter",\n  "scrollbarWidth",\n  "scrollBehavior",\n  "scrollMargin",\n  "scrollMarginBlock",\n  "scrollMarginBlockStart",\n  "scrollMarginBlockEnd",\n  "scrollMarginBottom",\n  "scrollMarginInline",\n  "scrollMarginInlineStart",\n  "scrollMarginInlineEnd",\n  "scrollMarginLeft",\n  "scrollMarginRight",\n  "scrollMarginTop",\n  "scrollPadding",\n  "scrollPaddingBlock",\n  "scrollPaddingBlockStart",\n  "scrollPaddingBlockEnd",\n  "scrollPaddingBottom",\n  "scrollPaddingInline",\n  "scrollPaddingInlineStart",\n  "scrollPaddingInlineEnd",\n  "scrollPaddingLeft",\n  "scrollPaddingRight",\n  "scrollPaddingTop",\n  "scrollSnapAlign",\n  "scrollSnapCoordinate",\n  "scrollSnapDestination",\n  "scrollSnapPointsX",\n  "scrollSnapPointsY",\n  "scrollSnapStop",\n  "scrollSnapType",\n  "scrollSnapTypeX",\n  "scrollSnapTypeY",\n  "scrollTimeline",\n  "scrollTimelineAxis",\n  "scrollTimelineName",\n  "shapeImageThreshold",\n  "shapeMargin",\n  "shapeOutside",\n  "tabSize",\n  "tableLayout",\n  "textAlign",\n  "textAlignLast",\n  "textCombineUpright",\n  "textDecoration",\n  "textDecorationColor",\n  "textDecorationLine",\n  "textDecorationSkip",\n  "textDecorationSkipInk",\n  "textDecorationStyle",\n  "textDecorationThickness",\n  "textEmphasis",\n  "textEmphasisColor",\n  "textEmphasisPosition",\n  "textEmphasisStyle",\n  "textIndent",\n  "textJustify",\n  "textOrientation",\n  "textOverflow",\n  "textRendering",\n  "textShadow",\n  "textSizeAdjust",\n  "textTransform",\n  "textUnderlineOffset",\n  "textUnderlinePosition",\n  "top",\n  "touchAction",\n  "transform",\n  "transformBox",\n  "transformOrigin",\n  "transformStyle",\n  "transition",\n  "transitionDelay",\n  "transitionDuration",\n  "transitionProperty",\n  "transitionTimingFunction",\n  "translate",\n  "unicodeBidi",\n  "userSelect",\n  "verticalAlign",\n  "viewTransitionName",\n  "visibility",\n  "whiteSpace",\n  "widows",\n  "width",\n  "willChange",\n  "wordBreak",\n  "wordSpacing",\n  "wordWrap",\n  "writingMode",\n  "zIndex",\n  "zoom",\n  ...userGenerated\n];\nvar properties = new Map(allCssProperties.map((prop) => [prop, true]));\nfunction memo(fn) {\n  const cache = /* @__PURE__ */ Object.create(null);\n  return (arg) => {\n    if (cache[arg] === void 0)\n      cache[arg] = fn(arg);\n    return cache[arg];\n  };\n}\nvar selectorRegex = /&|@/;\nvar isCssProperty = memo((prop) => {\n  return properties.has(prop) || prop.startsWith("--") || selectorRegex.test(prop);\n});\nexport {\n  allCssProperties,\n  isCssProperty\n};\n'
 };
 
 // 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 = []",
@@ -755,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())
@@ -773,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'
@@ -797,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}>
 
@@ -806,7 +891,7 @@ function generatePattern(ctx) {
           `}
 
      `,
-      js: outdent7`
+      js: outdent9`
     ${ctx.file.import(helperImports.join(", "), "../helpers")}
     ${ctx.file.import("css", "../css/index")}
 
@@ -823,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) {
@@ -837,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")}
@@ -884,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")}
 
@@ -905,7 +990,7 @@ function generateRecipes(ctx) {
           splitVariantProps,
         })
         `,
-        dts: outdent8`
+        dts: outdent10`
         import type { ConditionalValue } from '../types'
         import type { Pretty } from '../types/helpers'
 
@@ -943,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();
@@ -954,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) {
@@ -967,7 +1052,7 @@ function generateTokenJs(ctx) {
 
   token.var = tokenVar
   `,
-    dts: outdent9`
+    dts: outdent11`
   import type { Token } from './tokens'
 
   export declare const token: {
@@ -981,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'
@@ -1052,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;
@@ -1061,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")}
@@ -1070,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 })
@@ -1083,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'
@@ -1098,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'
@@ -1140,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")}
@@ -1209,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;
@@ -1218,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}`)}
@@ -1226,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 })
@@ -1239,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'
@@ -1258,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'
@@ -1319,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")}
@@ -1390,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;
@@ -1399,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}`)}
@@ -1407,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 })
@@ -1420,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'
@@ -1435,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'
@@ -1475,52 +1732,134 @@ export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>,
   };
 }
 
-// src/artifacts/solid-jsx/jsx.ts
-import { outdent as outdent19 } from "outdent";
-function generateSolidJsxFactory(ctx) {
-  const { componentName, factoryName } = ctx.jsx;
+// src/artifacts/react-jsx/jsx.string-literal.ts
+import { outdent as outdent25 } from "outdent";
+function generateReactJsxStringLiteralFactory(ctx) {
+  const { factoryName, componentName } = ctx.jsx;
   return {
-    js: outdent19`
-    import { Dynamic } from 'solid-js/web'
-    import { mergeProps, splitProps } from 'solid-js'
-    import { createComponent } from 'solid-js/web'
-    ${ctx.file.import("css, cx, cva, assignCss", "../css/index")}
-    ${ctx.file.import("normalizeHTMLProps", "../helpers")}
-    ${ctx.file.import("allCssProperties", "./is-valid-prop")}
-    
-    function styledFn(element, configOrCva = {}) {
-      const cvaFn = configOrCva.__cva__ ? configOrCva : cva(configOrCva)
-      
-      return function ${componentName}(props) {
-        const mergedProps = mergeProps({ as: element }, props)
+    js: outdent25`
+    import { createElement, forwardRef } from 'react'
+    ${ctx.file.import("css, cx", "../css/index")}
     
-        const [localProps, variantProps, styleProps, htmlProps, elementProps] = splitProps(
-          mergedProps,
-          ['as', 'class'],
-          cvaFn.variantKeys,
-          allCssProperties,
-          normalizeHTMLProps.keys
-        )
-
-        function recipeClass() {
-          const { css: cssStyles, ...propStyles } = styleProps
-          const styles = assignCss(propStyles, cssStyles)
-          return cx(cvaFn(variantProps), css(styles), localProps.class)
-        }
+    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)
         
-        function cvaClass() {
-          const { css: cssStyles, ...propStyles } = styleProps
-          const cvaStyles = cvaFn.resolve(variantProps)
-          const styles = assignCss(cvaStyles, propStyles, cssStyles)
-          return cx(css(styles), localProps.class)
-        }
-    
-        const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
+            return createElement(Element, {
+                ref,
+                ...elementProps,
+                className: classes(),
+            })
+        })
         
-        return createComponent(
-          Dynamic,
-          mergeProps(
-            {
+        ${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> = ComponentProps<T>
+  `
+  };
+}
+
+// src/artifacts/solid-jsx/jsx.ts
+import { outdent as outdent27 } from "outdent";
+function generateSolidJsxFactory(ctx) {
+  const { componentName, factoryName } = ctx.jsx;
+  return {
+    js: outdent27`
+    import { Dynamic } from 'solid-js/web'
+    import { mergeProps, splitProps } from 'solid-js'
+    import { createComponent } from 'solid-js/web'
+    ${ctx.file.import("css, cx, cva, assignCss", "../css/index")}
+    ${ctx.file.import("normalizeHTMLProps", "../helpers")}
+    ${ctx.file.import("allCssProperties", "./is-valid-prop")}
+    
+    function styledFn(element, configOrCva = {}) {
+      const cvaFn = configOrCva.__cva__ ? configOrCva : cva(configOrCva)
+      
+      return function ${componentName}(props) {
+        const mergedProps = mergeProps({ as: element }, props)
+    
+        const [localProps, variantProps, styleProps, htmlProps, elementProps] = splitProps(
+          mergedProps,
+          ['as', 'class'],
+          cvaFn.variantKeys,
+          allCssProperties,
+          normalizeHTMLProps.keys
+        )
+
+        function recipeClass() {
+          const { css: cssStyles, ...propStyles } = styleProps
+          const styles = assignCss(propStyles, cssStyles)
+          return cx(cvaFn(variantProps), css(styles), localProps.class)
+        }
+        
+        function cvaClass() {
+          const { css: cssStyles, ...propStyles } = styleProps
+          const cvaStyles = cvaFn.resolve(variantProps)
+          const styles = assignCss(cvaStyles, propStyles, cssStyles)
+          return cx(css(styles), localProps.class)
+        }
+    
+        const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
+        
+        return createComponent(
+          Dynamic,
+          mergeProps(
+            {
               get component() {
                 return localProps.as
               },
@@ -1557,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;
@@ -1566,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")}
@@ -1575,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))
@@ -1588,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'
@@ -1603,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'
@@ -1645,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")}
@@ -1723,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) => {
@@ -1733,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}`)}
@@ -1751,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'
@@ -1766,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'
@@ -1930,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,
@@ -1938,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,
@@ -1950,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,
@@ -1963,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);
@@ -2015,7 +2671,7 @@ var csstype_d_ts_default = {
 
 // src/artifacts/generated/system-types.d.ts.json
 var system_types_d_ts_default = {
-  content: "import type { ConditionalValue, Conditions, Nested } from './conditions'\nimport type { PropertiesFallback } from './csstype'\nimport type { SystemProperties, CssVarProperties } from './style-props'\n\ntype String = string & {}\ntype Number = number & {}\n\n/* -----------------------------------------------------------------------------\n * Native css properties\n * -----------------------------------------------------------------------------*/\n\nexport type CssProperty = keyof PropertiesFallback\n\nexport type CssProperties = PropertiesFallback<String | Number> & CssVarProperties\n\nexport type CssKeyframes = {\n  [name: string]: {\n    [time: string]: CssProperties\n  }\n}\n\n/* -----------------------------------------------------------------------------\n * Conditional css properties\n * -----------------------------------------------------------------------------*/\n\ntype MinimalNested<P> = {\n  [K in keyof Conditions]?: Nested<P>\n}\n\ntype GenericProperties = {\n  [key: string]: ConditionalValue<String | Number | boolean>\n}\n\n/* -----------------------------------------------------------------------------\n * Native css props\n * -----------------------------------------------------------------------------*/\n\nexport type NestedCssProperties = Nested<CssProperties>\n\nexport type SystemStyleObject = Nested<SystemProperties & CssVarProperties>\n\nexport type GlobalStyleObject = {\n  [selector: string]: SystemStyleObject\n}\n\nexport type CompositionStyleObject<Property extends string> = Nested<{\n  [K in Property]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown\n}>\n\n/* -----------------------------------------------------------------------------\n * Jsx style props\n * -----------------------------------------------------------------------------*/\n\nexport type JsxStyleProps = SystemProperties &\n  MinimalNested<SystemStyleObject> & {\n    css?: SystemStyleObject\n  }\n\ntype Assign<T, U> = Omit<T, keyof U> & U\n\nexport type PatchedHTMLProps = {\n  htmlSize?: string | number\n  htmlWidth?: string | number\n  htmlHeight?: string | number\n  htmlTranslate?: 'yes' | 'no' | undefined\n  htmlContent?: string\n}\n\nexport type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'size' | 'content'\n\ntype WithHTMLProps<T> = Omit<T, OmittedHTMLProps> & PatchedHTMLProps\n\nexport type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<\n  WithHTMLProps<T>,\n  P\n>\n"
+  content: "import type { ConditionalValue, Conditions, Nested } from './conditions'\nimport type { PropertiesFallback } from './csstype'\nimport type { SystemProperties, CssVarProperties } from './style-props'\n\ntype String = string & {}\ntype Number = number & {}\n\n/* -----------------------------------------------------------------------------\n * Native css properties\n * -----------------------------------------------------------------------------*/\n\nexport type CssProperty = keyof PropertiesFallback\n\nexport type CssProperties = PropertiesFallback<String | Number> & CssVarProperties\n\nexport type CssKeyframes = {\n  [name: string]: {\n    [time: string]: CssProperties\n  }\n}\n\n/* -----------------------------------------------------------------------------\n * Conditional css properties\n * -----------------------------------------------------------------------------*/\n\ntype MinimalNested<P> = {\n  [K in keyof Conditions]?: Nested<P>\n}\n\ntype GenericProperties = {\n  [key: string]: ConditionalValue<String | Number | boolean>\n}\n\n/* -----------------------------------------------------------------------------\n * Native css props\n * -----------------------------------------------------------------------------*/\n\nexport type NestedCssProperties = Nested<CssProperties>\n\nexport type SystemStyleObject = Nested<SystemProperties & CssVarProperties>\n\nexport type GlobalStyleObject = {\n  [selector: string]: SystemStyleObject\n}\n\nexport type CompositionStyleObject<Property extends string> = Nested<{\n  [K in Property]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown\n}>\n\n/* -----------------------------------------------------------------------------\n * Jsx style props\n * -----------------------------------------------------------------------------*/\n\nexport type JsxStyleProps = SystemProperties &\n  MinimalNested<SystemStyleObject> & {\n    css?: SystemStyleObject\n  }\n\nexport type Assign<T, U> = Omit<T, keyof U> & U\n\nexport type PatchedHTMLProps = {\n  htmlSize?: string | number\n  htmlWidth?: string | number\n  htmlHeight?: string | number\n  htmlTranslate?: 'yes' | 'no' | undefined\n  htmlContent?: string\n}\n\nexport type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'size' | 'content'\n\ntype WithHTMLProps<T> = Omit<T, OmittedHTMLProps> & PatchedHTMLProps\n\nexport type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<\n  WithHTMLProps<T>,\n  P\n>\n"
 };
 
 // src/artifacts/generated/composition.d.ts.json
@@ -2030,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
@@ -2040,7 +2696,7 @@ var parts_d_ts_default = {
 
 // src/artifacts/generated/selectors.d.ts.json
 var selectors_d_ts_default = {
-  content: "import type { Pseudos } from './csstype'\n\ntype AriaAttributes =\n  | '[aria-disabled]'\n  | '[aria-hidden]'\n  | '[aria-invalid]'\n  | '[aria-readonly]'\n  | '[aria-required]'\n  | '[aria-selected]'\n  | '[aria-checked]'\n  | '[aria-expanded]'\n  | '[aria-pressed]'\n  | `[aria-current=${'page' | 'step' | 'location' | 'date' | 'time'}]`\n  | '[aria-invalid]'\n  | `[aria-sort=${'ascending' | 'descending'}]`\n\ntype DataAttributes =\n  | '[data-selected]'\n  | '[data-highlighted]'\n  | '[data-hover]'\n  | '[data-active]'\n  | '[data-checked]'\n  | '[data-disabled]'\n  | '[data-readonly]'\n  | '[data-focus]'\n  | '[data-focus-visible]'\n  | '[data-focus-visible-added]'\n  | '[data-invalid]'\n  | '[data-pressed]'\n  | '[data-expanded]'\n  | '[data-grabbed]'\n  | '[data-dragged]'\n  | '[data-orientation=horizontal]'\n  | '[data-orientation=vertical]'\n  | '[data-in-range]'\n  | '[data-out-of-range]'\n  | '[data-placeholder-shown]'\n  | `[data-part=${string}]`\n  | `[data-attr=${string}]`\n  | `[data-placement=${string}]`\n  | `[data-theme=${string}]`\n  | `[data-size=${string}]`\n  | `[data-state=${string}]`\n  | '[data-empty]'\n  | '[data-loading]'\n  | '[data-loaded]'\n  | '[data-enter]'\n  | '[data-entering]'\n  | '[data-exited]'\n  | '[data-exiting]'\n\ntype AttributeSelector = `&${Pseudos | DataAttributes | AriaAttributes}`\ntype ParentSelector = `${DataAttributes | AriaAttributes} &`\n\nexport type AnySelector = `${string}&` | `&${string}`\nexport type Selectors = AttributeSelector | ParentSelector\n"
+  content: "import type { Pseudos } from './csstype'\n\ntype AriaAttributes =\n  | '[aria-disabled]'\n  | '[aria-hidden]'\n  | '[aria-invalid]'\n  | '[aria-readonly]'\n  | '[aria-required]'\n  | '[aria-selected]'\n  | '[aria-checked]'\n  | '[aria-expanded]'\n  | '[aria-pressed]'\n  | `[aria-current=${'page' | 'step' | 'location' | 'date' | 'time'}]`\n  | '[aria-invalid]'\n  | `[aria-sort=${'ascending' | 'descending'}]`\n\ntype DataAttributes =\n  | '[data-selected]'\n  | '[data-highlighted]'\n  | '[data-hover]'\n  | '[data-active]'\n  | '[data-checked]'\n  | '[data-disabled]'\n  | '[data-readonly]'\n  | '[data-focus]'\n  | '[data-focus-visible]'\n  | '[data-focus-visible-added]'\n  | '[data-invalid]'\n  | '[data-pressed]'\n  | '[data-expanded]'\n  | '[data-grabbed]'\n  | '[data-dragged]'\n  | '[data-orientation=horizontal]'\n  | '[data-orientation=vertical]'\n  | '[data-in-range]'\n  | '[data-out-of-range]'\n  | '[data-placeholder-shown]'\n  | `[data-part=${string}]`\n  | `[data-attr=${string}]`\n  | `[data-placement=${string}]`\n  | `[data-theme=${string}]`\n  | `[data-size=${string}]`\n  | `[data-state=${string}]`\n  | '[data-empty]'\n  | '[data-loading]'\n  | '[data-loaded]'\n  | '[data-enter]'\n  | '[data-entering]'\n  | '[data-exited]'\n  | '[data-exiting]'\n\ntype AttributeSelector = `&${Pseudos | DataAttributes | AriaAttributes}`\ntype ParentSelector = `${DataAttributes | AriaAttributes} &`\n\ntype AtRuleType = 'media' | 'layer' | 'container' | 'supports' | 'page'\n\nexport type AnySelector = `${string}&` | `&${string}` | `@${AtRuleType}${string}`\nexport type Selectors = AttributeSelector | ParentSelector\n"
 };
 
 // src/artifacts/types/generated.ts
@@ -2057,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'
@@ -2076,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 },
@@ -2096,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'
@@ -2119,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
@@ -2132,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'
@@ -2152,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",
@@ -2197,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
@@ -2255,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: [
@@ -2267,6 +2923,8 @@ function setupCss(ctx) {
   };
 }
 function setupCva(ctx) {
+  if (ctx.isTemplateLiteralSyntax)
+    return;
   const code = generateCvaFn(ctx);
   return {
     dir: ctx.paths.css,
@@ -2292,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,
@@ -2306,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,
@@ -2331,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'
     `
   };
@@ -2346,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 },
@@ -2356,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 {
@@ -2552,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
@@ -2570,11 +3231,12 @@ var getBaseEngine = (conf) => {
   const utility = new Utility({
     prefix: prefix.className,
     tokens,
-    config: config.utilities,
-    separator: config.separator
+    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;
@@ -2612,6 +3274,7 @@ var getBaseEngine = (conf) => {
   };
   return {
     ...conf,
+    isTemplateLiteralSyntax,
     studio,
     hash,
     prefix,
@@ -2693,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
       }));
     }),
@@ -2732,6 +3395,8 @@ var defaults = (conf) => ({
     cssVarRoot: ":where(:root, :host)",
     jsxFactory: "styled",
     outExtension: "mjs",
+    shorthands: true,
+    syntax: "object-literal",
     ...conf.config
   }
 });