perf(css-processor): cache compiled inline CSS strings

packages/css-processor/src/CSSProcessor.ts

@@ -100,8 +100,13 @@ export type MixedStyleDeclaration = Omit<
     [k in MixedSizeCSSPropertiesKeys]?: number | string;
   };
 
+// Bounded to avoid unbounded growth on long-lived processors.
+const INLINE_CSS_CACHE_LIMIT = 256;
+
 export class CSSProcessor {
   public readonly registry: CSSPropertiesValidationRegistry;
+  // LRU cache: same inline string compiles to the same CSSProcessedProps.
+  private inlineCssCache: Map<string, CSSProcessedProps> = new Map();
   constructor(userConfig?: Partial<CSSProcessorConfig>) {
     const config = {
       ...defaultCSSProcessorConfig,
@@ -126,7 +131,24 @@ export class CSSProcessor {
   }
 
   compileInlineCSS(inlineCSS: string): CSSProcessedProps {
+    const cache = this.inlineCssCache;
+    const cached = cache.get(inlineCSS);
+    if (cached !== undefined) {
+      // LRU touch: re-insert to mark as most recently used.
+      cache.delete(inlineCSS);
+      cache.set(inlineCSS, cached);
+      return cached;
+    }
     const parseRun = new CSSInlineParseRun(inlineCSS, this.registry);
-    return parseRun.exec();
+    const result = parseRun.exec();
+    if (cache.size >= INLINE_CSS_CACHE_LIMIT) {
+      // Evict oldest (Map preserves insertion order).
+      const oldest = cache.keys().next().value;
+      if (oldest !== undefined) {
+        cache.delete(oldest);
+      }
+    }
+    cache.set(inlineCSS, result);
+    return result;
   }
 }