# solid-css

> A styling tool when using solidjs to custom components

Latest version **2.1.0** (published 2022-10-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install solid-css
pnpm add solid-css
yarn add solid-css
bun add solid-css
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2022-10-05 |
| First published | 2022-10-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 17 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | liaodehui1 |

## Links

- npm: https://www.npmjs.com/package/solid-css
- Repository: https://github.com/liaodehui1/solid-css
- Homepage: https://github.com/liaodehui1/solid-css#readme
- Issues: https://github.com/liaodehui1/solid-css/issues
- npm.io page: https://npm.io/package/solid-css

## Dependencies (2)

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

## Recent versions

- 2.1.0 (latest) — 2022-10-05
- 2.0.0 — 2022-10-05

## README

# solid-css

A styling tool when using solidjs to custom components

## usage

### css

```ts
import { Component, createSignal } from "solid-js";
import { css, StyleProvider } from "solid-css";

const className = css`
  color: red;
`;

const Child: Component<{ name: string }> = ({ name }) => {
  return (
    <div>
      My name is <span class={className()}>{name}</span>
    </div>
  );
};

export const App: Component<{ name: string }> = ({ name }) => {
  return (
    <StyleProvider>
      <Child name="Tom" />
    </StyleProvider>
  );
};
```

### createGlobalStyles

```ts
import { Component } from "solid-js";
import { createGlobalStyles, StyleProvider } from "solid-css";

const getGlobalStyles = createGlobalStyles`
  span {
    color: green;
  }
`;

const Child: Component<{ name: string }> = ({ name }) => {
  getGlobalStyles();

  return (
    <div>
      My name is <span>{name}</span>
    </div>
  );
};

export const Global: Component<{ name: string }> = ({ name }) => {
  return (
    <StyleProvider>
      <Child name={name} />
    </StyleProvider>
  );
};
```

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