purse-styles 0.1.2 → 0.2.0

package/README.md

@@ -50,6 +50,44 @@ Wrap your app in `PurseProvider`:
 
 That's all! No build step.
 
+## Variables
+
+Define typed CSS custom properties with `defineVars`. Defaults are injected on `:root` when a `PurseProvider` is mounted.
+
+```tsx
+import { PurseProvider, defineVars, style, useStyles } from "purse-styles"
+
+const DARK = "@media (prefers-color-scheme: dark)"
+
+export const colors = defineVars({
+	text: { default: "black", [DARK]: "white" },
+	background: { default: "white", [DARK]: "black" },
+	accent: "blue",
+})
+
+const container = style({
+	color: colors.text,
+	backgroundColor: colors.background,
+	borderColor: colors.accent,
+})
+
+function App() {
+	const className = useStyles(container)
+	return <main className={className}>...</main>
+}
+
+;<PurseProvider>
+	<App />
+</PurseProvider>
+```
+
+Notes:
+
+- Token names are generated (`var(--purse-<hash>-<key>)`). Identical definition objects share the same names.
+- Keys cannot start with `--`; Purse always generates the custom property name.
+- Conditional values use a required `default` plus CSS at-rule keys (`@media`, `@supports`, etc.), same family as nested keys in `style()`.
+- Variables are root-level only. There is no `createTheme` / subtree theme API. App-wide non-media modes can still override the generated custom properties with root attributes or `useInjectGlobalStyles`.
+
 ## Exports
 
 ```ts
@@ -66,10 +104,15 @@ export declare function useStyles(
 // Inject global styles into the app, you may want to do this as an escape hatch
 export declare function useInjectGlobalStyles(
 	selector: string,
-	cssProperties: BaseCSSProperties & CSSVarDeclarations,
+	cssProperties: BaseCSSProperties & CustomProperties,
 	deps: DependencyList,
 ): void
 
+// Define a typed variable group; defaults are registered on :root via PurseProvider
+export declare function defineVars<
+	const T extends Record<string, VariableDefinition>,
+>(definitions: T): VariableGroup<T>
+
 // Wrap your app in this so Purse can inject styles into the app
 export declare function PurseProvider(props: {
 	children?: React.ReactNode
@@ -82,6 +125,7 @@ export type InMemoryStyleApi = {
 	}
 	addStyleElement: StyleApi["addStyleElement"]
 	addGlobalStyle: StyleApi["addGlobalStyle"]
+	detachVariableGroups: () => void
 }
 export declare function createInMemoryStyleApi(): InMemoryStyleApi
 ```

package/dist/cssVar.d.ts

@@ -1,2 +1,32 @@
+import type CSS from "csstype";
+import { Destructor } from "./destructors";
 export type CSSVar = `var(--${string})`;
-export declare function createCssVar(name: string): CSSVar;
+export type VariablePrimitive = string | number;
+export type VariableCondition = `${CSS.AtRules}${string}`;
+export type ConditionalVariableValue<T extends VariablePrimitive = VariablePrimitive> = {
+    default: T;
+} & Partial<Record<VariableCondition, T>>;
+export type VariableDefinition = VariablePrimitive | ConditionalVariableValue;
+type NormalizedTokenDefinition = {
+    default: VariablePrimitive;
+    conditions: Record<string, VariablePrimitive>;
+};
+type NormalizedDefinitions = Record<string, NormalizedTokenDefinition>;
+export type VariableGroupMetadata = {
+    groupId: string;
+    definitions: NormalizedDefinitions;
+    names: Record<string, `--${string}`>;
+};
+export type VariableGroup<T extends Record<string, unknown>> = {
+    readonly [K in keyof T]: CSSVar;
+};
+export type AnyVariableGroup = VariableGroup<Record<string, unknown>>;
+export type VariableStyleSink = {
+    addGlobalStyle: (styleRule: string) => Destructor;
+};
+export declare function compileVariableGroupRules(metadata: VariableGroupMetadata): string[];
+export declare function subscribeVariableGroups(listener: (metadata: VariableGroupMetadata) => void): Destructor;
+export declare function attachVariableGroups(styleApi: VariableStyleSink): Destructor;
+export declare function defineVars<const T extends Record<string, VariableDefinition>>(definitions: T): VariableGroup<T>;
+export declare function getVariableGroupMetadata(group: AnyVariableGroup): VariableGroupMetadata;
+export {};

package/dist/index.d.ts

@@ -1 +1,2 @@
 export { CSSProperties, InMemoryStyleApi, PurseProvider, StyleApi, StyleArgument, StyleElement, createInMemoryStyleApi, style, useInjectGlobalStyles, useStyles, } from "./purse";
+export { AnyVariableGroup, CSSVar, ConditionalVariableValue, VariableCondition, VariableDefinition, VariableGroup, VariableGroupMetadata, VariablePrimitive, defineVars, getVariableGroupMetadata, } from "./cssVar";

package/dist/index.js

@@ -40,6 +40,134 @@ function toPhash(h, x) {
 }
 var hashObject = (value) => toAlphabeticName(toPhash(5381, JSON.stringify(value)) >>> 0);
 
+// src/cssVar.ts
+var VARIABLE_GROUP_META = Symbol("purse.variableGroup");
+var registeredGroups = /* @__PURE__ */ new Map();
+var listeners = /* @__PURE__ */ new Set();
+function normalizeDefinition(value) {
+  if (typeof value !== "object" || value === null) {
+    return { default: value, conditions: {} };
+  }
+  const conditions = {};
+  for (const key of Object.keys(value).sort()) {
+    if (key === "default") continue;
+    conditions[key] = value[key];
+  }
+  return {
+    default: value.default,
+    conditions
+  };
+}
+function canonicalizeDefinitions(definitions) {
+  const canonical = {};
+  for (const key of Object.keys(definitions).sort()) {
+    canonical[key] = normalizeDefinition(definitions[key]);
+  }
+  return canonical;
+}
+function assertValidTokenKeys(definitions) {
+  for (const key of Object.keys(definitions)) {
+    if (key.startsWith("--")) {
+      throw new Error(
+        `defineVars keys cannot start with "--" (received "${key}"). Purse generates custom property names automatically.`
+      );
+    }
+  }
+}
+function registerVariableGroup(metadata) {
+  if (registeredGroups.has(metadata.groupId)) {
+    return;
+  }
+  registeredGroups.set(metadata.groupId, metadata);
+  for (const listener of listeners) {
+    listener(metadata);
+  }
+}
+function compileVariableGroupRules(metadata) {
+  let rootDeclarations = "";
+  const declarationsByCondition = /* @__PURE__ */ new Map();
+  for (const key of Object.keys(metadata.definitions)) {
+    const definition = metadata.definitions[key];
+    const customProperty = metadata.names[key];
+    rootDeclarations += `${customProperty}:${definition.default};`;
+    for (const condition of Object.keys(definition.conditions).sort()) {
+      const existing = declarationsByCondition.get(condition) ?? "";
+      declarationsByCondition.set(
+        condition,
+        `${existing}${customProperty}:${definition.conditions[condition]};`
+      );
+    }
+  }
+  const rules = [`:root{${rootDeclarations}}`];
+  for (const condition of [...declarationsByCondition.keys()].sort()) {
+    rules.push(
+      `${condition}{:root{${declarationsByCondition.get(condition)}}}`
+    );
+  }
+  return rules;
+}
+function subscribeVariableGroups(listener) {
+  listeners.add(listener);
+  for (const metadata of registeredGroups.values()) {
+    listener(metadata);
+  }
+  return () => {
+    listeners.delete(listener);
+  };
+}
+function attachVariableGroups(styleApi) {
+  const insertedGroups = /* @__PURE__ */ new Map();
+  function ensureGroup(metadata) {
+    if (insertedGroups.has(metadata.groupId)) {
+      return;
+    }
+    const destructor = joinDestructors(
+      compileVariableGroupRules(metadata).map(
+        (rule) => styleApi.addGlobalStyle(rule)
+      )
+    );
+    insertedGroups.set(metadata.groupId, destructor);
+  }
+  const unsubscribe = subscribeVariableGroups(ensureGroup);
+  return () => {
+    unsubscribe();
+    for (const destructor of insertedGroups.values()) {
+      destructor();
+    }
+    insertedGroups.clear();
+  };
+}
+function defineVars(definitions) {
+  assertValidTokenKeys(definitions);
+  const canonicalDefinitions = canonicalizeDefinitions(definitions);
+  const groupId = hashObject(canonicalDefinitions);
+  const names = {};
+  const references = {};
+  for (const key of Object.keys(canonicalDefinitions)) {
+    const customProperty = `--purse-${groupId}-${key}`;
+    names[key] = customProperty;
+    references[key] = `var(${customProperty})`;
+  }
+  const metadata = {
+    groupId,
+    definitions: canonicalDefinitions,
+    names
+  };
+  Object.defineProperty(references, VARIABLE_GROUP_META, {
+    value: metadata,
+    enumerable: false
+  });
+  registerVariableGroup(metadata);
+  return references;
+}
+function getVariableGroupMetadata(group) {
+  const metadata = group[VARIABLE_GROUP_META];
+  if (!metadata) {
+    throw new Error("Expected a variable group created by defineVars");
+  }
+  return metadata;
+}
+
 // src/hyphenateStyleName.ts
 var uppercasePattern = /[A-Z]/g;
 var msPattern = /^ms-/;
@@ -186,9 +314,13 @@ function createInMemoryStyleApi() {
     }
     return () => removeStyleElement(styleElement);
   }
-  return {
+  const styleApi = {
     addStyleElement,
-    addGlobalStyle: addStyleRule,
+    addGlobalStyle: addStyleRule
+  };
+  return {
+    ...styleApi,
+    detachVariableGroups: attachVariableGroups(styleApi),
     styleRulesRef: {
       get current() {
         return styleRules;
@@ -285,16 +417,23 @@ function PurseProvider(props) {
     }
     return { addStyleElement, addGlobalStyle: addStyleRule };
   }, []);
+  useInsertionEffect(() => attachVariableGroups(styleApi), [styleApi]);
   return /* @__PURE__ */ jsx(PurseContext.Provider, { value: styleApi, children: props.children });
 }
+function isCustomProperty(name) {
+  return name.startsWith("--");
+}
 function compileDeclarations(declarations) {
-  return entries(declarations).map(([camelCaseProperty, value]) => {
-    const kebabProperty = hyphenateStyleName(camelCaseProperty);
-    const needToAddPixelsUnit = typeof value === "number" && !isUnitlessNumberProperty(kebabProperty);
+  return entries(declarations).map(([name, value]) => {
+    if (value === void 0 || value === null) {
+      return "";
+    }
+    const property = isCustomProperty(name) ? name : hyphenateStyleName(name);
+    const needToAddPixelsUnit = typeof value === "number" && !isCustomProperty(name) && !isUnitlessNumberProperty(property);
     if (needToAddPixelsUnit) {
-      return `${kebabProperty}:${value}px;`;
+      return `${property}:${value}px;`;
     } else {
-      return `${kebabProperty}:${value};`;
+      return `${property}:${value};`;
     }
   }).join("");
 }
@@ -421,6 +560,8 @@ function useStyles(...styleElementsOrCSS) {
 export {
   PurseProvider,
   createInMemoryStyleApi,
+  defineVars,
+  getVariableGroupMetadata,
   style,
   useInjectGlobalStyles,
   useStyles

package/dist/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../src/purse.tsx", "../src/clsx.ts", "../src/destructors.ts", "../src/hashObject.ts", "../src/hyphenateStyleName.ts", "../src/useRequiredContext.tsx"],
-  "mappings": "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",
+  "sources": ["../src/purse.tsx", "../src/clsx.ts", "../src/destructors.ts", "../src/hashObject.ts", "../src/cssVar.ts", "../src/hyphenateStyleName.ts", "../src/useRequiredContext.tsx"],
+  "mappings": "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",
   "names": ["rule", "styleRules", "value", "composed"]
 }

package/dist/purse.d.ts

@@ -1,14 +1,16 @@
 import CSS from "csstype";
 import React, { DependencyList } from "react";
-import { CSSVar } from "./cssVar";
 import { Destructor } from "./destructors";
 type BaseCSSProperties = CSS.Properties<number | string, string & {}>;
-type CSSVarDeclarations = Record<CSSVar, string>;
+type CustomProperties = {
+    [name: `--${string}`]: string | number | undefined;
+};
+type Declarations = BaseCSSProperties & CustomProperties;
 type NestedRuleKey = `&${CSS.SimplePseudos}` | `${CSS.AtRules}${string}` | `.${string}` | `&${string}`;
 export type CSSProperties = {
     [Key in keyof BaseCSSProperties]?: BaseCSSProperties[Key];
-} & {
-    [Key in NestedRuleKey]?: BaseCSSProperties;
+} & CustomProperties & {
+    [Key in NestedRuleKey]?: Declarations;
 };
 export type StyleApi = {
     addStyleElement: (styleElement: StyleElement) => Destructor;
@@ -31,6 +33,7 @@ export type InMemoryStyleApi = {
     };
     addStyleElement: StyleApi["addStyleElement"];
     addGlobalStyle: StyleApi["addGlobalStyle"];
+    detachVariableGroups: Destructor;
 };
 export declare function createInMemoryStyleApi(): InMemoryStyleApi;
 export declare function PurseProvider(props: {
@@ -38,6 +41,6 @@ export declare function PurseProvider(props: {
 }): import("react/jsx-runtime").JSX.Element;
 export type StyleArgument = CSSProperties | StyleElement | false | null | undefined;
 export declare function style(...styleElementsOrCSS: StyleArgument[]): StyleElement;
-export declare function useInjectGlobalStyles(selector: string, cssProperties: BaseCSSProperties & CSSVarDeclarations, deps: DependencyList): void;
+export declare function useInjectGlobalStyles(selector: string, cssProperties: Declarations, deps: DependencyList): void;
 export declare function useStyles(...styleElementsOrCSS: StyleArgument[]): string;
 export {};

package/package.json

@@ -2,7 +2,7 @@
 	"name": "purse-styles",
 	"type": "module",
 	"main": "./dist/index.js",
-	"version": "0.1.2",
+	"version": "0.2.0",
 	"author": "Tanishq Kancharla <tanishqkancharla3@gmail.com>",
 	"description": "A basic styling solution for web apps with an emphasis on simplicity and purity.",
 	"keywords": [],

package/src/cssVar.test.ts

@@ -0,0 +1,238 @@
+import assert from "assert"
+import { describe, expect, expectTypeOf, it } from "vitest"
+import {
+	CSSVar,
+	compileVariableGroupRules,
+	defineVars,
+	getVariableGroupMetadata,
+} from "./cssVar"
+import { createInMemoryStyleApi, style } from "./purse"
+
+function expectInjectedRules(
+	api: ReturnType<typeof createInMemoryStyleApi>,
+	metadata: ReturnType<typeof getVariableGroupMetadata>,
+) {
+	for (const rule of compileVariableGroupRules(metadata)) {
+		expect(api.styleRulesRef.current).toContain(rule)
+	}
+}
+
+describe("defineVars", () => {
+	it("returns typed var() references for each key", () => {
+		const colors = defineVars({
+			text: "black",
+			accent: "blue",
+		})
+
+		expectTypeOf(colors.text).toEqualTypeOf<CSSVar>()
+		expectTypeOf(colors.accent).toEqualTypeOf<CSSVar>()
+		expect(colors.text).toMatch(/^var\(--purse-[A-Za-z]+-text\)$/)
+		expect(colors.accent).toMatch(/^var\(--purse-[A-Za-z]+-accent\)$/)
+	})
+
+	it("generates deterministic names for the same definitions", () => {
+		const first = defineVars({
+			text: "black",
+			accent: "blue",
+		})
+		const second = defineVars({
+			text: "black",
+			accent: "blue",
+		})
+
+		expect(first.text).toBe(second.text)
+		expect(first.accent).toBe(second.accent)
+		expect(getVariableGroupMetadata(first).groupId).toBe(
+			getVariableGroupMetadata(second).groupId,
+		)
+	})
+
+	it("ignores object key insertion order when hashing", () => {
+		const first = defineVars({
+			text: "black",
+			accent: "blue",
+		})
+		const second = defineVars({
+			accent: "blue",
+			text: "black",
+		})
+
+		expect(first.text).toBe(second.text)
+		expect(first.accent).toBe(second.accent)
+	})
+
+	it("rejects keys that start with --", () => {
+		expect(() =>
+			defineVars({
+				"--brand": "blue",
+			}),
+		).toThrow(/cannot start with "--"/)
+	})
+
+	it("can be used as style values", () => {
+		const colors = defineVars({
+			text: "black",
+		})
+
+		const test = style({
+			color: colors.text,
+		})
+
+		assert(test.owned !== undefined)
+		expect(test.owned.styleRules).toContain(
+			`.${test.className}{color:${colors.text};}`,
+		)
+	})
+
+	it("stores canonical metadata for later registration", () => {
+		const colors = defineVars({
+			accent: "blue",
+			text: "black",
+		})
+
+		const metadata = getVariableGroupMetadata(colors)
+		expect(Object.keys(metadata.definitions)).toEqual(["accent", "text"])
+		expect(metadata.names.text).toBe(
+			colors.text.slice("var(".length, -1),
+		)
+	})
+})
+
+describe("variable group injection", () => {
+	it("compiles scalar defaults onto :root", () => {
+		const colors = defineVars({
+			accent: "blue",
+			text: "black",
+			space: 2,
+		})
+		const metadata = getVariableGroupMetadata(colors)
+
+		expect(compileVariableGroupRules(metadata)).toEqual([
+			`:root{${metadata.names.accent}:blue;${metadata.names.space}:2;${metadata.names.text}:black;}`,
+		])
+	})
+
+	it("injects already-registered groups when a style api attaches", () => {
+		const colors = defineVars({
+			phase3Existing: "navy",
+		})
+
+		const api = createInMemoryStyleApi()
+		expectInjectedRules(api, getVariableGroupMetadata(colors))
+	})
+
+	it("injects groups registered after a style api attaches", () => {
+		const api = createInMemoryStyleApi()
+		const colors = defineVars({
+			phase3Late: "teal",
+		})
+
+		expectInjectedRules(api, getVariableGroupMetadata(colors))
+	})
+
+	it("deduplicates identical variable groups into one root rule", () => {
+		const api = createInMemoryStyleApi()
+		const first = defineVars({
+			phase3Deduped: "purple",
+		})
+		defineVars({
+			phase3Deduped: "purple",
+		})
+
+		const [expectedRule] = compileVariableGroupRules(
+			getVariableGroupMetadata(first),
+		)
+		expect(
+			api.styleRulesRef.current.filter((rule) => rule === expectedRule),
+		).toHaveLength(1)
+	})
+
+	it("removes injected variable rules when detached", () => {
+		const colors = defineVars({
+			phase3Cleanup: "orange",
+		})
+		const expectedRules = compileVariableGroupRules(
+			getVariableGroupMetadata(colors),
+		)
+		const api = createInMemoryStyleApi()
+
+		expectInjectedRules(api, getVariableGroupMetadata(colors))
+		api.detachVariableGroups()
+		for (const rule of expectedRules) {
+			expect(api.styleRulesRef.current).not.toContain(rule)
+		}
+	})
+})
+
+describe("conditional variable values", () => {
+	const DARK = "@media (prefers-color-scheme: dark)"
+
+	it("compiles defaults and at-rule overrides", () => {
+		const colors = defineVars({
+			accent: "blue",
+			text: {
+				default: "black",
+				[DARK]: "white",
+			},
+		})
+		const metadata = getVariableGroupMetadata(colors)
+
+		expect(compileVariableGroupRules(metadata)).toEqual([
+			`:root{${metadata.names.accent}:blue;${metadata.names.text}:black;}`,
+			`${DARK}{:root{${metadata.names.text}:white;}}`,
+		])
+	})
+
+	it("groups multiple tokens that share a condition", () => {
+		const colors = defineVars({
+			background: {
+				default: "white",
+				[DARK]: "black",
+			},
+			text: {
+				default: "black",
+				[DARK]: "white",
+			},
+		})
+		const metadata = getVariableGroupMetadata(colors)
+
+		expect(compileVariableGroupRules(metadata)).toEqual([
+			`:root{${metadata.names.background}:white;${metadata.names.text}:black;}`,
+			`${DARK}{:root{${metadata.names.background}:black;${metadata.names.text}:white;}}`,
+		])
+	})
+
+	it("ignores condition key order when hashing", () => {
+		const first = defineVars({
+			text: {
+				default: "black",
+				"@supports (color: color(display-p3 1 1 1))": "red",
+				[DARK]: "white",
+			},
+		})
+		const second = defineVars({
+			text: {
+				[DARK]: "white",
+				"@supports (color: color(display-p3 1 1 1))": "red",
+				default: "black",
+			},
+		})
+
+		expect(first.text).toBe(second.text)
+		expect(getVariableGroupMetadata(first).groupId).toBe(
+			getVariableGroupMetadata(second).groupId,
+		)
+	})
+
+	it("injects conditional rules through the style api", () => {
+		const api = createInMemoryStyleApi()
+		const colors = defineVars({
+			phase4Conditional: {
+				default: "black",
+				[DARK]: "white",
+			},
+		})
+
+		expectInjectedRules(api, getVariableGroupMetadata(colors))
+	})
+})

package/src/cssVar.ts

@@ -1,5 +1,219 @@
+import type CSS from "csstype"
+import { Destructor, joinDestructors } from "./destructors"
+import { hashObject } from "./hashObject"
+
 export type CSSVar = `var(--${string})`
 
-export function createCssVar(name: string): CSSVar {
-	return `var(--${name})`
+export type VariablePrimitive = string | number
+
+export type VariableCondition = `${CSS.AtRules}${string}`
+
+export type ConditionalVariableValue<
+	T extends VariablePrimitive = VariablePrimitive,
+> = {
+	default: T
+} & Partial<Record<VariableCondition, T>>
+
+export type VariableDefinition =
+	| VariablePrimitive
+	| ConditionalVariableValue
+
+type NormalizedTokenDefinition = {
+	default: VariablePrimitive
+	conditions: Record<string, VariablePrimitive>
+}
+
+type NormalizedDefinitions = Record<string, NormalizedTokenDefinition>
+
+export type VariableGroupMetadata = {
+	groupId: string
+	definitions: NormalizedDefinitions
+	names: Record<string, `--${string}`>
+}
+
+export type VariableGroup<T extends Record<string, unknown>> = {
+	readonly [K in keyof T]: CSSVar
+}
+
+export type AnyVariableGroup = VariableGroup<Record<string, unknown>>
+
+export type VariableStyleSink = {
+	addGlobalStyle: (styleRule: string) => Destructor
+}
+
+const VARIABLE_GROUP_META = Symbol("purse.variableGroup")
+
+type VariableGroupWithMeta<T extends Record<string, unknown>> =
+	VariableGroup<T> & {
+		readonly [VARIABLE_GROUP_META]: VariableGroupMetadata
+	}
+
+const registeredGroups = new Map<string, VariableGroupMetadata>()
+const listeners = new Set<(metadata: VariableGroupMetadata) => void>()
+
+function normalizeDefinition(
+	value: VariableDefinition,
+): NormalizedTokenDefinition {
+	if (typeof value !== "object" || value === null) {
+		return { default: value, conditions: {} }
+	}
+
+	const conditions: Record<string, VariablePrimitive> = {}
+	for (const key of Object.keys(value).sort()) {
+		if (key === "default") continue
+		conditions[key] = value[key as VariableCondition]!
+	}
+
+	return {
+		default: value.default,
+		conditions,
+	}
+}
+
+function canonicalizeDefinitions(
+	definitions: Record<string, VariableDefinition>,
+): NormalizedDefinitions {
+	const canonical: NormalizedDefinitions = {}
+	for (const key of Object.keys(definitions).sort()) {
+		canonical[key] = normalizeDefinition(definitions[key]!)
+	}
+	return canonical
+}
+
+function assertValidTokenKeys(definitions: Record<string, VariableDefinition>) {
+	for (const key of Object.keys(definitions)) {
+		if (key.startsWith("--")) {
+			throw new Error(
+				`defineVars keys cannot start with "--" (received "${key}"). Purse generates custom property names automatically.`,
+			)
+		}
+	}
+}
+
+function registerVariableGroup(metadata: VariableGroupMetadata) {
+	if (registeredGroups.has(metadata.groupId)) {
+		return
+	}
+
+	registeredGroups.set(metadata.groupId, metadata)
+	for (const listener of listeners) {
+		listener(metadata)
+	}
+}
+
+export function compileVariableGroupRules(
+	metadata: VariableGroupMetadata,
+): string[] {
+	let rootDeclarations = ""
+	const declarationsByCondition = new Map<string, string>()
+
+	for (const key of Object.keys(metadata.definitions)) {
+		const definition = metadata.definitions[key]!
+		const customProperty = metadata.names[key]!
+		rootDeclarations += `${customProperty}:${definition.default};`
+
+		for (const condition of Object.keys(definition.conditions).sort()) {
+			const existing = declarationsByCondition.get(condition) ?? ""
+			declarationsByCondition.set(
+				condition,
+				`${existing}${customProperty}:${definition.conditions[condition]};`,
+			)
+		}
+	}
+
+	const rules = [`:root{${rootDeclarations}}`]
+	for (const condition of [...declarationsByCondition.keys()].sort()) {
+		rules.push(
+			`${condition}{:root{${declarationsByCondition.get(condition)}}}`,
+		)
+	}
+	return rules
+}
+
+export function subscribeVariableGroups(
+	listener: (metadata: VariableGroupMetadata) => void,
+): Destructor {
+	listeners.add(listener)
+
+	for (const metadata of registeredGroups.values()) {
+		listener(metadata)
+	}
+
+	return () => {
+		listeners.delete(listener)
+	}
+}
+
+export function attachVariableGroups(
+	styleApi: VariableStyleSink,
+): Destructor {
+	const insertedGroups = new Map<string, Destructor>()
+
+	function ensureGroup(metadata: VariableGroupMetadata) {
+		if (insertedGroups.has(metadata.groupId)) {
+			return
+		}
+
+		const destructor = joinDestructors(
+			compileVariableGroupRules(metadata).map((rule) =>
+				styleApi.addGlobalStyle(rule),
+			),
+		)
+		insertedGroups.set(metadata.groupId, destructor)
+	}
+
+	const unsubscribe = subscribeVariableGroups(ensureGroup)
+
+	return () => {
+		unsubscribe()
+		for (const destructor of insertedGroups.values()) {
+			destructor()
+		}
+		insertedGroups.clear()
+	}
+}
+
+export function defineVars<
+	const T extends Record<string, VariableDefinition>,
+>(definitions: T): VariableGroup<T> {
+	assertValidTokenKeys(definitions)
+
+	const canonicalDefinitions = canonicalizeDefinitions(definitions)
+	const groupId = hashObject(canonicalDefinitions)
+	const names: Record<string, `--${string}`> = {}
+	const references = {} as VariableGroupWithMeta<T>
+
+	for (const key of Object.keys(canonicalDefinitions)) {
+		const customProperty = `--purse-${groupId}-${key}` as const
+		names[key] = customProperty
+		;(references as Record<string, CSSVar>)[key] =
+			`var(${customProperty})`
+	}
+
+	const metadata = {
+		groupId,
+		definitions: canonicalDefinitions,
+		names,
+	} satisfies VariableGroupMetadata
+
+	Object.defineProperty(references, VARIABLE_GROUP_META, {
+		value: metadata,
+		enumerable: false,
+	})
+
+	registerVariableGroup(metadata)
+
+	return references
+}
+
+export function getVariableGroupMetadata(
+	group: AnyVariableGroup,
+): VariableGroupMetadata {
+	const metadata = (group as VariableGroupWithMeta<Record<string, unknown>>)[
+		VARIABLE_GROUP_META
+	]
+	if (!metadata) {
+		throw new Error("Expected a variable group created by defineVars")
+	}
+	return metadata
 }

package/src/index.ts

@@ -10,3 +10,15 @@ export {
 	useInjectGlobalStyles,
 	useStyles,
 } from "./purse"
+export {
+	AnyVariableGroup,
+	CSSVar,
+	ConditionalVariableValue,
+	VariableCondition,
+	VariableDefinition,
+	VariableGroup,
+	VariableGroupMetadata,
+	VariablePrimitive,
+	defineVars,
+	getVariableGroupMetadata,
+} from "./cssVar"

package/src/purse.test.ts

@@ -125,6 +125,28 @@ describe("Purse", () => {
 		)
 	})
 
+	it("Compiles custom property declarations without adding px", () => {
+		const test = style({
+			"--space": 2,
+		})
+
+		assert(test.owned !== undefined)
+		expect(test.owned.styleRules).toContain(
+			`.${test.className}{--space:2;}`,
+		)
+	})
+
+	it("Compiles custom property references as ordinary values", () => {
+		const test = style({
+			color: "var(--color)",
+		})
+
+		assert(test.owned !== undefined)
+		expect(test.owned.styleRules).toContain(
+			`.${test.className}{color:var(--color);}`,
+		)
+	})
+
 	it.skip("Inserts into given style element correctly", () => {})
 	it.skip("Works if you pass style rule or object to useStyles", () => {})
 	it.skip("Works if you pass multiple style rule or object to useStyles", () => {})

package/src/purse.tsx

@@ -8,7 +8,7 @@ import React, {
 	useMemo,
 } from "react"
 import { clsx } from "./clsx"
-import { CSSVar } from "./cssVar"
+import { attachVariableGroups } from "./cssVar"
 import { Destructor, joinDestructors } from "./destructors"
 import { hashObject } from "./hashObject"
 import { hyphenateStyleName } from "./hyphenateStyleName"
@@ -80,7 +80,12 @@ function isUnitlessNumberProperty(kebabProperty: string): boolean {
 }
 
 type BaseCSSProperties = CSS.Properties<number | string, string & {}>
-type CSSVarDeclarations = Record<CSSVar, string>
+
+type CustomProperties = {
+	[name: `--${string}`]: string | number | undefined
+}
+
+type Declarations = BaseCSSProperties & CustomProperties
 
 type NestedRuleKey =
 	| `&${CSS.SimplePseudos}`
@@ -90,8 +95,8 @@ type NestedRuleKey =
 
 export type CSSProperties = {
 	[Key in keyof BaseCSSProperties]?: BaseCSSProperties[Key]
-} & {
-	[Key in NestedRuleKey]?: BaseCSSProperties
+} & CustomProperties & {
+	[Key in NestedRuleKey]?: Declarations
 }
 
 const PurseContext = createContext<StyleApi | undefined>(undefined)
@@ -130,6 +135,7 @@ export type InMemoryStyleApi = {
 	styleRulesRef: { current: string[] }
 	addStyleElement: StyleApi["addStyleElement"]
 	addGlobalStyle: StyleApi["addGlobalStyle"]
+	detachVariableGroups: Destructor
 }
 
 export function createInMemoryStyleApi(): InMemoryStyleApi {
@@ -208,9 +214,14 @@ export function createInMemoryStyleApi(): InMemoryStyleApi {
 		return () => removeStyleElement(styleElement)
 	}
 
-	return {
+	const styleApi = {
 		addStyleElement,
 		addGlobalStyle: addStyleRule,
+	}
+
+	return {
+		...styleApi,
+		detachVariableGroups: attachVariableGroups(styleApi),
 		styleRulesRef: {
 			get current() {
 				return styleRules
@@ -344,6 +355,8 @@ export function PurseProvider(props: { children?: React.ReactNode }) {
 		return { addStyleElement, addGlobalStyle: addStyleRule }
 	}, [])
 
+	useInsertionEffect(() => attachVariableGroups(styleApi), [styleApi])
+
 	return (
 		<PurseContext.Provider value={styleApi}>
 			{props.children}
@@ -351,19 +364,30 @@ export function PurseProvider(props: { children?: React.ReactNode }) {
 	)
 }
 
-function compileDeclarations(declarations: BaseCSSProperties) {
+function isCustomProperty(name: string): name is `--${string}` {
+	return name.startsWith("--")
+}
+
+function compileDeclarations(declarations: Declarations) {
 	// return entries(prefix(declarations))
 	return entries(declarations)
-		.map(([camelCaseProperty, value]) => {
-			const kebabProperty = hyphenateStyleName(camelCaseProperty)
+		.map(([name, value]) => {
+			if (value === undefined || value === null) {
+				return ""
+			}
+
+			const property = isCustomProperty(name)
+				? name
+				: hyphenateStyleName(name)
 			const needToAddPixelsUnit =
 				typeof value === "number" &&
-				!isUnitlessNumberProperty(kebabProperty)
+				!isCustomProperty(name) &&
+				!isUnitlessNumberProperty(property)
 
 			if (needToAddPixelsUnit) {
-				return `${kebabProperty}:${value}px;`
+				return `${property}:${value}px;`
 			} else {
-				return `${kebabProperty}:${value};`
+				return `${property}:${value};`
 			}
 		})
 		.join("")
@@ -394,9 +418,9 @@ function isObjectEmpty(obj: {}): boolean {
 }
 
 type CSSPropertiesGroup = {
-	"": BaseCSSProperties
+	"": Declarations
 } & {
-	[Key in NestedRuleKey]?: BaseCSSProperties
+	[Key in NestedRuleKey]?: Declarations
 }
 
 function mergeCSSProperties(...groups: CSSProperties[]): CSSProperties {
@@ -535,7 +559,7 @@ function styleElementToRules({ owned, composed }: StyleElement): StyleRule[] {
 
 export function useInjectGlobalStyles(
 	selector: string,
-	cssProperties: BaseCSSProperties & CSSVarDeclarations,
+	cssProperties: Declarations,
 	deps: DependencyList,
 ) {
 	const styleApi = useRequiredContext(PurseContext)