ecij 0.1.1 → 0.3.0

package/README.md

@@ -1,5 +1,8 @@
 # ecij
 
+[![npm version](https://img.shields.io/npm/v/ecij)](https://www.npmjs.com/package/ecij)
+[![CI](https://github.com/nstepien/ecij/actions/workflows/ci.yml/badge.svg)](https://github.com/nstepien/ecij/actions/workflows/ci.yml)
+
 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.
@@ -8,7 +11,7 @@ The plugin does not process the CSS in any way whatsoever, it is merely output i
 
 ## Installation
 
-```
+```bash
 npm install -D ecij
 ```
 
@@ -99,6 +102,20 @@ The `ecij()` plugin accepts an optional configuration object:
 
 ```ts
 export interface Configuration {
+  /**
+   * Include patterns for files to process.
+   * Can be a string, RegExp, or array of strings/RegExp.
+   * @default /\.[cm]?[jt]sx?$/
+   */
+  include?: string | RegExp | ReadonlyArray<string | RegExp>;
+
+  /**
+   * Exclude patterns for files to skip.
+   * Can be a string, RegExp, or array of strings/RegExp.
+   * @default [/\/node_modules\//, /\.d\.ts$/]
+   */
+  exclude?: string | RegExp | ReadonlyArray<string | RegExp>;
+
   /**
    * Prefix for generated CSS class names.
    * Should not be empty, as generated hashes may start with a digit, resulting in invalid CSS class names.
@@ -116,11 +133,45 @@ ecij({
 });
 ```
 
+## Development
+
+### Building
+
+```bash
+npm run build
+```
+
+### Formatting
+
+```bash
+npm run format
+```
+
+### Type Checking
+
+```bash
+npm run typecheck
+```
+
+### Running Tests
+
+The project uses **integration tests** with **inline snapshot testing** to validate transformations.
+
+```bash
+# Run tests once
+npm test
+
+# Run tests with coverage
+npm run test:coverage
+
+# Update inline snapshots after intentional changes
+npm test -- -u
+```
+
 ## TODO
 
-- Tests
-- Support `include`/`exclude` configuration
+- Log CSS extraction failures
 - Scope handling
-- Validate that the `css` used refers to
+- Validate that the `css` used refers to the ecij export
 - Full import/export handling (default/namespace import/export)
 - Sourcemaps

package/dist/index.d.ts

@@ -2,6 +2,18 @@ import { Plugin } from "rolldown";
 
 //#region src/index.d.ts
 interface Configuration {
+  /**
+  * Include patterns for files to process.
+  * Can be a string, RegExp, or array of strings/RegExp.
+  * @default /\.[cm]?[jt]sx?$/
+  */
+  include?: string | RegExp | ReadonlyArray<string | RegExp>;
+  /**
+  * Exclude patterns for files to skip.
+  * Can be a string, RegExp, or array of strings/RegExp.
+  * @default [/\/node_modules\//, /\.d\.ts$/]
+  */
+  exclude?: string | RegExp | ReadonlyArray<string | RegExp>;
   /**
   * Prefix for generated CSS class names.
   * Should not be empty, as generated hashes may start with a digit, resulting in invalid CSS class names.
@@ -10,6 +22,8 @@ interface Configuration {
   classPrefix?: string;
 }
 declare function ecij({
+  include,
+  exclude,
   classPrefix
 }?: Configuration): Plugin;
 //#endregion

package/dist/index.js

@@ -2,62 +2,75 @@ import { createHash } from "node:crypto";
 import { relative } from "node:path";
 import { cwd } from "node:process";
 import { Visitor, parseSync } from "oxc-parser";
+import { makeIdFiltersToMatchWithQuery } from "@rolldown/pluginutils";
 
 //#region src/index.ts
-const JS_TS_FILE_REGEX = /\.[jtc]sx?$/;
+const JS_TS_FILE_REGEX = /\.[cm]?[jt]sx?$/;
+const NODE_MODULES_REGEX = /\/node_modules\//;
+const D_TS_FILE_REGEX = /\.d\.ts$/;
 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-" } = {}) {
+function ecij({ include = JS_TS_FILE_REGEX, exclude = [NODE_MODULES_REGEX, D_TS_FILE_REGEX], classPrefix = "css-" } = {}) {
+	const parsedFileInfoCache = /* @__PURE__ */ new Map();
 	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
+	* Parses a file and extracts all relevant information in a single pass
 	*/
-	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" }));
+	async function parseFile(context, filePath, code) {
+		if (code === void 0 && parsedFileInfoCache.has(filePath)) return parsedFileInfoCache.get(filePath);
+		const relativePath = relative(PROJECT_ROOT, filePath).replaceAll("\\", "/");
+		const parseResult = parseSync(filePath, code ?? await context.fs.readFile(filePath, { encoding: "utf8" }));
+		const declarations = [];
+		const localIdentifiers = /* @__PURE__ */ new Map();
+		const importedIdentifiers = /* @__PURE__ */ new Map();
+		const exportNameToValueMap = /* @__PURE__ */ new Map();
 		const localNameToExportedNameMap = /* @__PURE__ */ new Map();
+		const taggedTemplateExpressionFromVariableDeclarator = /* @__PURE__ */ new Set();
+		let hasCSSTagImport = false;
+		const parsedInfo = {
+			declarations,
+			localIdentifiers,
+			importedIdentifiers,
+			exportNameToValueMap
+		};
+		parsedFileInfoCache.set(filePath, parsedInfo);
+		for (const staticImport of parseResult.module.staticImports) for (const entry of staticImport.entries) if (entry.importName.kind === "Name") {
+			const source = staticImport.moduleRequest.value;
+			const imported = entry.importName.name;
+			const localName = entry.localName.value;
+			if (source === "ecij" && imported === "css" && localName === "css") hasCSSTagImport = true;
+			importedIdentifiers.set(localName, {
+				source,
+				imported
+			});
+		}
 		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 exportedName = entry.exportName.name;
+				localNameToExportedNameMap.set(localName, exportedName);
 			}
 		}
-		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,
+		function recordIdentifierWithValue(localName, value) {
+			localIdentifiers.set(localName, value);
+			if (localNameToExportedNameMap.has(localName)) {
+				const exportedName = localNameToExportedNameMap.get(localName);
+				exportNameToValueMap.set(exportedName, value);
+			}
+		}
+		function handleTaggedTemplateExpression(localName, node) {
+			if (!(hasCSSTagImport && node.tag.type === "Identifier" && node.tag.name === "css")) return;
+			const index = declarations.length;
+			const className = `${classPrefix}${hashText(`${relativePath}:${index}:${localName}`)}`;
+			declarations.push({
+				className,
 				node,
-				hasInterpolations: node.quasi.expressions.length > 0
+				hasInterpolations: node.quasi.expressions.length !== 0
 			});
+			if (localName !== void 0) recordIdentifierWithValue(localName, className);
 		}
 		new Visitor({
 			VariableDeclarator(node) {
@@ -66,85 +79,48 @@ function ecij({ classPrefix = "css-" } = {}) {
 				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);
-				}
+				} else if (node.init.type === "Literal" && (typeof node.init.value === "string" || typeof node.init.value === "number")) recordIdentifierWithValue(localName, String(node.init.value));
 			},
 			TaggedTemplateExpression(node) {
-				if (taggedTemplateExpressionFromVariableDeclarator.has(node)) return;
-				handleTaggedTemplateExpression(void 0, node);
+				if (!taggedTemplateExpressionFromVariableDeclarator.has(node)) 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);
+		return parsedInfo;
 	}
 	/**
 	* Extracts CSS from template literals in the source code using AST parsing
-	* Supports interpolations of class names (both local and imported)
+	* Supports interpolations of strings and numbers (both local and imported)
 	*/
 	async function extractCssFromCode(context, code, filePath) {
+		const { declarations, localIdentifiers, importedIdentifiers } = await parseFile(context, filePath, code);
 		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 modulesWithSideEffects = /* @__PURE__ */ new Set();
+		async function resolveValue(identifierName) {
+			if (localIdentifiers.has(identifierName)) return localIdentifiers.get(identifierName);
+			if (importedIdentifiers.has(identifierName)) {
+				const { source, imported } = importedIdentifiers.get(identifierName);
+				const resolvedId = await context.resolve(source, filePath);
+				if (resolvedId != null) {
+					const { id } = resolvedId;
+					const { declarations: declarations$1, exportNameToValueMap } = await parseFile(context, id);
+					if (exportNameToValueMap.has(imported)) {
+						if (declarations$1.length !== 0) modulesWithSideEffects.add(id);
+						return exportNameToValueMap.get(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);
+			const { className, node } = declaration;
 			cssExtractions.push({
 				className,
 				cssContent: cssContent$1.trim(),
-				sourcePosition: declaration.node.start
+				sourcePosition: node.start
 			});
 			replacements.push({
-				start: declaration.node.start,
-				end: declaration.node.end,
+				start: node.start,
+				end: node.end,
 				className
 			});
 		}
@@ -167,12 +143,12 @@ function ecij({ classPrefix = "css-" } = {}) {
 						break;
 					}
 					const identifierName = expression.name;
-					const resolvedClassName = await resolveClassName(identifierName);
-					if (resolvedClassName === void 0) {
+					const resolvedValue = await resolveValue(identifierName);
+					if (resolvedValue === void 0) {
 						allResolved = false;
 						break;
 					}
-					cssContent$1 += resolvedClassName;
+					cssContent$1 += resolvedValue;
 				}
 			}
 			if (allResolved) addProcessedDeclaration(declaration, cssContent$1);
@@ -181,12 +157,11 @@ function ecij({ classPrefix = "css-" } = {}) {
 			transformedCode: code,
 			hasExtractions: false,
 			cssContent: "",
-			hasUnprocessedCssBlocks: false
+			modulesWithSideEffects
 		};
 		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}`);
@@ -195,38 +170,43 @@ function ecij({ classPrefix = "css-" } = {}) {
 			transformedCode,
 			hasExtractions: true,
 			cssContent,
-			hasUnprocessedCssBlocks
+			modulesWithSideEffects
 		};
 	}
 	return {
 		name: "ecij",
-		buildStart() {
+		buildEnd() {
+			parsedFileInfoCache.clear();
 			extractedCssPerFile.clear();
-			importedClassNameCache.clear();
 		},
 		resolveId(id) {
-			if (extractedCssPerFile.has(id)) return { id };
+			if (extractedCssPerFile.has(id)) return id;
+			if (parsedFileInfoCache.has(id) && parsedFileInfoCache.get(id).declarations.length !== 0) 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 !== "") {
+		transform: {
+			filter: { id: {
+				include: makeIdFiltersToMatchWithQuery(include),
+				exclude: makeIdFiltersToMatchWithQuery(exclude)
+			} },
+			async handler(code, id) {
+				if (!code.includes("ecij")) return null;
+				const queryIndex = id.indexOf("?");
+				const cleanId = queryIndex === -1 ? id : id.slice(0, queryIndex);
+				const { transformedCode, hasExtractions, cssContent, modulesWithSideEffects } = await extractCssFromCode(this, code, cleanId);
+				if (!hasExtractions) return null;
+				if (cssContent === "") return transformedCode;
 				const cssModuleId = `${cleanId}.${hashText(cssContent)}.css`;
 				extractedCssPerFile.set(cssModuleId, cssContent);
-				finalCode = addCssImport(finalCode, cssModuleId);
+				const importStatements = [];
+				for (const id$1 of modulesWithSideEffects) importStatements.push(`import ${JSON.stringify(id$1)};\n`);
+				importStatements.push(`import ${JSON.stringify(cssModuleId)}\n;`);
+				return `${importStatements.join("")}${transformedCode}`;
 			}
-			if (!hasUnprocessedCssBlocks) finalCode = removeImport(finalCode);
-			return finalCode;
 		}
 	};
 }

package/index.d.ts

@@ -16,5 +16,5 @@
  */
 export function css(
   strings: TemplateStringsArray,
-  ...expressions: Array<string>
+  ...expressions: Array<string | number>
 ): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecij",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "description": "Rolldown and Vite plugin to Extract CSS-in-JS",
   "keywords": [
     "css-in-js"
@@ -16,6 +16,7 @@
   "license": "MIT",
   "author": "Nicolas Stepien",
   "type": "module",
+  "sideEffects": false,
   "exports": {
     ".": {
       "types": "./index.d.ts",
@@ -35,16 +36,25 @@
     "build": "rolldown -c",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
-    "typecheck": "tsc"
+    "typecheck": "tsc --build",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "oxc-parser": "^0.97.0"
+    "@rolldown/pluginutils": "^1.0.0-beta.53",
+    "oxc-parser": "^0.102.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"
+    "@vitest/coverage-v8": "^4.0.15",
+    "prettier": "^3.7.4",
+    "rolldown": "^1.0.0-beta.53",
+    "rolldown-plugin-dts": "^0.18.3",
+    "typescript": "^5.9.3",
+    "vite": "npm:rolldown-vite@^7.2.10",
+    "vitest": "^4.0.15"
+  },
+  "overrides": {
+    "vite": "$vite"
   }
 }