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

/* 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

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:

// 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:

// 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:

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

1. Minimal Bundle Size

Purpose

JIT mode generates only the CSS you actually use, resulting in dramatically smaller bundle sizes.

// Traditional CSS: ~3MB (all utilities)
// BaroCSS JIT: ~50KB (only used utilities)

const stats = runtime.getStats();
console.log(stats);
// {
//   totalClasses: 25,
//   generatedCSS: '2.1KB',
//   bundleSize: '2.1KB',  // vs 3MB traditional
//   unusedCSS: '0KB'      // vs 2.95MB traditional
// }

2. Faster Loading

Purpose

Smaller CSS files mean faster download times and better user experience.

// Performance comparison
const traditionalCSS = '3MB'; // Download time: ~2.5s
const jitCSS = '50KB';        // Download time: ~0.1s

// 25x faster loading!

3. Memory Efficiency

Purpose

JIT mode uses significantly less memory by only storing CSS for classes that are actually used.

// Memory usage comparison
const traditionalMemory = '15MB'; // All utilities in memory
const jitMemory = '500KB';        // Only used utilities

// 30x less memory usage!

4. Development Speed

Purpose

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

// Traditional: Rebuild entire CSS
npm run build; // 30+ seconds

// JIT: Instant CSS generation
element.className = 'new-class'; // 0ms

5. Zero Build Configuration

Purpose

Start using BaroCSS immediately without complex setup or build processes.

<!-- Just include the script and start styling -->
<script type="module" src="https://unpkg.com/@barocss/browser/dist/cdn/barocss.js"></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:

// 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:

// 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:

// 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:

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:

// 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:

// 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:

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:

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:

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:

// 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 Comparison

Metric	Traditional CSS	BaroCSS JIT	Improvement
Bundle Size	3MB	50KB	60x smaller
Load Time	2.5s	0.1s	25x faster
Memory Usage	15MB	500KB	30x less
Unused CSS	2.95MB	0KB	100% elimination
Build Time	30s+	0ms	Instant
Development Speed	Slow	Instant	Immediate feedback
Change Detection	Manual file scanning	Automatic DOM monitoring	Real-time
Dynamic Content	Limited	Full support	Complete

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?