# @alinea/styler

> [![spring-easing's badge](https://deno.bundlejs.com/?q=@alinea/styler&badge=detailed&badge-style=for-the-badge)](https://bundlejs.com/?q=@alinea/styler)

Latest version **1.0.3** (published 2024-09-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install @alinea/styler
pnpm add @alinea/styler
yarn add @alinea/styler
bun add @alinea/styler
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2024-09-27 |
| First published | 2022-08-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 5.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | benmerckx |

## Links

- npm: https://www.npmjs.com/package/@alinea/styler
- Repository: https://github.com/alineacms/styler
- Homepage: https://github.com/alineacms/styler#readme
- Issues: https://github.com/alineacms/styler/issues
- npm.io page: https://npm.io/package/@alinea/styler

## Recent versions

- 1.0.3 (latest) — 2024-09-27
- 1.0.2 — 2024-09-27
- 1.0.1 — 2024-09-27
- 1.0.0 — 2024-07-25
- 0.0.0 — 2022-08-16

## README

[![spring-easing's badge](https://deno.bundlejs.com/?q=@alinea/styler&badge=detailed&badge-style=for-the-badge)](https://bundlejs.com/?q=@alinea/styler)

# @alinea/styler

Class name composer. Fully typed in your IDE when paired with
[typescript-plugin-css-modules](https://github.com/mrmckeb/typescript-plugin-css-modules).

```scss
// Some.module.scss
.root {
  color: blue;
  &-sub {
    color: red;
  }
}
.link {
  color: yellow;
  &.is-active {
    color: orange;
  }
  &.is-small {
    font-size: 2em;
  }
  &.is-large {
    font-size: 2em;
  }
}
```

```tsx
import styler from '@alinea/styler'
import css from './Some.module.scss'

const styles = styler(css)

<div className={styles.root()} />
// => <div class="root_zr2ux" /> (generated class name will vary)
```

You can reach subclasses, separated in css by dashes, with dot access

```tsx
<div className={styles.root.sub()} />
// => <div class="root-sub_zr2ux" />
```

Reflect state by passing objects with boolean properties or strings

```tsx
<a className={styles.link({active: true})} />
// => <a class="is-active_zr2ux link_zr2ux" />

<a className={styles.link('large')} />
// => <a class="is-large_zr2ux link_zr2ux" />

<a className={styles.link({active: false}, 'small')} />
// => <a class="is-small_zr2ux link_zr2ux" />
```

Use `styler.global` to add a global classname

```tsx
<div className={styles.root(styler.global('some-external-class'))} />
// => <div class="some-external-class root_zr2ux" />
```

Use `styler.merge` to add in props with a className

```tsx
<div className={styles.root(styler.merge({className: 'some-external-class'}))} />
// => <div class="some-external-class root_zr2ux" />
```

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