Inlines

When you just want to use the inline style prop in React.

Uses inline styles where possible, uses dynamic stylesheets for the rest.

For example

import { styled } from 'inlines'

const App = () => {
  return (
    <styled.div
      style={{
        border: '10px solid purple',
        background: 'yellow',
        '@media (min-width: 600px)': {
          background: 'hotpink'
        },
        '@keyframes': {
          from: {
            opacity: 0
          },
          to: {
            opacity: 1
          }
        }
      }}
    >
      <div
        style={{
          marginBottom: 8
        }}
      >
        Just use normal elements when you can
      </div>
      <styled.input
        placeholder="Wow I'm orange"
        style={{
          border: '1px solid blue',
          '&::placeholder': {
            color: 'orange'
          }
        }}
      />
      <styled.button
        style={{
          border: '1px solid red',
          '&:hover': {
            background: 'yellow'
          },
          '&:active': {
            background: 'red'
          }
        }}
      >
        Look I'm a button
      </styled.button>
    </styled.div>
  )
}

export default App

Variants

Pass a variants object of named styles; each deep-merges on top of style. The variant prop selects one and is typed as keyof the variants you passed (or undefined for the base style):

import { styled } from 'inlines'
import type { ComponentProps } from 'react'

export const Button = (p: ComponentProps<'button'> & {
  variant?: 'primary' | 'ghost'
}) => {
  return <styled.button
    {...p}
    style={{
      height: 40,
      border: '1px solid var(--border)',
      background: 'var(--btn-bg)',
      '&:hover': { background: 'var(--btn-bg-hover)' },
    }}
    variants={{
      primary: {
        background: 'var(--accent)',
        color: 'var(--accent-fg)'
      },
      ghost: {
        border: 0,
        background: 'transparent'
      }
    }}
  />
}

// <Button variant="primary" />

variants and variant never reach the DOM. The build-time optimizer (optimize from inlines/ssr) statically extracts variants — including nested styles (&:hover, @media, @keyframes) — into per-variant class lists selected by a hoisted lookup, demoting the element to a plain tag when everything is static. Anything it can't resolve statically (spreads after style/variants, computed keys, dynamic values) is left to the runtime, which behaves identically.

Note on shorthands: base padding plus a variant paddingLeft are separate atomic classes for different keys — which wins follows stylesheet order, so prefer overriding the same property name you set in style.

Or use styled as a function if you prefer:

import { styled } from 'inlines'

const Container = styled('div', {
  border: '10px solid purple',
  background: 'yellow',
  '@media (min-width: 600px)': {
    background: 'hotpink'
  },
  '@keyframes': {
    from: {
      opacity: 0
    },
    to: {
      opacity: 1
    }
  }
})

const Input = styled('input', {
  border: '1px solid blue',
  '&::placeholder': {
    color: 'orange'
  }
})

const Button = styled('button', {
  border: '1px solid red',
  '&:hover': {
    background: 'yellow'
  },
  '&:active': {
    background: 'red'
  }
})

const App = () => {
  return (
    <Container>
      <div
        style={{
          marginBottom: 8
        }}
      >
        Just use normal elements when you can
      </div>
      <Input placeholder="Wow I'm orange" />
      <Button>Look I'm a button</Button>
    </Container>
  )
}

export default App