BaroCSS

Appearance

JIT Mode ​

JIT CSS Generation

BaroCSS implements a Just-In-Time (JIT) CSS generation system that creates styles only when they're needed, providing optimal performance and minimal bundle sizes. Built to support utility-first syntax in real-time.

What is JIT Mode? ​

Purpose

Just-In-Time (JIT) compilation is a technique where code is compiled at runtime, just before it's needed. In BaroCSS, this means:

  • Generate CSS on-demand - Only create styles for classes you actually use
  • Zero unused CSS - No bloated stylesheets with unused utilities
  • Real-time compilation - Generate styles instantly as you develop
  • Optimal performance - Minimal memory usage and fast loading times
  • Zero build time - No build processes or configuration required

Traditional CSS vs JIT Mode ​

Traditional CSS Approach ​

Problems with Traditional CSS

css
/* Traditional: Generate all possible utilities */
.bg-red-500 { background-color: rgb(239 68 68); }
.bg-red-600 { background-color: rgb(220 38 38); }
.bg-red-700 { background-color: rgb(185 28 28); }
.bg-blue-500 { background-color: rgb(59 130 246); }
.bg-blue-600 { background-color: rgb(37 99 235); }
.bg-blue-700 { background-color: rgb(29 78 216); }
.bg-green-500 { background-color: rgb(34 197 94); }
.bg-green-600 { background-color: rgb(22 163 74); }
.bg-green-700 { background-color: rgb(21 128 61); }
/* ... thousands more utilities */

Problems:

  • Large bundle sizes - Includes all possible utilities
  • Unused CSS - Most utilities are never used
  • Slow loading - Large CSS files take time to download
  • Memory waste - Unused styles consume memory
  • Build complexity - Configure webpack, PostCSS, etc.
  • Slow development cycles - Wait for builds to see changes

BaroCSS JIT Mode ​

Benefits of JIT Mode

typescript
import { BrowserRuntime } from '@barocss/browser';

const runtime = new BrowserRuntime();

// Only generates CSS for classes you actually use
document.body.innerHTML = `
  <div class="bg-blue-500 text-white p-4">
    <h1 class="text-2xl font-bold">Hello JIT!</h1>
  </div>
`;

// Generated CSS (only what's needed):
// .bg-blue-500 { background-color: rgb(59 130 246); }
// .text-white { color: rgb(255 255 255); }
// .p-4 { padding: 1rem; }
// .text-2xl { font-size: 1.5rem; }
// .font-bold { font-weight: 700; }

Benefits:

  • Minimal bundle size - Only includes used utilities
  • Zero unused CSS - No waste
  • Fast loading - Small CSS files
  • Memory efficient - Only loads what's needed
  • Zero build time - No build processes required
  • Instant feedback - See changes immediately

How JIT Mode Works ​

1. Class Detection ​

Purpose

BaroCSS automatically detects which classes are being used through DOM monitoring.

BaroCSS automatically detects which classes are being used:

typescript
// BaroCSS monitors DOM changes
const element = document.createElement('div');
element.className = 'bg-red-500 text-white p-4 rounded-lg';

// JIT system detects: ['bg-red-500', 'text-white', 'p-4', 'rounded-lg']
// Only these 4 classes will generate CSS

2. On-Demand Generation ​

Purpose

CSS is generated only when a class is first encountered, with intelligent caching for subsequent uses.

CSS is generated only when a class is first encountered:

typescript
// First time using 'bg-blue-500'
element1.className = 'bg-blue-500'; // Generates CSS

// Second time using 'bg-blue-500'
element2.className = 'bg-blue-500'; // Uses cached CSS

// First time using 'bg-green-500'
element3.className = 'bg-green-500'; // Generates new CSS

3. Smart Caching ​

Purpose

Generated CSS is cached to avoid regeneration and improve performance.

Generated CSS is cached to avoid regeneration:

typescript
class JITCache {
  private cssCache = new Map<string, string>();
  
  generateCSS(className: string) {
    // Check cache first
    if (this.cssCache.has(className)) {
      return this.cssCache.get(className); // Cache hit!
    }
    
    // Generate new CSS
    const css = this.compileClass(className);
    this.cssCache.set(className, css);
    return css;
  }

JIT Mode Benefits ​

The browser runtime generates CSS when supported classes appear in the observed DOM. It can avoid rebuilding application CSS for those changes. Bundle size, load time, and memory use depend on the application; this guide has no reproducible measurements for them.

Development workflow ​

Purpose

JIT mode provides instant feedback during development with zero build time.

When an observed element gets a supported class, the browser runtime generates its CSS without an application CSS rebuild. The time depends on the page and device.

5. Zero Build Configuration ​

Purpose

Start using BaroCSS immediately without complex setup or build processes.

html
<script type="module">
  import { baroStart } from 'https://cdn.jsdelivr.net/npm/@barocss/browser@0.11.2/dist/cdn/barocss.js'
  baroStart()
</script>

No webpack, PostCSS, or build tools required!

Advanced JIT Features ​

1. Dynamic Class Generation ​

Purpose

JIT mode handles dynamic class names generated at runtime, perfect for component libraries and dynamic UIs.

JIT mode handles dynamic class names:

typescript
// Generate classes dynamically
function createButton(variant: string, size: string) {
  const className = `btn-${variant} btn-${size}`;
  const element = document.createElement('button');
  element.className = className;
  
  // JIT generates CSS for 'btn-primary btn-large' on first use
  return element;

const button = createButton('primary', 'large');

2. Arbitrary Value Support ​

Purpose

JIT mode supports arbitrary values with square bracket notation, generating CSS on-demand for any value.

JIT mode supports arbitrary values:

typescript
// Arbitrary values are generated on-demand
element.className = 'bg-[#ff6b6b] text-[18px] p-[2rem]';

// Generated CSS:
// .bg-\[\#ff6b6b\] { background-color: #ff6b6b; }
// .text-\[18px\] { font-size: 18px; }
// .p-\[2rem\] { padding: 2rem; }

3. Variant Generation ​

Purpose

Complex variants with multiple modifiers are generated only when needed, with proper CSS nesting.

Complex variants are generated only when needed:

typescript
// Complex variants
element.className = 'sm:dark:hover:bg-red-500/50';

// Generated CSS:
// @media (min-width: 640px) {
//   @media (prefers-color-scheme: dark) {
//     .sm\:dark\:hover\:bg-red-500\/50:hover {
//       background-color: rgb(239 68 68 / 0.5);
//     }
//   }
// }

4. Custom Utilities Integration ​

Purpose

JIT mode works seamlessly with custom utilities, generating CSS for your custom classes on-demand.

JIT mode works seamlessly with custom utilities:

typescript
import { staticUtility } from '@barocss/kit';
import { decl } from '@barocss/kit';

// Register custom utilities globally
staticUtility('brand-primary', [
  decl('color', '#3b82f6')
]);

staticUtility('brand-secondary', [
  decl('color', '#64748b')
]);

const runtime = new BrowserRuntime({
  config: {
    theme: {
      extend: {
        colors: {
          'brand-primary': '#3b82f6',
          'brand-secondary': '#64748b'
        }
      }
    }
  }
});

// JIT generates CSS for custom colors
element.className = 'bg-brand-primary text-brand-secondary';

Performance Optimization ​

1. Lazy Loading ​

Purpose

CSS is generated only when elements are visible, reducing initial load time and memory usage.

CSS is generated only when elements are visible:

typescript
// Intersection Observer integration
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Generate CSS when element becomes visible
      runtime.processElement(entry.target);
    }
  });
});

observer.observe(element);

2. Batch Processing ​

Purpose

Multiple classes are processed together for better performance and efficiency.

Multiple classes are processed together:

typescript
// Process multiple classes in one batch
const classes = ['bg-red-500', 'text-white', 'p-4', 'rounded-lg'];
const css = runtime.generateCss(classes.join(' '));

// More efficient than processing each class individually

3. Memory Management ​

Purpose

Unused CSS is automatically cleaned up to prevent memory leaks and maintain optimal performance.

Unused CSS is automatically cleaned up:

typescript
class JITManager {
  private usedClasses = new Set<string>();
  private cssCache = new Map<string, string>();
  
  cleanup() {
    // Remove CSS for classes no longer in use
    for (const [className, css] of this.cssCache) {
      if (!this.usedClasses.has(className)) {
        this.cssCache.delete(className);
        this.removeCSS(css);
      }
    }
  }

Use Cases ​

1. Component Libraries ​

Purpose

Perfect for dynamic component systems that generate classes at runtime.

Perfect for dynamic component systems:

typescript
class ComponentLibrary {
  createCard(variant: string, size: string) {
    const className = `card-${variant} card-${size}`;
    const element = document.createElement('div');
    element.className = className;
    
    // JIT generates CSS for new combinations
    return element;
  }

const library = new ComponentLibrary();
const card = library.createCard('primary', 'large'); // CSS generated on-demand

2. Dynamic Theming ​

Purpose

Handle theme changes efficiently with JIT-generated theme-specific CSS.

Handle theme changes efficiently:

typescript
function switchTheme(theme: string) {
  document.documentElement.className = theme;
  
  // JIT generates CSS for theme-specific classes
  const elements = document.querySelectorAll('[class*="theme-"]');
  elements.forEach(element => {
    const newClasses = element.className.replace(/theme-\w+/g, `theme-${theme}`);
    element.className = newClasses;
  });

3. User-Generated Content ​

Purpose

Handle user-created styles and dynamic content with JIT CSS generation.

Handle user-created styles:

typescript
// User creates custom styles
function createUserStyle(backgroundColor: string, textColor: string) {
  const className = `user-bg-${backgroundColor} user-text-${textColor}`;
  const element = document.createElement('div');
  element.className = className;
  
  // JIT generates CSS for user's custom classes
  return element;

Performance ​

The browser runtime generates CSS for classes found in the DOM. Actual bundle size, load time, memory use, and update latency depend on the application and its class list. This site has no reproducible benchmark for those values.

Conclusion ​

JIT Mode Benefits

JIT mode is the cornerstone of BaroCSS's performance and efficiency. By generating CSS only when needed, it provides:

  • Minimal bundle sizes - Only includes used utilities
  • Fast loading times - Small CSS files
  • Memory efficiency - No unused styles
  • Development speed - Instant feedback
  • Scalability - Handles any number of classes

JIT mode makes BaroCSS perfect for modern web applications that need optimal performance and developer experience.

Ready to Get Started?

Released under the MIT License.

Copyright © 2025 BaroCSS