CSS-in-JS

Component-scoped styles, global CSS injection, themes, and keyframes — all in TypeScript.

import { stylesheet, globalCSS, rootCSS, globalTheme, keyframes, classes } from 'mates';

// Module level — one sheet per feature
const { css, mount } = stylesheet();
mount(); // or call mount() inside a component outer fn for auto cleanup

const cl = css({
  card: {
    borderRadius: '12px',
    padding: '16px 20px',
    background: 'var(--md-color-surface)',
    border: '1px solid var(--md-color-border)',
  },
  active: { outline: '2px solid var(--md-color-primary)' },
});

html`<div class="${cl.card}" ${classes([[isOn, cl.active]])}>…</div>`

const utils = globalCSS({
  srOnly: { position: 'absolute', width: '1px', height: '1px', overflow: 'hidden' },
});

rootCSS({ '--brand': '#0172ad', fontFamily: 'system-ui, sans-serif' });

const { cssVars } = globalTheme({
  light: { surface: '#ffffff', text: '#0f172a' },
  dark:  { surface: '#1e2029', text: '#f8fafc' },
});
// var(${cssVars.surface}) — drive with useUtils().themeAtom / data-theme

Overview

Mates ships a lightweight CSS-in-JS system: stylesheet() for scoped class maps, globalCSS / rootCSS for app-level rules, globalTheme for light/dark token sets, and keyframes for animations — no build-time CSS extraction required.

Start with stylesheet() for feature sheets, then theme / rootCSS for design tokens. Pair class maps with the classes() directive for conditionals.

API at a glance

API	Scope	Returns
`stylesheet()`	Module / feature	`{ css, mount, keyframes }`
`globalCSS(rules)`	Document	Class map (`Cl`)
`globalTheme(themes)`	Document	`{ cssVars }` — theme via `data-theme`
`keyframes(name, stops)`	Document	Animation name string

stylesheet() live demo

Scoped class map from stylesheet().css(), toggled with the classes() directive.

import { html, atom, renderApp, stylesheet, classes } from 'mates';

const { css, mount } = stylesheet();

mount();

const cl = css({

card: {

borderRadius: 'var(--m-r)',

padding: '16px 20px',

background: 'var(--m-surface)',

border: '1px solid var(--m-border)',

color: 'var(--m-fg)',

maxWidth: '280px',

title: { margin: '0 0 8px', fontSize: '1.1rem', color: 'var(--m-primary)' },

active: { boxShadow: '0 0 0 2px var(--m-primary)' },

});

const App = () => {

const on = atom(false);

return () => html`

<h2 class="${cl.title}">Scoped card</h2>

<p class="muted m-b-10">stylesheet() → css() → class map</p>

${on() ? 'Active' : 'Toggle active'}

</button>

</div>

};

renderApp(App, document.getElementById('app'));

globalCSS utility

Shared document-level class map (auto-mounted).

import { html, renderApp, globalCSS } from 'mates';

const g = globalCSS({

pill: {

display: 'inline-block',

padding: '4px 10px',

borderRadius: '999px',

background: '#0f766e',

color: '#ecfdf5',

fontSize: '0.85rem',

});

const App = () => () => html`

<p class="muted">globalCSS injects into a shared sheet (microtask mount).</p>

<span class="${g.pill}">shared utility class</span>

</div>

renderApp(App, document.getElementById('app'));

API — CSS-in-JS (overview)

import { stylesheet, globalCSS, rootCSS, globalTheme, keyframes, configureCSS, collectSSRStyles, classes } from 'mates';

Prop / Option	Type	Default	Description
`stylesheet()`	`{ css, mount, keyframes }`	—	Module-level factory. See /docs/css-in-js/stylesheet.
`globalCSS(rules)`	`Cl`	—	App-level rules into a shared sheet. Returns a class map.
`rootCSS / globalTheme`	`tokens`	—	CSS vars and themes — see /docs/css-in-js/theme.
`keyframes(name, stops)`	`string`	—	Register @keyframes on the global sheet; returns the scoped animation name.
`configureCSS(opts)`	`void`	—	Serializer options (prefix, nonce, breakpoints).
`collectSSRStyles()`	`string`	—	SSR helper to gather registered sheet text (currently returns "" — browser loads linked styles on hydrate).