# preact-dandy

> The simplest CSS-in-JS solution for Preact.

Latest version **0.2.2** (published 2019-04-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install preact-dandy
pnpm add preact-dandy
yarn add preact-dandy
bun add preact-dandy
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.2 |
| Published | 2019-04-18 |
| First published | 2019-04-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 13.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | SolarLiner |
| Maintainers | solarliner |

## Links

- npm: https://www.npmjs.com/package/preact-dandy
- Repository: https://github.com/SolarLiner/preact-dandy
- npm.io page: https://npm.io/package/preact-dandy

## Dependencies (2)

- [typestyle](https://npm.io/package/typestyle.md) ^2.0.1
- [classnames](https://npm.io/package/classnames.md) ^2.2.6

## Recent versions

- 0.2.2 (latest) — 2019-04-18
- 0.2.1 — 2019-04-17
- 0.2.0 — 2019-04-17
- 0.1.2 — 2019-04-17
- 0.1.1 — 2019-04-17
- 0.1.0 — 2019-04-16

## README

# preact-dandy
Small and fancy (like my pet dog) CSS-in-JS solution for preact.

![License](https://img.shields.io/npm/l/preact-dandy.svg)
![npm version](https://img.shields.io/npm/v/preact-dandy.svg)
![preact peer dependency version](https://img.shields.io/npm/dependency-version/preact-dandy/peer/preact.svg)
![npm type definitions](https://img.shields.io/npm/types/preact-dandy.svg)

## Install

```bash
npm i preact-dandy
```

## Usage

```typescript
import styled from "preact-dandy";

interface ButtonProps {
  class?: string;
  color: string;
  flat?: boolean;
  dense?: boolean;
}
const Button = styled<ButtonProps>(
  "button",
  {
    margin: "0.5em",
    padding: "1em",
    border: "unset",
    cursor: "pointer",
    borderRadius: "5px"
  },
  props => ({
    backgroundColor: props.flat ? "transparent" : props.color,
    color: props.flat ? props.color : textColor(props.color),
    padding: props.dense ? "0.5em 1em" : undefined, // Undefined object values are filtered out, use this to not override a property
    boxShadow: props.flat ? "initial" : "0 1.5px 3px rgba(0,0,0,0.3)"
  })
);
```

The main export is a `styled` function which takes 3 arguments:

1. **el** is the element used to render the component. In TypeScript this is restricted to the JSX "Intrinsic elements" to prevent use of HOC as it could lead to undesired behavior. This is however just a soft requirement. `el` is simply passed to `createElement` and does not care about its type.
2. **css** is the CSS object containing the syles to be applied to the component. This object is static, to dynamically style the component, see the `cssGenerator` argument.
3. **cssGenerator** (optional) is a function that takes the props as input and outputs a CSS object. This allows dynamic styling based on component values.

For TypeScript users, the `styled` function contains one optional type argument, which is used to type the props of the resulting component. The props are passed to the `cssGenerator` function but also to the resulting component, allowing you to have typed components.

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