@bamboocss/generator 1.26.0 → 1.28.0

package/dist/index.cjs

@@ -852,7 +852,7 @@ function generateCreateRecipe(ctx) {
    const withPrefix = ${prefix.className ? `(className) => className ? ${JSON.stringify(prefix.className)} + '-' + className : ${JSON.stringify(prefix.className)}` : `(className) => className`}
    export const formatRecipeClass = ${hash.className ? `(className) => withPrefix((${utility.toHash})([className], toHash))` : `withPrefix`}
 
-   export const createRecipe = (name, defaultVariants, compoundVariants) => {
+   export const createRecipe = (name, defaultVariants, compoundVariants, variantMap) => {
     const getVariantProps = (variants) => {
       return {
         [name]: '__ignore__',
@@ -889,7 +889,28 @@ function generateCreateRecipe(ctx) {
         }
       })
 
-      const recipeStyles = getVariantProps(variants)
+      // Only what the config declares names a class.
+      //
+      // Without this the transform named one for *any* prop it was handed — the build emits
+      // rules only for declared values, so the element carried a class nothing backed. It also
+      // disagreed with \`cva\`, which skips an undeclared value, leaving the two recipe kinds
+      // with different class strings for the same call.
+      //
+      // Filtered here rather than in \`getVariantProps\`, which is public and is what compound
+      // variants are matched against.
+      const declared = getVariantProps(variants)
+      const recipeStyles = variantMap
+        ? Object.fromEntries(
+            Object.entries(declared).filter(([prop, value]) => {
+              if (prop === name) return true
+              // A conditional or responsive value is an object of leaves, and the leaves are
+              // what name classes: createCss walks them and calls transform per condition.
+              // Only a scalar can be judged here.
+              if (value === null || typeof value === 'object') return true
+              return Object.hasOwn(variantMap, prop) && variantMap[prop].includes(String(value))
+            }),
+          )
+        : declared
 
       // No class for the compound variants. Their rule selects on the variant classes
       // \`recipeCss\` just named — \`.btn--size_sm.btn--tone_a\` — so it applies on its own,
@@ -981,7 +1002,7 @@ function generateRecipes(ctx, filters) {
          * carries, so that slot's class is a constant and nothing has to reach it at runtime.
          */
         const ${baseName}Anchors = ${JSON.stringify(anchors)}
-        const ${baseName}AnchorFns = /* @__PURE__ */ ${baseName}Anchors.map((slotName) => [slotName, createRecipe(\`${config.className}__\${slotName}\`, ${baseName}DefaultVariants, getSlotCompoundVariant(${baseName}CompoundVariants, slotName))])
+        const ${baseName}AnchorFns = /* @__PURE__ */ ${baseName}Anchors.map((slotName) => [slotName, createRecipe(\`${config.className}__\${slotName}\`, ${baseName}DefaultVariants, getSlotCompoundVariant(${baseName}CompoundVariants, slotName), ${stringify$2(variantKeyMap)})])
         const ${baseName}StaticSlots = /* @__PURE__ */ Object.fromEntries(
           ${baseName}SlotNames.filter(([slotName]) => !${baseName}Anchors.includes(slotName)),
         )
@@ -1002,7 +1023,7 @@ function generateRecipes(ctx, filters) {
          * against a stylesheet emitting \`.bam-menu__trigger\` — which is easy to miss, since
          * the obvious reading is that this is a hashing problem.
          */
-        const ${baseName}SlotFns = /* @__PURE__ */ ${baseName}SlotNames.map(([slotName]) => [slotName, createRecipe(\`${config.className}__\${slotName}\`, ${baseName}DefaultVariants, getSlotCompoundVariant(${baseName}CompoundVariants, slotName))])
+        const ${baseName}SlotFns = /* @__PURE__ */ ${baseName}SlotNames.map(([slotName]) => [slotName, createRecipe(\`${config.className}__\${slotName}\`, ${baseName}DefaultVariants, getSlotCompoundVariant(${baseName}CompoundVariants, slotName), ${stringify$2(variantKeyMap)})])
 
         const ${baseName}Fn = memo((props = {}) => {
           return Object.fromEntries(${baseName}SlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
@@ -1037,10 +1058,10 @@ function generateRecipes(ctx, filters) {
         ${ctx.file.import("memo, splitProps", "../helpers")}
         ${ctx.file.import("createRecipe, mergeRecipes", "./create-recipe")}
 
-        const ${baseName}Fn = /* @__PURE__ */ createRecipe('${config.className}', ${stringify$2(defaultVariants ?? {})}, ${stringify$2(compoundVariants ?? [])})
-
         const ${baseName}VariantMap = ${stringify$2(variantKeyMap)}
 
+        const ${baseName}Fn = /* @__PURE__ */ createRecipe('${config.className}', ${stringify$2(defaultVariants ?? {})}, ${stringify$2(compoundVariants ?? [])}, ${baseName}VariantMap)
+
         const ${baseName}VariantKeys = Object.keys(${baseName}VariantMap)
 
         export const ${baseName} = /* @__PURE__ */ Object.assign(memo(${baseName}Fn.recipeFn), {

package/dist/index.mjs

@@ -826,7 +826,7 @@ function generateCreateRecipe(ctx) {
    const withPrefix = ${prefix.className ? `(className) => className ? ${JSON.stringify(prefix.className)} + '-' + className : ${JSON.stringify(prefix.className)}` : `(className) => className`}
    export const formatRecipeClass = ${hash.className ? `(className) => withPrefix((${utility.toHash})([className], toHash))` : `withPrefix`}
 
-   export const createRecipe = (name, defaultVariants, compoundVariants) => {
+   export const createRecipe = (name, defaultVariants, compoundVariants, variantMap) => {
     const getVariantProps = (variants) => {
       return {
         [name]: '__ignore__',
@@ -863,7 +863,28 @@ function generateCreateRecipe(ctx) {
         }
       })
 
-      const recipeStyles = getVariantProps(variants)
+      // Only what the config declares names a class.
+      //
+      // Without this the transform named one for *any* prop it was handed — the build emits
+      // rules only for declared values, so the element carried a class nothing backed. It also
+      // disagreed with \`cva\`, which skips an undeclared value, leaving the two recipe kinds
+      // with different class strings for the same call.
+      //
+      // Filtered here rather than in \`getVariantProps\`, which is public and is what compound
+      // variants are matched against.
+      const declared = getVariantProps(variants)
+      const recipeStyles = variantMap
+        ? Object.fromEntries(
+            Object.entries(declared).filter(([prop, value]) => {
+              if (prop === name) return true
+              // A conditional or responsive value is an object of leaves, and the leaves are
+              // what name classes: createCss walks them and calls transform per condition.
+              // Only a scalar can be judged here.
+              if (value === null || typeof value === 'object') return true
+              return Object.hasOwn(variantMap, prop) && variantMap[prop].includes(String(value))
+            }),
+          )
+        : declared
 
       // No class for the compound variants. Their rule selects on the variant classes
       // \`recipeCss\` just named — \`.btn--size_sm.btn--tone_a\` — so it applies on its own,
@@ -955,7 +976,7 @@ function generateRecipes(ctx, filters) {
          * carries, so that slot's class is a constant and nothing has to reach it at runtime.
          */
         const ${baseName}Anchors = ${JSON.stringify(anchors)}
-        const ${baseName}AnchorFns = /* @__PURE__ */ ${baseName}Anchors.map((slotName) => [slotName, createRecipe(\`${config.className}__\${slotName}\`, ${baseName}DefaultVariants, getSlotCompoundVariant(${baseName}CompoundVariants, slotName))])
+        const ${baseName}AnchorFns = /* @__PURE__ */ ${baseName}Anchors.map((slotName) => [slotName, createRecipe(\`${config.className}__\${slotName}\`, ${baseName}DefaultVariants, getSlotCompoundVariant(${baseName}CompoundVariants, slotName), ${stringify$2(variantKeyMap)})])
         const ${baseName}StaticSlots = /* @__PURE__ */ Object.fromEntries(
           ${baseName}SlotNames.filter(([slotName]) => !${baseName}Anchors.includes(slotName)),
         )
@@ -976,7 +997,7 @@ function generateRecipes(ctx, filters) {
          * against a stylesheet emitting \`.bam-menu__trigger\` — which is easy to miss, since
          * the obvious reading is that this is a hashing problem.
          */
-        const ${baseName}SlotFns = /* @__PURE__ */ ${baseName}SlotNames.map(([slotName]) => [slotName, createRecipe(\`${config.className}__\${slotName}\`, ${baseName}DefaultVariants, getSlotCompoundVariant(${baseName}CompoundVariants, slotName))])
+        const ${baseName}SlotFns = /* @__PURE__ */ ${baseName}SlotNames.map(([slotName]) => [slotName, createRecipe(\`${config.className}__\${slotName}\`, ${baseName}DefaultVariants, getSlotCompoundVariant(${baseName}CompoundVariants, slotName), ${stringify$2(variantKeyMap)})])
 
         const ${baseName}Fn = memo((props = {}) => {
           return Object.fromEntries(${baseName}SlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
@@ -1011,10 +1032,10 @@ function generateRecipes(ctx, filters) {
         ${ctx.file.import("memo, splitProps", "../helpers")}
         ${ctx.file.import("createRecipe, mergeRecipes", "./create-recipe")}
 
-        const ${baseName}Fn = /* @__PURE__ */ createRecipe('${config.className}', ${stringify$2(defaultVariants ?? {})}, ${stringify$2(compoundVariants ?? [])})
-
         const ${baseName}VariantMap = ${stringify$2(variantKeyMap)}
 
+        const ${baseName}Fn = /* @__PURE__ */ createRecipe('${config.className}', ${stringify$2(defaultVariants ?? {})}, ${stringify$2(compoundVariants ?? [])}, ${baseName}VariantMap)
+
         const ${baseName}VariantKeys = Object.keys(${baseName}VariantMap)
 
         export const ${baseName} = /* @__PURE__ */ Object.assign(memo(${baseName}Fn.recipeFn), {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bamboocss/generator",
-  "version": "1.26.0",
+  "version": "1.28.0",
   "description": "The css generator for css bamboo",
   "homepage": "https://bamboocss.com",
   "license": "MIT",
@@ -38,12 +38,12 @@
     "pluralize": "8.0.0",
     "postcss": "8.5.26",
     "ts-pattern": "5.9.0",
-    "@bamboocss/core": "1.26.0",
-    "@bamboocss/is-valid-prop": "^1.26.0",
-    "@bamboocss/logger": "1.26.0",
-    "@bamboocss/shared": "1.26.0",
-    "@bamboocss/token-dictionary": "1.26.0",
-    "@bamboocss/types": "1.26.0"
+    "@bamboocss/core": "1.28.0",
+    "@bamboocss/is-valid-prop": "^1.28.0",
+    "@bamboocss/logger": "1.28.0",
+    "@bamboocss/shared": "1.28.0",
+    "@bamboocss/token-dictionary": "1.28.0",
+    "@bamboocss/types": "1.28.0"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.33"