@protobase/cli 0.12.5 → 0.12.6

package/dist/build/plugin-build.js

@@ -3,6 +3,7 @@ import { uiPackageDir } from "../project/admin-app.js";
 import { extensionImports } from "../project/extensions.js";
 import { sharedModules } from "../project/shared-modules.js";
 import { pluginFieldTypes } from "./plugin-fields.js";
+import { layerPluginUtilities } from "./plugin-styles.js";
 import { createRequire } from "node:module";
 import { existsSync } from "node:fs";
 import path from "node:path";
@@ -69,6 +70,13 @@ const pluginStyles = (file, code) => ({
 	resolveId: (id) => id === file ? id : void 0,
 	load: (id) => id === file ? code : void 0
 });
+const layeredStyles = () => ({
+	name: "protobase-plugin-layered-styles",
+	enforce: "post",
+	generateBundle(_, bundle) {
+		for (const file of Object.values(bundle)) if (file.type === "asset" && file.fileName.endsWith(".css")) file.source = layerPluginUtilities(String(file.source));
+	}
+});
 const outputOf = (result) => {
 	if (Array.isArray(result)) return result[0];
 	if ("output" in result) return result;
@@ -106,7 +114,8 @@ const buildPlugin = async ({ pluginDir, outDir, name, projectDir, ignore = [] })
 			...projectDir === void 0 ? [] : [extensionImports(projectDir, [{ dir: pluginDir }])],
 			pluginStyles(styles, styleCode(pluginDir, target.theme, [outDir, ...ignore])),
 			react(),
-			tailwindcss()
+			tailwindcss(),
+			layeredStyles()
 		],
 		build: {
 			outDir,

package/dist/build/plugin-styles.js

@@ -0,0 +1,70 @@
+import postcss from "postcss";
+//#region src/build/plugin-styles.ts
+/**
+* The layer, nested in `utilities`, that holds a plugin's utilities without a variant. Rules outside a nested layer win
+* over the rules inside it, so the app's own utilities win over these, whatever the order of the stylesheets.
+*/
+const pluginBaseLayer = "plugin";
+const withoutBrackets = (name) => {
+	let depth = 0;
+	let out = "";
+	for (const char of name) if (char === "[") depth += 1;
+	else if (char === "]") depth -= 1;
+	else if (depth === 0) out += char;
+	return out;
+};
+/** Whether a utility's class name has a variant, such as `md:flex`, `hover:bg-muted` or `[&>*]:p-2`. */
+const hasVariant = (name) => withoutBrackets(name).includes(":");
+const unescape = (name) => name.replace(/\\([0-9a-fA-F]{1,6}) ?|\\(.)/g, (_, hex, char) => hex ? String.fromCodePoint(parseInt(hex, 16)) : char);
+/** The class names in a selector, also those inside :is(), :where() and :not(), unescaped: `.md\:flex` is `md:flex`. */
+const classNames = (selector) => [...selector.matchAll(/\.((?:\\[0-9a-fA-F]{1,6} ?|\\.|[\w-]|[^\x00-\x7f])+)/g)].map(([, name]) => unescape(name));
+const around = (node, children) => {
+	const copy = node.clone();
+	copy.removeAll();
+	return copy.append(children.map((child) => child.clone()));
+};
+const partition = (nodes) => {
+	const parts = {
+		base: [],
+		variant: []
+	};
+	for (const node of nodes) if (node.type === "rule") {
+		const varies = (selector) => classNames(selector).some(hasVariant);
+		const base = node.selectors.filter((selector) => !varies(selector));
+		const variant = node.selectors.filter(varies);
+		if (base.length > 0) parts.base.push(variant.length === 0 ? node : node.clone({ selectors: base }));
+		if (variant.length > 0) parts.variant.push(base.length === 0 ? node : node.clone({ selectors: variant }));
+	} else if (node.type === "atrule" && [
+		"media",
+		"supports",
+		"container"
+	].includes(node.name) && node.nodes) {
+		const inner = partition(node.nodes);
+		if (inner.base.length > 0) parts.base.push(around(node, inner.base));
+		if (inner.variant.length > 0) parts.variant.push(around(node, inner.variant));
+	} else parts.variant.push(node);
+	return parts;
+};
+const isUtilities = (node) => node.type === "atrule" && node.name === "layer" && node.params.trim() === "utilities" && node.nodes !== void 0;
+/**
+* A plugin's stylesheet with its utilities without a variant moved into a layer under the app's utilities. The app
+* loads a plugin's stylesheet after its own, where a plugin's `.flex` would otherwise win over the app's `md:block` on
+* the app's own elements. A plugin's variants stay after the app's utilities, so its `hidden md:flex` still works when
+* only the app's stylesheet has `.hidden`.
+*/
+const layerPluginUtilities = (css) => {
+	const root = postcss.parse(css);
+	for (const node of root.nodes.filter(isUtilities)) {
+		const { base, variant } = partition(node.nodes);
+		const kept = variant.map((child) => child.clone());
+		node.removeAll();
+		if (base.length > 0) node.append(postcss.atRule({
+			name: "layer",
+			params: pluginBaseLayer
+		}).append(base.map((child) => child.clone())));
+		node.append(kept);
+	}
+	return root.toString();
+};
+//#endregion
+export { classNames, hasVariant, layerPluginUtilities, pluginBaseLayer };

package/dist/package.js

@@ -1,4 +1,4 @@
 //#region package.json
-var version = "0.12.5";
+var version = "0.12.6";
 //#endregion
 export { version };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protobase/cli",
-  "version": "0.12.5",
+  "version": "0.12.6",
   "description": "The protobase command: scaffold, doctor, dev, build and serve a Protobase project.",
   "license": "Apache-2.0",
   "repository": {
@@ -34,11 +34,11 @@
   "dependencies": {
     "@hono/node-server": "^2.1.3",
     "@hono/vite-dev-server": "^0.26.1",
-    "@protobase/layout": "0.12.5",
-    "@protobase/query": "0.12.5",
-    "@protobase/schema": "0.12.5",
-    "@protobase/server": "0.12.5",
-    "@protobase/ui": "0.12.5",
+    "@protobase/layout": "0.12.6",
+    "@protobase/query": "0.12.6",
+    "@protobase/schema": "0.12.6",
+    "@protobase/server": "0.12.6",
+    "@protobase/ui": "0.12.6",
     "@scalar/hono-api-reference": "^0.12.10",
     "@tailwindcss/vite": "^4.3.3",
     "@vitejs/plugin-react": "^6.1.2",
@@ -51,6 +51,7 @@
     "kysely": "^0.29.6",
     "lightningcss": "^1.33.0",
     "pg": "^8.23.1",
+    "postcss": "^8.5.29",
     "postgres": "^3.4.9",
     "ts-morph": "^28.0.0",
     "vite": "^8.3.3",