Boss CSS

Polymorphic, usage-driven CSS-in-JS.

Warning: Boss CSS is not production-ready yet. Expect breaking changes and stability issues.

Website | Documentation

Table of Contents

• Key Features
• Quick Start
• Examples
• Strategy Modes
• License

Key Features

• Polymorphic $$ authoring with framework-aware runtime adapters.
• Style props and className parsing in one unified API.
• Strong generated TypeScript types for style props and prepared components.
• Plugin-driven parser and prop pipeline (parser, prop, strategy, use).
• Server output and browser runtime support with configurable strategy behavior.
• Zero-runtime compilation
• Runtime-only mode for client CSS injection when needed.
• Token support, pseudo selectors, media/breakpoint props, and nested child selectors.
• CLI tooling for init/compile/dev workflows.

Quick Start

Install and scaffold:

npx boss-css init

Import the generated runtime once near your app root:

import './.bo$$'

Examples

Write styles directly with $$:

export default function Demo() {
    return (
        <$$
            display="flex"
            gap={12}
            padding={16}
            borderRadius={12}
            backgroundColor="#111"
            color="#fff"
            hover={{ backgroundColor: '#222' }}
        >
            Hello Boss CSS
        </$$>
    )
}

ClassName syntax (prop:value tokens):

export function Badge() {
    return (
        <span className="display:inline-block padding:6_10 border-radius:999 color:white background-color:#ed4b9b">
            New
        </span>
    )
}

Grouped pseudo and responsive className:

export function Button() {
    return (
        <button className="mobile:hover:{color:white;background-color:black} hover:{text-decoration:underline;color:red}">
            Hover me
        </button>
    )
}

Mix static className and dynamic props:

export function Mixed({ bgColor }: { bgColor: string }) {
    return <div className="display:flex gap:12 border-radius:12" backgroundColor={bgColor} />
}

Compose className conditionals with cx:

import { cx } from 'boss-css/variants'

const className = cx('display:flex gap:8', { 'hover:color:purple': true })

Bosswind plugin for Tailwind-like utilities:

const Box = () => <div className="flex w:100 bg:blue-500 p:4 hover:bg:blue-700">Tailwind-like Box using classNames</div>

const BoxProps = () => (
    <$$ flex width="100" bg="blue-500" p="4" hover={{ bg: 'blue-700' }}>
        Tailwind-like Box using props
    </$$>
)

Strategy Modes

Boss CSS supports multiple output strategies:

• inline-first (default): Inline everything that's possible => smallest CSS output, lowest possible unused styles, instant critical CSS.
• classname-first: Use class names everywhere possible, variables for dynamic cases.
• classname-only: Static class parsing with zero runtime output. (aka TailwindCSS).
• runtime: Runtime-only or hybrid behavior, for cases where styles need to be generated at runtime.

Read more: https://bosscss.com/docs/concepts/runtime-strategy

License

MIT