@bamboocss/vite 1.55.1 → 1.55.3

package/dist/index.cjs

@@ -304,6 +304,22 @@ const queryOf = (id) => {
 	const at = id.indexOf("?");
 	return at === -1 ? "" : id.slice(at);
 };
+/** `?url`, tested the way Vite's asset plugin tests it — the plugin a dev server leaves it to. */
+const URL_QUERY = /(?:\?|&)url(?:&|$)/;
+/**
+* Where a dev server serves the stylesheet, spelled the way Vite writes the URL of any module with
+* no file behind it: `/@id/`, then the resolved id with its NUL as `__x00__`, behind the server's
+* `origin` and base.
+*
+* The base is taken decoded, so `encodeURI` applies its escapes exactly once, as Vite does for an
+* asset's URL. Vite 6 and up carry it as `decodedBase`, which is missing from the published types,
+* hence the cast; Vite 5 has only `base`, decoded here instead.
+*/
+const devStylesheetUrl = (config) => {
+	const join = (a, b) => a && b ? `${a.replace(/\/$/, "")}/${b.replace(/^\//, "")}` : a || b;
+	const base = config?.decodedBase ?? decodeURI(config?.base ?? "/");
+	return encodeURI(join(join(config?.server.origin ?? "", base), `@id/__x00__${VIRTUAL_CSS_ID}`));
+};
 /**
 * A thrown value Vite can actually report.
 *
@@ -532,7 +548,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.
 	*
@@ -744,14 +760,12 @@ const bamboocssCss = (options) => {
 			const query = queryOf(id);
 			if (id.slice(0, id.length - query.length) !== RESOLVED_ID) return null;
 			session.cssLoaded = true;
+			if (command === "serve" && URL_QUERY.test(query)) return `export default ${JSON.stringify(devStylesheetUrl(server?.config))}`;
 			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 +784,53 @@ 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 (URL_QUERY.test(query)) 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.
@@ -803,11 +852,16 @@ const bamboocssCss = (options) => {
 				host.noteSourceChange(absoluteFile, event, { needsConfigReload: changesConfigMembership });
 				changeGeneration++;
 				prebuilt = void 0;
-				const mod = server?.moduleGraph.getModuleById(RESOLVED_ID);
-				if (!mod) return;
+				const sheets = [RESOLVED_ID, `${RESOLVED_ID}?direct`].flatMap((sheetId) => {
+					const sheet = server?.moduleGraph.getModuleById(sheetId);
+					return sheet ? [sheet] : [];
+				});
+				if (!sheets.length) return;
 				if (wasExtracted && clientGraph.getModulesByFile(absoluteFile)?.size) return;
-				server?.moduleGraph.invalidateModule(mod);
-				server?.reloadModule(mod);
+				for (const sheet of sheets) {
+					server?.moduleGraph.invalidateModule(sheet);
+					server?.reloadModule(sheet);
+				}
 				_bamboocss_logger.logger.debug("vite", `styles invalidated by ${absoluteFile}`);
 			};
 			devServer.watcher.on("change", (file) => invalidate(file, "update"));

package/dist/index.mjs

@@ -299,6 +299,22 @@ const queryOf = (id) => {
 	const at = id.indexOf("?");
 	return at === -1 ? "" : id.slice(at);
 };
+/** `?url`, tested the way Vite's asset plugin tests it — the plugin a dev server leaves it to. */
+const URL_QUERY = /(?:\?|&)url(?:&|$)/;
+/**
+* Where a dev server serves the stylesheet, spelled the way Vite writes the URL of any module with
+* no file behind it: `/@id/`, then the resolved id with its NUL as `__x00__`, behind the server's
+* `origin` and base.
+*
+* The base is taken decoded, so `encodeURI` applies its escapes exactly once, as Vite does for an
+* asset's URL. Vite 6 and up carry it as `decodedBase`, which is missing from the published types,
+* hence the cast; Vite 5 has only `base`, decoded here instead.
+*/
+const devStylesheetUrl = (config) => {
+	const join = (a, b) => a && b ? `${a.replace(/\/$/, "")}/${b.replace(/^\//, "")}` : a || b;
+	const base = config?.decodedBase ?? decodeURI(config?.base ?? "/");
+	return encodeURI(join(join(config?.server.origin ?? "", base), `@id/__x00__${VIRTUAL_CSS_ID}`));
+};
 /**
 * A thrown value Vite can actually report.
 *
@@ -527,7 +543,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.
 	*
@@ -739,14 +755,12 @@ const bamboocssCss = (options) => {
 			const query = queryOf(id);
 			if (id.slice(0, id.length - query.length) !== RESOLVED_ID) return null;
 			session.cssLoaded = true;
+			if (command === "serve" && URL_QUERY.test(query)) return `export default ${JSON.stringify(devStylesheetUrl(server?.config))}`;
 			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 +779,53 @@ 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 (URL_QUERY.test(query)) 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.
@@ -798,11 +847,16 @@ const bamboocssCss = (options) => {
 				host.noteSourceChange(absoluteFile, event, { needsConfigReload: changesConfigMembership });
 				changeGeneration++;
 				prebuilt = void 0;
-				const mod = server?.moduleGraph.getModuleById(RESOLVED_ID);
-				if (!mod) return;
+				const sheets = [RESOLVED_ID, `${RESOLVED_ID}?direct`].flatMap((sheetId) => {
+					const sheet = server?.moduleGraph.getModuleById(sheetId);
+					return sheet ? [sheet] : [];
+				});
+				if (!sheets.length) return;
 				if (wasExtracted && clientGraph.getModulesByFile(absoluteFile)?.size) return;
-				server?.moduleGraph.invalidateModule(mod);
-				server?.reloadModule(mod);
+				for (const sheet of sheets) {
+					server?.moduleGraph.invalidateModule(sheet);
+					server?.reloadModule(sheet);
+				}
 				logger.debug("vite", `styles invalidated by ${absoluteFile}`);
 			};
 			devServer.watcher.on("change", (file) => invalidate(file, "update"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bamboocss/vite",
-  "version": "1.55.1",
+  "version": "1.55.3",
   "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.1",
-    "@bamboocss/core": "1.55.1",
-    "@bamboocss/extractor": "1.55.1",
-    "@bamboocss/logger": "1.55.1",
-    "@bamboocss/node": "1.55.1",
-    "@bamboocss/ts-ast": "1.55.1",
-    "@bamboocss/shared": "1.55.1",
-    "@bamboocss/types": "1.55.1"
+    "@bamboocss/config": "1.55.3",
+    "@bamboocss/extractor": "1.55.3",
+    "@bamboocss/logger": "1.55.3",
+    "@bamboocss/node": "1.55.3",
+    "@bamboocss/core": "1.55.3",
+    "@bamboocss/shared": "1.55.3",
+    "@bamboocss/types": "1.55.3",
+    "@bamboocss/ts-ast": "1.55.3"
   },
   "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.1"
+    "@bamboocss/fixture": "1.55.3"
   },
   "peerDependencies": {
     "vite": ">=5"