typestyles
Advanced tools
CSS-in-TypeScript that embraces CSS instead of hiding from it.
Write type-safe styles in TypeScript, get human-readable class names in DevTools, use CSS custom properties as first-class design tokens, and adopt incrementally alongside plain CSS. No build step required for the runtime path; optional bundler plugins extract static CSS for production.
Full documentation: typestyles.dev · Monorepo overview: README
For AI coding agents: read llms.txt in this package (API patterns, common mistakes, doc links) or query the live docs via MCP at typestyles.dev/mcp.
npm install typestyles
import { styles, tokens, cx } from 'typestyles';
const color = tokens.create('color', {
primary: '#0066ff',
surface: '#ffffff',
});
const button = styles.component('button', {
base: {
padding: '8px 16px',
borderRadius: '6px',
backgroundColor: color.primary,
color: color.surface,
'&:hover': { filter: 'brightness(0.9)' },
},
variants: {
intent: {
primary: { backgroundColor: color.primary },
ghost: { backgroundColor: 'transparent', color: color.primary },
},
},
defaultVariants: { intent: 'primary' },
});
// Callable + destructurable
<button className={button({ intent: 'ghost' })} />;
// → class="button-base button-intent-ghost"
| Import | Use for |
|---|---|
typestyles | styles, tokens, cx, createStyles, createTokens, createVar, … |
typestyles/server | collectStyles, getRegisteredCss, streaming SSR helpers |
typestyles/build | Build-time stubs when runtime is disabled |
typestyles/hmr | HMR invalidation (used by @typestyles/vite) |
typestyles/color | Color helpers (rgb, oklch, mix, …) — kept off the main entry for bundle size |
typestyles/globals | Ambient types for CSS modules and global augmentation |
| Mode | How |
|---|---|
| Runtime (default) | Styles inject into a managed <style> tag on first use (~15 KB gzip main entry; CI enforces a budget) |
| Zero-runtime (opt-in) | @typestyles/vite, @typestyles/rollup, @typestyles/esbuild, @typestyles/webpack, or @typestyles/next/build extract a static .css file |
Same authoring API in both modes.
import { collectStyles } from 'typestyles/server';
const { html, css } = await collectStyles(() => renderToString(<App />));
// Inject `css` into <head>
Request-safe collection uses AsyncLocalStorage on Node — see SSR guide.
| Package | Purpose |
|---|---|
@typestyles/vite | Vite — HMR + extraction |
@typestyles/next | Next.js App/Pages Router |
@typestyles/props | Typed atomic utilities |
@typestyles/open-props | Open Props tokens |
@typestyles/migrate | Codemods from styled-components / Emotion |
@typestyles/eslint-plugin | ESLint rules for style objects |
See the packages index for bundler plugins and build tooling.
Apache-2.0
FAQs
CSS-in-TypeScript that embraces CSS instead of hiding from it
The npm package typestyles receives a total of 1,611 weekly downloads. As such, typestyles popularity was classified as popular.
We found that typestyles demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
A compromised jscrambler npm release added a malicious preinstall hook that runs hidden native binaries on Linux, macOS, and Windows.
Research
/Security News
A malicious .NET package is typosquatting the Braintree SDK to steal live payment card data, merchant API keys, and host secrets from production apps.
Security News
/Research
Compromised Injective SDK npm version 1.20.21 exfiltrates wallet private keys and mnemonics through fake telemetry functionality.