# @wyw-in-js/shared

Latest version **2.5.0** (published 2026-09-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install @wyw-in-js/shared
pnpm add @wyw-in-js/shared
yarn add @wyw-in-js/shared
bun add @wyw-in-js/shared
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.5.0 |
| Published | 2026-09-02 |
| First published | 2023-10-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=22.0.0 |
| Dependencies | 3 |
| Unpacked size | 69.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 324 |
| Maintainers | layershifter, anber |

## Links

- npm: https://www.npmjs.com/package/@wyw-in-js/shared
- Repository: https://github.com/wyw-in-js/wyw-in-js
- Homepage: https://github.com/wyw-in-js/wyw-in-js#readme
- Issues: https://github.com/wyw-in-js/wyw-in-js/issues
- npm.io page: https://npm.io/package/@wyw-in-js/shared

## Dependencies (3)

- [debug](https://npm.io/package/debug.md) ^4.3.4
- [find-up](https://npm.io/package/find-up.md) ^5.0.0
- [minimatch](https://npm.io/package/minimatch.md) ^9.0.3

## Recent versions

- 2.5.0 (latest) — 2026-09-02
- 2.0.0-alpha.1 (alpha) — 2026-05-08
- 2.4.0 — 2026-08-10
- 2.3.0 — 2026-07-24
- 2.2.0 — 2026-07-24
- 2.1.0 — 2026-06-22
- 2.0.0 — 2026-06-14
- 2.0.0-alpha.0 — 2026-05-05
- 1.1.0 — 2026-04-21
- 1.0.5 — 2026-03-27
- 1.0.4 — 2026-01-15
- 1.0.3 — 2026-01-12
- 1.0.2 — 2026-01-10
- 1.0.1 — 2026-01-10
- 1.0.0 — 2026-01-09
- … 19 more at https://npm.io/package/@wyw-in-js/shared/versions

## README

<div align="center">
  <h1>WyW-in-JS</h1>
  <p>A Toolkit for Zero-Runtime CSS-in-JS Libraries</p>
</div>

# Introduction

wyw-in-js, short for "Whatever-you-want-in-JS," is the world's first toolkit for creating various zero-runtime CSS(and more)-in-JS libraries. In essence, it empowers developers to build their own solutions with arbitrary syntax and functionality, offering complete independence from specific implementations.

### Origins

WyW-in-JS grew out of the CSS-in-JS library [Linaria][1], where the core extraction model proved that styles can be authored in JavaScript and emitted ahead of time. The project separates that machinery from any one styling API, so libraries can define their own syntax, evaluation rules, and artifacts. That foundation continues to serve Linaria, can model processor APIs such as [Griffel][2] `makeStyles`, and is used end-to-end by [dx-styles][3] for compiler-backed CSS-in-TS in design systems.

### Key Features

- Provides an API for creating custom processors (e.g., `css` and `styled` in [Linaria][1], `makeStyles` in [Griffel][2], or `css`, `recipe`, and `slotRecipe` in [dx-styles][3]).
- Supports a wide range of syntaxes, including tagged templates, function calls, and object literals.
- Computes any unprepared JavaScript during the build phase, generating a set of artifacts that processors can transform into styles (or other outputs, depending on the processor).
- Allows for arbitrary JavaScript in style definitions, including imports, conditionals, and loops.
- Powers design-system primitives such as deterministic style-object classes, variant recipes, multipart slot recipes, token contracts, themes, and runtime CSS variable assignment.
- Supports compile-time styling workflows such as generated CSS artifacts, class-name composition, nested selectors, at-rules, and opt-in RTL overrides.
- Offers loaders and plugins for popular bundlers (including Webpack, Vite, esbuild) and frameworks (Next.js), ensuring compatibility with various build systems.

## Documentation

- Website: https://wyw-in-js.dev/
- Stability: https://wyw-in-js.dev/stability
- Troubleshooting: https://wyw-in-js.dev/troubleshooting
- Configuration: https://wyw-in-js.dev/configuration
- How it works: https://wyw-in-js.dev/how-it-works
- Bundlers: https://wyw-in-js.dev/bundlers
- CLI: https://wyw-in-js.dev/cli

## Requirements

- Node.js `>=22.0.0`.
- WyW-in-JS packages are ESM-only. If your tooling is still CJS, use dynamic `import()` or migrate configs to ESM.
- Bun `>=1.0.0` (supported via `@wyw-in-js/bun` and for running the workspace with Bun).

## CLI Quickstart

Install:

```sh
npm i -D @wyw-in-js/cli
yarn add -D @wyw-in-js/cli
pnpm add -D @wyw-in-js/cli
bun add -d @wyw-in-js/cli
```

Extract CSS and inject imports into your compiled output:

```sh
wyw-in-js \
  --config ./wyw-in-js.config.js \
  --source-root ./src \
  --out-dir ./dist/wyw-css \
  --insert-css-requires ./dist \
  --modules esnext \
  --transform \
  "src/**/*.{ts,tsx,js,jsx}"
```

See https://wyw-in-js.dev/cli for all options, migration notes from `@linaria/cli`, and notes about dependencies (including `happy-dom`).

[1]: https://github.com/callstack/linaria
[2]: https://github.com/microsoft/griffel
[3]: https://dx-styles.dev

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