Package
⊛

Stylesheet

Atomic CSS sheet management with responsive / media-query injection that mirrors Box's breakpoints system.

ℹ
@stareezy-ui/stylesheet is used internally by @stareezy-ui/runtime. You only need it directly when building a custom runtime adapter or injecting styles outside of Box.

Install

pnpm add @stareezy-ui/stylesheet

Overview

The stylesheet package manages three DOM <style> tags:

  • ●#sz-atomic — one atomic rule per token ID using var(--tokenId), deduplicated.
  • ●#sz-root-vars — the :root CSS variable block, replaced atomically on theme change.
  • ●#sz-responsive — media-query rules generated from responsive prop values, matching Box's breakpoint system.

AtomicStyleSheet

The main class. Lazy-creates style tags on first use and deduplicates every rule.

import { AtomicStyleSheet } from "@stareezy-ui/stylesheet";

const sheet = new AtomicStyleSheet();

// Inject a token-based atomic rule
sheet.inject("primary-500", "background-color", "#024CCE");
// → .sz-primary-500 { background-color: var(--primary-500); }

// Write / replace the :root block (call again to switch themes)
sheet.injectRootVariables([
  { id: "primary-500", value: "#024CCE" },
  { id: "spacing-4",   value: 4 },
]);
// → :root { --primary-500: #024CCE; --spacing-4: 4; }

Responsive injection

injectResponsive accepts a plain value or a responsive object like { base: '8px', md: '16px' } — the same syntax Box accepts. Breakpoints are read from the shared global channel synced by createUi({ media }).

// Plain value
sheet.injectResponsive("szr-card", "8px", ["padding"]);
// → .szr-card { padding: 8px }

// Responsive object — emits base + media queries
sheet.injectResponsive(
  "szr-card",
  { base: "8px", md: "16px", lg: "24px" },
  ["padding"]
);
// → .szr-card { padding: 8px }
// → @media(min-width:768px){ .szr-card { padding: 16px } }
// → @media(min-width:1024px){ .szr-card { padding: 24px } }

Component-level injection

injectComponentStyle injects multiple props for one class in a single call:

sheet.injectComponentStyle("szr-hero", [
  { cssProperties: ["padding"],          value: { base: "16px", md: "32px" } },
  { cssProperties: ["background-color"], value: "var(--surface)" },
  { cssProperties: ["border-radius"],    value: "12px" },
]);

Standalone helpers

HelperDescription
tokenIdToClassName(id)Returns sz-{id}. Used by the runtime adapter.
buildScopeClass(uid)Returns szr-{uid} for component-scoped responsive styles.
buildResponsiveCss(selector, value, cssProps)Builds the CSS string for one responsive prop without touching the DOM.
buildComponentCss(className, propEntries)Builds a full responsive CSS block for multiple props at once.
buildBreakpointEntries(value)Converts a responsive map to sorted { minWidth, value } entries.
resolveResponsive(value, windowWidth)React Native helper — resolves a responsive value for a given window width.
isResponsiveValue(value)Type guard — returns true if the value is a breakpoint map.
getBreakpoints()Returns the current breakpoint map, synced from createUi({ media }).

AtomicStyleSheet API

MethodSignatureDescription
getClassName(tokenId: string) → stringReturns sz-{tokenId}.
inject(tokenId, cssProperty, value) → voidInjects one atomic rule. No-op if tokenId already injected.
injectRootVariables(tokens: Array<{ id, value }>) → voidReplaces the entire :root block.
injectResponsive(className, value, cssProperties) → voidInjects responsive styles for a scoped class. Deduplicated.
injectComponentStyle(className, propEntries) → voidBatch version of injectResponsive.
injectRaw(css: string) → voidInjects a pre-built CSS string. Deduplicated by content.
reset() → voidRemoves all style tags and clears dedup state. Useful in tests.

Breakpoints

Breakpoints are read from the same global channel written by createUi({ media }), so your stylesheet rules always match Box's responsive props. Default values:

{ sm: 480, md: 768, lg: 1024, xl: 1280, "2xl": 1536 }

Override them in your stareezy.config.ts:

import { createUi } from "@stareezy-ui/tokens";

const ui = createUi({
  media: { sm: 640, md: 768, lg: 1024, xl: 1280, "2xl": 1536 },
});
export default ui;
The stylesheet package has zero runtime dependencies — it only touches document.head and the globalThis.__stareezy_breakpoints__ channel. Safe to use in any web bundler environment.