Skip to content

Optimize CSS processing and modernize vendor prefix handling#7

Merged
SteedMonteiro merged 3 commits intomainfrom
claude/optimize-app-studio-performance-3kvGQ
Feb 22, 2026
Merged

Optimize CSS processing and modernize vendor prefix handling#7
SteedMonteiro merged 3 commits intomainfrom
claude/optimize-app-studio-performance-3kvGQ

Conversation

@SteedMonteiro
Copy link
Copy Markdown
Contributor

Summary

This PR optimizes CSS processing performance and modernizes vendor prefix support by removing outdated prefixes for older browsers and streamlining CSS variable normalization logic.

Key Changes

  • Vendor Prefix Modernization (src/utils/vendorPrefixes.ts):

    • Removed -moz- prefixes (Firefox 91+ supports unprefixed properties)
    • Removed -ms- prefixes (IE/Edge Legacy no longer supported)
    • Removed -o- prefixes (Opera uses Blink engine)
    • Retained only -webkit- prefixes for Safari/WebKit compatibility
    • Updated tests to reflect modern browser support
  • CSS Value Normalization (src/element/css.ts):

    • Simplified CSS variable detection using charCodeAt() for performance
    • Streamlined vendor-prefixed value normalization logic
    • Reduced string manipulation operations
  • Theme CSS Generation (src/providers/Theme.tsx):

    • Optimized generateCSSVariables() for single-pass processing
    • Reduced intermediate string allocations
    • Minified CSS variable output
  • Element Rendering (src/element/Element.tsx):

    • Introduced styleRelevantProps Set for efficient prop filtering
    • Improved CSS generation performance through optimized prop detection
  • Style Utilities (src/utils/style.ts):

    • Replaced DOM-based CSS property detection with static Set
    • Eliminates unnecessary DOM operations
  • Build Configuration (package.json):

    • Added "sideEffects": false for better tree-shaking support

Implementation Details

  • Performance improvements focus on reducing string allocations and DOM operations
  • Changes target modern browser support (Chrome 100+, Safari 15+, Firefox 91+)
  • Snapshot test updated to reflect optimized CSS output

https://claude.ai/code/session_01MXi5KgyqXXzTFQ5Di811uz

- Remove document.createElement at module init (SSR-safe)
- Cache CSS.supports() results to avoid repeated queries
- Remove obsolete vendor prefixes for modern browsers
- Optimize CSS variable generation: single-pass, minified
- Single-pass prop classification in extractUtilityClasses
- Fast serialization in hashStyleProps (skip JSON.stringify)
- Single-pass prop filtering in Element.tsx
- Pre-compute media queries in processStyles
- Add sideEffects: false for better tree-shaking

Bundle size: CJS 24.12->23.52KB, ESM 23.92->23.31KB,
UMD 24.36->23.74KB (~2.5% reduction)

https://claude.ai/code/session_01MXi5KgyqXXzTFQ5Di811uz
@github-actions
Copy link
Copy Markdown

github-actions bot commented Feb 22, 2026

size-limit report 📦

Path Size
dist/app-studio.cjs.production.min.js 23.8 KB (-2.66% 🔽)
dist/app-studio.esm.js 23.6 KB (-3.04% 🔽)
dist/app-studio.umd.production.min.js 24.11 KB (-2.19% 🔽)

Integrated upstream htmlOnlyAttributes and useMemo removal
with our perf optimizations (cssSupportCache, fast hash).

https://claude.ai/code/session_01MXi5KgyqXXzTFQ5Di811uz
@SteedMonteiro SteedMonteiro merged commit f0c32c9 into main Feb 22, 2026
4 of 8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants