$ show csstools/postcss-font-magician
postcss-font-magician is a PostCSS plugin that automates the generation of @font-face CSS rules. It scans for font-family declarations in stylesheets, then looks up the referenced fonts across multiple sources: Google Fonts, Bootstrap's font stack, custom defined fonts, and locally hosted font files. The plugin generates complete @font-face blocks with proper font-weight, font-style, font-stretch, font-display, and unicode-range declarations, and inserts them into the CSS AST after @charset, @import, and @layer statements but before rule sets. It also supports an async mode that extracts @font-face rules into a separate JavaScript loader file. The architecture is a single PostCSS plugin file (index.js) that delegates to helper functions for font lookup, URL generation, and AST manipulation. The codebase is well-structured, with clear separation of concerns and comprehensive test coverage using snapshot-based testing.
The LLM identified 2 files worth highlighting for reuse:
A self-contained client-side JavaScript file that loads fonts asynchronously by injecting @font-face rules and detecting when fonts have loaded using DOM element dimension comparison. It can be extracted and used in any project requiring async font loading without additional dependencies.
The core plugin module that orchestrates font lookup and @font-face generation. Contains reusable internal functions such as splitValue (parses combined weight/style/stretch strings), getUnicodeRange (maps Google subset names to unicode ranges), generateFont (constructs @font-face AST nodes with full format support), and prepend (inserts rules at the correct position in the AST). These utility functions are well-isolated and could be extracted for programmatic CSS generation.