@bamboocss/eslint-plugin 1.16.0 → 1.17.0

package/dist/index.cjs

@@ -8,7 +8,7 @@ require("@typescript-eslint/utils/ts-eslint");
 let _bamboocss_shared = require("@bamboocss/shared");
 //#region package.json
 var name = "@bamboocss/eslint-plugin";
-var version = "1.16.0";
+var version = "1.17.0";
 //#endregion
 //#region src/utils/index.ts
 const createRule = _typescript_eslint_utils.ESLintUtils.RuleCreator((name) => `https://github.com/bamboocss/bamboo/blob/main/packages/eslint-plugin/docs/rules/${name}.md`);
@@ -307,8 +307,8 @@ function isRecipeVariant(node, context) {
 }
 //#endregion
 //#region src/rules/file-not-included.ts
-const RULE_NAME$19 = "file-not-included";
-const rule$19 = createRule({
+const RULE_NAME$20 = "file-not-included";
+const rule$20 = createRule({
 	create(context) {
 		if (isValidFile(context)) return {};
 		let hasReported = false;
@@ -329,11 +329,11 @@ const rule$19 = createRule({
 		schema: [],
 		type: "problem"
 	},
-	name: RULE_NAME$19
+	name: RULE_NAME$20
 });
 //#endregion
 //#region src/rules/no-config-function-in-source.ts
-const RULE_NAME$18 = "no-config-function-in-source";
+const RULE_NAME$19 = "no-config-function-in-source";
 const CONFIG_FUNCTIONS = new Set([
 	"defineConfig",
 	"defineGlobalStyles",
@@ -350,7 +350,7 @@ const CONFIG_FUNCTIONS = new Set([
 	"defineTokens",
 	"defineUtility"
 ]);
-const rule$18 = createRule({
+const rule$19 = createRule({
 	create(context) {
 		if (!hasPkgImport(context)) return {};
 		if (!isValidFile(context)) return {};
@@ -390,12 +390,12 @@ const rule$18 = createRule({
 		schema: [],
 		type: "problem"
 	},
-	name: RULE_NAME$18
+	name: RULE_NAME$19
 });
 //#endregion
 //#region src/rules/no-debug.ts
-const RULE_NAME$17 = "no-debug";
-const rule$17 = createRule({
+const RULE_NAME$18 = "no-debug";
+const rule$18 = createRule({
 	create(context) {
 		const processedNodes = /* @__PURE__ */ new WeakSet();
 		const checkObjectForDebug = (object) => {
@@ -464,12 +464,12 @@ const rule$17 = createRule({
 		schema: [],
 		type: "problem"
 	},
-	name: RULE_NAME$17
+	name: RULE_NAME$18
 });
 //#endregion
 //#region src/rules/no-deprecated-tokens.ts
-const RULE_NAME$16 = "no-deprecated-tokens";
-const rule$16 = createRule({
+const RULE_NAME$17 = "no-deprecated-tokens";
+const rule$17 = createRule({
 	create(context) {
 		const deprecatedTokensCache = /* @__PURE__ */ new Map();
 		const sendReport = (property, node, value) => {
@@ -523,12 +523,12 @@ const rule$16 = createRule({
 		schema: [],
 		type: "problem"
 	},
-	name: RULE_NAME$16
+	name: RULE_NAME$17
 });
 //#endregion
 //#region src/rules/no-dynamic-styling.ts
-const RULE_NAME$15 = "no-dynamic-styling";
-const rule$15 = createRule({
+const RULE_NAME$16 = "no-dynamic-styling";
+const rule$16 = createRule({
 	create(context) {
 		function isStaticValue(node) {
 			if (!node) return false;
@@ -599,12 +599,12 @@ const rule$15 = createRule({
 		schema: [],
 		type: "problem"
 	},
-	name: RULE_NAME$15
+	name: RULE_NAME$16
 });
 //#endregion
 //#region src/rules/no-escape-hatch.ts
-const RULE_NAME$14 = "no-escape-hatch";
-const rule$14 = createRule({
+const RULE_NAME$15 = "no-escape-hatch";
+const rule$15 = createRule({
 	create(context) {
 		const removeBrackets = (range) => {
 			const [start, end] = range;
@@ -677,12 +677,12 @@ const rule$14 = createRule({
 		schema: [],
 		type: "problem"
 	},
-	name: RULE_NAME$14
+	name: RULE_NAME$15
 });
 //#endregion
 //#region src/rules/no-hardcoded-color.ts
-const RULE_NAME$13 = "no-hardcoded-color";
-const rule$13 = createRule({
+const RULE_NAME$14 = "no-hardcoded-color";
+const rule$14 = createRule({
 	create(context) {
 		const noOpacity = context.options[0]?.noOpacity;
 		const whitelist = context.options[0]?.whitelist ?? [];
@@ -778,14 +778,14 @@ const rule$13 = createRule({
 		}],
 		type: "problem"
 	},
-	name: RULE_NAME$13
+	name: RULE_NAME$14
 });
 //#endregion
 //#region src/rules/no-important.ts
 const exclamationRegex = /\s*!$/;
 const importantRegex = /\s*!important\s*$/;
-const RULE_NAME$12 = "no-important";
-const rule$12 = createRule({
+const RULE_NAME$13 = "no-important";
+const rule$13 = createRule({
 	create(context) {
 		const removeQuotes = (range) => {
 			const [start, end] = range;
@@ -889,12 +889,12 @@ const rule$12 = createRule({
 		schema: [],
 		type: "problem"
 	},
-	name: RULE_NAME$12
+	name: RULE_NAME$13
 });
 //#endregion
 //#region src/rules/no-invalid-nesting.ts
-const RULE_NAME$11 = "no-invalid-nesting";
-const rule$11 = createRule({
+const RULE_NAME$12 = "no-invalid-nesting";
+const rule$12 = createRule({
 	create(context) {
 		const bambooFunctionCache = /* @__PURE__ */ new WeakMap();
 		const jsxPropertyCache = /* @__PURE__ */ new WeakMap();
@@ -949,12 +949,12 @@ const rule$11 = createRule({
 		schema: [],
 		type: "problem"
 	},
-	name: RULE_NAME$11
+	name: RULE_NAME$12
 });
 //#endregion
 //#region src/rules/no-invalid-token-paths.ts
-const RULE_NAME$10 = "no-invalid-token-paths";
-const rule$10 = createRule({
+const RULE_NAME$11 = "no-invalid-token-paths";
+const rule$11 = createRule({
 	create(context) {
 		const invalidTokensCache = /* @__PURE__ */ new Map();
 		const sendReport = (node, value) => {
@@ -1031,12 +1031,12 @@ const rule$10 = createRule({
 		schema: [],
 		type: "problem"
 	},
-	name: RULE_NAME$10
+	name: RULE_NAME$11
 });
 //#endregion
 //#region src/rules/no-margin-properties.ts
-const RULE_NAME$9 = "no-margin-properties";
-const rule$9 = createRule({
+const RULE_NAME$10 = "no-margin-properties";
+const rule$10 = createRule({
 	create(context) {
 		const whitelist = context.options[0]?.whitelist ?? [];
 		const longhandCache = /* @__PURE__ */ new Map();
@@ -1112,7 +1112,7 @@ const rule$9 = createRule({
 		}],
 		type: "suggestion"
 	},
-	name: RULE_NAME$9
+	name: RULE_NAME$10
 });
 //#endregion
 //#region src/utils/physical-properties.ts
@@ -1156,7 +1156,7 @@ const physicalPropertyValues = { textAlign: {
 } };
 //#endregion
 //#region src/rules/no-physical-properties.ts
-const RULE_NAME$8 = "no-physical-properties";
+const RULE_NAME$9 = "no-physical-properties";
 const MESSAGES = {
 	physical: "Use logical property instead of {{physical}}. Prefer `{{logical}}`.",
 	physicalValue: "Use logical value instead of {{physical}}. Prefer `{{logical}}`.",
@@ -1238,7 +1238,7 @@ const createValueReport = (valueNode, valueText, logical, context) => {
 		}]
 	});
 };
-const rule$8 = createRule({
+const rule$9 = createRule({
 	create(context) {
 		const whitelist = context.options[0]?.whitelist ?? [];
 		const cache = new PropertyCache();
@@ -1294,12 +1294,12 @@ const rule$8 = createRule({
 		}],
 		type: "suggestion"
 	},
-	name: RULE_NAME$8
+	name: RULE_NAME$9
 });
 //#endregion
 //#region src/rules/no-property-renaming.ts
-const RULE_NAME$7 = "no-property-renaming";
-const rule$7 = createRule({
+const RULE_NAME$8 = "no-property-renaming";
+const rule$8 = createRule({
 	create(context) {
 		const bambooPropertyCache = /* @__PURE__ */ new WeakMap();
 		const bambooAttributeCache = /* @__PURE__ */ new WeakMap();
@@ -1363,11 +1363,11 @@ const rule$7 = createRule({
 		schema: [],
 		type: "problem"
 	},
-	name: RULE_NAME$7
+	name: RULE_NAME$8
 });
 //#endregion
 //#region src/rules/no-unlayered-override.ts
-const RULE_NAME$6 = "no-unlayered-override";
+const RULE_NAME$7 = "no-unlayered-override";
 /**
 * The call whose result is a class string in the `utilities` layer — the same layer a
 * consumer's `css()` is in, so neither can win over the other by cascade.
@@ -1392,7 +1392,7 @@ const isOpaque = (node) => {
 	if (isIdentifier(node) && node.name !== "undefined") return true;
 	return false;
 };
-const rule$6 = createRule({
+const rule$7 = createRule({
 	create(context) {
 		if (!isValidFile(context)) return {};
 		const isOwnStyles = (node) => {
@@ -1422,6 +1422,73 @@ const rule$6 = createRule({
 		schema: [],
 		type: "problem"
 	},
+	name: RULE_NAME$7
+});
+//#endregion
+//#region src/rules/require-recipe-class-name.ts
+const RULE_NAME$6 = "require-recipe-class-name";
+const RECIPE_CALLS = new Set(["cva", "sva"]);
+/**
+* A property whose value the build reads as written, so the config it hashes is the config
+* the browser holds.
+*
+* Deliberately narrow. A spread, a computed key, a call — anything the extractor might not
+* resolve — makes the config's *content* uncertain, and the content is what the name is
+* derived from.
+*/
+const isStatic = (node) => {
+	switch (node.type) {
+		case "Literal": return true;
+		case "TemplateLiteral": return node.expressions.length === 0;
+		case "TSAsExpression":
+		case "TSSatisfiesExpression":
+		case "TSNonNullExpression": return isStatic(node.expression);
+		case "ArrayExpression": return node.elements.every((element) => element !== null && isStatic(element));
+		case "ObjectExpression": return node.properties.every((property) => {
+			if (property.type !== "Property" || property.computed) return false;
+			return isStatic(property.value);
+		});
+		default: return false;
+	}
+};
+const rule$6 = createRule({
+	create(context) {
+		if (!isValidFile(context)) return {};
+		const mode = context.options[0]?.mode ?? "always";
+		return { CallExpression(node) {
+			if (!isIdentifier(node.callee) || !RECIPE_CALLS.has(node.callee.name)) return;
+			const config = node.arguments[0];
+			if (!config) return;
+			const unwrapped = config.type === "TSAsExpression" || config.type === "TSSatisfiesExpression" ? config.expression : config;
+			if (unwrapped.type === "ObjectExpression") {
+				if (unwrapped.properties.some((property) => property.type === "Property" && !property.computed && (property.key.type === "Identifier" && property.key.name === "className" || property.key.type === "Literal" && property.key.value === "className") && property.value.type === "Literal" && typeof property.value.value === "string" && property.value.value !== "")) return;
+				if (mode === "dynamic-only" && isStatic(unwrapped)) return;
+			}
+			context.report({
+				messageId: "requireRecipeClassName",
+				node: node.callee
+			});
+		} };
+	},
+	defaultOptions: [{ mode: "always" }],
+	meta: {
+		docs: { description: "Require a `className` on a recipe, so its class names do not depend on what the build could read." },
+		messages: { requireRecipeClassName: [
+			"This recipe has no `className`, so its classes are named by hashing its config.",
+			"The build hashes the config it could read and the browser hashes the one it holds, so anything the build cannot resolve — a spread of a call, a value it cannot evaluate — gives the two different names and the element renders with no styles at all.",
+			"Add `className: 'name'` to fix the name, and get readable classes with it."
+		].join(" ") },
+		schema: [{
+			additionalProperties: false,
+			properties: { mode: {
+				description: "`always` requires a name on every recipe. `dynamic-only` requires one only where the config is not a plain static literal, which is where the failure is possible.",
+				enum: ["always", "dynamic-only"],
+				type: "string"
+			} },
+			type: "object"
+		}],
+		type: "problem"
+	},
 	name: RULE_NAME$6
 });
 //#endregion
@@ -2272,6 +2339,7 @@ const rule = createRule({
 //#endregion
 //#region src/rules/index.ts
 const rules = {
+	[RULE_NAME$20]: rule$20,
 	[RULE_NAME$19]: rule$19,
 	[RULE_NAME$18]: rule$18,
 	[RULE_NAME$17]: rule$17,
@@ -2296,9 +2364,9 @@ const rules = {
 //#endregion
 //#region src/configs/all.ts
 const errorRules = [
+	RULE_NAME$20,
 	RULE_NAME$19,
-	RULE_NAME$18,
-	RULE_NAME$10
+	RULE_NAME$11
 ];
 //#endregion
 //#region src/index.ts
@@ -2327,6 +2395,7 @@ const plugin = {
 				"bamboo/no-invalid-token-paths": "error",
 				"bamboo/no-property-renaming": "warn",
 				"bamboo/no-unlayered-override": "warn",
+				"bamboo/require-recipe-class-name": ["warn", { mode: "dynamic-only" }],
 				"bamboo/no-unsafe-token-fn-usage": "warn"
 			}
 		}

package/dist/index.d.cts

@@ -28,6 +28,9 @@ declare const plugin: {
         'bamboo/no-invalid-token-paths': string;
         'bamboo/no-property-renaming': string;
         'bamboo/no-unlayered-override': string;
+        'bamboo/require-recipe-class-name': (string | {
+          mode: string;
+        })[];
         'bamboo/no-unsafe-token-fn-usage': string;
       };
     };

package/dist/index.d.mts

@@ -28,6 +28,9 @@ declare const plugin: {
         'bamboo/no-invalid-token-paths': string;
         'bamboo/no-property-renaming': string;
         'bamboo/no-unlayered-override': string;
+        'bamboo/require-recipe-class-name': (string | {
+          mode: string;
+        })[];
         'bamboo/no-unsafe-token-fn-usage': string;
       };
     };

package/dist/index.mjs

@@ -8,7 +8,7 @@ import "@typescript-eslint/utils/ts-eslint";
 import { getArbitraryValue, parseFallbackValue } from "@bamboocss/shared";
 //#region package.json
 var name = "@bamboocss/eslint-plugin";
-var version = "1.16.0";
+var version = "1.17.0";
 //#endregion
 //#region src/utils/index.ts
 const createRule = ESLintUtils.RuleCreator((name) => `https://github.com/bamboocss/bamboo/blob/main/packages/eslint-plugin/docs/rules/${name}.md`);
@@ -307,8 +307,8 @@ function isRecipeVariant(node, context) {
 }
 //#endregion
 //#region src/rules/file-not-included.ts
-const RULE_NAME$19 = "file-not-included";
-const rule$19 = createRule({
+const RULE_NAME$20 = "file-not-included";
+const rule$20 = createRule({
 	create(context) {
 		if (isValidFile(context)) return {};
 		let hasReported = false;
@@ -329,11 +329,11 @@ const rule$19 = createRule({
 		schema: [],
 		type: "problem"
 	},
-	name: RULE_NAME$19
+	name: RULE_NAME$20
 });
 //#endregion
 //#region src/rules/no-config-function-in-source.ts
-const RULE_NAME$18 = "no-config-function-in-source";
+const RULE_NAME$19 = "no-config-function-in-source";
 const CONFIG_FUNCTIONS = new Set([
 	"defineConfig",
 	"defineGlobalStyles",
@@ -350,7 +350,7 @@ const CONFIG_FUNCTIONS = new Set([
 	"defineTokens",
 	"defineUtility"
 ]);
-const rule$18 = createRule({
+const rule$19 = createRule({
 	create(context) {
 		if (!hasPkgImport(context)) return {};
 		if (!isValidFile(context)) return {};
@@ -390,12 +390,12 @@ const rule$18 = createRule({
 		schema: [],
 		type: "problem"
 	},
-	name: RULE_NAME$18
+	name: RULE_NAME$19
 });
 //#endregion
 //#region src/rules/no-debug.ts
-const RULE_NAME$17 = "no-debug";
-const rule$17 = createRule({
+const RULE_NAME$18 = "no-debug";
+const rule$18 = createRule({
 	create(context) {
 		const processedNodes = /* @__PURE__ */ new WeakSet();
 		const checkObjectForDebug = (object) => {
@@ -464,12 +464,12 @@ const rule$17 = createRule({
 		schema: [],
 		type: "problem"
 	},
-	name: RULE_NAME$17
+	name: RULE_NAME$18
 });
 //#endregion
 //#region src/rules/no-deprecated-tokens.ts
-const RULE_NAME$16 = "no-deprecated-tokens";
-const rule$16 = createRule({
+const RULE_NAME$17 = "no-deprecated-tokens";
+const rule$17 = createRule({
 	create(context) {
 		const deprecatedTokensCache = /* @__PURE__ */ new Map();
 		const sendReport = (property, node, value) => {
@@ -523,12 +523,12 @@ const rule$16 = createRule({
 		schema: [],
 		type: "problem"
 	},
-	name: RULE_NAME$16
+	name: RULE_NAME$17
 });
 //#endregion
 //#region src/rules/no-dynamic-styling.ts
-const RULE_NAME$15 = "no-dynamic-styling";
-const rule$15 = createRule({
+const RULE_NAME$16 = "no-dynamic-styling";
+const rule$16 = createRule({
 	create(context) {
 		function isStaticValue(node) {
 			if (!node) return false;
@@ -599,12 +599,12 @@ const rule$15 = createRule({
 		schema: [],
 		type: "problem"
 	},
-	name: RULE_NAME$15
+	name: RULE_NAME$16
 });
 //#endregion
 //#region src/rules/no-escape-hatch.ts
-const RULE_NAME$14 = "no-escape-hatch";
-const rule$14 = createRule({
+const RULE_NAME$15 = "no-escape-hatch";
+const rule$15 = createRule({
 	create(context) {
 		const removeBrackets = (range) => {
 			const [start, end] = range;
@@ -677,12 +677,12 @@ const rule$14 = createRule({
 		schema: [],
 		type: "problem"
 	},
-	name: RULE_NAME$14
+	name: RULE_NAME$15
 });
 //#endregion
 //#region src/rules/no-hardcoded-color.ts
-const RULE_NAME$13 = "no-hardcoded-color";
-const rule$13 = createRule({
+const RULE_NAME$14 = "no-hardcoded-color";
+const rule$14 = createRule({
 	create(context) {
 		const noOpacity = context.options[0]?.noOpacity;
 		const whitelist = context.options[0]?.whitelist ?? [];
@@ -778,14 +778,14 @@ const rule$13 = createRule({
 		}],
 		type: "problem"
 	},
-	name: RULE_NAME$13
+	name: RULE_NAME$14
 });
 //#endregion
 //#region src/rules/no-important.ts
 const exclamationRegex = /\s*!$/;
 const importantRegex = /\s*!important\s*$/;
-const RULE_NAME$12 = "no-important";
-const rule$12 = createRule({
+const RULE_NAME$13 = "no-important";
+const rule$13 = createRule({
 	create(context) {
 		const removeQuotes = (range) => {
 			const [start, end] = range;
@@ -889,12 +889,12 @@ const rule$12 = createRule({
 		schema: [],
 		type: "problem"
 	},
-	name: RULE_NAME$12
+	name: RULE_NAME$13
 });
 //#endregion
 //#region src/rules/no-invalid-nesting.ts
-const RULE_NAME$11 = "no-invalid-nesting";
-const rule$11 = createRule({
+const RULE_NAME$12 = "no-invalid-nesting";
+const rule$12 = createRule({
 	create(context) {
 		const bambooFunctionCache = /* @__PURE__ */ new WeakMap();
 		const jsxPropertyCache = /* @__PURE__ */ new WeakMap();
@@ -949,12 +949,12 @@ const rule$11 = createRule({
 		schema: [],
 		type: "problem"
 	},
-	name: RULE_NAME$11
+	name: RULE_NAME$12
 });
 //#endregion
 //#region src/rules/no-invalid-token-paths.ts
-const RULE_NAME$10 = "no-invalid-token-paths";
-const rule$10 = createRule({
+const RULE_NAME$11 = "no-invalid-token-paths";
+const rule$11 = createRule({
 	create(context) {
 		const invalidTokensCache = /* @__PURE__ */ new Map();
 		const sendReport = (node, value) => {
@@ -1031,12 +1031,12 @@ const rule$10 = createRule({
 		schema: [],
 		type: "problem"
 	},
-	name: RULE_NAME$10
+	name: RULE_NAME$11
 });
 //#endregion
 //#region src/rules/no-margin-properties.ts
-const RULE_NAME$9 = "no-margin-properties";
-const rule$9 = createRule({
+const RULE_NAME$10 = "no-margin-properties";
+const rule$10 = createRule({
 	create(context) {
 		const whitelist = context.options[0]?.whitelist ?? [];
 		const longhandCache = /* @__PURE__ */ new Map();
@@ -1112,7 +1112,7 @@ const rule$9 = createRule({
 		}],
 		type: "suggestion"
 	},
-	name: RULE_NAME$9
+	name: RULE_NAME$10
 });
 //#endregion
 //#region src/utils/physical-properties.ts
@@ -1156,7 +1156,7 @@ const physicalPropertyValues = { textAlign: {
 } };
 //#endregion
 //#region src/rules/no-physical-properties.ts
-const RULE_NAME$8 = "no-physical-properties";
+const RULE_NAME$9 = "no-physical-properties";
 const MESSAGES = {
 	physical: "Use logical property instead of {{physical}}. Prefer `{{logical}}`.",
 	physicalValue: "Use logical value instead of {{physical}}. Prefer `{{logical}}`.",
@@ -1238,7 +1238,7 @@ const createValueReport = (valueNode, valueText, logical, context) => {
 		}]
 	});
 };
-const rule$8 = createRule({
+const rule$9 = createRule({
 	create(context) {
 		const whitelist = context.options[0]?.whitelist ?? [];
 		const cache = new PropertyCache();
@@ -1294,12 +1294,12 @@ const rule$8 = createRule({
 		}],
 		type: "suggestion"
 	},
-	name: RULE_NAME$8
+	name: RULE_NAME$9
 });
 //#endregion
 //#region src/rules/no-property-renaming.ts
-const RULE_NAME$7 = "no-property-renaming";
-const rule$7 = createRule({
+const RULE_NAME$8 = "no-property-renaming";
+const rule$8 = createRule({
 	create(context) {
 		const bambooPropertyCache = /* @__PURE__ */ new WeakMap();
 		const bambooAttributeCache = /* @__PURE__ */ new WeakMap();
@@ -1363,11 +1363,11 @@ const rule$7 = createRule({
 		schema: [],
 		type: "problem"
 	},
-	name: RULE_NAME$7
+	name: RULE_NAME$8
 });
 //#endregion
 //#region src/rules/no-unlayered-override.ts
-const RULE_NAME$6 = "no-unlayered-override";
+const RULE_NAME$7 = "no-unlayered-override";
 /**
 * The call whose result is a class string in the `utilities` layer — the same layer a
 * consumer's `css()` is in, so neither can win over the other by cascade.
@@ -1392,7 +1392,7 @@ const isOpaque = (node) => {
 	if (isIdentifier(node) && node.name !== "undefined") return true;
 	return false;
 };
-const rule$6 = createRule({
+const rule$7 = createRule({
 	create(context) {
 		if (!isValidFile(context)) return {};
 		const isOwnStyles = (node) => {
@@ -1422,6 +1422,73 @@ const rule$6 = createRule({
 		schema: [],
 		type: "problem"
 	},
+	name: RULE_NAME$7
+});
+//#endregion
+//#region src/rules/require-recipe-class-name.ts
+const RULE_NAME$6 = "require-recipe-class-name";
+const RECIPE_CALLS = new Set(["cva", "sva"]);
+/**
+* A property whose value the build reads as written, so the config it hashes is the config
+* the browser holds.
+*
+* Deliberately narrow. A spread, a computed key, a call — anything the extractor might not
+* resolve — makes the config's *content* uncertain, and the content is what the name is
+* derived from.
+*/
+const isStatic = (node) => {
+	switch (node.type) {
+		case "Literal": return true;
+		case "TemplateLiteral": return node.expressions.length === 0;
+		case "TSAsExpression":
+		case "TSSatisfiesExpression":
+		case "TSNonNullExpression": return isStatic(node.expression);
+		case "ArrayExpression": return node.elements.every((element) => element !== null && isStatic(element));
+		case "ObjectExpression": return node.properties.every((property) => {
+			if (property.type !== "Property" || property.computed) return false;
+			return isStatic(property.value);
+		});
+		default: return false;
+	}
+};
+const rule$6 = createRule({
+	create(context) {
+		if (!isValidFile(context)) return {};
+		const mode = context.options[0]?.mode ?? "always";
+		return { CallExpression(node) {
+			if (!isIdentifier(node.callee) || !RECIPE_CALLS.has(node.callee.name)) return;
+			const config = node.arguments[0];
+			if (!config) return;
+			const unwrapped = config.type === "TSAsExpression" || config.type === "TSSatisfiesExpression" ? config.expression : config;
+			if (unwrapped.type === "ObjectExpression") {
+				if (unwrapped.properties.some((property) => property.type === "Property" && !property.computed && (property.key.type === "Identifier" && property.key.name === "className" || property.key.type === "Literal" && property.key.value === "className") && property.value.type === "Literal" && typeof property.value.value === "string" && property.value.value !== "")) return;
+				if (mode === "dynamic-only" && isStatic(unwrapped)) return;
+			}
+			context.report({
+				messageId: "requireRecipeClassName",
+				node: node.callee
+			});
+		} };
+	},
+	defaultOptions: [{ mode: "always" }],
+	meta: {
+		docs: { description: "Require a `className` on a recipe, so its class names do not depend on what the build could read." },
+		messages: { requireRecipeClassName: [
+			"This recipe has no `className`, so its classes are named by hashing its config.",
+			"The build hashes the config it could read and the browser hashes the one it holds, so anything the build cannot resolve — a spread of a call, a value it cannot evaluate — gives the two different names and the element renders with no styles at all.",
+			"Add `className: 'name'` to fix the name, and get readable classes with it."
+		].join(" ") },
+		schema: [{
+			additionalProperties: false,
+			properties: { mode: {
+				description: "`always` requires a name on every recipe. `dynamic-only` requires one only where the config is not a plain static literal, which is where the failure is possible.",
+				enum: ["always", "dynamic-only"],
+				type: "string"
+			} },
+			type: "object"
+		}],
+		type: "problem"
+	},
 	name: RULE_NAME$6
 });
 //#endregion
@@ -2272,6 +2339,7 @@ const rule = createRule({
 //#endregion
 //#region src/rules/index.ts
 const rules = {
+	[RULE_NAME$20]: rule$20,
 	[RULE_NAME$19]: rule$19,
 	[RULE_NAME$18]: rule$18,
 	[RULE_NAME$17]: rule$17,
@@ -2296,9 +2364,9 @@ const rules = {
 //#endregion
 //#region src/configs/all.ts
 const errorRules = [
+	RULE_NAME$20,
 	RULE_NAME$19,
-	RULE_NAME$18,
-	RULE_NAME$10
+	RULE_NAME$11
 ];
 //#endregion
 //#region src/index.ts
@@ -2327,6 +2395,7 @@ const plugin = {
 				"bamboo/no-invalid-token-paths": "error",
 				"bamboo/no-property-renaming": "warn",
 				"bamboo/no-unlayered-override": "warn",
+				"bamboo/require-recipe-class-name": ["warn", { mode: "dynamic-only" }],
 				"bamboo/no-unsafe-token-fn-usage": "warn"
 			}
 		}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bamboocss/eslint-plugin",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "description": "ESLint plugin for Bamboo CSS",
   "homepage": "https://bamboocss.com",
   "license": "MIT",
@@ -36,9 +36,9 @@
     "@typescript-eslint/utils": "^8.21.0",
     "micromatch": "^4.0.8",
     "synckit": "^0.9.0",
-    "@bamboocss/config": "1.16.0",
-    "@bamboocss/generator": "1.16.0",
-    "@bamboocss/shared": "1.16.0"
+    "@bamboocss/config": "1.17.0",
+    "@bamboocss/generator": "1.17.0",
+    "@bamboocss/shared": "1.17.0"
   },
   "devDependencies": {
     "@types/micromatch": "^4.0.10",
@@ -46,10 +46,10 @@
     "eslint": "^9.35.0",
     "multiline-ts": "^4.0.1",
     "typescript": "^5.7.2",
-    "@bamboocss/dev": "1.16.0",
-    "@bamboocss/preset-bamboo": "1.16.0",
-    "@bamboocss/preset-base": "1.16.0",
-    "@bamboocss/types": "1.16.0"
+    "@bamboocss/dev": "1.17.0",
+    "@bamboocss/preset-bamboo": "1.17.0",
+    "@bamboocss/preset-base": "1.17.0",
+    "@bamboocss/types": "1.17.0"
   },
   "peerDependencies": {
     "eslint": "*"