voicss 0.1.4

package/README.md

@@ -0,0 +1,66 @@
+<div align="center">
+	<picture>
+		<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/kh4f/vois/refs/heads/assets/logo-dark.png">
+		<img alt="logo" src="https://raw.githubusercontent.com/kh4f/vois/refs/heads/assets/logo-light.png">
+	</picture>
+	<br>
+	A lightweight <b>zero-runtime CSS-in-TS</b> toolkit
+	<br><br>
+	<p>
+		<a href="https://www.npmjs.com/package/vois"><img src="https://img.shields.io/npm/v/vois?style=flat-square&logo=npm&label=npm&labelColor=612838&color=D8C8C2" alt="npm version"/></a>&nbsp;
+		<a href="https://github.com/kh4f/vois/issues?q=is%3Aissue+is%3Aopen+label%3Abug"><img src="https://img.shields.io/github/issues/kh4f/vois/bug?style=flat-square&label=%F0%9F%90%9B%20Bugs&labelColor=612838&color=D8C8C2" alt="bugs"></a>&nbsp;
+		<a href="https://github.com/kh4f/vois/blob/main/LICENSE"><img src="https://img.shields.io/github/license/kh4f/vois?style=flat-square&label=%F0%9F%9B%A1%EF%B8%8F%20License&labelColor=612838&color=D8C8C2" alt="license"></a>&nbsp;
+	</p>
+	<p><b>
+		<a href="#-overview">Overview</a>&nbsp; •&nbsp;
+		<a href="#-quick-start">Quick Start</a>&nbsp; •&nbsp;
+		<a href="#%EF%B8%8F-usage">Usage</a>
+	</b></p>
+	<img alt="demo" src="https://raw.githubusercontent.com/kh4f/vois/refs/heads/assets/demo.png">
+</div>
+
+## 👀 Overview
+**Vois** is a bundler plugin that extracts `` void `css ...` `` blocks from `.ts(x)` files into native CSS.
+
+### 🔥 Features
+- **⚡ True zero-runtime:** styles are extracted at build time, no JS in production
+- **💎 Native CSS:** write standard CSS with all modern features
+- **📦 Modern bundlers:** first-class support for Next.js and Vite
+- **🔥 HMR:** instant style updates during development
+- **🧩 [VS Code extension](https://github.com/kh4f/vois-vscode):** syntax highlighting, autocomplete, validation, and more
+- **🧹 [ESLint plugin](https://github.com/kh4f/vois-eslint):** CSS linting in template literals
+
+## 🏁 Quick Start
+Scaffold a [demo project](templates) for your platform (Next.js/Vite/tsdown):
+```bash
+bun create vois
+```
+
+## 🕹️ Usage
+### Vite
+```bash
+bun add -D vois
+```
+```ts
+// vite.config.ts
+import type { UserConfig } from 'vite'
+import vois from 'vois/vite'
+
+export default {
+	plugins: [vois()],
+} satisfies UserConfig
+```
+
+### Next.js
+```bash
+bun add -D vois
+```
+```ts
+// next.config.ts
+import type { NextConfig } from 'next'
+import { voisTurboRule } from 'vois/next'
+
+export default {
+	turbopack: { rules: { ...voisTurboRule } },
+} satisfies NextConfig
+```

package/dist/index.d.mts

@@ -0,0 +1,4 @@
+//#region src/index.d.ts
+declare const extractCss: (s: string) => string;
+//#endregion
+export { extractCss };

package/dist/index.mjs

@@ -0,0 +1,4 @@
+//#region src/index.ts
+const extractCss = (s) => [...s.matchAll(/void `css\s(.*?)`/gs)].map((m) => m[1]).join("");
+//#endregion
+export { extractCss };

package/dist/next.d.mts

@@ -0,0 +1,8 @@
+import { NextConfig } from "next";
+//#region src/next.d.ts
+declare const voisTurboRule: Required<Required<NextConfig>['turbopack']>['rules'];
+declare function export_default(this: {
+  resourcePath: string;
+}, source: string): string;
+//#endregion
+export { export_default as default, voisTurboRule };

package/dist/next.mjs

@@ -0,0 +1,23 @@
+import { extractCss } from "./index.mjs";
+import { mkdirSync, writeFileSync } from "node:fs";
+import { dirname, join, relative, resolve } from "node:path";
+import { createHash } from "node:crypto";
+//#region src/next.ts
+const voisTurboRule = { "*": {
+	loaders: ["vois/next"],
+	condition: { all: [{ not: "foreign" }, { path: /\.(ts|tsx)$/ }] }
+} };
+function next_default(source) {
+	const css = extractCss(source);
+	if (!css) return source;
+	const fileHash = createHash("md5").update(this.resourcePath).digest("hex");
+	const cacheDir = resolve("node_modules", ".vois");
+	const cssFilePath = join(cacheDir, `${fileHash}.css`);
+	mkdirSync(cacheDir, { recursive: true });
+	writeFileSync(cssFilePath, css, "utf8");
+	let importPath = relative(dirname(this.resourcePath), cssFilePath).replace(/\\/g, "/");
+	if (!importPath.startsWith(".")) importPath = `./${importPath}`;
+	return source.replace(/^\w/m, `import '${importPath}';\n$&`);
+}
+//#endregion
+export { next_default as default, voisTurboRule };

package/dist/vite.d.mts

@@ -0,0 +1,5 @@
+import { Plugin } from "vite";
+//#region src/vite.d.ts
+declare const _default: () => Plugin;
+//#endregion
+export { _default as default };

package/dist/vite.mjs

@@ -0,0 +1,47 @@
+import { extractCss } from "./index.mjs";
+import MagicString from "magic-string";
+//#region src/vite.ts
+const CSS_EXTRACTABLE_FILES = /\.(ts|tsx)$/;
+const VIRTUAL_PREFIX = "virtual:vois/";
+const RESOLVED_PREFIX = `\0${VIRTUAL_PREFIX}`;
+const styles = /* @__PURE__ */ new Map();
+var vite_default = () => ({
+	name: "vois-vite",
+	enforce: "pre",
+	resolveId(id) {
+		if (id.startsWith(VIRTUAL_PREFIX)) return RESOLVED_PREFIX + normalizePath(id.slice(13));
+	},
+	load(id) {
+		if (id.startsWith(RESOLVED_PREFIX)) {
+			const cssId = normalizePath(id.slice(RESOLVED_PREFIX.length));
+			return styles.get(cssId);
+		}
+	},
+	transform(code, id) {
+		if (!CSS_EXTRACTABLE_FILES.test(id)) return;
+		const css = extractCss(code);
+		if (!css) return;
+		const cssId = normalizePath(id + ".css");
+		styles.set(cssId, css);
+		const s = new MagicString(code);
+		s.prepend(`import '${VIRTUAL_PREFIX}${cssId}';`);
+		return {
+			code: s.toString(),
+			map: s.generateMap({ hires: true })
+		};
+	},
+	async handleHotUpdate({ file, server, modules, read }) {
+		if (!CSS_EXTRACTABLE_FILES.test(file)) return;
+		const sourceCode = await read();
+		const css = extractCss(sourceCode);
+		if (!css) return;
+		const cssId = normalizePath(file + ".css");
+		const virtualId = RESOLVED_PREFIX + cssId;
+		const mod = server.moduleGraph.getModuleById(virtualId);
+		styles.set(cssId, css);
+		if (mod) return [...modules, mod];
+	}
+});
+const normalizePath = (p) => p.replace(/\\/g, "/");
+//#endregion
+export { vite_default as default };

package/package.json

@@ -0,0 +1,38 @@
+{
+	"name": "voicss",
+	"version": "0.1.4",
+	"description": "⚡ Ultra-Light Compile-Time CSS-in-TS",
+	"author": "kh4f",
+	"license": "MIT",
+	"repository": "https://github.com/kh4f/voicss",
+	"homepage": "https://github.com/kh4f/voicss",
+	"bugs": "https://github.com/kh4f/voicss/issues",
+	"keywords": ["css-in-ts", "compile-time-css", "zero-runtime-css", "vite-plugin", "next-plugin"],
+	"files": ["dist", "README.md"],
+	"exports": {
+		".": { "import": "./dist/index.mjs", "types": "./dist/index.d.mts" },
+		"./vite": { "import": "./dist/vite.mjs", "types": "./dist/vite.d.mts" },
+		"./next": { "default": "./dist/next.mjs", "types": "./dist/next.d.mts" }
+	},
+	"scripts": {
+		"build": "tsdown src/{index,vite,next}.ts",
+		"lint": "tsc && eslint",
+		"prepack": "cp ../../README.md .",
+		"postpack": "rm README.md"
+	},
+	"dependencies": {
+		"magic-string": "^1.2.3"
+	},
+	"peerDependencies": {
+		"next": "^16",
+		"vite": "^8"
+	},
+	"peerDependenciesMeta": {
+		"next": { "optional": true },
+		"vite": { "optional": true }
+	},
+	"devDependencies": {
+		"next": "^16.3.4",
+		"vite": "^8.0.16"
+	}
+}