UnoCSS is an Instant On-demand Atomic CSS Engine that integrates with Vite to generate CSS. It works by extracting tokens from user code using regular expressions, avoiding AST parsing for performance benefits. Different extractors support various Atomic CSS approaches, such as attributify mode. The extracted tokens are used to generate CSS code when 'virtual:uno.css' is requested, matching and grouping rules by layers. UnoCSS trade-offs highlight performance priorities over correctness and output format.
Table of contents
1. Rough intro to UnoCSS2. How does UnoCSS work under the hood (with Vite)?2.5 Attributify mode has different extractor and CSS output format.3. Summary6 Impressions