npm - purse-styles - Versions diffs - 0.1.2 → 0.2.1 - Mend

purse-styles 0.1.2 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/README.md CHANGED Viewed

@@ -50,6 +50,50 @@ 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_THEME = ':root[data-theme="dark"]'
+const DARK_MEDIA = "@media (prefers-color-scheme: dark)"
+export const colors = defineVars({
+	text: {
+		default: "black",
+		[DARK_THEME]: "white",
+		[DARK_MEDIA]: "white",
+	},
+	background: { default: "white", [DARK_THEME]: "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 or selector keys. At-rules wrap a `:root` rule (for example, `@media ...{:root{...}}`), while selector conditions receive the declarations directly (for example, `:root[data-theme="dark"]{...}`).
+- Set `data-theme="dark"` on the root `<html>` element to activate the selector condition above.
+- Defaults are root-level, and there is no dedicated `createTheme` / subtree theme API.
 ## Exports
 ```ts
@@ -66,10 +110,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,11 +131,12 @@ export type InMemoryStyleApi = {
 	}
 	addStyleElement: StyleApi["addStyleElement"]
 	addGlobalStyle: StyleApi["addGlobalStyle"]
+	detachVariableGroups: () => void
 }
 export declare function createInMemoryStyleApi(): InMemoryStyleApi
 ```
 ## TODO
-- [ ] E2E tests with Playwright
+- [x] E2E tests with Playwright
 - [ ] Consider exporting a simple `styled` alternative

package/dist/cssVar.d.ts CHANGED Viewed

@@ -1,2 +1,31 @@
+import { Destructor } from "./destructors";
 export type CSSVar = `var(--${string})`;
-export declare function createCssVar(name: string): CSSVar;
+export type VariablePrimitive = string | number;
+export type VariableCondition = 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 CHANGED Viewed

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

package/dist/index.js CHANGED Viewed

@@ -40,6 +40,135 @@ function toPhash(h, x) {
 }
 var hashObject = (value) => toAlphabeticName(toPhash(5381, JSON.stringify(value)) >>> 0);
+// src/cssVar.ts
+var VARIABLE_GROUP_META = /* @__PURE__ */ 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()) {
+    const declarations = declarationsByCondition.get(condition);
+    rules.push(
+      condition.startsWith("@") ? `${condition}{:root{${declarations}}}` : `${condition}{${declarations}}`
+    );
+  }
+  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-/;
@@ -126,7 +255,7 @@ function isUnitlessNumberProperty(kebabProperty) {
   return false;
 }
 var PurseContext = createContext(void 0);
-var __style__ = Symbol("style-element");
+var __style__ = /* @__PURE__ */ Symbol("style-element");
 function isStyleElement(o) {
   return o != null && typeof o === "object" && "__style__" in o && o["__style__"] === __style__;
 }
@@ -186,9 +315,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 +418,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 +561,8 @@ function useStyles(...styleElementsOrCSS) {
 export {
   PurseProvider,
   createInMemoryStyleApi,
+  defineVars,
+  getVariableGroupMetadata,
   style,
   useInjectGlobalStyles,
   useStyles

package/dist/index.js.map CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -2,7 +2,7 @@
 	"name": "purse-styles",
 	"type": "module",
 	"main": "./dist/index.js",
-	"version": "0.1.2",
+	"version": "0.2.1",
 	"author": "Tanishq Kancharla <tanishqkancharla3@gmail.com>",
 	"description": "A basic styling solution for web apps with an emphasis on simplicity and purity.",
 	"keywords": [],
@@ -18,20 +18,28 @@
 	},
 	"scripts": {
 		"build": "tsx scripts/build.ts",
-		"check": "tsc --noEmit",
+		"check": "tsc --noEmit && tsc -p e2e/tsconfig.json",
 		"test": "vitest",
+		"test:run": "vitest run",
+		"test:e2e": "vitest run --project browser",
 		"release": "npm run build; npm publish",
 		"bundlesize": "esbuild ./dist/index.js --minify --outfile=bundled; rm bundled"
 	},
 	"devDependencies": {
 		"@types/lodash-es": "^4.17.12",
-		"@types/node": "^20.14.2",
+		"@types/node": "^22.20.1",
 		"@types/react": "^18.3.3",
+		"@types/react-dom": "^18.3.7",
+		"@vitejs/plugin-react": "^6.0.3",
+		"@vitest/browser-playwright": "^4.1.10",
 		"ansi-colors": "^4.1.3",
-		"esbuild": "^0.21.5",
-		"tsx": "^4.15.5",
+		"esbuild": "^0.28.1",
+		"playwright": "^1.61.1",
+		"react-dom": "^18.3.1",
+		"tsx": "^4.23.1",
 		"typescript": "^5.4.5",
-		"vitest": "^1.6.0"
+		"vitest": "^4.1.10",
+		"vitest-browser-react": "^2.2.0"
 	},
 	"peerDependencies": {
 		"react": "^18.3.1"

package/src/cssVar.test.ts ADDED Viewed

@@ -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 CHANGED Viewed

@@ -1,5 +1,221 @@
+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 = 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()) {
+		const declarations = declarationsByCondition.get(condition)
+		rules.push(
+			condition.startsWith("@")
+				? `${condition}{:root{${declarations}}}`
+				: `${condition}{${declarations}}`,
+		)
+	}
+	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 CHANGED Viewed

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

package/src/purse.test.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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)