@bamboocss/vite 1.55.0 → 1.55.2

package/dist/fold-module.cjs

@@ -1115,6 +1115,7 @@ const FOLDABLE_TYPES = new Set([
 */
 const SURVIVES_TO_RUNTIME = new Set([
 	"dynamic",
+	"opaque-composition",
 	"runtime-binding",
 	"raw-call",
 	"unsupported-kind",
@@ -2056,19 +2057,29 @@ const foldSource = (options) => {
 					supported = false;
 					break;
 				}
-				if (dynamic.length > 1) {
-					skipped.push({
-						name: "cx",
-						reason: "dynamic",
-						start: call.getStart(),
-						end: call.getEnd()
-					});
-					continue;
-				}
-				if (!supported) {
+				if (!supported || dynamic.length > 1) {
+					/**
+					* Does this argument carry declarations Bamboo compiled?
+					*
+					* Only the candidate half of `take`, because the other half is already known here:
+					* `take` returned false, which happens precisely when an argument is opaque. What is
+					* missing after that abort is whether a *later* argument was one of ours, which the
+					* partially populated `matched`/`dynamic` lists cannot answer — the walk stops at the
+					* first thing it cannot take, and everything after it is unvisited.
+					*
+					* Declared inside the branch so the common path — every `cx()` that compiles — does
+					* not allocate a closure it never calls. The fold runs on every module of every dev
+					* transform, so per-call-site work here is not free.
+					*/
+					const composesStyleSet = (arg) => {
+						const candidate = byRange.get(`${arg.getStart()}:${arg.getEnd()}`);
+						if (candidate?.styleSet || candidate?.styleMap?.outputKind === "class" || candidate?.replacement) return true;
+						return _bamboocss_ts_ast.Node.isArrayLiteralExpression(arg) && arg.elements.some(composesStyleSet);
+					};
+					const mixed = !supported && ((0, _bamboocss_ts_ast.childOf)(call, "arguments") ?? []).some(composesStyleSet);
 					skipped.push({
 						name: "cx",
-						reason: "dynamic",
+						reason: mixed ? "opaque-composition" : "dynamic",
 						start: call.getStart(),
 						end: call.getEnd()
 					});

package/dist/fold-module.mjs

@@ -1113,6 +1113,7 @@ const FOLDABLE_TYPES = new Set([
 */
 const SURVIVES_TO_RUNTIME = new Set([
 	"dynamic",
+	"opaque-composition",
 	"runtime-binding",
 	"raw-call",
 	"unsupported-kind",
@@ -2054,19 +2055,29 @@ const foldSource = (options) => {
 					supported = false;
 					break;
 				}
-				if (dynamic.length > 1) {
-					skipped.push({
-						name: "cx",
-						reason: "dynamic",
-						start: call.getStart(),
-						end: call.getEnd()
-					});
-					continue;
-				}
-				if (!supported) {
+				if (!supported || dynamic.length > 1) {
+					/**
+					* Does this argument carry declarations Bamboo compiled?
+					*
+					* Only the candidate half of `take`, because the other half is already known here:
+					* `take` returned false, which happens precisely when an argument is opaque. What is
+					* missing after that abort is whether a *later* argument was one of ours, which the
+					* partially populated `matched`/`dynamic` lists cannot answer — the walk stops at the
+					* first thing it cannot take, and everything after it is unvisited.
+					*
+					* Declared inside the branch so the common path — every `cx()` that compiles — does
+					* not allocate a closure it never calls. The fold runs on every module of every dev
+					* transform, so per-call-site work here is not free.
+					*/
+					const composesStyleSet = (arg) => {
+						const candidate = byRange.get(`${arg.getStart()}:${arg.getEnd()}`);
+						if (candidate?.styleSet || candidate?.styleMap?.outputKind === "class" || candidate?.replacement) return true;
+						return Node.isArrayLiteralExpression(arg) && arg.elements.some(composesStyleSet);
+					};
+					const mixed = !supported && (childOf(call, "arguments") ?? []).some(composesStyleSet);
 					skipped.push({
 						name: "cx",
-						reason: "dynamic",
+						reason: mixed ? "opaque-composition" : "dynamic",
 						start: call.getStart(),
 						end: call.getEnd()
 					});

package/dist/index.cjs

@@ -532,7 +532,7 @@ const bamboocssCss = (options) => {
 	* for the client graph and once for SSR — and each load used to run a complete extraction
 	* and optimization pass to produce byte-identical CSS. The sheet is a function of the source
 	* files alone, and the watcher below is the single point every event that can reach it
-	* passes through — Vite's own propagation only arrives via the watch edges `load` registers,
+	* passes through — Vite's own propagation only arrives via the watch edges `transform` registers,
 	* over the same extracted files the watcher checks. A monotonic counter bumped there is
 	* therefore enough to know whether a build already reflects the world a load is asking about.
 	*
@@ -745,13 +745,10 @@ const bamboocssCss = (options) => {
 			if (id.slice(0, id.length - query.length) !== RESOLVED_ID) return null;
 			session.cssLoaded = true;
 			const generationAtStart = changeGeneration;
-			if (command === "serve" && servedCss?.generation === generationAtStart) {
-				if (this.addWatchFile) for (const file of session.extractedFiles) this.addWatchFile(file);
-				return servedCss.map ? {
-					code: servedCss.css,
-					map: servedCss.map
-				} : servedCss.css;
-			}
+			if (command === "serve" && servedCss?.generation === generationAtStart) return servedCss.map ? {
+				code: servedCss.css,
+				map: servedCss.map
+			} : servedCss.css;
 			let css;
 			let map;
 			try {
@@ -770,18 +767,52 @@ const bamboocssCss = (options) => {
 				css,
 				map
 			};
-			if (this.addWatchFile) for (const file of session.extractedFiles) this.addWatchFile(file);
+			if (command === "build" && this.addWatchFile) for (const file of session.extractedFiles) this.addWatchFile(file);
 			return map ? {
 				code: css,
 				map
 			} : css;
 		},
+		/**
+		* Register every extracted file against the stylesheet, in the graph that just asked for it.
+		*
+		* In dev this has to happen here rather than in `load`. Vite attaches what `load` registers to
+		* the module's node in the graph, and a request for a module the graph has no node for yet runs
+		* `load` first and creates the node afterwards, so everything `load` registered is dropped
+		* without a word. `vite:css-analysis` then records no importer edges, Vite's own propagation
+		* never reaches the sheet in that environment, and the watcher below does not force a reload
+		* either, because the edited file does have a module there. The component repaints with a class
+		* whose rule never arrives, and stays that way until a restart.
+		*
+		* A browser's import never meets it, since the importer's analysis creates the node before the
+		* sheet is requested. A `transformRequest` that reaches the sheet first does. TanStack Start
+		* sends one on every page load when `__root.tsx` imports the stylesheet: its dev-only SSR style
+		* collection transforms the sheet in the client environment on the server, before the browser's
+		* import has put a node there.
+		*
+		* By `transform` the node exists, and the context is the one `vite:css-analysis` reads after
+		* every plugin has run, so the edges are recorded however the request arrived. From the
+		* session's set rather than `extractedSourceFiles()`, which re-globs the include patterns per
+		* call; every pass assigns the set from that same expression.
+		*
+		* Filtered by id, so a bundler that honours hook filters never calls in for any other module.
+		* The exact check stays for one that does not.
+		*/
+		transform: {
+			filter: { id: /virtual:bamboo\.css/ },
+			handler(_code, id) {
+				if (command !== "serve") return;
+				const query = queryOf(id);
+				if (id.slice(0, id.length - query.length) !== RESOLVED_ID) return;
+				if (this.addWatchFile) for (const file of session.extractedFiles) this.addWatchFile(file);
+			}
+		},
 		configureServer(devServer) {
 			server = devServer;
 			/**
 			* The graph the stylesheet's own module lives in, which is the one that has to reach it.
 			*
-			* `load` registers every extracted file with `addWatchFile`, and `vite:css-analysis`
+			* `transform` registers every extracted file with `addWatchFile`, and `vite:css-analysis`
 			* turns those into real importer edges — the virtual module ends up a direct importer of
 			* each file the extractor read. So an edit to any of them propagates to the stylesheet on
 			* Vite's own pass, in whichever environment holds that edge.
@@ -1127,7 +1158,8 @@ const bamboocss = (options = {}) => {
 		"overlapping",
 		"unresolved-token",
 		"runtime-binding",
-		"compile-failed"
+		"compile-failed",
+		"opaque-composition"
 	]);
 	const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
 	const isNonNegativeInteger = (value) => Number.isSafeInteger(value) && value >= 0;
@@ -2609,7 +2641,7 @@ const bamboocss = (options = {}) => {
 		const survivorsHere = [];
 		for (const entry of result.skipped) {
 			if (entry.reason === "not-imported" || entry.reason === "overlapping") continue;
-			if (entry.name === "cx" && entry.reason === "dynamic") continue;
+			if (entry.name === "cx" && (entry.reason === "dynamic" || entry.reason === "opaque-composition")) continue;
 			survivorsHere.push({
 				line: lineAt(code, entry.start),
 				name: entry.name,

package/dist/index.mjs

@@ -527,7 +527,7 @@ const bamboocssCss = (options) => {
 	* for the client graph and once for SSR — and each load used to run a complete extraction
 	* and optimization pass to produce byte-identical CSS. The sheet is a function of the source
 	* files alone, and the watcher below is the single point every event that can reach it
-	* passes through — Vite's own propagation only arrives via the watch edges `load` registers,
+	* passes through — Vite's own propagation only arrives via the watch edges `transform` registers,
 	* over the same extracted files the watcher checks. A monotonic counter bumped there is
 	* therefore enough to know whether a build already reflects the world a load is asking about.
 	*
@@ -740,13 +740,10 @@ const bamboocssCss = (options) => {
 			if (id.slice(0, id.length - query.length) !== RESOLVED_ID) return null;
 			session.cssLoaded = true;
 			const generationAtStart = changeGeneration;
-			if (command === "serve" && servedCss?.generation === generationAtStart) {
-				if (this.addWatchFile) for (const file of session.extractedFiles) this.addWatchFile(file);
-				return servedCss.map ? {
-					code: servedCss.css,
-					map: servedCss.map
-				} : servedCss.css;
-			}
+			if (command === "serve" && servedCss?.generation === generationAtStart) return servedCss.map ? {
+				code: servedCss.css,
+				map: servedCss.map
+			} : servedCss.css;
 			let css;
 			let map;
 			try {
@@ -765,18 +762,52 @@ const bamboocssCss = (options) => {
 				css,
 				map
 			};
-			if (this.addWatchFile) for (const file of session.extractedFiles) this.addWatchFile(file);
+			if (command === "build" && this.addWatchFile) for (const file of session.extractedFiles) this.addWatchFile(file);
 			return map ? {
 				code: css,
 				map
 			} : css;
 		},
+		/**
+		* Register every extracted file against the stylesheet, in the graph that just asked for it.
+		*
+		* In dev this has to happen here rather than in `load`. Vite attaches what `load` registers to
+		* the module's node in the graph, and a request for a module the graph has no node for yet runs
+		* `load` first and creates the node afterwards, so everything `load` registered is dropped
+		* without a word. `vite:css-analysis` then records no importer edges, Vite's own propagation
+		* never reaches the sheet in that environment, and the watcher below does not force a reload
+		* either, because the edited file does have a module there. The component repaints with a class
+		* whose rule never arrives, and stays that way until a restart.
+		*
+		* A browser's import never meets it, since the importer's analysis creates the node before the
+		* sheet is requested. A `transformRequest` that reaches the sheet first does. TanStack Start
+		* sends one on every page load when `__root.tsx` imports the stylesheet: its dev-only SSR style
+		* collection transforms the sheet in the client environment on the server, before the browser's
+		* import has put a node there.
+		*
+		* By `transform` the node exists, and the context is the one `vite:css-analysis` reads after
+		* every plugin has run, so the edges are recorded however the request arrived. From the
+		* session's set rather than `extractedSourceFiles()`, which re-globs the include patterns per
+		* call; every pass assigns the set from that same expression.
+		*
+		* Filtered by id, so a bundler that honours hook filters never calls in for any other module.
+		* The exact check stays for one that does not.
+		*/
+		transform: {
+			filter: { id: /virtual:bamboo\.css/ },
+			handler(_code, id) {
+				if (command !== "serve") return;
+				const query = queryOf(id);
+				if (id.slice(0, id.length - query.length) !== RESOLVED_ID) return;
+				if (this.addWatchFile) for (const file of session.extractedFiles) this.addWatchFile(file);
+			}
+		},
 		configureServer(devServer) {
 			server = devServer;
 			/**
 			* The graph the stylesheet's own module lives in, which is the one that has to reach it.
 			*
-			* `load` registers every extracted file with `addWatchFile`, and `vite:css-analysis`
+			* `transform` registers every extracted file with `addWatchFile`, and `vite:css-analysis`
 			* turns those into real importer edges — the virtual module ends up a direct importer of
 			* each file the extractor read. So an edit to any of them propagates to the stylesheet on
 			* Vite's own pass, in whichever environment holds that edge.
@@ -1122,7 +1153,8 @@ const bamboocss = (options = {}) => {
 		"overlapping",
 		"unresolved-token",
 		"runtime-binding",
-		"compile-failed"
+		"compile-failed",
+		"opaque-composition"
 	]);
 	const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
 	const isNonNegativeInteger = (value) => Number.isSafeInteger(value) && value >= 0;
@@ -2604,7 +2636,7 @@ const bamboocss = (options = {}) => {
 		const survivorsHere = [];
 		for (const entry of result.skipped) {
 			if (entry.reason === "not-imported" || entry.reason === "overlapping") continue;
-			if (entry.name === "cx" && entry.reason === "dynamic") continue;
+			if (entry.name === "cx" && (entry.reason === "dynamic" || entry.reason === "opaque-composition")) continue;
 			survivorsHere.push({
 				line: lineAt(code, entry.start),
 				name: entry.name,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bamboocss/vite",
-  "version": "1.55.0",
+  "version": "1.55.2",
   "description": "Vite integration for Bamboo CSS",
   "homepage": "https://bamboocss.com",
   "license": "MIT",
@@ -42,20 +42,20 @@
     "magic-string": "0.30.21",
     "postcss": "8.5.26",
     "postcss-selector-parser": "7.1.5",
-    "@bamboocss/config": "1.55.0",
-    "@bamboocss/extractor": "1.55.0",
-    "@bamboocss/core": "1.55.0",
-    "@bamboocss/node": "1.55.0",
-    "@bamboocss/logger": "1.55.0",
-    "@bamboocss/types": "1.55.0",
-    "@bamboocss/shared": "1.55.0",
-    "@bamboocss/ts-ast": "1.55.0"
+    "@bamboocss/config": "1.55.2",
+    "@bamboocss/core": "1.55.2",
+    "@bamboocss/extractor": "1.55.2",
+    "@bamboocss/logger": "1.55.2",
+    "@bamboocss/node": "1.55.2",
+    "@bamboocss/shared": "1.55.2",
+    "@bamboocss/ts-ast": "1.55.2",
+    "@bamboocss/types": "1.55.2"
   },
   "devDependencies": {
     "@jridgewell/trace-mapping": "^0.3.31",
     "@typescript/api": "npm:typescript@7.1.0-dev.20260826.1",
     "vite": "7.2.6",
-    "@bamboocss/fixture": "1.55.0"
+    "@bamboocss/fixture": "1.55.2"
   },
   "peerDependencies": {
     "vite": ">=5"