addyosmani/critical

This system is a critical CSS extraction tool that identifies and inlines above-the-fold styles to optimize page rendering. It employs a dual-engine architecture that automatically selects between a fast, browser-free static analysis path for standard pages and a Playwright-based render engine for Single Page Applications. The tool provides a command-line interface for processing HTML and CSS, supporting features like viewport configuration and structured JSON output for integration with other agents.

A new pre-commit hook has been introduced in the .vite-hooks directory that executes the 'vp staged' command. This change automates the processing of staged files before commits are finalized, ensuring consistent handling of Vite-related assets or configurations without manual intervention.

.vite-hooks · high confidence

Critical v9 replaces the previous v8 processing stack with a new two-engine system that automatically selects the optimal extraction method based on the delivered HTML. For standard rendered pages, the new static engine uses css-tree to parse and walk the CSS AST, matching selectors against the DOM to prune unused rules and at-rules (such as empty @media or unused @keyframes) without requiring a browser, resulting in deterministic, byte-identical output. For Single Page Application (SPA) shells—detected by identifying empty framework mount nodes like \#root or \#app—the system automatically escalates to a render engine using Playwright to measure above-the-fold content. The CSS minification and finalization pipeline has also been rewritten to use Lightning CSS, replacing the previous clean-css, postcss, and cssnano stack to provide faster, more robust dead-code elimination and deduplication. Additionally, the inlining strategy has been updated to use CSP-safe \<link rel="preload"\> hints instead of media-swapping, and the source loading layer now uses native Node.js APIs (fs/promises, fetch) instead of vinyl streams.

src · high confidence

Critical has been rewritten for v9 to use a two-engine architecture: a fast, browser-free static engine that matches CSS against the delivered DOM, and a render engine (using Playwright) that measures the above-the-fold set in a real viewport. The tool now auto-routes between them based on whether the HTML contains rendered content or is an empty SPA shell, and exposes this decision via the new \--explain\ flag. The CLI has been rebuilt using Node.js built-ins (\parseArgs\, \styleText\) to support zero-config directory input, multiple viewports via \--dimensions\, and structured JSON output for agents. Configuration has been simplified: \styleTarget\ and \dest\ are replaced by a single \target\ option, and \include\/\timeout\ are removed in favor of passing them directly to the underlying Penthouse options. The project also drops support for Node.js \< 10, switches to Jest for testing, and replaces \filter-css\ with \postcss-discard\ for handling ignore rules.

(repo-wide) · high confidence

The library now supports a dual-engine approach to inlining critical CSS, offering a choice between a fast static analysis path and a browser-based render path. The new static engine (src/engines/static.js) analyzes the delivered DOM to identify used styles, with added support for fold-aware scoping to better target above-the-fold content. The new render engine (src/engines/render.js) utilizes Playwright to load the page in a real browser, ensuring accurate CSS extraction for Single Page Applications (SPAs) and complex layouts where the initial HTML is an empty shell. This change is accompanied by new benchmarking tools (bench/) and realistic test fixtures (fixtures/) to validate the performance and correctness of the new engines against existing solutions.

bench, fixtures, src/engines · high confidence

Added a new test suite covering the v9 critical CSS engine's API, CLI, and internal logic. Tests verify the API contract (input precedence, engine pinning, minification, and report shape), CLI behavior (help, file/stdin/directory inputs, inline mode, JSON output, and error handling), and core engine features including static vs. render routing, fold-awareness, CSS option handling (raw strings, file paths, globs), and source loading (query strings, data URIs, base hrefs). The suite also includes regression tests for modern CSS syntax, specific issue fixes, and benchmarks comparing the new engine against Beasties.

test · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• CAI 59 → 55 (-4.8)
• Rubric changed (rubric-2026.09.12 → rubric-2026.09.18) — scores are not directly comparable.

• Code Health 64 → 64 (+0.0)
• Architecture 69 → 69 (+0.0)
• Maturity 67 → 67 (+0.0)
• Readiness 53 → 40 (-13.1)
• Security 66 → 71 (+4.8)
• Performance 100 (new)

• Documentation: no installation or build instructions (README.md)
• Documentation: no usage examples (README.md)

• 1 commits — 1 feature/other, 0 fixes

• (root) — 1 commit

• change: chore: add types (#627)

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

addyosmani/critical was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.