# decorock

> Styled component library for solid.js

Latest version **0.1.8** (published 2022-12-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install decorock
pnpm add decorock
yarn add decorock
bun add decorock
```

## 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.1.8 |
| Published | 2022-12-27 |
| First published | 2022-12-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 15 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ddpn08 |
| Maintainers | ddpn08 |
| Keywords | css, css-in-js, styles, solidjs |

## Links

- npm: https://www.npmjs.com/package/decorock
- Homepage: https://github.com/ddpn08/decorock#readme
- npm.io page: https://npm.io/package/decorock

## Dependencies (2)

- [goober](https://npm.io/package/goober.md) ^2.1.11
- [csstype](https://npm.io/package/csstype.md) ^3.1.1

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.1.8 (latest) — 2022-12-27
- 0.1.7 — 2022-12-27
- 0.1.6 — 2022-12-27
- 0.1.5 — 2022-12-26
- 0.1.4 — 2022-12-26
- 0.1.3 — 2022-12-26
- 0.1.2 — 2022-12-26
- 0.1.1 — 2022-12-25
- 0.1.0 — 2022-12-25

## README

<h1 align="center">decorock</h1>

[![NPM Version](https://img.shields.io/npm/v/decorock.svg?style=for-the-badge)](https://www.npmjs.com/package/decorock)
![](https://img.shields.io/npm/dm/decorock.svg?style=for-the-badge)

---

Styled component library for solid.js

## Install

```
npm i decorock
```

## Usage

### `styled`

```tsx
const Heading = styled.('h1')`
  color: ${(p) => p.theme.color};
`

const Container = styled.div((p) => `
  background-color: ${p.theme.bg};
`)

const Paragraph = styled.p((p) => ({
  fontSize: p.theme.fontSize
}))

const Box = styled.div<{height: number}>`
  height: ${(p) => p.height};

  & > div {
    color: blue;
  }
`

<Box height={100} />
```

---

### `css`

```tsx
const Box = (props) => {
  return (
    <div
      class={css`
        background-color: aqua;
      `}
    >
      {props.children}
    </div>
  )
}
```

---

### `Theme`

```tsx
import { styled, createThemeStore, ThemeProvider } from 'decorock'

const [theme, setTheme] = createThemeStore({
  colors: {
    primary: 'aqua',
  },
})

const SomeText = styled.div`
  color: ${(props) => props.theme.colors.primary};
`

render(
  () => (
    <ThemeProvider theme={theme}>
      <SomeText>some text</SomeText>
    </ThemeProvider>
  ),
  document.getElementById('app'),
)
```

---

### `SSR`

```tsx
import { renderStyle } from 'decorock'

// After your app has rendered, just call it:
const styleTag = renderStyle()

// -> <style id="_goober">body { background-color: red; } .go000000000 {color: aqua;}</style>
```

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