unocss-preset-overwrite 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 zyyv <https://github.com/zyyv>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,96 @@
+# unocss-preset-overwrite [![npm](https://img.shields.io/npm/v/unocss-preset-overwrite)](https://npmjs.com/package/unocss-preset-overwrite)
+
+Rebuild UnoCSS output with a new theme while keeping the same tokens.
+
+This preset parses selectors from a previously generated CSS string and feeds them back into UnoCSS through `safelist`.
+
+## Why
+
+When you only have compiled CSS (instead of source templates), switching theme values usually requires regenerating the same utility tokens.
+
+`unocss-preset-overwrite` helps by:
+
+- extracting class tokens (e.g. `.text-red-500`, `.md\:grid-cols-2`)
+- extracting attributify tokens (e.g. `[bg~="red-500"]`, `[flex=""]`)
+- safelisting those tokens for the next UnoCSS run
+
+## Installation
+
+```bash
+pnpm add -D unocss unocss-preset-overwrite
+```
+
+## Usage
+
+```ts
+// uno.config.ts
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { defineConfig } from 'unocss'
+import { presetOverwrite } from 'unocss-preset-overwrite'
+import presetWind4 from 'unocss/preset-wind4'
+
+const css = readFileSync(
+  fileURLToPath(import.meta.resolve('./style.css')),
+  'utf-8',
+)
+
+export default defineConfig({
+  presets: [
+    presetWind4(),
+    presetOverwrite({
+      css,
+    }),
+  ],
+})
+```
+
+### API
+
+```ts
+interface PresetOverwriteOptions {
+  css?: string | (() => string)
+}
+```
+
+- `css` can be:
+  - a plain CSS string
+  - a callback returning a CSS string (useful when the value is lazily loaded)
+
+### Attributify support
+
+Use your regular attributify preset together with this preset:
+
+```ts
+import presetAttributify from '@unocss/preset-attributify'
+import { defineConfig } from 'unocss'
+import { presetOverwrite } from 'unocss-preset-overwrite'
+import presetWind4 from 'unocss/preset-wind4'
+
+export default defineConfig({
+  presets: [
+    presetWind4(),
+    presetAttributify(),
+    presetOverwrite({ css: previousCompiledCss }),
+  ],
+})
+```
+
+## Utility function
+
+You can also use the extractor directly:
+
+```ts
+import { extractUnoClassTokensFromCss } from 'unocss-preset-overwrite'
+
+const tokens = extractUnoClassTokensFromCss(previousCompiledCss)
+```
+
+## Notes
+
+- The extractor skips UnoCSS `base`, `theme`, and `properties` layers when layer markers are present, to avoid false positives from preflight selectors.
+- Output quality depends on how complete your previous compiled CSS is.
+
+## License
+
+[MIT](./LICENSE) License © 2026 [chizuki](https://github.com/chizukicn)

package/dist/index.d.mts

@@ -0,0 +1,30 @@
+import * as _$_unocss_core0 from "@unocss/core";
+
+//#region src/extract.d.ts
+/**
+ * Parse Uno-compatible tokens from a CSS string:
+ *
+ * - **class**: names from `.utility`, including escapes as in Uno output (e.g. `hover:bg-red-500`).
+ * - **Attributify** (`@unocss/preset-attributify`): selectors like `[bg~="red-500"]`, `[flex=""]`,
+ *   `[un-bg~="red-500"]` are kept verbatim when they match the same attributify pattern as @unocss/core.
+ *
+ * If the file contains Uno layer markers (block comments whose text starts with `layer:`), only
+ * rules in layers other than `base`, `theme`, and `properties` are scanned—so preflight selectors
+ * like `[type="button"]` are not picked up as utilities.
+ *
+ * Callers pass the full CSS string; no filesystem I/O. Compound class selectors may yield extra
+ * tokens; filter upstream if needed.
+ */
+declare function extractUnoClassTokensFromCss(css: string): string[];
+//#endregion
+//#region src/index.d.ts
+interface PresetOverwriteOptions {
+  /**
+   * Full compiled CSS string. PostCSS parses selectors; classes and attributify selectors become
+   * Uno utility tokens and are added via safelist.
+   */
+  css?: (() => string) | string;
+}
+declare const presetOverwrite: _$_unocss_core0.PresetFactory<object, PresetOverwriteOptions>;
+//#endregion
+export { type PresetOverwriteOptions, extractUnoClassTokensFromCss, presetOverwrite };

package/dist/index.mjs

@@ -0,0 +1,100 @@
+import { definePreset } from "@unocss/core";
+import postcss from "postcss";
+import selectorParser from "postcss-selector-parser";
+//#region src/extract.ts
+/** Same regex shape as `isAttributifySelector` in @unocss/core (capturing groups required). */
+const ATTRIBUTIFY_SELECTOR_RE = /^\[.+?~?=".*"\]$/;
+function isAttributifyToken(selector) {
+	return ATTRIBUTIFY_SELECTOR_RE.test(selector);
+}
+/** Layers to skip: preflight/base CSS should not contribute utility tokens (avoids false attributify matches). */
+const SKIP_LAYERS = new Set([
+	"base",
+	"theme",
+	"properties"
+]);
+const LAYER_LINE_RE = /^layer:\s*(\S+)/;
+const ROOT_LAYER_MARKER_RE = /^\s*layer:\s*\S+/;
+function attributifyTokenFromAttribute(attr) {
+	const op = attr.operator;
+	if (op !== "~=" && op !== "=") return null;
+	const name = attr.attribute;
+	const val = attr.value ?? "";
+	if (op === "~=") return `[${name}~="${val}"]`;
+	return `[${name}="${val}"]`;
+}
+function extractFromSelector(sel, tokens) {
+	if (!sel) return;
+	try {
+		selectorParser((selectors) => {
+			selectors.walkClasses((classNode) => {
+				tokens.add(classNode.value);
+			});
+			selectors.walkAttributes((attr) => {
+				const raw = attributifyTokenFromAttribute(attr);
+				if (raw && isAttributifyToken(raw)) tokens.add(raw);
+			});
+		}).processSync(sel);
+	} catch {}
+}
+function walkForTokens(container, layer, tokens) {
+	let currentLayer = layer;
+	const nodes = container.nodes ?? [];
+	for (const node of nodes) if (node.type === "comment") {
+		const m = node.text.trim().match(LAYER_LINE_RE);
+		if (m) currentLayer = m[1];
+	} else if (node.type === "rule") {
+		if (currentLayer && !SKIP_LAYERS.has(currentLayer)) extractFromSelector(node.selector, tokens);
+	} else if (node.type === "atrule") walkForTokens(node, currentLayer, tokens);
+}
+function rootDeclaresLayers(root) {
+	let found = false;
+	root.walkComments((c) => {
+		if (ROOT_LAYER_MARKER_RE.test(c.text.trim())) found = true;
+	});
+	return found;
+}
+/**
+* Parse Uno-compatible tokens from a CSS string:
+*
+* - **class**: names from `.utility`, including escapes as in Uno output (e.g. `hover:bg-red-500`).
+* - **Attributify** (`@unocss/preset-attributify`): selectors like `[bg~="red-500"]`, `[flex=""]`,
+*   `[un-bg~="red-500"]` are kept verbatim when they match the same attributify pattern as @unocss/core.
+*
+* If the file contains Uno layer markers (block comments whose text starts with `layer:`), only
+* rules in layers other than `base`, `theme`, and `properties` are scanned—so preflight selectors
+* like `[type="button"]` are not picked up as utilities.
+*
+* Callers pass the full CSS string; no filesystem I/O. Compound class selectors may yield extra
+* tokens; filter upstream if needed.
+*/
+function extractUnoClassTokensFromCss(css) {
+	const trimmed = css.trim();
+	if (!trimmed) return [];
+	let root;
+	try {
+		root = postcss.parse(trimmed, { from: void 0 });
+	} catch {
+		return [];
+	}
+	const tokens = /* @__PURE__ */ new Set();
+	if (rootDeclaresLayers(root)) walkForTokens(root, null, tokens);
+	else root.walkRules((rule) => extractFromSelector(rule.selector, tokens));
+	return [...tokens];
+}
+//#endregion
+//#region src/index.ts
+function toValue(value) {
+	if (typeof value === "function") return value();
+	return value ?? "";
+}
+const presetOverwrite = definePreset((options = {}) => {
+	return {
+		name: "unocss-preset-overwrite",
+		safelist: [() => {
+			return extractUnoClassTokensFromCss(toValue(options.css));
+		}]
+	};
+});
+//#endregion
+export { extractUnoClassTokensFromCss, presetOverwrite };

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "unocss-preset-overwrite",
+  "type": "module",
+  "version": "0.1.0",
+  "description": "Rebuild UnoCSS output with a new theme while keeping the same tokens.",
+  "author": "chizukicn <https://github.com/chizukicn>",
+  "license": "MIT",
+  "homepage": "https://github.com/unocss-community/unocss-preset-overwrite#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/unocss-community/unocss-preset-overwrite.git"
+  },
+  "bugs": {
+    "url": "https://github.com/unocss-community/unocss-preset-overwrite/issues"
+  },
+  "keywords": [
+    "unocss",
+    "unocss-preset",
+    "unocss-community",
+    "unocss-preset-overwrite"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./package.json": "./package.json"
+  },
+  "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/*",
+        "./dist/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@unocss/core": "^66.6.8",
+    "maybe-types": "^0.2.0",
+    "postcss": "^8.5.9",
+    "postcss-selector-parser": "^7.1.1"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^8.1.1",
+    "@babel/types": "^7.29.0",
+    "@types/node": "^24.12.2",
+    "@unocss/eslint-plugin": "^66.6.8",
+    "@unocss/preset-attributify": "^66.6.8",
+    "bumpp": "^11.0.1",
+    "eslint": "^10.2.0",
+    "lint-staged": "^16.4.0",
+    "simple-git-hooks": "^2.13.1",
+    "taze": "^19.11.0",
+    "tsdown": "^0.21.7",
+    "typescript": "^6.0.2",
+    "unocss": "^66.6.8",
+    "vitest": "^4.1.3",
+    "vue": "^3.5.32"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "pnpm lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,ts}": [
+      "eslint --fix"
+    ]
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "release": "bumpp --commit --push --tag && pnpm publish",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest",
+    "test:update": "vitest --update",
+    "up:deps": "taze"
+  }
+}