Skip to content

feat(mint): add modern CSS feature adoption scan to audit - #108

Draft
nujovich wants to merge 5 commits into
mainfrom
hermes/build/mint-modern-css-feature-scan
Draft

feat(mint): add modern CSS feature adoption scan to audit#108
nujovich wants to merge 5 commits into
mainfrom
hermes/build/mint-modern-css-feature-scan

Conversation

@nujovich

@nujovich nujovich commented Aug 13, 2026

Copy link
Copy Markdown
Owner

Card: https://github.com/nujovich/mint-radar/issues/13

What: Adds a modern CSS feature adoption scan (STEP 14) to Mint's audit pipeline. The scan detects presence or absence of eight modern CSS features (@Property, @layer, @container, @supports, native nesting, color-mix(), @scope, :has()) and provides adoption suggestions for features not yet used. Results are reported in a new modernFeatures field on the AuditReport.

Why: Project Wallace 2026 revealed critically low adoption of modern CSS features (@Property 2.67%, @layer 2.71%, @container 9.61%). Mint already scores CSS health (chaos score) but lacks awareness of which modern features a codebase uses and which it should adopt. This scan complements the chaos score by giving developers an actionable roadmap toward modern CSS.

Milestones

  • Milestone 1 -- Extend audit prompt in lib/prompts.mjs with STEP 14: modern CSS feature scan (detect @Property, @layer, @container, @supports, nesting, color-mix, @scope, :has()), report presence/absence with adoption suggestions
  • Milestone 2 -- Add modernFeatures field to AuditReport type in lib/types.ts
  • Milestone 3 -- Wire modern features results in playground UI as "Modern CSS Adoption" section
  • Milestone 4 -- Add test fixture with modern and legacy CSS and tests in lib/tests/

Milestone 4 detail

  • lib/fixtures/modern-features.css -- fixture exercising all eight tracked features plus a legacy block with none of them.
  • lib/tests/prompts.test.mjs -- buildAuditPrompt with the modern features fixture block: embeds the fixture and preserves modern anchors through preprocessing.
  • lib/tests/css-auditor.test.mjs -- buildAuditPrompt modern features (STEP 14 + feature id documentation) and CssAuditor modernFeatures integration (parse, empty, missing) blocks.

How to test:

npm test

@nujovich

Copy link
Copy Markdown
Owner Author

All milestones complete. Ready for review when you are.

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.

1 participant