@styleframe/transpiler 1.0.0 → 1.0.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @styleframe/transpiler
 
+## 1.0.2
+
+### Patch Changes
+
+- [#30](https://github.com/styleframe-dev/styleframe/pull/30) [`68cd004`](https://github.com/styleframe-dev/styleframe/commit/68cd004b04395797876b5e805c0b910d6b665f35) Thanks [@alexgrozav](https://github.com/alexgrozav)! - feat: Add support for custom transpile functions
+  refactor: Separate CSS and TS transpilation
+
+## 1.0.1
+
+### Patch Changes
+
+- Update README.md
+- Updated dependencies
+  - @styleframe/core@1.0.1
+
 ## 1.0.0
 
 ### Major Changes

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Alex Grozav
+
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@styleframe/transpiler",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
   "types": "./dist/transpiler.d.ts",
   "module": "./dist/transpiler.js",
@@ -14,15 +14,16 @@
   },
   "dependencies": {
     "scule": "^1.3.0",
-    "@styleframe/core": "^1.0.0"
+    "@styleframe/core": "^1.0.1"
   },
   "devDependencies": {
+    "@vitest/coverage-v8": "^3.2.4",
     "typescript": "^5.8.3",
     "vite": "^7.0.6",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.4",
-    "@styleframe/config-vite": "^1.0.0",
-    "@styleframe/config-typescript": "^1.0.0"
+    "@styleframe/config-typescript": "^1.0.1",
+    "@styleframe/config-vite": "^1.0.1"
   },
   "homepage": "https://github.com/styleframe-dev/styleframe#readme",
   "bugs": {
@@ -33,6 +34,9 @@
     "url": "git+https://github.com/styleframe-dev/styleframe.git"
   },
   "author": "Alex Grozav <alex@styleframe.dev>",
+  "overrides": {
+    "vite": "npm:rolldown-vite@latest"
+  },
   "scripts": {
     "dev": "vite build --watch",
     "build": "pnpm typecheck && vite build",

package/src/consume/at-rule.test.ts

@@ -5,14 +5,14 @@ import {
 	createRoot,
 } from "@styleframe/core";
 import { createAtRuleConsumer } from "./at-rule";
-import { consume } from "./consume";
+import { consumeCSS } from "./consume";
 
 describe("createAtRuleConsumer", () => {
 	let root: Root;
 	let atRule: ReturnType<typeof createAtRuleFunction>;
 	let ref: ReturnType<typeof createRefFunction>;
 
-	const consumeAtRule = createAtRuleConsumer(consume);
+	const consumeAtRule = createAtRuleConsumer(consumeCSS);
 	const options: StyleframeOptions = {};
 
 	beforeEach(() => {

package/src/consume/consume.test.ts

@@ -10,7 +10,7 @@ import {
 	createVariableFunction,
 	isUtility,
 } from "@styleframe/core";
-import { consume } from "./consume";
+import { consumeCSS } from "./consume";
 
 describe("consume", () => {
 	let root: Root;
@@ -37,21 +37,21 @@ describe("consume", () => {
 
 	it("should consume a variable instance", () => {
 		const colorVar = variable("primary-color", "#006cff");
-		const result = consume(colorVar, options);
+		const result = consumeCSS(colorVar, options);
 
 		expect(result).toBe("--primary-color: #006cff;");
 	});
 
 	it("should consume a reference instance", () => {
 		const colorRef = ref("primary-color");
-		const result = consume(colorRef, options);
+		const result = consumeCSS(colorRef, options);
 
 		expect(result).toBe("var(--primary-color)");
 	});
 
 	it("should consume a CSS instance", () => {
 		const cssValue = css`16px solid #000`;
-		const result = consume(cssValue, options);
+		const result = consumeCSS(cssValue, options);
 
 		expect(result).toBe("16px solid #000");
 	});
@@ -62,7 +62,7 @@ describe("consume", () => {
 			backgroundColor: "#006cff",
 		});
 
-		const result = consume(buttonSelector, options);
+		const result = consumeCSS(buttonSelector, options);
 
 		expect(result).toEqual(`.button {
 \tpadding: 0.5rem 1rem;
@@ -76,7 +76,7 @@ describe("consume", () => {
 			v("text-color", "#000000");
 		});
 
-		const result = consume(lightTheme, options);
+		const result = consumeCSS(lightTheme, options);
 
 		expect(result).toEqual(`[data-theme="light"] {
 \t--background-color: #ffffff;
@@ -89,7 +89,7 @@ describe("consume", () => {
 			fontSize: "18px",
 		});
 
-		const result = consume(mediaRule, options);
+		const result = consumeCSS(mediaRule, options);
 
 		expect(result).toEqual(`@media (min-width: 768px) {
 \tfont-size: 18px;
@@ -109,7 +109,7 @@ describe("consume", () => {
 		const marginUtility = root.children.find(
 			(u) => isUtility(u) && u.name === "margin",
 		);
-		const result = consume(marginUtility, options);
+		const result = consumeCSS(marginUtility, options);
 
 		expect(result).toEqual(`._margin\\:sm {
 \tmargin: 8px;
@@ -117,12 +117,12 @@ describe("consume", () => {
 	});
 
 	it("should consume primitive values", () => {
-		expect(consume("test string", options)).toBe("test string");
-		expect(consume(42, options)).toBe("42");
-		expect(consume(true, options)).toBe("true");
-		expect(consume(false, options)).toBe("false");
-		expect(consume(null, options)).toBe("");
-		expect(consume(undefined, options)).toBe("");
+		expect(consumeCSS("test string", options)).toBe("test string");
+		expect(consumeCSS(42, options)).toBe("42");
+		expect(consumeCSS(true, options)).toBe("true");
+		expect(consumeCSS(false, options)).toBe("false");
+		expect(consumeCSS(null, options)).toBe("");
+		expect(consumeCSS(undefined, options)).toBe("");
 	});
 
 	it("should consume complex nested structures", () => {
@@ -163,7 +163,7 @@ describe("consume", () => {
 			});
 		});
 
-		const result = consume(root, options);
+		const result = consumeCSS(root, options);
 		const expected = `:root {
 \t--card-bg: #ffffff;
 \t--card-shadow: 0 2px 4px rgba(0,0,0,0.1);
@@ -220,9 +220,9 @@ describe("consume", () => {
 			});
 		});
 
-		const selectorResult = consume(buttonSelector, options);
-		const cssResult = consume(borderStyle, options);
-		const themeResult = consume(brandTheme, options);
+		const selectorResult = consumeCSS(buttonSelector, options);
+		const cssResult = consumeCSS(borderStyle, options);
+		const themeResult = consumeCSS(brandTheme, options);
 
 		expect(selectorResult).toEqual(`.button {
 \tbackground-color: var(--brand-color);
@@ -245,9 +245,9 @@ describe("consume", () => {
 			color: colorRef,
 		});
 
-		const varResult = consume(colorVar, prefixOptions);
-		const refResult = consume(colorRef, prefixOptions);
-		const selectorResult = consume(buttonSelector, prefixOptions);
+		const varResult = consumeCSS(colorVar, prefixOptions);
+		const refResult = consumeCSS(colorRef, prefixOptions);
+		const selectorResult = consumeCSS(buttonSelector, prefixOptions);
 
 		expect(varResult).toBe("--app-primary: #006cff;");
 		expect(refResult).toBe("var(--app-secondary)");

package/src/consume/consume.ts

@@ -10,7 +10,7 @@ import {
 	isVariable,
 } from "@styleframe/core";
 import { createAtRuleConsumer } from "./at-rule";
-import { createCSSConsumer } from "./css";
+import { createCSSTemplateLiteralConsumer } from "./css";
 import { createPrimitiveConsumer } from "./primitive";
 import { createRefConsumer } from "./ref";
 import { createRootConsumer } from "./root";
@@ -22,17 +22,21 @@ import { createVariableConsumer } from "./variable";
 /**
  * Consumes any token instance and returns the CSS string representation
  */
-export function consume(instance: unknown, options: StyleframeOptions): string {
-	const consumeRoot = createRootConsumer(consume);
-	const consumeSelector = createSelectorConsumer(consume);
-	const consumeUtility = createUtilityConsumer(consume);
-	const consumeAtRule = createAtRuleConsumer(consume);
+export function consumeCSS(
+	instance: unknown,
+	options: StyleframeOptions,
+): string {
+	const consumeRoot = createRootConsumer(consumeCSS);
+	const consumeSelector = createSelectorConsumer(consumeCSS);
+	const consumeUtility = createUtilityConsumer(consumeCSS);
+	const consumeAtRule = createAtRuleConsumer(consumeCSS);
 	// const consumeRecipe = createRecipeConsumer(consume);
-	const consumeTheme = createThemeConsumer(consume);
-	const consumeVariable = createVariableConsumer(consume);
-	const consumeRef = createRefConsumer(consume);
-	const consumeCSS = createCSSConsumer(consume);
-	const consumePrimitive = createPrimitiveConsumer(consume);
+	const consumeTheme = createThemeConsumer(consumeCSS);
+	const consumeVariable = createVariableConsumer(consumeCSS);
+	const consumeRef = createRefConsumer(consumeCSS);
+	const consumeCSSTemplateLiteral =
+		createCSSTemplateLiteralConsumer(consumeCSS);
+	const consumePrimitive = createPrimitiveConsumer(consumeCSS);
 
 	switch (true) {
 		case isSelector(instance):
@@ -41,9 +45,6 @@ export function consume(instance: unknown, options: StyleframeOptions): string {
 			return consumeUtility(instance, options);
 		case isAtRule(instance):
 			return consumeAtRule(instance, options);
-		// case isRecipe(instance):
-		// 	return consumeRecipe(instance, options);
-		// 	break;
 		case isRoot(instance):
 			return consumeRoot(instance, options);
 		case isTheme(instance):
@@ -53,8 +54,28 @@ export function consume(instance: unknown, options: StyleframeOptions): string {
 		case isRef(instance):
 			return consumeRef(instance, options);
 		case isCSS(instance):
-			return consumeCSS(instance, options);
+			return consumeCSSTemplateLiteral(instance, options);
 		default:
 			return consumePrimitive(instance, options);
 	}
 }
+
+/**
+ * Consumes any token instance and returns the TS string representation
+ */
+export function consumeTS(
+	instance: unknown,
+	options: StyleframeOptions,
+): string {
+	// const consumeRecipe = createRecipeConsumer(consumeTS);
+
+	switch (true) {
+		case Array.isArray(instance):
+			return instance.map((item) => consumeTS(item, options)).join("\n");
+		// case isRecipe(instance):
+		// 	return consumeRecipe(instance, options);
+		// 	break;
+		default:
+			return "";
+	}
+}

package/src/consume/container.test.ts

@@ -10,7 +10,7 @@ import {
 	createVariableFunction,
 } from "@styleframe/core";
 import { createContainerConsumer } from "./container";
-import { consume } from "./consume";
+import { consumeCSS } from "./consume";
 
 describe("createContainerConsumer", () => {
 	let root: Root;
@@ -18,7 +18,7 @@ describe("createContainerConsumer", () => {
 	let ref: ReturnType<typeof createRefFunction>;
 	let selector: ReturnType<typeof createSelectorFunction>;
 
-	const consumeContainer = createContainerConsumer(consume);
+	const consumeContainer = createContainerConsumer(consumeCSS);
 	const options: StyleframeOptions = {};
 
 	beforeEach(() => {

package/src/consume/css.test.ts

@@ -5,8 +5,8 @@ import {
 	createRoot,
 	createVariableFunction,
 } from "@styleframe/core";
-import { createCSSConsumer } from "./css";
-import { consume } from "./consume";
+import { createCSSTemplateLiteralConsumer } from "./css";
+import { consumeCSS } from "./consume";
 
 describe("createCSSConsumer", () => {
 	let root: Root;
@@ -14,7 +14,8 @@ describe("createCSSConsumer", () => {
 	let variable: ReturnType<typeof createVariableFunction>;
 	let ref: ReturnType<typeof createRefFunction>;
 
-	const consumeCSS = createCSSConsumer(consume);
+	const consumeCSSTemplateLiteral =
+		createCSSTemplateLiteralConsumer(consumeCSS);
 	const options: StyleframeOptions = {};
 
 	beforeEach(() => {
@@ -26,7 +27,7 @@ describe("createCSSConsumer", () => {
 
 	it("should process a simple CSS value", () => {
 		const cssValue = css`16px`;
-		expect(consumeCSS(cssValue, options)).toBe("16px");
+		expect(consumeCSSTemplateLiteral(cssValue, options)).toBe("16px");
 	});
 
 	it("should handle CSS values with variable references", () => {
@@ -35,14 +36,14 @@ describe("createCSSConsumer", () => {
 			${ref(spacingVar)} calc(${ref(spacingVar)} * 2)
 		`;
 
-		expect(consumeCSS(paddingValue, options)).toBe(
+		expect(consumeCSSTemplateLiteral(paddingValue, options)).toBe(
 			"var(--spacing-md) calc(var(--spacing-md) * 2)",
 		);
 	});
 
 	it("should handle empty CSS values", () => {
 		const emptyCss = css``;
-		expect(consumeCSS(emptyCss, options)).toBe("");
+		expect(consumeCSSTemplateLiteral(emptyCss, options)).toBe("");
 	});
 
 	it("should respect prefix in options if provided", () => {
@@ -57,7 +58,7 @@ describe("createCSSConsumer", () => {
 			${ref(colorVar)}
 		`;
 
-		expect(consumeCSS(colorValue, prefixOptions)).toBe(
+		expect(consumeCSSTemplateLiteral(colorValue, prefixOptions)).toBe(
 			"var(--sf-color-primary)",
 		);
 	});
@@ -68,7 +69,7 @@ describe("createCSSConsumer", () => {
 			${zIndex}
 		`;
 
-		expect(consumeCSS(zIndexValue, options)).toBe("100");
+		expect(consumeCSSTemplateLiteral(zIndexValue, options)).toBe("100");
 	});
 
 	it("should handle CSS values with string interpolations", () => {
@@ -79,14 +80,16 @@ describe("createCSSConsumer", () => {
 			${borderWidth} ${borderStyle} ${borderColor}
 		`;
 
-		expect(consumeCSS(borderValue, options)).toBe("2px solid #000");
+		expect(consumeCSSTemplateLiteral(borderValue, options)).toBe(
+			"2px solid #000",
+		);
 	});
 
 	it("should handle CSS values with array interpolations", () => {
 		const gridAreas = ["header", "main", "footer"];
 		const gridTemplateValue = css`"${gridAreas[0]}" "${gridAreas[1]}" "${gridAreas[2]}"`;
 
-		expect(consumeCSS(gridTemplateValue, options)).toBe(
+		expect(consumeCSSTemplateLiteral(gridTemplateValue, options)).toBe(
 			'"header" "main" "footer"',
 		);
 	});
@@ -100,7 +103,7 @@ describe("createCSSConsumer", () => {
 			${ref(fontSize)}/${ref(lineHeight)} ${ref(fontFamily)}
 		`;
 
-		expect(consumeCSS(fontValue, options)).toBe(
+		expect(consumeCSSTemplateLiteral(fontValue, options)).toBe(
 			"var(--font-size-base)/var(--line-height-normal) var(--font-family-sans)",
 		);
 	});
@@ -109,7 +112,7 @@ describe("createCSSConsumer", () => {
 		const spacing = variable("spacing", "8px");
 		const calcValue = css`calc(100% - ${ref(spacing)} * 2)`;
 
-		expect(consumeCSS(calcValue, options)).toBe(
+		expect(consumeCSSTemplateLiteral(calcValue, options)).toBe(
 			"calc(100% - var(--spacing) * 2)",
 		);
 	});
@@ -118,7 +121,7 @@ describe("createCSSConsumer", () => {
 		const primaryColor = variable("color-primary", "#006cff");
 		const colorValue = css`rgba(${ref(primaryColor)}, 0.5)`;
 
-		expect(consumeCSS(colorValue, options)).toBe(
+		expect(consumeCSSTemplateLiteral(colorValue, options)).toBe(
 			"rgba(var(--color-primary), 0.5)",
 		);
 	});
@@ -129,7 +132,7 @@ describe("createCSSConsumer", () => {
 
 		const gradientValue = css`linear-gradient(135deg, ${ref(primaryColor)} 0%, ${ref(secondaryColor)} 100%)`;
 
-		expect(consumeCSS(gradientValue, options)).toBe(
+		expect(consumeCSSTemplateLiteral(gradientValue, options)).toBe(
 			"linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%)",
 		);
 	});
@@ -140,7 +143,7 @@ describe("createCSSConsumer", () => {
 			${isLarge ? "2rem" : "1rem"}
 		`;
 
-		expect(consumeCSS(conditionalValue, options)).toBe("2rem");
+		expect(consumeCSSTemplateLiteral(conditionalValue, options)).toBe("2rem");
 	});
 
 	it("should handle CSS values with fallback references", () => {
@@ -148,7 +151,7 @@ describe("createCSSConsumer", () => {
 			${ref("custom-spacing", "16px")}
 		`;
 
-		expect(consumeCSS(spacingValue, options)).toBe(
+		expect(consumeCSSTemplateLiteral(spacingValue, options)).toBe(
 			"var(--custom-spacing, 16px)",
 		);
 	});
@@ -164,7 +167,7 @@ describe("createCSSConsumer", () => {
 		`;
 
 		// The function might normalize whitespace
-		const result = consumeCSS(complexValue, options);
+		const result = consumeCSSTemplateLiteral(complexValue, options);
 		expect(result).toContain("var(--spacing) solid var(--color-primary)");
 		expect(result).toContain(
 			"calc(var(--spacing) * 2) dashed var(--color-secondary)",
@@ -177,7 +180,7 @@ describe("createCSSConsumer", () => {
 
 		const nestedValue = css`calc(${ref(baseSize)} * ${multiplier})`;
 
-		expect(consumeCSS(nestedValue, options)).toBe(
+		expect(consumeCSSTemplateLiteral(nestedValue, options)).toBe(
 			"calc(var(--size-base) * 1.5)",
 		);
 	});

package/src/consume/css.ts

@@ -4,7 +4,7 @@ import type { ConsumeFunction } from "../types";
 /**
  * Consumes a CSS value, equivalent to the string body of a selector
  */
-export function createCSSConsumer(consume: ConsumeFunction) {
+export function createCSSTemplateLiteralConsumer(consume: ConsumeFunction) {
 	return function consumeCSS(
 		instance: CSS,
 		options: StyleframeOptions,

package/src/consume/declarations.test.ts

@@ -5,7 +5,7 @@ import {
 	createRoot,
 	createVariableFunction,
 } from "@styleframe/core";
-import { consume } from "./consume";
+import { consumeCSS } from "./consume";
 import { createDeclarationsConsumer } from "./declarations";
 
 describe("createDeclarationsConsumer", () => {
@@ -14,7 +14,7 @@ describe("createDeclarationsConsumer", () => {
 	let variable: ReturnType<typeof createVariableFunction>;
 	let css: ReturnType<typeof createCssFunction>;
 
-	const consumeDeclarations = createDeclarationsConsumer(consume);
+	const consumeDeclarations = createDeclarationsConsumer(consumeCSS);
 	const options: StyleframeOptions = {};
 
 	beforeEach(() => {

package/src/consume/primitive.test.ts

@@ -1,9 +1,9 @@
 import type { StyleframeOptions } from "@styleframe/core";
 import { createPrimitiveConsumer } from "./primitive";
-import { consume } from "./consume";
+import { consumeCSS } from "./consume";
 
 describe("createPrimitiveConsumer", () => {
-	const consumePrimitive = createPrimitiveConsumer(consume);
+	const consumePrimitive = createPrimitiveConsumer(consumeCSS);
 	const options: StyleframeOptions = {};
 
 	it("should return a string representation of a number", () => {

package/src/consume/ref.test.ts

@@ -5,14 +5,14 @@ import {
 	createVariableFunction,
 } from "@styleframe/core";
 import { createRefConsumer } from "./ref";
-import { consume } from "./consume";
+import { consumeCSS } from "./consume";
 
 describe("createRefConsumer", () => {
 	let root: Root;
 	let ref: ReturnType<typeof createRefFunction>;
 	let variable: ReturnType<typeof createVariableFunction>;
 
-	const consumeRef = createRefConsumer(consume);
+	const consumeRef = createRefConsumer(consumeCSS);
 	const options: StyleframeOptions = {};
 
 	beforeEach(() => {

package/src/consume/root.test.ts

@@ -5,7 +5,7 @@ import {
 	createSelectorFunction,
 	createVariableFunction,
 } from "@styleframe/core";
-import { consume } from "./consume";
+import { consumeCSS } from "./consume";
 import { createRootConsumer } from "./root";
 
 describe("createRootConsumer", () => {
@@ -14,7 +14,7 @@ describe("createRootConsumer", () => {
 	let ref: ReturnType<typeof createRefFunction>;
 	let selector: ReturnType<typeof createSelectorFunction>;
 
-	const consumeRoot = createRootConsumer(consume);
+	const consumeRoot = createRootConsumer(consumeCSS);
 	const options: StyleframeOptions = {};
 
 	beforeEach(() => {

package/src/consume/selector.test.ts

@@ -8,7 +8,7 @@ import {
 	isSelector,
 } from "@styleframe/core";
 import { createSelectorConsumer } from "./selector";
-import { consume } from "./consume";
+import { consumeCSS } from "./consume";
 
 describe("createSelectorConsumer", () => {
 	let root: Root;
@@ -17,7 +17,7 @@ describe("createSelectorConsumer", () => {
 	let selector: ReturnType<typeof createSelectorFunction>;
 	let css: ReturnType<typeof createCssFunction>;
 
-	const consumeSelector = createSelectorConsumer(consume);
+	const consumeSelector = createSelectorConsumer(consumeCSS);
 	const options: StyleframeOptions = {};
 
 	beforeEach(() => {

package/src/consume/theme.test.ts

@@ -6,7 +6,7 @@ import {
 	createThemeFunction,
 	createVariableFunction,
 } from "@styleframe/core";
-import { consume } from "./consume";
+import { consumeCSS } from "./consume";
 import { createThemeConsumer } from "./theme";
 
 describe("createThemeConsumer", () => {
@@ -16,7 +16,7 @@ describe("createThemeConsumer", () => {
 	let ref: ReturnType<typeof createRefFunction>;
 	let css: ReturnType<typeof createCssFunction>;
 
-	const consumeTheme = createThemeConsumer(consume);
+	const consumeTheme = createThemeConsumer(consumeCSS);
 	const options: StyleframeOptions = {};
 
 	beforeEach(() => {

package/src/consume/utility.test.ts

@@ -10,7 +10,7 @@ import {
 	createUtilityFunction,
 	isUtility,
 } from "@styleframe/core";
-import { consume } from "./consume";
+import { consumeCSS } from "./consume";
 import { createUtilityConsumer } from "./utility";
 
 describe("createUtilityConsumer", () => {
@@ -19,7 +19,7 @@ describe("createUtilityConsumer", () => {
 	let utility: ReturnType<typeof createUtilityFunction>;
 	let modifier: ReturnType<typeof createModifierFunction>;
 
-	const consumeUtility = createUtilityConsumer(consume);
+	const consumeUtility = createUtilityConsumer(consumeCSS);
 	const options: StyleframeOptions = {};
 
 	beforeEach(() => {

package/src/consume/variable.test.ts

@@ -5,14 +5,14 @@ import {
 	createVariableFunction,
 } from "@styleframe/core";
 import { createVariableConsumer } from "./variable";
-import { consume } from "./consume";
+import { consumeCSS } from "./consume";
 
 describe("createVariableConsumer", () => {
 	let root: Root;
 	let variable: ReturnType<typeof createVariableFunction>;
 	let ref: ReturnType<typeof createRefFunction>;
 
-	const consumeVariable = createVariableConsumer(consume);
+	const consumeVariable = createVariableConsumer(consumeCSS);
 	const options: StyleframeOptions = {};
 
 	beforeEach(() => {

package/src/transpile.test.ts

@@ -62,9 +62,11 @@ describe("transpile", () => {
 		it("should transpile an empty Styleframe instance", () => {
 			const output = transpile(instance);
 
-			expect(output.files).toHaveLength(1);
+			expect(output.files).toHaveLength(2);
 			expect(output.files[0]!.name).toBe("index.css");
 			expect(output.files[0]!.content).toEqual("");
+			expect(output.files[1]!.name).toBe("index.ts");
+			expect(output.files[1]!.content).toEqual("");
 		});
 
 		it("should transpile a simple variable", () => {
@@ -72,11 +74,13 @@ describe("transpile", () => {
 
 			const output = transpile(instance);
 
-			expect(output.files).toHaveLength(1);
+			expect(output.files).toHaveLength(2);
 			expect(output.files[0]!.name).toBe("index.css");
 			expect(output.files[0]!.content).toEqual(`:root {
 \t--primary-color: #006cff;
 }`);
+			expect(output.files[1]!.name).toBe("index.ts");
+			expect(output.files[1]!.content).toEqual("");
 		});
 
 		it("should transpile multiple variables", () => {
@@ -522,7 +526,7 @@ describe("transpile", () => {
 			// Transpile the complex scenario
 			const output = transpile(instance);
 
-			expect(output.files).toHaveLength(1);
+			expect(output.files).toHaveLength(2);
 			expect(output.files[0]!.name).toBe("index.css");
 
 			const content = output.files[0]!.content;