# raw

> Wraps a plain style object as a utility mixin, so bespoke declarations — a property outside this package's surface, or a call-site-computed value — compose inside wrappers like `when()`, whose inputs are utility mixins.

```ts
import { raw } from "@sdxc/u/general";
```

Wraps a plain style object as a utility mixin, so bespoke declarations — a
property outside this package's surface, or a call-site-computed value —
compose inside wrappers like `when()`, whose inputs are utility mixins.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.when('&[data-color="1"]', u.raw({ color: "var(--ui-chart-1)" }))` | `css({ '&[data-color="1"]': { color: "var(--ui-chart-1)" } })` |

## Examples

### Basic example

Use `raw({...})` to write declarations no utility covers, like CSS columns, as a mixin that sits beside the others:

```tsx
<p mix={[raw({ columnCount: 2, columnGap: "2rem" }), ...]}>
	The ferry left at dawn, and by the time the fog lifted we could see the island: a low green
	line, a lighthouse, and one road climbing from the harbour to the church. Nobody on board had
	been there before. The captain said the bakery opened at eight and closed when the bread ran
	out, which on a Saturday meant before ten, so we walked straight up the hill without stopping
	to look at the boats.
</p>
```

### Composing with states

A raw mixin goes anywhere a utility does, including state wrappers like `hover()`. Hover a book to pull it from the shelf:

```tsx
<div mix={[hstack({ gap: 1, align: "end" })]}>
	<div
		mix={[
			raw({ writingMode: "vertical-rl" }),
			bs(48),
			p(3, 2),
			rounded("sm"),
			bg("brand.solid"),
			fg("brand.onSolid"),
			font("serif"),
			weight("semibold"),
			transition("transform"),
			hover(raw({ transform: "translateY(-0.75rem)" })),
		]}
	>
		Moby-Dick
	</div>
	<div
		mix={[
			raw({ writingMode: "vertical-rl" }),
			bs(40),
			p(3, 2),
			rounded("sm"),
			bg("success.solid"),
			fg("success.onSolid"),
			font("serif"),
			weight("semibold"),
			transition("transform"),
			hover(raw({ transform: "translateY(-0.75rem)" })),
		]}
	>
		Middlemarch
	</div>
	<div
		mix={[
			raw({ writingMode: "vertical-rl" }),
			bs(52),
			p(3, 2),
			rounded("sm"),
			bg("warning.solid"),
			fg("warning.onSolid"),
			font("serif"),
			weight("semibold"),
			transition("transform"),
			hover(raw({ transform: "translateY(-0.75rem)" })),
		]}
	>
		War and Peace
	</div>
</div>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.when('&[data-color="1"]', u.raw({ color: "var(--ui-chart-1)" })))
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.when('&[data-color="1"]', u.raw({ color: "var(--ui-chart-1)" })))
```

## Signature

```ts
u.raw(styles: CSSStyles)
```