Getting Started

This guide aims to give you a quick overview of the basics of this package and how to use it.
Under the hood, this package uses a little CSS variable trick to create inline styles with pseudo classes and at-rules like media queries.

Before you get started, it is recommended to read at least the basics section. This will give you a rough understanding of how the package works internally.

The first thing you need to do is create a renderer. This is the core of the package and will be used to create the CSS function.

import { createRenderer } from '@weser/style'

const css = createRenderer()

The CSS function is the main way to style your components. It accepts a style object and returns a props object including the resolved inline style object as well as a list of style nodes that need to be injected into the document somewhere.

import { css } from './renderer'

const [props, nodes] = css({
  color: 'red',
  fontSize: 20,
  m: {
    fontSize: 16,
  }
  ':hover': {
    color: 'blue',
  },
})

function Text() {
  return (
    <>
      {nodes}
      <div {...props}>Hello</div>
    </>
  )
}

And that's it! You're now able to create styled components wherever you want.