BaroCSS API Reference

BaroCSS provides a comprehensive API for real-time CSS generation and utility-first styling. This section covers all the core APIs, runtime systems, and configuration options.

🚀 Quick Start

import { BrowserRuntime } from 'barocss/runtime/browser';
import { createContext } from 'barocss';

// Initialize runtime
const runtime = new BrowserRuntime({
  config: {
    theme: {
      extend: {
        colors: {
          brand: '#3b82f6'
        }
      }
    }
  }
});

// Start watching DOM changes
runtime.observe(document.body, { scan: true });

📚 API Overview

Core APIs

• Context API - Theme and configuration management
• Engine API - CSS generation and AST processing
• Parser API - Class name parsing and tokenization

Runtime APIs

• Browser Runtime - Browser-specific DOM integration
• Server Runtime - Server-side CSS generation

Extension APIs

• Plugin System - Custom utilities and variants
• Configuration - Theme and behavior customization

🎯 Main Entry Points

Browser Usage

// CDN
import { BrowserRuntime } from 'https://unpkg.com/barocss/dist/cdn/barocss.js';

// NPM
import { BrowserRuntime } from 'barocss/runtime/browser';

Server Usage

import { ServerRuntime } from 'barocss/runtime/server';
import { createContext, generateCss } from 'barocss';

Core Usage

import { 
  createContext, 
  parseClassToAst, 
  generateCss,
  IncrementalParser 
} from 'barocss';

🔧 Key Concepts

Context

The central configuration and theme management system that provides access to theme values, configuration options, and plugin functionality.

Engine

The core CSS generation system that parses class names, builds ASTs, and converts them to CSS rules.

Runtime

Environment-specific implementations that handle CSS injection (browser) or generation (server).

Plugins

Extensible system for adding custom utilities, variants, and theme extensions.

📖 API Categories

Core Functions

• createContext(config) - Create a BaroCSS context
• parseClassToAst(className, ctx) - Parse class to AST
• generateCss(classList, ctx) - Generate CSS from classes
• IncrementalParser - Efficient class processing

Runtime Classes

• BrowserRuntime - Browser DOM integration
• ServerRuntime - Server-side processing
• ChangeDetector - DOM change monitoring

Plugin System

• registerUtility() - Register custom utilities
• registerModifier() - Register custom variants
• Plugin interface - Plugin development

Configuration

• Config interface - Configuration options
• Theme interface - Theme structure
• Theme extension and customization

🎨 Usage Patterns

Basic Styling

const runtime = new BrowserRuntime();
runtime.addClass('bg-blue-500 text-white p-4');

Custom Theme

const ctx = createContext({
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a'
        }
      }
    }
  }
});

Plugin Development

const customPlugin = (ctx) => {
  ctx.extendTheme('colors', {
    'custom-blue': '#1e40af'
  });
};

🔗 Related Documentation

• Installation Guide
• Configuration
• Custom Styles
• Plugin Development

---

Ready to dive deeper? Start with the Context API to understand how BaroCSS manages themes and configuration.