Pre-compile CSS objects to warm the cache and eliminate FOUC

import { warmCache } from "./theme";

warmCache([
  {
    padding: "$medium",
    backgroundColor: "$primary",
  },
  {
    color: "$text",
    fontSize: "$large",
  },
]);
Copy

warmCache pre-compiles CSS objects before they're used, which:

• Eliminates FOUC by ensuring styles are ready immediately
• Improves performance by pre-generating CSS classes
• Useful for common styles that are used throughout your app

Pre-compile common component styles:

import { warmCache } from "./theme";

// Pre-compile common styles
warmCache([
  // Button styles
  {
    padding: "$medium $large",
    borderRadius: "$default",
    cursor: "pointer",
  },
  // Card styles
  {
    padding: "$large",
    borderRadius: "$default",
    backgroundColor: "$background",
  },
  // Container styles
  {
    maxWidth: "1000px",
    margin: "0 auto",
    padding: "$medium",
  },
]);
Copy

• Call warmCache() early in your app initialization
• Invalid styles are silently skipped
• Works with theme tokens, utilities, and media queries
• Most useful for frequently used styles