Skip to content

BUILD #4: Interop 2026 safe CSS feature adoption rules#73

Draft
nujovich wants to merge 4 commits into
mainfrom
hermes/build/mint-interop-2026-safe-adoption
Draft

BUILD #4: Interop 2026 safe CSS feature adoption rules#73
nujovich wants to merge 4 commits into
mainfrom
hermes/build/mint-interop-2026-safe-adoption

Conversation

@nujovich

@nujovich nujovich commented Jun 20, 2026

Copy link
Copy Markdown
Owner

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

Decision: Option B (Medium scope — detection with concrete fallback suggestions)

Milestones

  • Milestone 1 — Integrate web-features npm package as compatibility data source
  • Milestone 2 — Read browserslist from project (package.json or .browserslistrc)
  • Milestone 3 — Rules: property-not-supported (warning if < Baseline), property-experimental (info if < 90% interop)
  • Milestone 4 — Output: CLI warnings with feature suggestions and interop percentages

Milestone 2 detail

Added project browserslist discovery to lib/css-compat-data.mjs:

  • getProjectBrowserslist(projectDir) resolves the target browsers in priority order: a browserslist key in package.json (supports both a flat array and the { production, development } env-block form, using the production query), then a .browserslistrc / browserslist file (comment lines starting with # are skipped), and finally the browserslist default (> 0.5%, last 2 versions, Firefox ESR, not dead). It returns { queries, source } so callers know which source won.
  • getResolvedBrowsers(projectDir) runs the queries through the browserslist engine and returns the concrete browser identifiers (e.g. chrome 120, safari 17) plus the original queries and source.
  • browserslist added to package.json dependencies (and package-lock.json); web-features was also installed into node_modules (it was imported by M1 but not yet present on a clean checkout).

Tests

  • lib/__tests__/css-compat-data.test.mjs: reads browserslist from package.json, reads the production env block, prefers .browserslistrc over the package.json default, falls back to the browserslist default, and resolves queries into concrete browser identifiers.

How to test

npx vitest run lib/__tests__/css-compat-data.test.mjs
npx prettier --check lib/css-compat-data.mjs lib/__tests__/css-compat-data.test.mjs

(319 lib tests passing at time of commit.)

Hermes BUILD and others added 4 commits June 20, 2026 23:43
Add getProjectBrowserslist() and getResolvedBrowsers() to lib/css-compat-data.mjs.
Resolves the target browsers from package.json (browserslist key, incl. the
production env block), a .browserslistrc/browserslist file, or the browserslist
default. getResolvedBrowsers() runs the queries through the browserslist engine
to produce concrete browser identifiers (e.g. chrome 120). Add browserslist to
dependencies and install web-features (imported by M1 but missing on clean checkout).

Co-Authored-By: Hermes BUILD <hermes@nousresearch.com>
getResolvedBrowsers used require() which is undefined in an ES module scope
and would crash at runtime. Use createRequire(import.meta.url) to load the
CommonJS browserslist package. Verified with ad-hoc script.

Co-Authored-By: Hermes BUILD <hermes@nousresearch.com>
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