@pandacss/generator 0.0.0-dev-20231019221036 → 0.0.0-dev-20231020171339

package/dist/index.d.mts

@@ -48,6 +48,7 @@ declare const getEngine: (conf: ConfigResultWithHooks) => {
         factoryName: string;
         upperName: string;
         typeName: string;
+        variantName: string;
         componentName: string;
         framework: ("react" | "solid" | "preact" | "vue" | "qwik") | undefined;
         styleProps: "all" | "minimal" | "none";
@@ -209,6 +210,7 @@ declare const createGenerator: (conf: ConfigResultWithHooks) => {
             factoryName: string;
             upperName: string;
             typeName: string;
+            variantName: string;
             componentName: string;
             framework: ("react" | "solid" | "preact" | "vue" | "qwik") | undefined;
             styleProps: "all" | "minimal" | "none";
@@ -321,6 +323,7 @@ declare const createGenerator: (conf: ConfigResultWithHooks) => {
             factoryName: string;
             upperName: string;
             typeName: string;
+            variantName: string;
             componentName: string;
             framework: ("react" | "solid" | "preact" | "vue" | "qwik") | undefined;
             styleProps: "all" | "minimal" | "none";
@@ -515,6 +518,7 @@ declare const createGenerator: (conf: ConfigResultWithHooks) => {
         factoryName: string;
         upperName: string;
         typeName: string;
+        variantName: string;
         componentName: string;
         framework: ("react" | "solid" | "preact" | "vue" | "qwik") | undefined;
         styleProps: "all" | "minimal" | "none";

package/dist/index.d.ts

@@ -48,6 +48,7 @@ declare const getEngine: (conf: ConfigResultWithHooks) => {
         factoryName: string;
         upperName: string;
         typeName: string;
+        variantName: string;
         componentName: string;
         framework: ("react" | "solid" | "preact" | "vue" | "qwik") | undefined;
         styleProps: "all" | "minimal" | "none";
@@ -209,6 +210,7 @@ declare const createGenerator: (conf: ConfigResultWithHooks) => {
             factoryName: string;
             upperName: string;
             typeName: string;
+            variantName: string;
             componentName: string;
             framework: ("react" | "solid" | "preact" | "vue" | "qwik") | undefined;
             styleProps: "all" | "minimal" | "none";
@@ -321,6 +323,7 @@ declare const createGenerator: (conf: ConfigResultWithHooks) => {
             factoryName: string;
             upperName: string;
             typeName: string;
+            variantName: string;
             componentName: string;
             framework: ("react" | "solid" | "preact" | "vue" | "qwik") | undefined;
             styleProps: "all" | "minimal" | "none";
@@ -515,6 +518,7 @@ declare const createGenerator: (conf: ConfigResultWithHooks) => {
         factoryName: string;
         upperName: string;
         typeName: string;
+        variantName: string;
         componentName: string;
         framework: ("react" | "solid" | "preact" | "vue" | "qwik") | undefined;
         styleProps: "all" | "minimal" | "none";

package/dist/index.js

@@ -518,12 +518,25 @@ function getDeepestNode(node) {
 function cleanupSelectors(css2, varSelector) {
   const root = import_postcss2.default.parse(css2);
   root.walkRules((rule) => {
+    const selectors = [];
     rule.selectors.forEach((selector) => {
-      const res = selector.split(varSelector).filter(Boolean);
-      if (res.length === 0)
-        return;
-      rule.selector = res.join(varSelector);
+      selectors.push(selector.trim());
     });
+    const ruleSelector = selectors.join(", ");
+    if (ruleSelector === varSelector) {
+      return;
+    }
+    const trimmedSelector = selectors.join(",");
+    if (trimmedSelector === varSelector) {
+      return;
+    }
+    const selectorsWithoutVarRoot = selectors.map((selector) => {
+      const res = selector.split(varSelector).filter(Boolean);
+      return res.join("");
+    }).filter(Boolean);
+    if (selectorsWithoutVarRoot.length === 0)
+      return;
+    rule.selector = selectorsWithoutVarRoot.join(", ");
   });
   return root.toString();
 }
@@ -1423,7 +1436,7 @@ function generatePreactJsxPattern(ctx) {
 // src/artifacts/preact-jsx/types.ts
 var import_outdent16 = require("outdent");
 function generatePreactJsxTypes(ctx) {
-  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, componentName, upperName, typeName, variantName } = ctx.jsx;
   return {
     jsxFactory: import_outdent16.outdent`
 import type { ${upperName} } from '../types/jsx'
@@ -1467,6 +1480,8 @@ type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}>
 export type ${upperName} = JsxFactory & JsxElements
 
 export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+
+export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
   };
 }
@@ -1687,7 +1702,7 @@ function generateQwikJsxPattern(ctx) {
 // src/artifacts/qwik-jsx/types.ts
 var import_outdent21 = require("outdent");
 function generateQwikJsxTypes(ctx) {
-  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, componentName, upperName, typeName, variantName } = ctx.jsx;
   return {
     jsxFactory: import_outdent21.outdent`
 ${ctx.file.importType(upperName, "../types/jsx")}
@@ -1734,6 +1749,8 @@ type JsxElements = { [K in keyof QwikIntrinsicElements]: ${componentName}<K, {}>
 export type ${upperName} = JsxFactory & JsxElements
 
 export type ${typeName}<T extends ElementType> = Assign<ComponentProps<T>, JsxStyleProps>
+
+export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
   };
 }
@@ -1960,7 +1977,7 @@ function generateReactJsxPattern(ctx) {
 // src/artifacts/react-jsx/types.ts
 var import_outdent26 = require("outdent");
 function generateReactJsxTypes(ctx) {
-  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, componentName, upperName, typeName, variantName } = ctx.jsx;
   return {
     jsxFactory: import_outdent26.outdent`
 ${ctx.file.importType(upperName, "../types/jsx")}
@@ -2006,6 +2023,8 @@ type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}>
 export type ${upperName} = JsxFactory & JsxElements
 
 export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+
+export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
   };
 }
@@ -2245,7 +2264,7 @@ function generateSolidJsxPattern(ctx) {
 // src/artifacts/solid-jsx/types.ts
 var import_outdent31 = require("outdent");
 function generateSolidJsxTypes(ctx) {
-  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, componentName, upperName, typeName, variantName } = ctx.jsx;
   return {
     jsxFactory: import_outdent31.outdent`
 ${ctx.file.importType(upperName, "../types/jsx")}
@@ -2289,6 +2308,8 @@ type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}>
 export type ${upperName} = JsxFactory & JsxElements
 
 export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+
+export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
   };
 }
@@ -2572,7 +2593,7 @@ function generateVueJsxPattern(ctx) {
 // src/artifacts/vue-jsx/types.ts
 var import_outdent37 = require("outdent");
 function generateVueJsxTypes(ctx) {
-  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, componentName, upperName, typeName, variantName } = ctx.jsx;
   return {
     jsxFactory: import_outdent37.outdent`
 ${ctx.file.importType(upperName, "../types/jsx")}
@@ -2622,6 +2643,8 @@ type JsxElements = { [K in IntrinsicElement]: ${componentName}<K, {}> }
 export type ${upperName} = JsxFactory & JsxElements
 
 export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+
+export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
   };
 }
@@ -3463,6 +3486,7 @@ var getJsxEngine = (config) => {
     factoryName: jsxFactory,
     upperName: (0, import_shared6.capitalize)(jsxFactory),
     typeName: `HTML${(0, import_shared6.capitalize)(jsxFactory)}Props`,
+    variantName: `${(0, import_shared6.capitalize)(jsxFactory)}VariantProps`,
     componentName: `${(0, import_shared6.capitalize)(jsxFactory)}Component`,
     framework: jsxFramework,
     styleProps: jsxStyleProps2 ?? "all"

package/dist/index.mjs

@@ -487,12 +487,25 @@ function getDeepestNode(node) {
 function cleanupSelectors(css2, varSelector) {
   const root = postcss2.parse(css2);
   root.walkRules((rule) => {
+    const selectors = [];
     rule.selectors.forEach((selector) => {
-      const res = selector.split(varSelector).filter(Boolean);
-      if (res.length === 0)
-        return;
-      rule.selector = res.join(varSelector);
+      selectors.push(selector.trim());
     });
+    const ruleSelector = selectors.join(", ");
+    if (ruleSelector === varSelector) {
+      return;
+    }
+    const trimmedSelector = selectors.join(",");
+    if (trimmedSelector === varSelector) {
+      return;
+    }
+    const selectorsWithoutVarRoot = selectors.map((selector) => {
+      const res = selector.split(varSelector).filter(Boolean);
+      return res.join("");
+    }).filter(Boolean);
+    if (selectorsWithoutVarRoot.length === 0)
+      return;
+    rule.selector = selectorsWithoutVarRoot.join(", ");
   });
   return root.toString();
 }
@@ -1392,7 +1405,7 @@ function generatePreactJsxPattern(ctx) {
 // src/artifacts/preact-jsx/types.ts
 import { outdent as outdent16 } from "outdent";
 function generatePreactJsxTypes(ctx) {
-  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, componentName, upperName, typeName, variantName } = ctx.jsx;
   return {
     jsxFactory: outdent16`
 import type { ${upperName} } from '../types/jsx'
@@ -1436,6 +1449,8 @@ type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}>
 export type ${upperName} = JsxFactory & JsxElements
 
 export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+
+export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
   };
 }
@@ -1656,7 +1671,7 @@ function generateQwikJsxPattern(ctx) {
 // src/artifacts/qwik-jsx/types.ts
 import { outdent as outdent21 } from "outdent";
 function generateQwikJsxTypes(ctx) {
-  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, componentName, upperName, typeName, variantName } = ctx.jsx;
   return {
     jsxFactory: outdent21`
 ${ctx.file.importType(upperName, "../types/jsx")}
@@ -1703,6 +1718,8 @@ type JsxElements = { [K in keyof QwikIntrinsicElements]: ${componentName}<K, {}>
 export type ${upperName} = JsxFactory & JsxElements
 
 export type ${typeName}<T extends ElementType> = Assign<ComponentProps<T>, JsxStyleProps>
+
+export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
   };
 }
@@ -1929,7 +1946,7 @@ function generateReactJsxPattern(ctx) {
 // src/artifacts/react-jsx/types.ts
 import { outdent as outdent26 } from "outdent";
 function generateReactJsxTypes(ctx) {
-  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, componentName, upperName, typeName, variantName } = ctx.jsx;
   return {
     jsxFactory: outdent26`
 ${ctx.file.importType(upperName, "../types/jsx")}
@@ -1975,6 +1992,8 @@ type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}>
 export type ${upperName} = JsxFactory & JsxElements
 
 export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+
+export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
   };
 }
@@ -2214,7 +2233,7 @@ function generateSolidJsxPattern(ctx) {
 // src/artifacts/solid-jsx/types.ts
 import { outdent as outdent31 } from "outdent";
 function generateSolidJsxTypes(ctx) {
-  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, componentName, upperName, typeName, variantName } = ctx.jsx;
   return {
     jsxFactory: outdent31`
 ${ctx.file.importType(upperName, "../types/jsx")}
@@ -2258,6 +2277,8 @@ type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}>
 export type ${upperName} = JsxFactory & JsxElements
 
 export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+
+export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
   };
 }
@@ -2541,7 +2562,7 @@ function generateVueJsxPattern(ctx) {
 // src/artifacts/vue-jsx/types.ts
 import { outdent as outdent37 } from "outdent";
 function generateVueJsxTypes(ctx) {
-  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, componentName, upperName, typeName, variantName } = ctx.jsx;
   return {
     jsxFactory: outdent37`
 ${ctx.file.importType(upperName, "../types/jsx")}
@@ -2591,6 +2612,8 @@ type JsxElements = { [K in IntrinsicElement]: ${componentName}<K, {}> }
 export type ${upperName} = JsxFactory & JsxElements
 
 export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+
+export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
   };
 }
@@ -3438,6 +3461,7 @@ var getJsxEngine = (config) => {
     factoryName: jsxFactory,
     upperName: capitalize2(jsxFactory),
     typeName: `HTML${capitalize2(jsxFactory)}Props`,
+    variantName: `${capitalize2(jsxFactory)}VariantProps`,
     componentName: `${capitalize2(jsxFactory)}Component`,
     framework: jsxFramework,
     styleProps: jsxStyleProps2 ?? "all"

package/package.json

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