stylerun

Stylerun is the most efficient tool to describe styles in (J|T)avaScript. You can use it for small widgets or (P?)React SPAs. It is small, performant and have familiar API inspired by styled-components.

The size is less than 500 B and controlled by Size Limit.

The goal of the chosen API is to have CSS syntax highlighting in your script code with any popular extension for styled-components.

Stylerun does not parse your styles at runtime and pastes them as they are. All dynamic parts are converted to CSS variables, which is the most modern and performant way to manage dynamic styles!

Note that you can manage only CSS properties; do not include the entire CSS blocks in the function results.

Example https://stackblitz.com/edit/stylerun

import styled from 'stylerun'

const inputStyles = styled('')`
  font-size: ${(length: number) => `${1 + length * 0.1}em`};
`

export const Input = () => {
  const [value, setValue] = useState('')

  return (
    <input
      {...inputStyles(value.length)}
      value={value}
      onChange={(e) => setValue(e.currentTarget.value)}
    />
  )
}

Here inputStyles(1) will return { className: 'sr_1_zzzz', style: { '--2_sr_1_zzzz': '1.1em' } }

Each style function returns self class name with toString method, which allows you to use styles as selectors! Also, you could chain styles with styled method to add extra styles with selectors

let listStyles = styled('')`
  color: red;
`
let ulStyles = styled('')`
  margin: 1rem;
`.styled(':hover')`
  box-shadow: 0 0 1rem gray;
`.styled(listStyles)`
  padding-left: 1rem;
  color: ${(props: { color: string }) => props.color};
`

Motivation

CSS-in-JS is a powerful approach with benefits like: simple dynamic styles, critical CSS and dead code elimination by design and many others. Stylerun, inspired by Reshadow and styled-jsx, try to get all that benefits, but keeping natural styling and reduce JS specificity.

Limitations

Currently there is no SSR support
Stylerun has no compiler (pre/post processor) thats prevent vendor prefixing and nesting (&) usage

TODO: https://github.com/artalar/stylerun/issues/19
Stylerun has no built time static extraction and hasn't goal for that.