@bamboocss/generator 1.41.0 → 1.42.0

package/dist/index.cjs

@@ -2338,64 +2338,17 @@ const generateTypesEntry = (ctx) => {
 //#region src/artifacts/types/prop-types.ts
 function generatePropTypes(ctx) {
 	const { utility } = ctx;
-	const result = [
-		outdent.outdent`
+	const result = [outdent.outdent`
     ${ctx.file.importType("ConditionalValue", "./conditions")}
     ${ctx.file.importType("CssProperties", "./system-types")}
     ${ctx.file.importType("Tokens", "../tokens/index")}
-    `,
-		outdent.outdent`
-    /**
-     * A property's own keywords, without the open \`string\` csstype ends every property with.
-     *
-     * That trailing \`(string & {})\` is what makes \`color: 'mutedd'\` type-check: it is a
-     * string, so it is a colour. Removing it leaves what the property actually enumerates —
-     * \`transparent\`, \`currentColor\`, every named colour — which is what
-     * \`strictTokens: 'unknown-tokens'\` keeps.
-     *
-     * \`string extends T\` is the test, so the wide member goes and the literal ones stay. The
-     * second branch is for the *boxed* \`String\`, which \`Properties<String | Number>\` puts on
-     * every length-taking property and which is not assignable to \`string\` — so it survives the
-     * first test and admits every string on its own. \`Number\` is deliberately kept: a number
-     * cannot be a misspelled token path.
-     */
-    export type KnownKeywords<T> =
-      T extends string ? (string extends T ? never : T)
-      : T extends String ? never
-      : T
-    `,
-		"export interface UtilityValues {"
-	];
+    `, "export interface UtilityValues {"];
 	const types = utility.getTypes();
 	for (const [prop, values] of types.entries()) result.push(`\t${prop}: ${values.join(" | ")};`);
 	result.push("}", "\n");
 	return outdent.outdent`
   ${result.join("\n")}
 
-  /**
-   * Values whose *shape* says they are CSS rather than a token path.
-   *
-   * A token path is a bare identifier, possibly dotted. Anything that starts with a digit, a
-   * dot-digit, \`#\` or \`-\`, or that contains a space, a comma or a call, cannot be one — so
-   * these stay allowed under \`strictTokens: 'unknown-tokens'\` while \`'mutedd'\` does not.
-   *
-   * Constant, and not parameterised by the token union: a template literal distributes over a
-   * union in any placeholder, so a shape built from \`\${Token}\` would multiply the property's
-   * union by the size of the palette. These add seven members whatever the theme contains — see
-   * \`WithModifier\` below for what the other arrangement costs.
-   *
-   * The ambiguity this cannot resolve is a typo that is also a plausible value: \`'2xll'\` starts
-   * with a digit exactly as \`'2rem'\` does, and passes.
-   */
-  export type CssValueShape =
-    | \`\${number}\${string}\`
-    | \`.\${number}\${string}\`
-    | \`#\${string}\`
-    | \`-\${string}\`
-    | \`\${string} \${string}\`
-    | \`\${string},\${string}\`
-    | \`\${string}(\${string})\`
-
   type ImportantMark = "!" | "!important"
   type WhitespaceImportant = \` \${ImportantMark}\`
   type Important = ImportantMark | WhitespaceImportant
@@ -2426,10 +2379,10 @@ function generatePropTypes(ctx) {
   type Modifier = "/" | "!" | " !"
   /**
    * \`Extract\`, not a \`[T] extends [string]\` test, which was the same thing until a utility
-   * carried keywords beside its tokens: \`KnownKeywords\` keeps \`Number\` deliberately, and that
-   * one non-string member turned every modifier form off for the whole property. It rejected
-   * \`roundedBottom: 'lg!'\` while \`rounded: 'lg!'\` passed, purely because the two utilities are
-   * declared differently — both emit \`var(--radii-lg) !important\`.
+   * declared a non-string member. One of those turned every modifier form off for the whole
+   * property: \`roundedBottom: 'lg!'\` was rejected while \`rounded: 'lg!'\` passed, decided by
+   * nothing but how the two utilities happen to be declared — both emit
+   * \`var(--radii-lg) !important\`.
    *
    * Filtering costs nothing the test did not: the same string members distribute either way,
    * and \`Extract\` of no strings is \`never\`, exactly what the false branch returned.
@@ -2492,7 +2445,7 @@ function generateStyleProps(ctx) {
 	const cssVars = (0, _bamboocss_shared.unionType)(ctx.globalVars.vars);
 	return outdent.default`
     ${ctx.file.importType("ConditionalValue", "./conditions")}
-    ${ctx.file.importType("CssValueShape, KnownKeywords, OnlyKnown, UtilityValues, WithEscapeHatch", "./prop-type")}
+    ${ctx.file.importType("OnlyKnown, UtilityValues, WithEscapeHatch", "./prop-type")}
     ${ctx.file.importType("CssProperties", "./system-types")}
     ${ctx.file.importType("Token", "../tokens/index")}
 
@@ -2511,93 +2464,38 @@ function generateStyleProps(ctx) {
 		const prop = ctx.utility.shorthands.get(key) ?? key;
 		const union = [];
 		const cssFallback = _bamboocss_is_valid_prop.allCssProperties.includes(prop) ? `CssProperties["${prop}"]` : "";
-		const knownFallback = ctx.config.strictTokens === "unknown-tokens" && !authorIdentProperties.has(prop) && cssFallback ? `KnownKeywords<${cssFallback}>` : "";
-		const gradedFallback = ctx.config.strictTokens === true ? "" : knownFallback || cssFallback;
 		/**
-		* The token side, held out of the union under `'unknown-tokens'` so `restrict` can
-		* put it back inside `WithEscapeHatch`.
+		* A utility's own values *extend* what the property accepts; they never replace it.
+		*
+		* Replacing is what `strictTokens` used to do, and it is why `transitionProperty` —
+		* whose utility declares the sugar `common`, `colors`, `size`, `position` and
+		* `background` — rejected `transitionProperty: 'color'`, a real css property name,
+		* and suggested `'colors'`, which emits seven declarations instead of one. A utility
+		* adds vocabulary to a property; it does not take the property's own away.
 		*
-		* `WithModifier` is `[T] extends [string] ? … : never`, so one non-string member of
-		* `T` — and csstype supplies `undefined` and a boxed `Number` — turns `'blue.300/40'`
-		* and `'blue.300!'` off for the whole property. Wrapping the tokens alone is what
-		* keeps those working, and listing them in both places instead would repeat one of
-		* the largest members a property has.
+		* So nothing here narrows any more. Both questions the narrowing answered are the
+		* build's now, asked of the css grammar rather than of a union: whether a name
+		* resolves (`unresolvedToken`) and whether a raw value is allowed (`strictValues`).
 		*/
-		let heldOutTokens = "";
-		const separateTokens = ctx.config.strictTokens === "unknown-tokens";
 		if (propTypes.has(prop)) {
-			const tokenValue = `UtilityValues["${prop}"]`;
-			if (separateTokens) heldOutTokens = tokenValue;
-			const own = separateTokens ? "" : tokenValue;
-			if (strictPropertyList.has(key)) union.push([
-				own,
-				"CssVars",
-				knownFallback
-			].filter(Boolean).join(" | "));
+			const own = `UtilityValues["${prop}"]`;
+			if (strictPropertyList.has(key)) union.push([own, "CssVars"].filter(Boolean).join(" | "));
 			else union.push([
 				own,
 				"CssVars",
-				gradedFallback
+				cssFallback
 			].filter(Boolean).join(" | "));
-		} else union.push([strictPropertyList.has(key) ? "CssVars" : "", knownFallback || cssFallback].filter(Boolean).join(" | "));
+		} else union.push([strictPropertyList.has(key) ? "CssVars" : "", cssFallback].filter(Boolean).join(" | "));
 		const filtered = union.filter(Boolean);
 		if (!filtered.length) filtered.push("string | number");
 		let comment = comments?.[prop] || "";
 		if (ctx.utility.isDeprecated(prop)) comment = comment ? comment.replace("@see", "@deprecated\n@see") : "/** @deprecated */";
-		const line = `${key}?: ${restrict(prop, filtered.filter(Boolean).join(" | "), ctx.config, heldOutTokens)}`;
+		const line = `${key}?: ${restrict(prop, filtered.filter(Boolean).join(" | "), ctx.config)}`;
 		return " " + [comment, line].filter(Boolean).join("\n");
 	}).join("\n")}
     }
     `;
 }
-/**
-* Properties whose values are identifiers the author invents, not values anything enumerates.
-*
-* `strictTokens: 'unknown-tokens'` rejects a bare identifier that names no token and no keyword,
-* on the reasoning that nothing else is shaped like one. That reasoning stops at a property
-* whose values *are* bare identifiers by design: a `@keyframes` name written in CSS rather than
-* in `theme.keyframes`, a grid area, a counter, a container, a view-transition name, a font
-* family, a property name in `transitionProperty`. csstype types all of these as open strings
-* for the same reason, so there is nothing to check against and everything to reject wrongly.
-*
-* Left alone rather than narrowed, so they behave under this setting exactly as they do under
-* the default. The cost is that a typo in one of them is not caught — which is what
-* `strictTokens: true` is for.
-*
-* `content` is here because its values are quoted strings, and `''""''` is neither a keyword nor
-* a shape this can recognise.
-*/
-const authorIdentProperties = new Set([
-	"anchorName",
-	"anchorScope",
-	"animationName",
-	"animationTimeline",
-	"containerName",
-	"content",
-	"counterIncrement",
-	"counterReset",
-	"counterSet",
-	"fontFamily",
-	"fontPalette",
-	"gridArea",
-	"gridColumn",
-	"gridColumnEnd",
-	"gridColumnStart",
-	"gridRow",
-	"gridRowEnd",
-	"gridRowStart",
-	"gridTemplateAreas",
-	"listStyleType",
-	"page",
-	"positionAnchor",
-	"positionTryFallbacks",
-	"scrollTimelineName",
-	"timelineScope",
-	"transitionProperty",
-	"viewTimelineName",
-	"viewTransitionName",
-	"willChange"
-]);
 const strictPropertyList = new Set([
 	"alignContent",
 	"alignItems",
@@ -2662,24 +2560,8 @@ const strictPropertyList = new Set([
 	"wordBreak",
 	"writingMode"
 ]);
-const restrict = (key, value, config, heldOutTokens = "") => {
-	if (config.strictPropertyValues && strictPropertyList.has(key)) return `ConditionalValue<WithEscapeHatch<OnlyKnown<"${key}", ${[heldOutTokens, value].filter(Boolean).join(" | ")}>>>`;
-	/**
-	* The escape hatch wraps the *tokens*, not the whole value.
-	*
-	* `WithModifier` is `[T] extends [string] ? … : never`, so one non-string member of `T`
-	* turns the modifier forms off for the property entirely — and under this setting `T`
-	* carries csstype's keywords, which include `undefined` and boxed `Number`. Wrapping the
-	* whole union that way silently rejected `color: 'blue.300/40'` and `'blue.300!'`, which
-	* decorate a token and have nothing to do with raw values.
-	*
-	* `CssValueShape` is what keeps raw values writable without an escape hatch: the shapes a
-	* token path cannot have — a leading digit, `#` or `-`, or a space, comma or call anywhere.
-	* A bare identifier that names no token and no keyword matches none of them, which is the
-	* mistake this setting exists to catch.
-	*/
-	if (config.strictTokens === "unknown-tokens") return `ConditionalValue<WithEscapeHatch<${heldOutTokens || "never"}> | ${value} | CssValueShape>`;
-	if (config.strictTokens) return `ConditionalValue<WithEscapeHatch<${value}>>`;
+const restrict = (key, value, config) => {
+	if (config.strictPropertyValues && strictPropertyList.has(key)) return `ConditionalValue<WithEscapeHatch<OnlyKnown<"${key}", ${value}>>>`;
 	return `ConditionalValue<${value} | AnyString>`;
 };
 //#endregion
@@ -4230,6 +4112,7 @@ var Generator = class extends _bamboocss_core.Context {
 			content: css
 		}) ?? css;
 		this.assertNoUnresolvedTokens();
+		this.reportRawValues();
 		return css;
 	};
 	/**
@@ -4276,6 +4159,44 @@ var Generator = class extends _bamboocss_core.Context {
 	* exists: those all run during extraction, before anything has been decoded. Every path
 	* that emits css comes through `getCss`.
 	*/
+	/**
+	* Report every raw CSS value in the source, under `strictValues`.
+	*
+	* The policy is "everything goes through the theme", and the brackets are what make reaching
+	* outside it visible: `fontSize: '[14px]'` says so in the source, where `fontSize: '14px'`
+	* reads exactly like using the scale.
+	*
+	* Read off `decoder.atomic` — the styles the *source* produced — so a preset's own reset and
+	* a config recipe are not held to a project's policy about its own code. That is the whole
+	* reason this is a separate pass rather than a branch in `transform`, which sees both.
+	*
+	* A keyword is not a raw value; see `isRawValue` for why that distinction needs the grammar
+	* and is what the type-level version of this setting could never draw.
+	*/
+	reportRawValues = () => {
+		if (!this.config.strictValues) return;
+		const found = /* @__PURE__ */ new Map();
+		for (const atom of this.decoder.atomic) {
+			const { prop, value } = atom.entry;
+			if (typeof prop !== "string" || typeof value !== "string" && typeof value !== "number") continue;
+			const written = String(value);
+			if (!this.utility.isRawValue(prop, written)) continue;
+			const key = this.utility.resolveShorthand(prop);
+			found.set(`${key}:${written}`, {
+				prop: key,
+				value: written
+			});
+		}
+		if (!found.size) return;
+		const detail = (0, _bamboocss_shared.truncateList)(Array.from(found.values(), ({ prop, value }) => `- \`${prop}: ${value}\` — write \`[${value}]\` to mean it.`), {
+			limit: 25,
+			unit: "value",
+			separator: "\n"
+		});
+		const message = `${found.size} style value(s) are raw css rather than tokens:\n\n${detail}\n\n\`strictValues\` asks every value to come from the theme, so reaching outside it is visible in the source. Write \`[value]\` to mean one literally, or add it to your tokens.`;
+		if (this.config.validation === "error") throw new _bamboocss_shared.BambooError("STRICT_VALUES", message);
+		_bamboocss_logger.logger.warn("strict-values", message);
+	};
 	assertNoUnresolvedTokens = () => {
 		if (this.config.unresolvedToken !== "error") return;
 		const found = new Map(this.utility.unresolvedTokens);
@@ -4285,16 +4206,10 @@ var Generator = class extends _bamboocss_core.Context {
 			if (!this.utility.isUnresolvedTokenValue(prop, value)) continue;
 			const key = this.utility.resolveShorthand(prop);
 			const bare = this.utility.bareTokenPath(key, value);
-			found.set(`${key}:${bare}`, {
-				prop: key,
-				value: bare,
-				category: this.utility.getTokenCategory(key)
-			});
+			found.set(`${key}:${bare}`, this.utility.unresolvedTokenRef(key, bare));
 		}
 		if (!found.size) return;
-		const detail = (0, _bamboocss_shared.truncateList)(Array.from(found.values(), ({ prop, value, category }) => {
-			return `- \`${prop}: ${value}\`.${category ? ` Check the path against your \`${category}\` tokens.` : ""}`;
-		}), {
+		const detail = (0, _bamboocss_shared.truncateList)(Array.from(found.values(), (ref) => `- ${this.utility.explainUnresolvedToken(ref)}`), {
 			limit: 25,
 			unit: "value",
 			separator: "\n"

package/dist/index.d.cts

@@ -176,6 +176,21 @@ declare class Generator extends Context {
    * exists: those all run during extraction, before anything has been decoded. Every path
    * that emits css comes through `getCss`.
    */
+  /**
+   * Report every raw CSS value in the source, under `strictValues`.
+   *
+   * The policy is "everything goes through the theme", and the brackets are what make reaching
+   * outside it visible: `fontSize: '[14px]'` says so in the source, where `fontSize: '14px'`
+   * reads exactly like using the scale.
+   *
+   * Read off `decoder.atomic` — the styles the *source* produced — so a preset's own reset and
+   * a config recipe are not held to a project's policy about its own code. That is the whole
+   * reason this is a separate pass rather than a branch in `transform`, which sees both.
+   *
+   * A keyword is not a raw value; see `isRawValue` for why that distinction needs the grammar
+   * and is what the type-level version of this setting could never draw.
+   */
+  reportRawValues: () => void;
   assertNoUnresolvedTokens: () => void;
   /**
    * Get CSS for a specific layer from the stylesheet

package/dist/index.d.mts

@@ -176,6 +176,21 @@ declare class Generator extends Context {
    * exists: those all run during extraction, before anything has been decoded. Every path
    * that emits css comes through `getCss`.
    */
+  /**
+   * Report every raw CSS value in the source, under `strictValues`.
+   *
+   * The policy is "everything goes through the theme", and the brackets are what make reaching
+   * outside it visible: `fontSize: '[14px]'` says so in the source, where `fontSize: '14px'`
+   * reads exactly like using the scale.
+   *
+   * Read off `decoder.atomic` — the styles the *source* produced — so a preset's own reset and
+   * a config recipe are not held to a project's policy about its own code. That is the whole
+   * reason this is a separate pass rather than a branch in `transform`, which sees both.
+   *
+   * A keyword is not a raw value; see `isRawValue` for why that distinction needs the grammar
+   * and is what the type-level version of this setting could never draw.
+   */
+  reportRawValues: () => void;
   assertNoUnresolvedTokens: () => void;
   /**
    * Get CSS for a specific layer from the stylesheet

package/dist/index.mjs

@@ -2312,64 +2312,17 @@ const generateTypesEntry = (ctx) => {
 //#region src/artifacts/types/prop-types.ts
 function generatePropTypes(ctx) {
 	const { utility } = ctx;
-	const result = [
-		outdent`
+	const result = [outdent`
     ${ctx.file.importType("ConditionalValue", "./conditions")}
     ${ctx.file.importType("CssProperties", "./system-types")}
     ${ctx.file.importType("Tokens", "../tokens/index")}
-    `,
-		outdent`
-    /**
-     * A property's own keywords, without the open \`string\` csstype ends every property with.
-     *
-     * That trailing \`(string & {})\` is what makes \`color: 'mutedd'\` type-check: it is a
-     * string, so it is a colour. Removing it leaves what the property actually enumerates —
-     * \`transparent\`, \`currentColor\`, every named colour — which is what
-     * \`strictTokens: 'unknown-tokens'\` keeps.
-     *
-     * \`string extends T\` is the test, so the wide member goes and the literal ones stay. The
-     * second branch is for the *boxed* \`String\`, which \`Properties<String | Number>\` puts on
-     * every length-taking property and which is not assignable to \`string\` — so it survives the
-     * first test and admits every string on its own. \`Number\` is deliberately kept: a number
-     * cannot be a misspelled token path.
-     */
-    export type KnownKeywords<T> =
-      T extends string ? (string extends T ? never : T)
-      : T extends String ? never
-      : T
-    `,
-		"export interface UtilityValues {"
-	];
+    `, "export interface UtilityValues {"];
 	const types = utility.getTypes();
 	for (const [prop, values] of types.entries()) result.push(`\t${prop}: ${values.join(" | ")};`);
 	result.push("}", "\n");
 	return outdent`
   ${result.join("\n")}
 
-  /**
-   * Values whose *shape* says they are CSS rather than a token path.
-   *
-   * A token path is a bare identifier, possibly dotted. Anything that starts with a digit, a
-   * dot-digit, \`#\` or \`-\`, or that contains a space, a comma or a call, cannot be one — so
-   * these stay allowed under \`strictTokens: 'unknown-tokens'\` while \`'mutedd'\` does not.
-   *
-   * Constant, and not parameterised by the token union: a template literal distributes over a
-   * union in any placeholder, so a shape built from \`\${Token}\` would multiply the property's
-   * union by the size of the palette. These add seven members whatever the theme contains — see
-   * \`WithModifier\` below for what the other arrangement costs.
-   *
-   * The ambiguity this cannot resolve is a typo that is also a plausible value: \`'2xll'\` starts
-   * with a digit exactly as \`'2rem'\` does, and passes.
-   */
-  export type CssValueShape =
-    | \`\${number}\${string}\`
-    | \`.\${number}\${string}\`
-    | \`#\${string}\`
-    | \`-\${string}\`
-    | \`\${string} \${string}\`
-    | \`\${string},\${string}\`
-    | \`\${string}(\${string})\`
-
   type ImportantMark = "!" | "!important"
   type WhitespaceImportant = \` \${ImportantMark}\`
   type Important = ImportantMark | WhitespaceImportant
@@ -2400,10 +2353,10 @@ function generatePropTypes(ctx) {
   type Modifier = "/" | "!" | " !"
   /**
    * \`Extract\`, not a \`[T] extends [string]\` test, which was the same thing until a utility
-   * carried keywords beside its tokens: \`KnownKeywords\` keeps \`Number\` deliberately, and that
-   * one non-string member turned every modifier form off for the whole property. It rejected
-   * \`roundedBottom: 'lg!'\` while \`rounded: 'lg!'\` passed, purely because the two utilities are
-   * declared differently — both emit \`var(--radii-lg) !important\`.
+   * declared a non-string member. One of those turned every modifier form off for the whole
+   * property: \`roundedBottom: 'lg!'\` was rejected while \`rounded: 'lg!'\` passed, decided by
+   * nothing but how the two utilities happen to be declared — both emit
+   * \`var(--radii-lg) !important\`.
    *
    * Filtering costs nothing the test did not: the same string members distribute either way,
    * and \`Extract\` of no strings is \`never\`, exactly what the false branch returned.
@@ -2466,7 +2419,7 @@ function generateStyleProps(ctx) {
 	const cssVars = unionType(ctx.globalVars.vars);
 	return outdent$1`
     ${ctx.file.importType("ConditionalValue", "./conditions")}
-    ${ctx.file.importType("CssValueShape, KnownKeywords, OnlyKnown, UtilityValues, WithEscapeHatch", "./prop-type")}
+    ${ctx.file.importType("OnlyKnown, UtilityValues, WithEscapeHatch", "./prop-type")}
     ${ctx.file.importType("CssProperties", "./system-types")}
     ${ctx.file.importType("Token", "../tokens/index")}
 
@@ -2485,93 +2438,38 @@ function generateStyleProps(ctx) {
 		const prop = ctx.utility.shorthands.get(key) ?? key;
 		const union = [];
 		const cssFallback = allCssProperties.includes(prop) ? `CssProperties["${prop}"]` : "";
-		const knownFallback = ctx.config.strictTokens === "unknown-tokens" && !authorIdentProperties.has(prop) && cssFallback ? `KnownKeywords<${cssFallback}>` : "";
-		const gradedFallback = ctx.config.strictTokens === true ? "" : knownFallback || cssFallback;
 		/**
-		* The token side, held out of the union under `'unknown-tokens'` so `restrict` can
-		* put it back inside `WithEscapeHatch`.
+		* A utility's own values *extend* what the property accepts; they never replace it.
+		*
+		* Replacing is what `strictTokens` used to do, and it is why `transitionProperty` —
+		* whose utility declares the sugar `common`, `colors`, `size`, `position` and
+		* `background` — rejected `transitionProperty: 'color'`, a real css property name,
+		* and suggested `'colors'`, which emits seven declarations instead of one. A utility
+		* adds vocabulary to a property; it does not take the property's own away.
 		*
-		* `WithModifier` is `[T] extends [string] ? … : never`, so one non-string member of
-		* `T` — and csstype supplies `undefined` and a boxed `Number` — turns `'blue.300/40'`
-		* and `'blue.300!'` off for the whole property. Wrapping the tokens alone is what
-		* keeps those working, and listing them in both places instead would repeat one of
-		* the largest members a property has.
+		* So nothing here narrows any more. Both questions the narrowing answered are the
+		* build's now, asked of the css grammar rather than of a union: whether a name
+		* resolves (`unresolvedToken`) and whether a raw value is allowed (`strictValues`).
 		*/
-		let heldOutTokens = "";
-		const separateTokens = ctx.config.strictTokens === "unknown-tokens";
 		if (propTypes.has(prop)) {
-			const tokenValue = `UtilityValues["${prop}"]`;
-			if (separateTokens) heldOutTokens = tokenValue;
-			const own = separateTokens ? "" : tokenValue;
-			if (strictPropertyList.has(key)) union.push([
-				own,
-				"CssVars",
-				knownFallback
-			].filter(Boolean).join(" | "));
+			const own = `UtilityValues["${prop}"]`;
+			if (strictPropertyList.has(key)) union.push([own, "CssVars"].filter(Boolean).join(" | "));
 			else union.push([
 				own,
 				"CssVars",
-				gradedFallback
+				cssFallback
 			].filter(Boolean).join(" | "));
-		} else union.push([strictPropertyList.has(key) ? "CssVars" : "", knownFallback || cssFallback].filter(Boolean).join(" | "));
+		} else union.push([strictPropertyList.has(key) ? "CssVars" : "", cssFallback].filter(Boolean).join(" | "));
 		const filtered = union.filter(Boolean);
 		if (!filtered.length) filtered.push("string | number");
 		let comment = comments?.[prop] || "";
 		if (ctx.utility.isDeprecated(prop)) comment = comment ? comment.replace("@see", "@deprecated\n@see") : "/** @deprecated */";
-		const line = `${key}?: ${restrict(prop, filtered.filter(Boolean).join(" | "), ctx.config, heldOutTokens)}`;
+		const line = `${key}?: ${restrict(prop, filtered.filter(Boolean).join(" | "), ctx.config)}`;
 		return " " + [comment, line].filter(Boolean).join("\n");
 	}).join("\n")}
     }
     `;
 }
-/**
-* Properties whose values are identifiers the author invents, not values anything enumerates.
-*
-* `strictTokens: 'unknown-tokens'` rejects a bare identifier that names no token and no keyword,
-* on the reasoning that nothing else is shaped like one. That reasoning stops at a property
-* whose values *are* bare identifiers by design: a `@keyframes` name written in CSS rather than
-* in `theme.keyframes`, a grid area, a counter, a container, a view-transition name, a font
-* family, a property name in `transitionProperty`. csstype types all of these as open strings
-* for the same reason, so there is nothing to check against and everything to reject wrongly.
-*
-* Left alone rather than narrowed, so they behave under this setting exactly as they do under
-* the default. The cost is that a typo in one of them is not caught — which is what
-* `strictTokens: true` is for.
-*
-* `content` is here because its values are quoted strings, and `''""''` is neither a keyword nor
-* a shape this can recognise.
-*/
-const authorIdentProperties = new Set([
-	"anchorName",
-	"anchorScope",
-	"animationName",
-	"animationTimeline",
-	"containerName",
-	"content",
-	"counterIncrement",
-	"counterReset",
-	"counterSet",
-	"fontFamily",
-	"fontPalette",
-	"gridArea",
-	"gridColumn",
-	"gridColumnEnd",
-	"gridColumnStart",
-	"gridRow",
-	"gridRowEnd",
-	"gridRowStart",
-	"gridTemplateAreas",
-	"listStyleType",
-	"page",
-	"positionAnchor",
-	"positionTryFallbacks",
-	"scrollTimelineName",
-	"timelineScope",
-	"transitionProperty",
-	"viewTimelineName",
-	"viewTransitionName",
-	"willChange"
-]);
 const strictPropertyList = new Set([
 	"alignContent",
 	"alignItems",
@@ -2636,24 +2534,8 @@ const strictPropertyList = new Set([
 	"wordBreak",
 	"writingMode"
 ]);
-const restrict = (key, value, config, heldOutTokens = "") => {
-	if (config.strictPropertyValues && strictPropertyList.has(key)) return `ConditionalValue<WithEscapeHatch<OnlyKnown<"${key}", ${[heldOutTokens, value].filter(Boolean).join(" | ")}>>>`;
-	/**
-	* The escape hatch wraps the *tokens*, not the whole value.
-	*
-	* `WithModifier` is `[T] extends [string] ? … : never`, so one non-string member of `T`
-	* turns the modifier forms off for the property entirely — and under this setting `T`
-	* carries csstype's keywords, which include `undefined` and boxed `Number`. Wrapping the
-	* whole union that way silently rejected `color: 'blue.300/40'` and `'blue.300!'`, which
-	* decorate a token and have nothing to do with raw values.
-	*
-	* `CssValueShape` is what keeps raw values writable without an escape hatch: the shapes a
-	* token path cannot have — a leading digit, `#` or `-`, or a space, comma or call anywhere.
-	* A bare identifier that names no token and no keyword matches none of them, which is the
-	* mistake this setting exists to catch.
-	*/
-	if (config.strictTokens === "unknown-tokens") return `ConditionalValue<WithEscapeHatch<${heldOutTokens || "never"}> | ${value} | CssValueShape>`;
-	if (config.strictTokens) return `ConditionalValue<WithEscapeHatch<${value}>>`;
+const restrict = (key, value, config) => {
+	if (config.strictPropertyValues && strictPropertyList.has(key)) return `ConditionalValue<WithEscapeHatch<OnlyKnown<"${key}", ${value}>>>`;
 	return `ConditionalValue<${value} | AnyString>`;
 };
 //#endregion
@@ -4204,6 +4086,7 @@ var Generator = class extends Context {
 			content: css
 		}) ?? css;
 		this.assertNoUnresolvedTokens();
+		this.reportRawValues();
 		return css;
 	};
 	/**
@@ -4250,6 +4133,44 @@ var Generator = class extends Context {
 	* exists: those all run during extraction, before anything has been decoded. Every path
 	* that emits css comes through `getCss`.
 	*/
+	/**
+	* Report every raw CSS value in the source, under `strictValues`.
+	*
+	* The policy is "everything goes through the theme", and the brackets are what make reaching
+	* outside it visible: `fontSize: '[14px]'` says so in the source, where `fontSize: '14px'`
+	* reads exactly like using the scale.
+	*
+	* Read off `decoder.atomic` — the styles the *source* produced — so a preset's own reset and
+	* a config recipe are not held to a project's policy about its own code. That is the whole
+	* reason this is a separate pass rather than a branch in `transform`, which sees both.
+	*
+	* A keyword is not a raw value; see `isRawValue` for why that distinction needs the grammar
+	* and is what the type-level version of this setting could never draw.
+	*/
+	reportRawValues = () => {
+		if (!this.config.strictValues) return;
+		const found = /* @__PURE__ */ new Map();
+		for (const atom of this.decoder.atomic) {
+			const { prop, value } = atom.entry;
+			if (typeof prop !== "string" || typeof value !== "string" && typeof value !== "number") continue;
+			const written = String(value);
+			if (!this.utility.isRawValue(prop, written)) continue;
+			const key = this.utility.resolveShorthand(prop);
+			found.set(`${key}:${written}`, {
+				prop: key,
+				value: written
+			});
+		}
+		if (!found.size) return;
+		const detail = truncateList(Array.from(found.values(), ({ prop, value }) => `- \`${prop}: ${value}\` — write \`[${value}]\` to mean it.`), {
+			limit: 25,
+			unit: "value",
+			separator: "\n"
+		});
+		const message = `${found.size} style value(s) are raw css rather than tokens:\n\n${detail}\n\n\`strictValues\` asks every value to come from the theme, so reaching outside it is visible in the source. Write \`[value]\` to mean one literally, or add it to your tokens.`;
+		if (this.config.validation === "error") throw new BambooError("STRICT_VALUES", message);
+		logger.warn("strict-values", message);
+	};
 	assertNoUnresolvedTokens = () => {
 		if (this.config.unresolvedToken !== "error") return;
 		const found = new Map(this.utility.unresolvedTokens);
@@ -4259,16 +4180,10 @@ var Generator = class extends Context {
 			if (!this.utility.isUnresolvedTokenValue(prop, value)) continue;
 			const key = this.utility.resolveShorthand(prop);
 			const bare = this.utility.bareTokenPath(key, value);
-			found.set(`${key}:${bare}`, {
-				prop: key,
-				value: bare,
-				category: this.utility.getTokenCategory(key)
-			});
+			found.set(`${key}:${bare}`, this.utility.unresolvedTokenRef(key, bare));
 		}
 		if (!found.size) return;
-		const detail = truncateList(Array.from(found.values(), ({ prop, value, category }) => {
-			return `- \`${prop}: ${value}\`.${category ? ` Check the path against your \`${category}\` tokens.` : ""}`;
-		}), {
+		const detail = truncateList(Array.from(found.values(), (ref) => `- ${this.utility.explainUnresolvedToken(ref)}`), {
 			limit: 25,
 			unit: "value",
 			separator: "\n"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bamboocss/generator",
-  "version": "1.41.0",
+  "version": "1.42.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.41.0",
-    "@bamboocss/logger": "1.41.0",
-    "@bamboocss/token-dictionary": "1.41.0",
-    "@bamboocss/is-valid-prop": "^1.41.0",
-    "@bamboocss/types": "1.41.0",
-    "@bamboocss/shared": "1.41.0"
+    "@bamboocss/core": "1.42.0",
+    "@bamboocss/is-valid-prop": "^1.42.0",
+    "@bamboocss/logger": "1.42.0",
+    "@bamboocss/shared": "1.42.0",
+    "@bamboocss/token-dictionary": "1.42.0",
+    "@bamboocss/types": "1.42.0"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.33"