@dash-ui/styles

---

> A tiny, powerful, framework-agnostic CSS-in-JS library

``sh
npm i @dash-ui/styles
`





















---

Features

- [x] Tiny (< 6kB), but
comprehensive api
- [x] Bring your own UI framework React, Preact, Vue, Svelte, etc.
- [x] Strongly typed with TypeScript
- [x] CSS variables are a first-class citizen
- [x] Themes are easy and built with design tokens (CSS variables) and selectors
- [x] Constructable Stylesheets are used when available
- [x] _Fast_, some may say blazing™
- [x] Autoprefixing for vendor-specific styles
- [x] Nesting div { > + { margin-left: 4px; } }
- [x] Minification
- [x] Server rendering made easy
- [x] Flushable globals make adding and removing global styles a breeze
- [x] Available as a UMD and ES Module

Quick start

Check out an example on CodeSandbox

`jsx harmony
// React example
import * as React from "react";
import { styles } from "@dash-ui/styles";

// Any global styles or tokens that are inserted into the DOM
// can be easily ejected by calling the function they return.
const flushTokens = styles.insertTokens({
color: {
// var(--color-brand)
brand: "#ee5b5f",
// var(--color-white)
white: "#fafafa",
},
elevation: {
// var(--elevation-resting)
resting:
"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
},
radius: {
// var(--radius-primary)
primary: "4px",
},
});

const flushGlobal = styles.insertGlobal
body {
min-height: 100vh;
}
;

// styles is a function for composing style variants in a
// deterministic way. In the example below, you'll see an example
// of a button with default styles and two variants: one for a
// 'brand' background color and one for a 'black' background color.
const button = styles.variants({
// The object in this callback is a mapping to the CSS
// tokens above. default here is a special style name
// that will be applied to each invocation of button()
default: ({ radius }) =>
display: inline-block;
border: none;
background: transparent;
padding: 0.5rem 1rem;
font-weight: 700;
border-radius: ${radius.primary};
box-shadow: ${elevation.resting};
color: ${color.white};

/**
* Dash uses a CSS preprocessor called stylis so nesting,
* autoprefixing, etc. come out of the box.
* https://www.npmjs.com/package/stylis
*/
:active {
transform: translateY(1px);
}
,
// Styles can also be defined in the object format
brand: ({ color }) => ({
backgroundColor: color.brand,
}),
// Lastly, styles need not use callbacks if they don't need
// access to design tokens
black: {
backgroundColor: "#000",
},
});

const Component = (props) => (



);
`

API docs

$3

| | Description |
| ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| styles.variants() | styles.variants() is a function for composing style variants in a deterministic way. It returns a function which when called will insert your styles into the DOM and create a unique class name. |
| styles.one() | A function that accepts a tagged template literal, style object, or style callback, and returns a function. That function inserts the style into a "
`

#### Arguments

`typescript
export function createStyleTagFromCache(
styles = require("@dash-ui/styles").styles,
options: CreateServerStylesOptions = {}
): string;
`

| Argument | Type | Required? | Default | Description |
| -------- | --------------------------------------------------------- | --------- | --------------------- | --------------------- |
| styles | styles | No | styles | A styles instance |
| options | CreateServerStylesOptions | No | {clearCache: false} | Configuration options |

#### Returns

`typescript
string; // A "
`

#### Arguments

`typescript
function createStyleTagFromString(
html: string,
styles = require("@dash-ui/styles").styles
): string;
`

| Argument | Type | Required? | Default | Description |
| -------- | -------- | --------- | -------- | ------------------- |
| html | string | Yes | | An HTML string |
| styles | styles | No | styles | A styles instance |

#### Returns

`typescript
string; // A