hypostyle

  

Minimalist 5th
Generation
CSS-in-JS built for concision and extension. Fast af, powered
by nano-css.

``
npm i hypostyle
`

#### Why

Typical 4th
gen
CSS-in-JS can be very verbose. hypostyle provides a way of authoring CSS in
Javascript using shortcuts and abbreviations — like atomic CSS and frameworks
like Tailwind — at a fraction of the bundle size.
hypostyle is also framework-agnostic, meaning it can be adapted into any UI
framework and _any CSS-in-JS library_ that supports style objects.

#### Contents

- Presets
- Responsive Values
- Tokens & Shorthands
- Macros
- Variants
- Writing CSS

Getting Started

The hypostyle() function is used to configure a theme and return an instance.
Your theme can contain the following properties:

- tokens - design system tokens, like colors, spacing, etc
- breakpoints - array of breakpoint widths (optional)
- shorthands - abbreviated properties that map to one or more CSS properties
and (optionally) design tokens
- macros - boolean properties mapped to pre-defined style objects
- variants - named groups of pre-defined style objects
- properties - config supported CSS properties

#### Presets

Hypostyle includes optional preset objects with a starter set of tokens,
shorthands, and macros. Source
code.

`javascript
import * as presets from 'hypostyle/presets'

const { css } = hypostyle(presets)
`

Responsive Values

_All values can be responsive_ by passing an array of values. This array maps to
the breakpoints array on your theme. The first value is mobile, and the
remaining values are convered into @media breakpoints.

`javascript
css({
d: ['block', 'none'],
})
`

Will generate:

`css
.__3sxrbm {
display: block;
}
@media (min-width: 400px) {
.__3sxrbm {
display: none;
}
}
`

Alternatively — and useful if you want to only specify a single breakpoint — you
can use object syntax. Just use the indices as object keys:

`javascript
css({
d: { 1: 'none' },
})
`

`css
@media (min-width: 400px) {
.__3sxrbm {
display: none;
}
}
`

Tokens & Shorthands

Tokens are either objects of named values, or arrays (scales) of values.

`javascript
const { css } = hypostyle({
tokens: {
color: {
primary: '#ff4557',
},
space: [0, 4, 8, 12, 16],
},
})
`

Tokens are associated with configurable CSS properties so that you can use
token values in your styles. By default, _most_ CSS properties are supported and
are self referencing.

Shorthands are like shortcuts that allow you to abbreviate
CSS these properties. The rest of the above example could look like this:

`javascript
const { css } = hypostyle({
tokens: {
color: {
primary: '#ff4557',
},
space: [0, 4, 8, 12, 16],
},
shorthands: {
bg: 'background',
},
})
`

Which can be used like this, because background is associated with the color
tokens by default:

`javascript
css({ bg: 'primary' }) // => { background: '#ff4567' }
`

Macros

macros are simple boolean values that expand to be full style objects. The
style objects can use any shorthands or tokens you have configured.

`javascript
const { css } = hypostyle({
macros: {
cover: { top: 0, bottom: 0, left: 0, right: 0 },
},
})

css({ cover: true }) // => { top: 0, bottom: 0, ... }
`

These are most helpful when used with JSX (via React,
hyposcript, or otherwise) i.e.:

`jsx

`

Variants

Slightly higher-level than macros are variants, which allow you to define named
style blocks based on property values. Again, your style blocks here can use any
shorthands and tokens you've configured.

`javascript
import * as presets from 'hypostyle/presets'

const { css } = hypostyle({
...presets,
variants: {
appearance: {
link: {
c: 'blue',
textDecoration: 'underline',
},
},
},
})
`

Which look like this when used:

`javascript
css({ appearance: 'link' }) // => { color: 'blue', textDecoration: 'underline' }
`

Writing CSS

#### Pseudos & Nested Selectors

`javascript
const link = css({
color: 'black',
'&:hover': {
color: 'blue',
},
'.icon': {
transform: 'translateX(5px)',
},
})
`

#### Global Styles

Also included alongside css is injectGlobal.

`javascript
import { hypostyle } from 'hypostyle'
import * as presets from 'hypostyle/presets'

const { injectGlobal } = hypostyle(presets)

injectGlobal({
'html, body': {
c: '#333',
boxSizing: 'border-box',
},
})
`

#### Keyframes

Also also included alongside css is keyframes.

`javascript
const { keyframes } = hypostyle(presets)

const animation = keyframes({
'0%': {
opacity: 0,
},
'100%': {
opacity: 1,
},
})

css({
animation: ${animation} 1s linear infinite,
})
`

Configuring CSS Properties

Hypostyle comes with built-in support for _most_ CSS properties. To add
additional support, have a look at the properties.js file for API, and pass
your additional props to the constructor. Example:

`javascript
const hypo = hypostyle({
...,
tokens: {
...,
radii: ['4px', '8px']
},
shorthands: {
...,
bTLR: 'borderTopLeftRadius'
},
properties: {
borderTopLeftRadius: {
token: 'radii'
}
}
})
`

Usage:

`javascript
hypo.style({ bTLR: 1 }) // => { borderTopLeftRadius: '8px' }
`

Server Usage

hypostyle is isomorphic!

`javascript
const { css, flush, injectGlobal } = hypostyle(presets)

injectGlobal({ '*': { boxSizing: 'border-box' } })

const classname = css({ c: 'primary' })
const stylesheet = flush()

const html =

$3

- hyposcript
- hypobox
- styled-system
- nano-css

$3

MIT License © Sure Thing