@pandacss/transformer 2.0.0-beta.9

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Chakra Systems Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,46 @@
+import * as _rolldown from 'rolldown';
+import * as unplugin from 'unplugin';
+import * as _rollup from 'rollup';
+import * as _webpack from 'webpack';
+import * as _vite from 'vite';
+import * as _pandacss_compiler_shared from '@pandacss/compiler-shared';
+import { PandaTransformerOptions, PandaSourceTransformContext, PandaSourceTransformResult, Compiler, SourceTransformer, TransformerOptions, TransformSourceRequest, TransformResult } from '@pandacss/compiler-shared';
+export { PandaSourceTransformContext, PandaSourceTransformResult, PandaTransformerOptions, SourceTransformer, TransformResult, TransformSourceInput, TransformSourceRequest, TransformerOptions } from '@pandacss/compiler-shared';
+export { CxOptions, CxSeparator, PandaClassPart, createCx, cx, getMergeKey, splitClassName } from './runtime/cx.js';
+export { StringCvaConfig, css, cva, sva } from './runtime/internal.js';
+
+/** Marker baked into the default bundle — replaced per-project at load time. */
+declare const CX_SEPARATOR_PLACEHOLDER = "__PANDA_CX_SEPARATOR__";
+declare function resolveCxSeparator(config: Record<string, unknown> | undefined): string;
+/** Patch the prebuilt virtual `@pandacss-internal/css` module with the project separator. */
+declare function buildInternalCssRuntimeSource(separator: string, base?: string): string;
+/** Virtual module source for `@pandacss-internal/css`. */
+declare function getInternalCssRuntimeSource(separator?: string): string;
+
+/** Transformed source imports — mirrors styled-system/css surface. */
+declare const INTERNAL_CSS_IMPORT = "@pandacss-internal/css";
+declare const INTERNAL_CSS_RESOLVED_ID = "\0pandacss:internal:css";
+
+declare function resolveCompiler(options: PandaTransformerOptions): Compiler | undefined;
+declare function resolveTransformer(options: PandaTransformerOptions): SourceTransformer | undefined;
+declare function runSourceTransform(ctx: PandaSourceTransformContext, options: PandaTransformerOptions, code: string, id: string): PandaSourceTransformResult | null;
+declare function createPandaSourcePluginHooks(resolveOptions: () => PandaTransformerOptions): {
+    resolveId(id: string): "\0pandacss:internal:css" | null;
+    load(id: string): string | null;
+    transform(this: PandaSourceTransformContext, code: string, id: string): PandaSourceTransformResult | null;
+};
+
+declare const pandaTransformer: unplugin.UnpluginInstance<PandaTransformerOptions, boolean>;
+
+declare function createSourceTransformer(compiler: Compiler): SourceTransformer;
+declare function transformSource(input: TransformSourceRequest): TransformResult;
+declare function shouldTransform(path: string, options?: TransformerOptions): boolean;
+
+declare const vite: (options: _pandacss_compiler_shared.PandaTransformerOptions) => _vite.Plugin<any> | _vite.Plugin<any>[];
+declare const webpack: (options: _pandacss_compiler_shared.PandaTransformerOptions) => _webpack.WebpackPluginInstance;
+declare const rollup: (options: _pandacss_compiler_shared.PandaTransformerOptions) => _rollup.Plugin<any> | _rollup.Plugin<any>[];
+declare const esbuild: (options: _pandacss_compiler_shared.PandaTransformerOptions) => unplugin.EsbuildPlugin;
+declare const rspack: (options: _pandacss_compiler_shared.PandaTransformerOptions) => RspackPluginInstance;
+declare const rolldown: (options: _pandacss_compiler_shared.PandaTransformerOptions) => _rolldown.Plugin<any> | _rolldown.Plugin<any>[];
+
+export { CX_SEPARATOR_PLACEHOLDER, INTERNAL_CSS_IMPORT, INTERNAL_CSS_RESOLVED_ID, buildInternalCssRuntimeSource, createPandaSourcePluginHooks, createSourceTransformer, pandaTransformer as default, esbuild, getInternalCssRuntimeSource, pandaTransformer, resolveCompiler, resolveCxSeparator, resolveTransformer, rolldown, rollup, rspack, runSourceTransform, shouldTransform, transformSource, vite, webpack };

package/dist/index.js

@@ -0,0 +1,468 @@
+// src/runtime/internal/cx.ts
+var bakedSeparator = typeof __PANDA_CX_SEPARATOR__ !== "undefined" && __PANDA_CX_SEPARATOR__ ? __PANDA_CX_SEPARATOR__ : "_";
+function splitClassName(className) {
+  const segments = [];
+  let current = "";
+  let bracketDepth = 0;
+  for (let i = 0; i < className.length; i++) {
+    const ch = className[i];
+    if (ch === "[") {
+      bracketDepth++;
+      current += ch;
+    } else if (ch === "]") {
+      bracketDepth--;
+      current += ch;
+    } else if (ch === ":" && bracketDepth === 0) {
+      if (current) segments.push(current);
+      current = "";
+    } else {
+      current += ch;
+    }
+  }
+  if (current) segments.push(current);
+  return segments;
+}
+function getMergeKey(className, separator) {
+  let cls = className;
+  if (cls.endsWith("!")) {
+    cls = cls.slice(0, -1);
+  }
+  const segments = splitClassName(cls);
+  if (segments.length === 0) return null;
+  const last = segments[segments.length - 1];
+  const sepIdx = last.indexOf(separator);
+  if (sepIdx < 1) return null;
+  const property = last.slice(0, sepIdx);
+  if (segments.length === 1) {
+    return property;
+  }
+  const conditions = segments.slice(0, -1).join(":");
+  return `${conditions}:${property}`;
+}
+function flattenParts(parts, out) {
+  for (const part of parts) {
+    if (!part) continue;
+    if (Array.isArray(part)) {
+      flattenParts(part, out);
+      continue;
+    }
+    if (part === "") continue;
+    out.push(part);
+  }
+}
+function mergeClassStrings(separator, classes) {
+  const seen = /* @__PURE__ */ new Map();
+  const order = [];
+  let id = 0;
+  for (const cls of classes) {
+    for (const token of cls.split(" ")) {
+      if (!token) continue;
+      const key = getMergeKey(token, separator);
+      if (key !== null) {
+        if (!seen.has(key)) order.push(key);
+        seen.set(key, token);
+      } else {
+        const uniqueKey = `__${id++}`;
+        order.push(uniqueKey);
+        seen.set(uniqueKey, token);
+      }
+    }
+  }
+  let str = "";
+  for (let i = 0; i < order.length; i++) {
+    if (str) str += " ";
+    str += seen.get(order[i]);
+  }
+  return str;
+}
+function createCx(options = {}) {
+  const separator = options.separator ?? bakedSeparator;
+  return function cx2(...parts) {
+    const flat = [];
+    flattenParts(parts, flat);
+    return mergeClassStrings(separator, flat);
+  };
+}
+var cx = createCx();
+
+// src/runtime/internal/css.ts
+function css(...styles) {
+  return cx(...styles);
+}
+
+// src/runtime/internal/cva.ts
+function withDefaults(defaults, props) {
+  const out = { ...defaults };
+  for (const key in props) {
+    if (props[key] !== void 0) out[key] = props[key];
+  }
+  return out;
+}
+function compoundMatches(compound, variants) {
+  for (const key in compound) {
+    if (key === "css" || key === "className" || key === "classNames") continue;
+    const expected = compound[key];
+    const actual = variants[key];
+    if (Array.isArray(expected)) {
+      if (!expected.includes(actual)) return false;
+    } else if (actual !== expected) {
+      return false;
+    }
+  }
+  return true;
+}
+function toVariantMap(variants) {
+  const map = {};
+  for (const key in variants) map[key] = Object.keys(variants[key] ?? {});
+  return map;
+}
+function cva(config) {
+  const base = config.base ?? "";
+  const variants = config.variants ?? {};
+  const defaultVariants = config.defaultVariants ?? {};
+  const compoundVariants = config.compoundVariants ?? [];
+  const variantKeys = Object.keys(variants);
+  const resolve = (props = {}) => {
+    const computed = withDefaults(defaultVariants, props);
+    const parts = [];
+    if (base) parts.push(base);
+    for (const key of variantKeys) {
+      const value = computed[key];
+      if (typeof value === "string" && variants[key]?.[value]) {
+        parts.push(variants[key][value]);
+      }
+    }
+    for (const compound of compoundVariants) {
+      if (!compoundMatches(compound, computed)) continue;
+      const cls = compound.className ?? compound.css;
+      if (typeof cls === "string" && cls) parts.push(cls);
+    }
+    return cx(...parts);
+  };
+  const cvaFn = (props = {}) => resolve(props);
+  return Object.assign(cvaFn, {
+    __cva__: true,
+    variantKeys,
+    variantMap: toVariantMap(variants),
+    raw: resolve,
+    config,
+    getVariantProps(props) {
+      return withDefaults(defaultVariants, props);
+    },
+    splitVariantProps(props) {
+      const rest = {};
+      const variantProps = {};
+      for (const key in props) {
+        if (variantKeys.includes(key)) variantProps[key] = props[key];
+        else rest[key] = props[key];
+      }
+      return [rest, variantProps];
+    }
+  });
+}
+
+// src/runtime/internal/sva.ts
+function slotCompoundVariants(compoundVariants, slot) {
+  if (!compoundVariants?.length) return void 0;
+  return compoundVariants.map((compound) => {
+    const next = {};
+    for (const key in compound) {
+      if (key === "css" || key === "className" || key === "classNames") continue;
+      next[key] = compound[key];
+    }
+    const css2 = compound.css;
+    if (typeof css2 === "string") next.css = css2;
+    else if (css2 && typeof css2 === "object" && slot in css2) next.css = css2[slot];
+    const className = compound.classNames?.[slot] ?? compound.className;
+    if (className) next.className = className;
+    return next;
+  }).filter((compound) => compound.css || compound.className);
+}
+function getSlotRecipes(config) {
+  const slots = config.slots ?? Object.keys(config.base ?? {});
+  const recipes = {};
+  for (const slot of slots) {
+    recipes[slot] = {
+      base: config.base?.[slot],
+      variants: config.variants,
+      defaultVariants: config.defaultVariants,
+      compoundVariants: slotCompoundVariants(config.compoundVariants, slot)
+    };
+    if (config.className?.[slot]) {
+      recipes[slot] = {
+        ...recipes[slot],
+        base: cx(recipes[slot]?.base, config.className[slot])
+      };
+    }
+  }
+  return recipes;
+}
+function sva(config) {
+  const slotRecipes = getSlotRecipes(config);
+  const slots = Object.entries(slotRecipes).map(([slot, recipe]) => [slot, cva(recipe)]);
+  const defaultVariants = config.defaultVariants ?? {};
+  const variantKeys = Object.keys(config.variants ?? {});
+  const svaFn = (props = {}) => {
+    const result = {};
+    for (const [slot, slotFn] of slots) {
+      result[slot] = slotFn(props);
+    }
+    return result;
+  };
+  const raw = (props = {}) => {
+    const result = {};
+    for (const [slot, slotFn] of slots) {
+      result[slot] = slotFn.raw(props);
+    }
+    return result;
+  };
+  return Object.assign(svaFn, {
+    __cva__: false,
+    raw,
+    config,
+    variantMap: Object.fromEntries(variantKeys.map((key) => [key, Object.keys(config.variants?.[key] ?? {})])),
+    variantKeys,
+    classNameMap: config.className ?? {},
+    getVariantProps(props) {
+      const out = { ...defaultVariants };
+      for (const key in props) {
+        if (props[key] !== void 0) out[key] = props[key];
+      }
+      return out;
+    },
+    splitVariantProps(props) {
+      const rest = {};
+      const variantProps = {};
+      for (const key in props) {
+        if (variantKeys.includes(key)) variantProps[key] = props[key];
+        else rest[key] = props[key];
+      }
+      return [rest, variantProps];
+    }
+  });
+}
+
+// src/runtime/internal/source.ts
+var internalCssSource = 'var x="__PANDA_CX_SEPARATOR__";function m(t){let r=[],n="",s=0;for(let a=0;a<t.length;a++){let i=t[a];i==="["?(s++,n+=i):i==="]"?(s--,n+=i):i===":"&&s===0?(n&&r.push(n),n=""):n+=i}return n&&r.push(n),r}function C(t,r){let n=t;n.endsWith("!")&&(n=n.slice(0,-1));let s=m(n);if(s.length===0)return null;let a=s[s.length-1],i=a.indexOf(r);if(i<1)return null;let u=a.slice(0,i);return s.length===1?u:`${s.slice(0,-1).join(":")}:${u}`}function R(t,r){for(let n of t)if(n){if(Array.isArray(n)){R(n,r);continue}n!==""&&r.push(n)}}function V(t,r){let n=new Map,s=[],a=0;for(let u of r)for(let o of u.split(" ")){if(!o)continue;let e=C(o,t);if(e!==null)n.has(e)||s.push(e),n.set(e,o);else{let c=`__${a++}`;s.push(c),n.set(c,o)}}let i="";for(let u=0;u<s.length;u++)i&&(i+=" "),i+=n.get(s[u]);return i}function v(t={}){let r=t.separator??x;return function(...s){let a=[];return R(s,a),V(r,a)}}var g=v();function y(...t){return g(...t)}function _(t,r){let n={...t};for(let s in r)r[s]!==void 0&&(n[s]=r[s]);return n}function w(t,r){for(let n in t){if(n==="css"||n==="className"||n==="classNames")continue;let s=t[n],a=r[n];if(Array.isArray(s)){if(!s.includes(a))return!1}else if(a!==s)return!1}return!0}function N(t){let r={};for(let n in t)r[n]=Object.keys(t[n]??{});return r}function p(t){let r=t.base??"",n=t.variants??{},s=t.defaultVariants??{},a=t.compoundVariants??[],i=Object.keys(n),u=(e={})=>{let c=_(s,e),f=[];r&&f.push(r);for(let l of i){let d=c[l];typeof d=="string"&&n[l]?.[d]&&f.push(n[l][d])}for(let l of a){if(!w(l,c))continue;let d=l.className??l.css;typeof d=="string"&&d&&f.push(d)}return g(...f)};return Object.assign((e={})=>u(e),{__cva__:!0,variantKeys:i,variantMap:N(n),raw:u,config:t,getVariantProps(e){return _(s,e)},splitVariantProps(e){let c={},f={};for(let l in e)i.includes(l)?f[l]=e[l]:c[l]=e[l];return[c,f]}})}function P(t,r){if(t?.length)return t.map(n=>{let s={};for(let u in n)u==="css"||u==="className"||u==="classNames"||(s[u]=n[u]);let a=n.css;typeof a=="string"?s.css=a:a&&typeof a=="object"&&r in a&&(s.css=a[r]);let i=n.classNames?.[r]??n.className;return i&&(s.className=i),s}).filter(n=>n.css||n.className)}function b(t){let r=t.slots??Object.keys(t.base??{}),n={};for(let s of r)n[s]={base:t.base?.[s],variants:t.variants,defaultVariants:t.defaultVariants,compoundVariants:P(t.compoundVariants,s)},t.className?.[s]&&(n[s]={...n[s],base:g(n[s]?.base,t.className[s])});return n}function k(t){let r=b(t),n=Object.entries(r).map(([o,e])=>[o,p(e)]),s=t.defaultVariants??{},a=Object.keys(t.variants??{});return Object.assign((o={})=>{let e={};for(let[c,f]of n)e[c]=f(o);return e},{__cva__:!1,raw:(o={})=>{let e={};for(let[c,f]of n)e[c]=f.raw(o);return e},config:t,variantMap:Object.fromEntries(a.map(o=>[o,Object.keys(t.variants?.[o]??{})])),variantKeys:a,classNameMap:t.className??{},getVariantProps(o){let e={...s};for(let c in o)o[c]!==void 0&&(e[c]=o[c]);return e},splitVariantProps(o){let e={},c={};for(let f in o)a.includes(f)?c[f]=o[f]:e[f]=o[f];return[e,c]}})}export{y as css,p as cva,g as cx,k as sva};\n';
+
+// src/runtime/internal/load.ts
+var CX_SEPARATOR_PLACEHOLDER = "__PANDA_CX_SEPARATOR__";
+var runtimeCache = /* @__PURE__ */ new Map();
+function resolveCxSeparator(config) {
+  const raw = config?.separator;
+  if (typeof raw === "string" && raw.length > 0) return raw;
+  return "_";
+}
+function patchSeparator(source, separator) {
+  const quoted = JSON.stringify(separator);
+  if (source.includes(CX_SEPARATOR_PLACEHOLDER)) {
+    return source.split(CX_SEPARATOR_PLACEHOLDER).join(separator);
+  }
+  return source.replace(/var d="_"/, `var d=${quoted}`);
+}
+function buildInternalCssRuntimeSource(separator, base = internalCssSource) {
+  return patchSeparator(base, separator);
+}
+function getInternalCssRuntimeSource(separator = "_") {
+  const cached = runtimeCache.get(separator);
+  if (cached) return cached;
+  const source = buildInternalCssRuntimeSource(separator);
+  runtimeCache.set(separator, source);
+  return source;
+}
+
+// src/runtime/internal/ids.ts
+var INTERNAL_CSS_IMPORT = "@pandacss-internal/css";
+var INTERNAL_CSS_RESOLVED_ID = "\0pandacss:internal:css";
+function isInternalCssImport(id) {
+  return id === INTERNAL_CSS_IMPORT;
+}
+function isInternalCssResolvedId(id) {
+  return id === INTERNAL_CSS_RESOLVED_ID;
+}
+
+// src/transform.ts
+function createSourceTransformer(compiler) {
+  const binding = compiler;
+  return {
+    compiler,
+    transformSource(input) {
+      if (typeof binding.transformSource !== "function") {
+        throw new Error("Source transforms are not available for this compiler instance");
+      }
+      return normalizeResult(binding.transformSource(toNativeInput(input)));
+    }
+  };
+}
+function transformSource(input) {
+  const transformer = input.transformer ?? (input.compiler ? createSourceTransformer(input.compiler) : void 0);
+  if (!transformer) {
+    throw new Error("Source transforms require a compiler or source transformer");
+  }
+  return transformer.transformSource(input);
+}
+function normalizeResult(result) {
+  return {
+    code: result.code,
+    map: result.map,
+    changed: result.changed,
+    bailed: result.bailed,
+    diagnostics: result.diagnostics,
+    dependencies: result.dependencies,
+    helper: result.helper
+  };
+}
+function toNativeInput(input) {
+  return {
+    path: input.path,
+    source: input.source,
+    ...toNativeOptions(input)
+  };
+}
+function toNativeOptions(options) {
+  return {
+    mode: options.mode,
+    helperCx: options.helper?.cx === true ? "true" : options.helper?.cx === false ? "false" : "auto",
+    targetsCss: options.targets?.css,
+    targetsPatterns: options.targets?.patterns,
+    targetsRecipes: options.targets?.recipes,
+    targetsTokens: options.targets?.tokens,
+    targetsJsx: options.targets?.jsx
+  };
+}
+var SOURCE_RE = /\.(c|m)?(t|j)sx?$/;
+function shouldTransform(path, options = {}) {
+  const id = path.split("?")[0] ?? path;
+  if (!SOURCE_RE.test(id)) return false;
+  if (options.include && !matchesAny(id, options.include)) return false;
+  if (options.exclude && matchesAny(id, options.exclude)) return false;
+  return true;
+}
+function matchesAny(path, patterns) {
+  const list = Array.isArray(patterns) ? patterns : [patterns];
+  return list.some((pattern) => pattern.test(path));
+}
+
+// src/hooks.ts
+function resolveCompiler(options) {
+  return options.compiler ?? options.getCompiler?.() ?? resolveTransformer(options)?.compiler;
+}
+function resolveTransformer(options) {
+  const transformer = options.transformer ?? options.getTransformer?.();
+  if (transformer) return transformer;
+  const compiler = options.compiler ?? options.getCompiler?.();
+  return compiler ? createSourceTransformer(compiler) : void 0;
+}
+function runSourceTransform(ctx, options, code, id) {
+  if (!shouldTransform(id, options)) return null;
+  const transformer = resolveTransformer(options);
+  if (!transformer) return null;
+  const {
+    compiler: _compiler,
+    getCompiler: _getCompiler,
+    getTransformer: _getTransformer,
+    transformer: _transformer,
+    ...transformOptions
+  } = options;
+  const result = transformSource({ ...transformOptions, transformer, path: id, source: code });
+  for (const dep of result.dependencies) {
+    ctx.addWatchFile?.(dep);
+  }
+  if (!result.changed) return null;
+  return {
+    code: result.code,
+    map: result.map,
+    diagnostics: result.diagnostics,
+    dependencies: result.dependencies,
+    changed: result.changed,
+    bailed: result.bailed
+  };
+}
+function createPandaSourcePluginHooks(resolveOptions) {
+  return {
+    resolveId(id) {
+      if (isInternalCssImport(id)) {
+        return INTERNAL_CSS_RESOLVED_ID;
+      }
+      return null;
+    },
+    load(id) {
+      if (!isInternalCssResolvedId(id)) return null;
+      const compiler = resolveCompiler(resolveOptions());
+      return getInternalCssRuntimeSource(resolveCxSeparator(compiler?.config()));
+    },
+    transform(code, id) {
+      return runSourceTransform(this, resolveOptions(), code, id);
+    }
+  };
+}
+
+// src/plugin.ts
+import { createUnplugin } from "unplugin";
+var pandaTransformer = createUnplugin((options) => {
+  const {
+    compiler: _compiler,
+    transformer: _transformer,
+    getCompiler: _getCompiler,
+    getTransformer: _getTransformer,
+    ...transformOptions
+  } = options;
+  const hooks = createPandaSourcePluginHooks(() => ({
+    ...transformOptions,
+    compiler: options.compiler,
+    transformer: options.transformer,
+    getCompiler: options.getCompiler,
+    getTransformer: options.getTransformer
+  }));
+  return {
+    name: "pandacss-transformer",
+    enforce: "pre",
+    ...hooks,
+    loadInclude(id) {
+      return id === INTERNAL_CSS_RESOLVED_ID;
+    },
+    transformInclude(id) {
+      return shouldTransform(id, transformOptions);
+    }
+  };
+});
+var plugin_default = pandaTransformer;
+
+// src/index.ts
+var src_default = plugin_default;
+var vite = plugin_default.vite;
+var webpack = plugin_default.webpack;
+var rollup = plugin_default.rollup;
+var esbuild = plugin_default.esbuild;
+var rspack = plugin_default.rspack;
+var rolldown = plugin_default.rolldown;
+export {
+  CX_SEPARATOR_PLACEHOLDER,
+  INTERNAL_CSS_IMPORT,
+  INTERNAL_CSS_RESOLVED_ID,
+  buildInternalCssRuntimeSource,
+  createCx,
+  createPandaSourcePluginHooks,
+  createSourceTransformer,
+  css,
+  cva,
+  cx,
+  src_default as default,
+  esbuild,
+  getInternalCssRuntimeSource,
+  getMergeKey,
+  pandaTransformer,
+  resolveCompiler,
+  resolveCxSeparator,
+  resolveTransformer,
+  rolldown,
+  rollup,
+  rspack,
+  runSourceTransform,
+  shouldTransform,
+  splitClassName,
+  sva,
+  transformSource,
+  vite,
+  webpack
+};

package/dist/runtime/cx.d.ts

@@ -0,0 +1,16 @@
+type PandaClassPart = string | false | null | undefined | PandaClassPart[];
+type CxSeparator = '_' | '=' | '-';
+interface CxOptions {
+    /** Panda `config.separator` — defaults to `_`. */
+    separator?: CxSeparator | string;
+}
+/** Split a className by ':' while respecting bracket boundaries. */
+declare function splitClassName(className: string): string[];
+/** Merge key for one Panda atomic class token (conditions + property). */
+declare function getMergeKey(className: string, separator: string): string | null;
+/** Build a transform-time `cx` helper bound to the project separator. */
+declare function createCx(options?: CxOptions): (...parts: PandaClassPart[]) => string;
+/** Default transform-time `cx` — mirrors styled-system naming with Panda merge semantics. */
+declare const cx: (...parts: PandaClassPart[]) => string;
+
+export { type CxOptions, type CxSeparator, type PandaClassPart, createCx, cx, getMergeKey, splitClassName };

package/dist/runtime/cx.js

@@ -0,0 +1,92 @@
+// src/runtime/internal/cx.ts
+var bakedSeparator = typeof __PANDA_CX_SEPARATOR__ !== "undefined" && __PANDA_CX_SEPARATOR__ ? __PANDA_CX_SEPARATOR__ : "_";
+function splitClassName(className) {
+  const segments = [];
+  let current = "";
+  let bracketDepth = 0;
+  for (let i = 0; i < className.length; i++) {
+    const ch = className[i];
+    if (ch === "[") {
+      bracketDepth++;
+      current += ch;
+    } else if (ch === "]") {
+      bracketDepth--;
+      current += ch;
+    } else if (ch === ":" && bracketDepth === 0) {
+      if (current) segments.push(current);
+      current = "";
+    } else {
+      current += ch;
+    }
+  }
+  if (current) segments.push(current);
+  return segments;
+}
+function getMergeKey(className, separator) {
+  let cls = className;
+  if (cls.endsWith("!")) {
+    cls = cls.slice(0, -1);
+  }
+  const segments = splitClassName(cls);
+  if (segments.length === 0) return null;
+  const last = segments[segments.length - 1];
+  const sepIdx = last.indexOf(separator);
+  if (sepIdx < 1) return null;
+  const property = last.slice(0, sepIdx);
+  if (segments.length === 1) {
+    return property;
+  }
+  const conditions = segments.slice(0, -1).join(":");
+  return `${conditions}:${property}`;
+}
+function flattenParts(parts, out) {
+  for (const part of parts) {
+    if (!part) continue;
+    if (Array.isArray(part)) {
+      flattenParts(part, out);
+      continue;
+    }
+    if (part === "") continue;
+    out.push(part);
+  }
+}
+function mergeClassStrings(separator, classes) {
+  const seen = /* @__PURE__ */ new Map();
+  const order = [];
+  let id = 0;
+  for (const cls of classes) {
+    for (const token of cls.split(" ")) {
+      if (!token) continue;
+      const key = getMergeKey(token, separator);
+      if (key !== null) {
+        if (!seen.has(key)) order.push(key);
+        seen.set(key, token);
+      } else {
+        const uniqueKey = `__${id++}`;
+        order.push(uniqueKey);
+        seen.set(uniqueKey, token);
+      }
+    }
+  }
+  let str = "";
+  for (let i = 0; i < order.length; i++) {
+    if (str) str += " ";
+    str += seen.get(order[i]);
+  }
+  return str;
+}
+function createCx(options = {}) {
+  const separator = options.separator ?? bakedSeparator;
+  return function cx2(...parts) {
+    const flat = [];
+    flattenParts(parts, flat);
+    return mergeClassStrings(separator, flat);
+  };
+}
+var cx = createCx();
+export {
+  createCx,
+  cx,
+  getMergeKey,
+  splitClassName
+};

package/dist/runtime/internal.d.ts

@@ -0,0 +1,54 @@
+export { CxOptions, CxSeparator, PandaClassPart, createCx, cx, getMergeKey, splitClassName } from './cx.js';
+
+/** Transformed `css()` sites receive pre-encoded class strings only. */
+declare function css(...styles: string[]): string;
+
+type VariantMap = Record<string, Record<string, string>>;
+type CompoundVariant = Record<string, unknown> & {
+    css?: string;
+    className?: string;
+};
+interface StringCvaConfig {
+    base?: string;
+    variants?: VariantMap;
+    defaultVariants?: Record<string, string>;
+    compoundVariants?: CompoundVariant[];
+}
+/** String-branch recipe factory for transformed source (TW-style cva). */
+declare function cva(config: StringCvaConfig): ((props?: Record<string, unknown>) => string) & {
+    __cva__: true;
+    variantKeys: string[];
+    variantMap: Record<string, string[]>;
+    raw: (props?: Record<string, unknown>) => string;
+    config: StringCvaConfig;
+    getVariantProps(props: Record<string, unknown>): Record<string, unknown>;
+    splitVariantProps(props: Record<string, unknown>): readonly [Record<string, unknown>, Record<string, unknown>];
+};
+
+type SvaConfig = {
+    slots?: string[];
+    base?: Record<string, string>;
+    variants?: StringCvaConfig['variants'];
+    defaultVariants?: StringCvaConfig['defaultVariants'];
+    compoundVariants?: Array<Record<string, unknown> & {
+        css?: Record<string, string> | string;
+        className?: string;
+        classNames?: Record<string, string>;
+    }>;
+    className?: Record<string, string>;
+};
+/** String-branch slot recipe factory for transformed source. */
+declare function sva(config: SvaConfig): ((props?: Record<string, unknown>) => Record<string, string>) & {
+    __cva__: false;
+    raw: (props?: Record<string, unknown>) => Record<string, string>;
+    config: SvaConfig;
+    variantMap: {
+        [k: string]: string[];
+    };
+    variantKeys: string[];
+    classNameMap: Record<string, string>;
+    getVariantProps(props: Record<string, unknown>): Record<string, unknown>;
+    splitVariantProps(props: Record<string, unknown>): readonly [Record<string, unknown>, Record<string, unknown>];
+};
+
+export { type StringCvaConfig, css, cva, sva };

package/dist/runtime/internal.js

@@ -0,0 +1,252 @@
+// src/runtime/internal/cx.ts
+var bakedSeparator = typeof __PANDA_CX_SEPARATOR__ !== "undefined" && __PANDA_CX_SEPARATOR__ ? __PANDA_CX_SEPARATOR__ : "_";
+function splitClassName(className) {
+  const segments = [];
+  let current = "";
+  let bracketDepth = 0;
+  for (let i = 0; i < className.length; i++) {
+    const ch = className[i];
+    if (ch === "[") {
+      bracketDepth++;
+      current += ch;
+    } else if (ch === "]") {
+      bracketDepth--;
+      current += ch;
+    } else if (ch === ":" && bracketDepth === 0) {
+      if (current) segments.push(current);
+      current = "";
+    } else {
+      current += ch;
+    }
+  }
+  if (current) segments.push(current);
+  return segments;
+}
+function getMergeKey(className, separator) {
+  let cls = className;
+  if (cls.endsWith("!")) {
+    cls = cls.slice(0, -1);
+  }
+  const segments = splitClassName(cls);
+  if (segments.length === 0) return null;
+  const last = segments[segments.length - 1];
+  const sepIdx = last.indexOf(separator);
+  if (sepIdx < 1) return null;
+  const property = last.slice(0, sepIdx);
+  if (segments.length === 1) {
+    return property;
+  }
+  const conditions = segments.slice(0, -1).join(":");
+  return `${conditions}:${property}`;
+}
+function flattenParts(parts, out) {
+  for (const part of parts) {
+    if (!part) continue;
+    if (Array.isArray(part)) {
+      flattenParts(part, out);
+      continue;
+    }
+    if (part === "") continue;
+    out.push(part);
+  }
+}
+function mergeClassStrings(separator, classes) {
+  const seen = /* @__PURE__ */ new Map();
+  const order = [];
+  let id = 0;
+  for (const cls of classes) {
+    for (const token of cls.split(" ")) {
+      if (!token) continue;
+      const key = getMergeKey(token, separator);
+      if (key !== null) {
+        if (!seen.has(key)) order.push(key);
+        seen.set(key, token);
+      } else {
+        const uniqueKey = `__${id++}`;
+        order.push(uniqueKey);
+        seen.set(uniqueKey, token);
+      }
+    }
+  }
+  let str = "";
+  for (let i = 0; i < order.length; i++) {
+    if (str) str += " ";
+    str += seen.get(order[i]);
+  }
+  return str;
+}
+function createCx(options = {}) {
+  const separator = options.separator ?? bakedSeparator;
+  return function cx2(...parts) {
+    const flat = [];
+    flattenParts(parts, flat);
+    return mergeClassStrings(separator, flat);
+  };
+}
+var cx = createCx();
+
+// src/runtime/internal/css.ts
+function css(...styles) {
+  return cx(...styles);
+}
+
+// src/runtime/internal/cva.ts
+function withDefaults(defaults, props) {
+  const out = { ...defaults };
+  for (const key in props) {
+    if (props[key] !== void 0) out[key] = props[key];
+  }
+  return out;
+}
+function compoundMatches(compound, variants) {
+  for (const key in compound) {
+    if (key === "css" || key === "className" || key === "classNames") continue;
+    const expected = compound[key];
+    const actual = variants[key];
+    if (Array.isArray(expected)) {
+      if (!expected.includes(actual)) return false;
+    } else if (actual !== expected) {
+      return false;
+    }
+  }
+  return true;
+}
+function toVariantMap(variants) {
+  const map = {};
+  for (const key in variants) map[key] = Object.keys(variants[key] ?? {});
+  return map;
+}
+function cva(config) {
+  const base = config.base ?? "";
+  const variants = config.variants ?? {};
+  const defaultVariants = config.defaultVariants ?? {};
+  const compoundVariants = config.compoundVariants ?? [];
+  const variantKeys = Object.keys(variants);
+  const resolve = (props = {}) => {
+    const computed = withDefaults(defaultVariants, props);
+    const parts = [];
+    if (base) parts.push(base);
+    for (const key of variantKeys) {
+      const value = computed[key];
+      if (typeof value === "string" && variants[key]?.[value]) {
+        parts.push(variants[key][value]);
+      }
+    }
+    for (const compound of compoundVariants) {
+      if (!compoundMatches(compound, computed)) continue;
+      const cls = compound.className ?? compound.css;
+      if (typeof cls === "string" && cls) parts.push(cls);
+    }
+    return cx(...parts);
+  };
+  const cvaFn = (props = {}) => resolve(props);
+  return Object.assign(cvaFn, {
+    __cva__: true,
+    variantKeys,
+    variantMap: toVariantMap(variants),
+    raw: resolve,
+    config,
+    getVariantProps(props) {
+      return withDefaults(defaultVariants, props);
+    },
+    splitVariantProps(props) {
+      const rest = {};
+      const variantProps = {};
+      for (const key in props) {
+        if (variantKeys.includes(key)) variantProps[key] = props[key];
+        else rest[key] = props[key];
+      }
+      return [rest, variantProps];
+    }
+  });
+}
+
+// src/runtime/internal/sva.ts
+function slotCompoundVariants(compoundVariants, slot) {
+  if (!compoundVariants?.length) return void 0;
+  return compoundVariants.map((compound) => {
+    const next = {};
+    for (const key in compound) {
+      if (key === "css" || key === "className" || key === "classNames") continue;
+      next[key] = compound[key];
+    }
+    const css2 = compound.css;
+    if (typeof css2 === "string") next.css = css2;
+    else if (css2 && typeof css2 === "object" && slot in css2) next.css = css2[slot];
+    const className = compound.classNames?.[slot] ?? compound.className;
+    if (className) next.className = className;
+    return next;
+  }).filter((compound) => compound.css || compound.className);
+}
+function getSlotRecipes(config) {
+  const slots = config.slots ?? Object.keys(config.base ?? {});
+  const recipes = {};
+  for (const slot of slots) {
+    recipes[slot] = {
+      base: config.base?.[slot],
+      variants: config.variants,
+      defaultVariants: config.defaultVariants,
+      compoundVariants: slotCompoundVariants(config.compoundVariants, slot)
+    };
+    if (config.className?.[slot]) {
+      recipes[slot] = {
+        ...recipes[slot],
+        base: cx(recipes[slot]?.base, config.className[slot])
+      };
+    }
+  }
+  return recipes;
+}
+function sva(config) {
+  const slotRecipes = getSlotRecipes(config);
+  const slots = Object.entries(slotRecipes).map(([slot, recipe]) => [slot, cva(recipe)]);
+  const defaultVariants = config.defaultVariants ?? {};
+  const variantKeys = Object.keys(config.variants ?? {});
+  const svaFn = (props = {}) => {
+    const result = {};
+    for (const [slot, slotFn] of slots) {
+      result[slot] = slotFn(props);
+    }
+    return result;
+  };
+  const raw = (props = {}) => {
+    const result = {};
+    for (const [slot, slotFn] of slots) {
+      result[slot] = slotFn.raw(props);
+    }
+    return result;
+  };
+  return Object.assign(svaFn, {
+    __cva__: false,
+    raw,
+    config,
+    variantMap: Object.fromEntries(variantKeys.map((key) => [key, Object.keys(config.variants?.[key] ?? {})])),
+    variantKeys,
+    classNameMap: config.className ?? {},
+    getVariantProps(props) {
+      const out = { ...defaultVariants };
+      for (const key in props) {
+        if (props[key] !== void 0) out[key] = props[key];
+      }
+      return out;
+    },
+    splitVariantProps(props) {
+      const rest = {};
+      const variantProps = {};
+      for (const key in props) {
+        if (variantKeys.includes(key)) variantProps[key] = props[key];
+        else rest[key] = props[key];
+      }
+      return [rest, variantProps];
+    }
+  });
+}
+export {
+  createCx,
+  css,
+  cva,
+  cx,
+  getMergeKey,
+  splitClassName,
+  sva
+};

package/dist/runtime/internal.runtime.mjs

@@ -0,0 +1 @@
+var x="__PANDA_CX_SEPARATOR__";function m(t){let r=[],n="",s=0;for(let a=0;a<t.length;a++){let i=t[a];i==="["?(s++,n+=i):i==="]"?(s--,n+=i):i===":"&&s===0?(n&&r.push(n),n=""):n+=i}return n&&r.push(n),r}function C(t,r){let n=t;n.endsWith("!")&&(n=n.slice(0,-1));let s=m(n);if(s.length===0)return null;let a=s[s.length-1],i=a.indexOf(r);if(i<1)return null;let u=a.slice(0,i);return s.length===1?u:`${s.slice(0,-1).join(":")}:${u}`}function R(t,r){for(let n of t)if(n){if(Array.isArray(n)){R(n,r);continue}n!==""&&r.push(n)}}function V(t,r){let n=new Map,s=[],a=0;for(let u of r)for(let o of u.split(" ")){if(!o)continue;let e=C(o,t);if(e!==null)n.has(e)||s.push(e),n.set(e,o);else{let c=`__${a++}`;s.push(c),n.set(c,o)}}let i="";for(let u=0;u<s.length;u++)i&&(i+=" "),i+=n.get(s[u]);return i}function v(t={}){let r=t.separator??x;return function(...s){let a=[];return R(s,a),V(r,a)}}var g=v();function y(...t){return g(...t)}function _(t,r){let n={...t};for(let s in r)r[s]!==void 0&&(n[s]=r[s]);return n}function w(t,r){for(let n in t){if(n==="css"||n==="className"||n==="classNames")continue;let s=t[n],a=r[n];if(Array.isArray(s)){if(!s.includes(a))return!1}else if(a!==s)return!1}return!0}function N(t){let r={};for(let n in t)r[n]=Object.keys(t[n]??{});return r}function p(t){let r=t.base??"",n=t.variants??{},s=t.defaultVariants??{},a=t.compoundVariants??[],i=Object.keys(n),u=(e={})=>{let c=_(s,e),f=[];r&&f.push(r);for(let l of i){let d=c[l];typeof d=="string"&&n[l]?.[d]&&f.push(n[l][d])}for(let l of a){if(!w(l,c))continue;let d=l.className??l.css;typeof d=="string"&&d&&f.push(d)}return g(...f)};return Object.assign((e={})=>u(e),{__cva__:!0,variantKeys:i,variantMap:N(n),raw:u,config:t,getVariantProps(e){return _(s,e)},splitVariantProps(e){let c={},f={};for(let l in e)i.includes(l)?f[l]=e[l]:c[l]=e[l];return[c,f]}})}function P(t,r){if(t?.length)return t.map(n=>{let s={};for(let u in n)u==="css"||u==="className"||u==="classNames"||(s[u]=n[u]);let a=n.css;typeof a=="string"?s.css=a:a&&typeof a=="object"&&r in a&&(s.css=a[r]);let i=n.classNames?.[r]??n.className;return i&&(s.className=i),s}).filter(n=>n.css||n.className)}function b(t){let r=t.slots??Object.keys(t.base??{}),n={};for(let s of r)n[s]={base:t.base?.[s],variants:t.variants,defaultVariants:t.defaultVariants,compoundVariants:P(t.compoundVariants,s)},t.className?.[s]&&(n[s]={...n[s],base:g(n[s]?.base,t.className[s])});return n}function k(t){let r=b(t),n=Object.entries(r).map(([o,e])=>[o,p(e)]),s=t.defaultVariants??{},a=Object.keys(t.variants??{});return Object.assign((o={})=>{let e={};for(let[c,f]of n)e[c]=f(o);return e},{__cva__:!1,raw:(o={})=>{let e={};for(let[c,f]of n)e[c]=f.raw(o);return e},config:t,variantMap:Object.fromEntries(a.map(o=>[o,Object.keys(t.variants?.[o]??{})])),variantKeys:a,classNameMap:t.className??{},getVariantProps(o){let e={...s};for(let c in o)o[c]!==void 0&&(e[c]=o[c]);return e},splitVariantProps(o){let e={},c={};for(let f in o)a.includes(f)?c[f]=o[f]:e[f]=o[f];return[e,c]}})}export{y as css,p as cva,g as cx,k as sva};

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@pandacss/transformer",
+  "version": "2.0.0-beta.9",
+  "description": "Source transformer facade for Panda CSS",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "author": "Segun Adebayo <joseshegs@gmail.com>",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./cx": {
+      "source": "./src/runtime/internal/cx.ts",
+      "types": "./dist/runtime/cx.d.ts",
+      "default": "./dist/runtime/cx.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "homepage": "https://panda-css.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chakra-ui/panda.git",
+    "directory": "packages/transformer"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "unplugin": "^2.3.10",
+    "@pandacss/compiler": "2.0.0-beta.9",
+    "@pandacss/compiler-shared": "2.0.0-beta.9"
+  },
+  "peerDependencies": {
+    "vite": ">=6.0.0",
+    "webpack": ">=5.0.0",
+    "rollup": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    },
+    "webpack": {
+      "optional": true
+    },
+    "rollup": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "scripts": {
+    "build": "tsup",
+    "build:fast": "tsup --no-dts",
+    "dev": "tsup --no-dts --watch",
+    "test": "vitest run"
+  }
+}