DOCSEARCHbyAlgolia
Submit Docs

Boss CSS Documentation

website·Indexed 31 days ago

https://bosscss.com

A styling system featuring a proxy-powered API ($$) for using CSS props directly in JSX. It includes a PostCSS plugin for CSS generation, a React Native runtime, and Bosswind, a Tailwind-style compatibility layer. The toolkit provides support for design tokens, polymorphic components, and a dedicated CLI, ESLint plugin, and AI metadata generator.

Tokens
38.3K
Snippets
246
Records
334
Agent score
54%

What's inside Boss CSS

  1. Overview of Boss-CSS

    Boss-CSS is a polymorphic "CSS-in-JS" library that allows developers to apply CSS to a codebase using multiple different syntaxes. It is designed to be tooling-independent, meaning it can work regardless of the project stack (e.g., React, React Native, Solid) by parsing styles rather than relying on specific Babel plugins. It supports both static and dynamic extraction and can be used with or without a runtime.

  2. Overview of Boss CSS styling engine

    Boss CSS is a styling engine that separates authoring inputs from output strategies and build modes. It allows developers to use both JSX props and static class tokens for styling, with the ability to choose how that styling is delivered to the browser (e.g., inline styles, CSS classes, or runtime evaluation).

  3. Overview of Boss CSS features and capabilities

    Boss CSS is a polymorphic CSS-in-JS tool that generates styles based on usage. It supports multiple output strategies (runtime, zero-runtime, or hybrid) and provides a single global $$ proxy API for components, tokens, and helpers. Key features include:

    • CSS-familiar syntax: Class names that mirror CSS properties.
    • Bosswind mode: Tailwind-like prop and className shorthands.
    • Nested contexts: Support for pseudo-elements, @-rules, child selectors, and container queries in a unified syntax.
    • Typed tokens: Global access to typed token maps with component-level overrides.
    • Tooling: SWC-based compiler for pruning runtime, PostCSS/CLI support (no bundler plugins required), and an ESLint plugin.
    • Framework Support: Adapters for React, Preact, Solid, Qwik, and Stencil.

  4. Understand the Boss CSS architecture layers

    Boss CSS is organized into three distinct layers to separate how styles are written, how they are output, and how they are processed:

    1. Authoring Inputs: The surface where developers write styles (e.g., $$ JSX props or static className/class tokens).
    2. Output Strategies: Determines the type of output generated (e.g., inline styles vs. class rules).
    3. Build Modes: The mechanism used to generate or rewrite the output (e.g., PostCSS or CLI tools).

  5. Understand and implement the Boss CSS runtime strategy

    The runtime strategy wrapper allows Boss CSS behavior to run in the browser. It can operate in two primary modes:

    1. Runtime-only (runtime.only: true): CSS rules are injected directly in the browser. Server-side strategy CSS output and static className parsing are disabled.
    2. Hybrid (runtime.only: false): Combines server-side CSS output (from an underlying strategy) with browser-side evaluation.

    Use this strategy when style values depend on live state (e.g., dashboards, editors), when values must be resolved in the browser, or when you require runtime-only CSS injection.

  6. Understand the Boss CSS `classname-only` strategy

    classname-only is a static class string strategy that parses static className or class tokens directly into CSS. Unlike other Boss strategies, it completely skips the generation of runtime JavaScript files, making it ideal for non-React environments, low-JS environments, or projects where templates already emit static class strings.

  7. Understand Boss CSS authoring inputs

    Boss CSS provides two primary authoring inputs that determine how styles are defined. This choice is the first step in configuring the Boss CSS engine and shapes the subsequent setup.
    // 1. Component-driven styling using $$ JSX props
// 2. String-driven styling using static className / class tokens

  8. Use the Boss CSS interactive playground

    Boss provides a WebContainer-powered playground that boots a Vite + React project directly in the browser. It features a VSCode-like layout with an activity bar, explorer, editor, terminal, and preview. Key capabilities include:

    • Independent toggling of explorer, editor, terminal, and preview panels.
    • Resizable panes via draggable dividers.
    • Full file and folder management (add, delete, move, collapse/expand).
    • Shareable workspace state encoded directly into the URL.

  9. Understand Boss CSS polymorphic generation

    Boss CSS is "polymorphic," meaning it generates runtime files, CSS, and TypeScript types based on actual usage in your source code. Nothing is emitted unless it is explicitly needed. This ensures the output remains small and precise by adapting to the developer's usage rather than imposing a fixed runtime shape.

  10. Handle session lifecycle events with onSession

    The onSession hook provides information about the current execution context, such as whether the system is in watch mode or performing a build.
    // Payload received by onSession
{
  phase: 'start' | 'run' | 'stop'
  kind: 'watch' | 'postcss' | 'build' | 'compile' | 'custom'
  baseDir: string
  configPath: string | null
  runtimePath: string | null
}

  11. Use the global $$ proxy for styling and components

    The $$ global is a proxy-powered styling surface that provides a unified API for JSX elements, styling helpers, tokens, and prepared components. It allows for faster authoring by removing the need for imports in every file. Unlike jQuery's $, $$ is used for styling semantics rather than DOM mutation.
    // Use as a component with style props
<$$ display="flex" gap={12} />

// Generate style props without rendering a component
const props = $$.style({ padding: 12, hover: { color: 'purple' } })
<div {...props} />

// Create a prepared component
$$.Card = $$.$({ padding: 12, borderRadius: 12 })
<$$.Card />

  12. Understand Boss CSS tooling agnostic architecture

    Boss CSS is designed to be tooling agnostic, meaning it does not depend on specific framework compilers or build tools like Babel, Webpack, or Vite. This architecture ensures a portable setup where styling APIs remain consistent across different build systems, predictable CSS output via a unified Boss pipeline, and the ability to integrate in environments where Babel or SWC plugins are unavailable. It can be executed via PostCSS, the Boss CLI, or custom build orchestration.