@everystate/css v1.0.12

State-driven CSS: Reactive styling, design tokens, and relational constraints

Make your styles reactive. Design tokens, theme variables, and CSS constraints live in EveryState and update automatically.

Installation

npm install @everystate/css @everystate/core

Zero external dependencies - @everystate/css only depends on @everystate/core (same namespace) for core functionality. For its integration tests that come with the lib and you can run anytime, it uses @everystate/test (also the same namespace). No third-party packages required.

Quick Start

import { createEveryState } from '@everystate/core';
import { createStyleEngine } from '@everystate/css';

const store = createEveryState({
  theme: {
    primary: '#3b82f6',
    secondary: '#8b5cf6'
  }
});

const engine = createStyleEngine(store, 'theme');

// Styles update automatically when state changes
store.set('theme.primary', '#ef4444');

Features

• Design tokens: Store colors, spacing, typography in state
• Reactive updates: CSS custom properties update on state change
• Type validation: Ensure valid CSS values
• Relational constraints: Define relationships between tokens
• WCAG contrast: Automatic contrast checking
• Zero build: Runtime CSS generation

Documentation

Full documentation available at everystate.dev.

Ecosystem

| Package | Description | License | |---|---|---| | @everystate/aliases | Ergonomic single-character and short-name DOM aliases for vanilla JS | MIT | | @everystate/angular | Angular adapter: usePath, useIntent, useWildcard, useAsync — bridges store to Angular signals | MIT | | @everystate/core | Path-based state management with wildcard subscriptions and async support | MIT | | @everystate/css | Reactive CSSOM engine: design tokens, typed validation, WCAG enforcement, all via path-based state | MIT | | @everystate/examples | Example applications and patterns | MIT | | @everystate/perf | Performance monitoring overlay | MIT | | @everystate/react | React hooks adapter: usePath, useIntent, useAsync hooks and EventStateProvider | MIT | | @everystate/renderer | Direct-binding reactive renderer: bind-*, set, each attributes. Zero build step | MIT | | @everystate/router | SPA routing as state | MIT | | @everystate/solid | Solid adapter: usePath, useIntent, useWildcard, useAsync — bridges store to Solid signals | MIT | | @everystate/test | Event-sequence testing for EveryState stores. Zero dependency. | MIT | | @everystate/types | Typed dot-path autocomplete for EveryState stores | MIT | | @everystate/view | State-driven view: DOMless resolve + surgical DOM projector. View tree as first-class state | MIT | | @everystate/vue | Vue 3 composables adapter: provideStore, usePath, useIntent, useWildcard, useAsync | MIT |

Self-test (CLI, opt-in)

Run the bundled zero-dependency self-test locally to verify CSS behavior. It is opt-in and never runs automatically on install:

# via npx (no install needed)
npx everystate-css-self-test

# if installed locally
everystate-css-self-test

# or directly
node node_modules/@everystate/css/self-test.js

You can also run the npm script from the package folder:

npm --prefix node_modules/@everystate/css run self-test

Integration tests (@everystate/test)

The tests/ folder contains a separate integration suite that uses @everystate/test and @everystate/core (declared as devDependencies). This is an intentional tradeoff: the self-test stays lightweight, while integration tests remain available for deeper validation.

For end users (after installing the package):

# Install test dependencies
npm install @everystate/test @everystate/core

# Run from package folder
cd node_modules/@everystate/css
npm run test:integration
# or short alias
npm run test:i

Or, from your project root:

npm --prefix node_modules/@everystate/css run test:integration
# or short alias
npm --prefix node_modules/@everystate/css run test:i

For package developers (working in the source repo):

# Install dev dependencies first
npm install

# Run integration tests
npm run test:integration

License

MIT © Ajdin Imsirovic