hn.today

FCSS 2: Utility CSS that reads like CSS

github.com5 points8 comments
Screenshot of FCSS 2: Utility CSS that reads like CSS

FCSS is a utility-first CSS system that names classes exactly like CSS properties and values, so a class like "padding 24" produces "padding: 24px". It enforces a one-class-one-declaration model with no runtime: the library ships a full stylesheet (~28 MB) containing every class, and a build-time purge removes unused rules so the browser gets plain CSS. Class names can include pseudo selectors, ARIA states and responsive prefixes (e.g., "color red:hover", "display block:aria-expanded:true", "md-display none"), breakpoints are mobile-first, and colors are exposed via custom properties for easy theming. The scanner finds classes in HTML, JS/TS, JSX/TSX, Angular templates and .astro files; Vue and Svelte files are not scanned yet.

The project is packaged as @functionalcss/core plus integrations for Vite, Next.js, Astro, Angular, PostCSS and a CLI for plain HTML/CDN use. Typical installs import @functionalcss/core/full.css in development and use the framework plugin or CLI to purge in production. Configuration is optional via fcss.config.ts, and CLI tools (npx fcss list/explain) help inspect classes. Important usage rules: write class names statically (runtime-assembled names get purged) or add them to a safelist, and note Next.js with Turbopack may require forcing webpack for build-time purging. System requirements include Node.js 20.19+ or Bun.

Read on github.com8 comments on Hacker News

Summary generated by AI from the linked article. hn.today is not affiliated with Hacker News or Y Combinator.

More in Web

The daily digest

Today's best Hacker News stories, summarized and screenshotted, one email a day.