ecij 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Nicolas Stepien
+
+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,126 @@
+# ecij
+
+ecij (**E**xtract **C**SS-**i**n-**J**S) is a zero-runtime css-in-js plugin for [Rolldown](https://rolldown.rs/) and [Vite](https://vite.dev/).
+
+It achieves this via static analysis by using [oxc-parser](https://www.npmjs.com/package/oxc-parser), as such it is limited to static expressions. The plugin will ignore dynamic or complex expressions.
+
+The plugin does not process the CSS in any way whatsoever, it is merely output in virtual CSS files for Rolldown and Vite to handle. Separate plugins may be used to process these virtual CSS files.
+
+## Installation
+
+```
+npm install -D ecij
+```
+
+## Usage
+
+Source input:
+
+```ts
+/* main.ts */
+import { css } from 'ecij';
+import { redClassname } from './styles';
+
+const myButtonClassname = css`
+  border: 1px solid blue;
+
+  &.${redClassname} {
+    border-color: red;
+  }
+`;
+```
+
+```ts
+/* styles.ts */
+import { css } from 'ecij';
+
+const color = 'red';
+
+export const redClassname = css`
+  color: ${color};
+`;
+```
+
+Build output:
+
+```js
+/* js */
+const color = 'red';
+
+const redClassname = 'css-a1b2c3d4';
+
+const myButtonClassname = 'css-1d2c3b4a';
+```
+
+```css
+/* css */
+.css-a1b2c3d4 {
+  color: red;
+}
+
+.css-1d2c3b4a {
+  border: 1px solid blue;
+
+  &.css-a1b2c3d4 {
+    border-color: red;
+  }
+}
+```
+
+## Set up
+
+In `rolldown.config.ts`:
+
+```ts
+import { defineConfig } from 'rolldown';
+import { ecij } from 'ecij/plugin';
+
+export default defineConfig({
+  // ...
+  plugins: [ecij()],
+});
+```
+
+In `vite.config.ts`:
+
+```ts
+import { defineConfig } from 'vite';
+import { ecij } from 'ecij/plugin';
+
+export default defineConfig({
+  // ...
+  plugins: [ecij()],
+});
+```
+
+## Configuration
+
+The `ecij()` plugin accepts an optional configuration object:
+
+```ts
+export interface Configuration {
+  /**
+   * Prefix for generated CSS class names.
+   * Should not be empty, as generated hashes may start with a digit, resulting in invalid CSS class names.
+   * @default 'css-'
+   */
+  classPrefix?: string;
+}
+```
+
+**Example:**
+
+```ts
+ecij({
+  classPrefix: 'lib-',
+});
+```
+
+## TODO
+
+- Tests
+- Support `include`/`exclude` configuration
+- Scope handling
+- Validate that the `css` used refers to
+- Full import/export handling (default/namespace import/export)
+- Sourcemaps

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+import { Plugin } from "rolldown";
+
+//#region src/index.d.ts
+interface Configuration {
+  /**
+  * Prefix for generated CSS class names.
+  * Should not be empty, as generated hashes may start with a digit, resulting in invalid CSS class names.
+  * @default 'css-'
+  */
+  classPrefix?: string;
+}
+declare function ecij({
+  classPrefix
+}?: Configuration): Plugin;
+//#endregion
+export { Configuration, ecij };

package/dist/index.js

@@ -0,0 +1,235 @@
+import { createHash } from "node:crypto";
+import { relative } from "node:path";
+import { cwd } from "node:process";
+import { Visitor, parseSync } from "oxc-parser";
+
+//#region src/index.ts
+const JS_TS_FILE_REGEX = /\.[jtc]sx?$/;
+const PROJECT_ROOT = cwd();
+function hashText(text) {
+	return createHash("md5").update(text).digest("hex").slice(0, 8);
+}
+/**
+* Removes the import statement for 'ecij'
+*/
+function removeImport(code) {
+	return code.replace(/import\s+{\s*css\s*}\s+from\s+['"]ecij['"];?\s*/g, "");
+}
+/**
+* Adds import for CSS module at the top of the file
+*/
+function addCssImport(code, cssModuleId) {
+	return `import ${JSON.stringify(cssModuleId)};\n\n${code}`;
+}
+function ecij({ classPrefix = "css-" } = {}) {
+	const extractedCssPerFile = /* @__PURE__ */ new Map();
+	const importedClassNameCache = /* @__PURE__ */ new Map();
+	/**
+	* Generates a consistent, unique class name based on file path and variable name or index
+	*/
+	function generateClassName(filePath, index, variableName) {
+		return `${classPrefix}${hashText(`${relative(PROJECT_ROOT, filePath).replaceAll("\\", "/")}:${index}:${variableName}`)}`;
+	}
+	/**
+	* Resolves an imported class name by reading and processing the source file
+	*/
+	async function resolveImportedClassName(context, importerPath, importSource, exportedName) {
+		const resolvedId = await context.resolve(importSource, importerPath);
+		if (resolvedId == null) return;
+		const resolvedPath = resolvedId.id;
+		const cacheKey = `${resolvedPath}:${exportedName}`;
+		if (importedClassNameCache.has(cacheKey)) return importedClassNameCache.get(cacheKey);
+		const parseResult = parseSync(resolvedPath, await context.fs.readFile(resolvedPath, { encoding: "utf8" }));
+		const localNameToExportedNameMap = /* @__PURE__ */ new Map();
+		for (const staticExport of parseResult.module.staticExports) for (const entry of staticExport.entries) {
+			if (entry.importName.kind !== "None") continue;
+			if (entry.exportName.kind === "Name" && entry.localName.kind === "Name") {
+				const localName = entry.localName.name;
+				const exportedName$1 = entry.exportName.name;
+				localNameToExportedNameMap.set(localName, exportedName$1);
+			}
+		}
+		const declarations = [];
+		const taggedTemplateExpressionFromVariableDeclarator = /* @__PURE__ */ new Set();
+		function handleTaggedTemplateExpression(varName, node) {
+			if (node.tag.type === "Identifier" && node.tag.name === "css") declarations.push({
+				index: declarations.length,
+				varName,
+				node,
+				hasInterpolations: node.quasi.expressions.length > 0
+			});
+		}
+		new Visitor({
+			VariableDeclarator(node) {
+				if (node.init === null || node.id.type !== "Identifier") return;
+				const localName = node.id.name;
+				if (node.init.type === "TaggedTemplateExpression") {
+					taggedTemplateExpressionFromVariableDeclarator.add(node.init);
+					handleTaggedTemplateExpression(localName, node.init);
+				} else if (node.init.type === "Literal" && typeof node.init.value === "string") {
+					const exportedName$1 = localNameToExportedNameMap.get(localName);
+					if (exportedName$1 === void 0) return;
+					const cacheKey$1 = `${resolvedPath}:${exportedName$1}`;
+					importedClassNameCache.set(cacheKey$1, node.init.value);
+				}
+			},
+			TaggedTemplateExpression(node) {
+				if (taggedTemplateExpressionFromVariableDeclarator.has(node)) return;
+				handleTaggedTemplateExpression(void 0, node);
+			}
+		}).visit(parseResult.program);
+		for (const declaration of declarations) {
+			const localName = declaration.varName;
+			if (localName === void 0) continue;
+			const exportedName$1 = localNameToExportedNameMap.get(localName);
+			if (exportedName$1 === void 0) continue;
+			const cacheKey$1 = `${resolvedPath}:${exportedName$1}`;
+			const className = generateClassName(resolvedPath, declaration.index, localName);
+			importedClassNameCache.set(cacheKey$1, className);
+		}
+		return importedClassNameCache.get(cacheKey);
+	}
+	/**
+	* Extracts CSS from template literals in the source code using AST parsing
+	* Supports interpolations of class names (both local and imported)
+	*/
+	async function extractCssFromCode(context, code, filePath) {
+		const cssExtractions = [];
+		const replacements = [];
+		const localClassNames = /* @__PURE__ */ new Map();
+		const imports = /* @__PURE__ */ new Map();
+		function resolveClassName(identifierName) {
+			if (localClassNames.has(identifierName)) return localClassNames.get(identifierName);
+			if (imports.has(identifierName)) {
+				const { source, imported } = imports.get(identifierName);
+				return resolveImportedClassName(context, filePath, source, imported);
+			}
+		}
+		const parseResult = parseSync(filePath, code);
+		for (const staticImport of parseResult.module.staticImports) for (const entry of staticImport.entries) if (entry.importName.kind === "Name") imports.set(entry.localName.value, {
+			source: staticImport.moduleRequest.value,
+			imported: entry.importName.name
+		});
+		const declarations = [];
+		const taggedTemplateExpressionFromVariableDeclarator = /* @__PURE__ */ new Set();
+		function handleTaggedTemplateExpression(varName, node) {
+			if (node.tag.type === "Identifier" && node.tag.name === "css") declarations.push({
+				index: declarations.length,
+				varName,
+				node,
+				hasInterpolations: node.quasi.expressions.length > 0
+			});
+		}
+		new Visitor({
+			VariableDeclarator(node) {
+				if (node.init === null || node.id.type !== "Identifier") return;
+				const localName = node.id.name;
+				if (node.init.type === "TaggedTemplateExpression") {
+					taggedTemplateExpressionFromVariableDeclarator.add(node.init);
+					handleTaggedTemplateExpression(localName, node.init);
+				} else if (node.init.type === "Literal" && typeof node.init.value === "string") localClassNames.set(localName, node.init.value);
+			},
+			TaggedTemplateExpression(node) {
+				if (taggedTemplateExpressionFromVariableDeclarator.has(node)) return;
+				handleTaggedTemplateExpression(void 0, node);
+			}
+		}).visit(parseResult.program);
+		function addProcessedDeclaration(declaration, cssContent$1) {
+			const className = generateClassName(filePath, declaration.index, declaration.varName);
+			if (declaration.varName) localClassNames.set(declaration.varName, className);
+			cssExtractions.push({
+				className,
+				cssContent: cssContent$1.trim(),
+				sourcePosition: declaration.node.start
+			});
+			replacements.push({
+				start: declaration.node.start,
+				end: declaration.node.end,
+				className
+			});
+		}
+		for (const declaration of declarations) {
+			if (declaration.hasInterpolations) continue;
+			const cssContent$1 = declaration.node.quasi.quasis[0].value.raw;
+			addProcessedDeclaration(declaration, cssContent$1);
+		}
+		for (const declaration of declarations) {
+			if (!declaration.hasInterpolations) continue;
+			const { quasis, expressions } = declaration.node.quasi;
+			let cssContent$1 = "";
+			let allResolved = true;
+			for (let i = 0; i < quasis.length; i++) {
+				cssContent$1 += quasis[i].value.raw;
+				if (i < expressions.length) {
+					const expression = expressions[i];
+					if (expression.type !== "Identifier") {
+						allResolved = false;
+						break;
+					}
+					const identifierName = expression.name;
+					const resolvedClassName = await resolveClassName(identifierName);
+					if (resolvedClassName === void 0) {
+						allResolved = false;
+						break;
+					}
+					cssContent$1 += resolvedClassName;
+				}
+			}
+			if (allResolved) addProcessedDeclaration(declaration, cssContent$1);
+		}
+		if (replacements.length === 0) return {
+			transformedCode: code,
+			hasExtractions: false,
+			cssContent: "",
+			hasUnprocessedCssBlocks: false
+		};
+		replacements.sort((a, b) => b.start - a.start);
+		let transformedCode = code;
+		for (const { start, end, className } of replacements) transformedCode = `${transformedCode.slice(0, start)}'${className}'${transformedCode.slice(end)}`;
+		const hasUnprocessedCssBlocks = declarations.length > replacements.length;
+		cssExtractions.sort((a, b) => a.sourcePosition - b.sourcePosition);
+		const cssBlocks = [];
+		for (const { className, cssContent: cssContent$1 } of cssExtractions) if (cssContent$1 !== "") cssBlocks.push(`.${className} {\n  ${cssContent$1}\n}`);
+		const cssContent = cssBlocks.join("\n\n");
+		return {
+			transformedCode,
+			hasExtractions: true,
+			cssContent,
+			hasUnprocessedCssBlocks
+		};
+	}
+	return {
+		name: "ecij",
+		buildStart() {
+			extractedCssPerFile.clear();
+			importedClassNameCache.clear();
+		},
+		resolveId(id) {
+			if (extractedCssPerFile.has(id)) return { id };
+			return null;
+		},
+		load(id) {
+			if (extractedCssPerFile.has(id)) return extractedCssPerFile.get(id);
+			return null;
+		},
+		async transform(code, id) {
+			const queryIndex = id.indexOf("?");
+			const cleanId = queryIndex === -1 ? id : id.slice(0, queryIndex);
+			if (!JS_TS_FILE_REGEX.test(cleanId)) return null;
+			if (!code.includes("ecij")) return null;
+			const { transformedCode, hasExtractions, cssContent, hasUnprocessedCssBlocks } = await extractCssFromCode(this, code, cleanId);
+			if (!hasExtractions) return null;
+			let finalCode = transformedCode;
+			if (cssContent !== "") {
+				const cssModuleId = `${cleanId}.${hashText(cssContent)}.css`;
+				extractedCssPerFile.set(cssModuleId, cssContent);
+				finalCode = addCssImport(finalCode, cssModuleId);
+			}
+			if (!hasUnprocessedCssBlocks) finalCode = removeImport(finalCode);
+			return finalCode;
+		}
+	};
+}
+
+//#endregion
+export { ecij };

package/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @example
+ * input:
+ * ```js
+ * import { css } from 'ecij';
+ *
+ * const myClass = css`
+ *   color: red;
+ * `;
+ * ```
+ *
+ * output:
+ * ```js
+ * const myClass = 'css-a1b2c3d4';
+ * ```
+ */
+export function css(
+  strings: TemplateStringsArray,
+  ...expressions: Array<string>
+): string;

package/index.js

@@ -0,0 +1,3 @@
+export function css() {
+  throw new Error('css`` should have been transformed by the ecij plugin');
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "ecij",
+  "version": "0.1.1",
+  "description": "Rolldown and Vite plugin to Extract CSS-in-JS",
+  "keywords": [
+    "css-in-js"
+  ],
+  "homepage": "https://github.com/nstepien/ecij#readme",
+  "bugs": {
+    "url": "https://github.com/nstepien/ecij/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nstepien/ecij.git"
+  },
+  "license": "MIT",
+  "author": "Nicolas Stepien",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    },
+    "./plugin": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "main": "index.js",
+  "files": [
+    "dist",
+    "index.d.ts"
+  ],
+  "scripts": {
+    "build": "rolldown -c",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "oxc-parser": "^0.97.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "prettier": "^3.6.2",
+    "rolldown": "^1.0.0-beta.50",
+    "rolldown-plugin-dts": "^0.17.7",
+    "typescript": "^5.9.3"
+  }
+}