# css-in-props

> Utilize props as CSS methods

Latest version **3.14.756** (published 2026-09-03) · 0 weekly downloads

## Install

```sh
npm install css-in-props
pnpm add css-in-props
yarn add css-in-props
bun add css-in-props
```

## Health

**Score 60/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 3.14.756 |
| Published | 2026-09-03 |
| First published | 2022-05-04 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 72.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | symbo.ls |
| Maintainers | nikoloza, nikaoto, desire_rawr |

## Links

- npm: https://www.npmjs.com/package/css-in-props
- Repository: https://github.com/symbo-ls/smbls
- Homepage: https://github.com/symbo-ls/smbls#readme
- Issues: https://github.com/symbo-ls/smbls/issues
- npm.io page: https://npm.io/package/css-in-props

## Dependencies (3)

- [@symbo.ls/css](https://npm.io/package/@symbo.ls/css.md) ^3.14.707
- [@symbo.ls/utils](https://npm.io/package/@symbo.ls/utils.md) ^3.14.707
- [@symbo.ls/scratch](https://npm.io/package/@symbo.ls/scratch.md) ^3.14.753

## Recent versions

- 3.14.756 (latest) — 2026-09-03
- 3.14.755 — 2026-08-28
- 3.14.754 — 2026-08-26
- 3.14.753 — 2026-08-09
- 3.14.747 — 2026-08-09
- 3.14.707 — 2026-08-08
- 3.14.668 — 2026-08-06
- 3.14.651 — 2026-08-02
- 3.14.612 — 2026-07-31
- 3.14.608 — 2026-07-29
- 3.14.599 — 2026-07-28
- 3.14.595 — 2026-07-21
- 3.14.336 — 2026-06-10
- 3.14.279 — 2026-06-07
- 3.14.105 — 2026-05-19
- … 500 more at https://npm.io/package/css-in-props/versions

## README

# css-in-props

CSS properties as component props for DOMQL elements. Transforms design-system-aware props into CSS classes via the atomic CSS engine (`@symbo.ls/css`).

## What it does

- Transforms component props (`theme`, `color`, `background`, `border`, `shadow`, etc.) into resolved CSS
- Resolves design system tokens (colors, spacing, typography, themes) from `@symbo.ls/scratch`
- Handles media queries (`@dark`, `@mobileS`, etc.) and pseudo selectors (`:hover`, `:focus`) as prop prefixes
- Generates atomic CSS classes for optimized rendering (one class per property-value pair)

## Theme prop

The `theme` prop resolves theme definitions into CSS variables. Theme switching is handled entirely by CSS — no DOMQL re-renders needed.

```javascript
const Card = {
  theme: 'primary',           // uses --theme-primary-* CSS vars
  // themeModifier: 'dark',   // optional: force a specific scheme on this component
}
```

When `globalTheme` is `'auto'` (default), CSS variables switch automatically via `prefers-color-scheme` media queries and `[data-theme]` selectors.

## Props reference

| Category | Props |
|----------|-------|
| Theme | `theme`, `color`, `background`, `backgroundColor`, `borderColor` |
| Border | `border`, `borderLeft`, `borderTop`, `borderRight`, `borderBottom`, `outline` |
| Shadow | `shadow`, `boxShadow`, `textShadow` |
| Text | `textStroke` |
| Image | `backgroundImage` |
| Layout | `outlineOffset` |

## Media and selector props

Props can be prefixed with media queries or selectors:

```javascript
const Button = {
  background: 'blue',
  ':hover': { background: 'darkblue' },
  '@mobileS': { padding: 'A' },
  '.active': { background: 'green' }
}
```

### `transformersByPrefix`

The prefix-to-handler registry that powers media queries, selectors, conditionals, and variables. Each key is a single-character prefix that triggers a specific transformer when found at the start of a prop key:

| Prefix | Handler | Example |
|--------|---------|---------|
| `@` | Media query | `@mobileS`, `@dark`, `@print` |
| `:` | Pseudo selector | `:hover`, `:focus`, `:first-child` |
| `[` | Attribute selector | `[disabled]`, `[data-active]` |
| `>` | Child combinator | `> .child` |
| `&` | Self selector | `&.active` |
| `$` | Global case (from `context.cases`) | `$isSafari` |
| `.` | Truthy conditional (props/state, then `context.cases`) | `.visible` |
| `!` | Falsy conditional (props/state, then `context.cases`) | `!hidden` |
| `-` | CSS variable | `--my-var` |
| `*`, `+`, `~` | CSS combinators | `* div`, `+ .sibling`, `~ .general` |

```javascript
import { transformersByPrefix } from 'css-in-props'
```

## Interaction with the define system

The `$` prefix is used both by css-in-props (`$isActive` case conditional) and by the define system (e.g. `$router`). The framework resolves this by checking for define handlers before applying prefix rules. Keys with matching define handlers stay at the element root; only `$`-prefixed keys without define handlers are processed by css-in-props.

> In v3.14, properties go directly on the element (no `props:` wrapper). The CSS engine processes design token properties internally.

## Global Cases

Cases are defined in `symbols/cases.js` and added to `context.cases` (not `designSystem`). Case functions receive the element as `this` and as the first argument, but must also work without element context (arrow functions).

```javascript
// symbols/cases.js
export default {
  isSafari: () => /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent),
  isGeorgian () { return this?.state?.root?.language === 'ka' },
  isMobile: () => window.innerWidth < 768
}
```

```javascript
// symbols/context.js
import cases from './cases.js'
export default { cases, /* ...other context */ }
```

### Resolution order

- **`$` prefix**: Checks `context.cases[key]` first (call if function, check truthiness if value). Falls back to `element[key]`.
- **`.` prefix**: Checks `element[key]` / `element.state[key]` first. Falls back to `context.cases[key]`.
- **`!` prefix**: Same as `.` but inverted — applies when condition is falsy.

```javascript
const Button = {
  padding: 'A',
  '$isSafari': { padding: 'B' },           // global case
  '.isActive': { background: 'blue' },      // props/state, then cases
  '!isMobile': { maxWidth: '1200px' }       // inverted
}
```

## CSS Variable Resolution

String values starting with `--` are automatically wrapped in `var()` for all CSS properties:

```javascript
const Box = {
  padding: '--my-gap',      // → var(--my-gap)
  fontSize: '--base-size',  // → var(--base-size)
}
```

---
_Source: https://npm.io/package/css-in-props · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._