Skip to content

Raise the compile floor to Baseline 2024, stop polyfilling light-dark() - #57

Merged
minimaldesign merged 1 commit into
mainfrom
baseline-2024-floor
Jul 31, 2026
Merged

Raise the compile floor to Baseline 2024, stop polyfilling light-dark()#57
minimaldesign merged 1 commit into
mainfrom
baseline-2024-floor

Conversation

@minimaldesign

Copy link
Copy Markdown
Owner

Closes #56.

The verdict on the issue

Verified end to end. With the shipped floor, light-dark() expands into the scratch-property + @supports triplet described in the issue, including the @supports not (…) { :root * { … } } rule that, inside @layer theme, beats a component's token override in @layer components. The "colors go unset, not light" fallback analysis is correct spec behavior for tokens. And the polyfill was not only in consumer builds: dist/mcss.css shipped 403 --csstools-* declarations.

The root cause is that defaults and supports css-cascade-layers resolves to a minimum of Chrome 109 (the last Windows 7 build, kept alive by usage-based defaults), two years short of light-dark().

What else the old floor was transforming

Tested feature by feature through the repo config:

  • Nesting: 189 nested rules across 37 files, silently flattened in dist and consumer builds, while the docs claim native nesting.
  • Relative color syntax: 4 uses wrapped in @supports gates that cannot produce real fallbacks (var() inputs), pure noise.
  • Nothing else: oklch()/color-mix()/hwb() are unused, and :has(), @scope, @container, @property, random() all passed through already. @custom-media compiling is the one intended transform and is unchanged.

The fix (issue's option 1)

.browserslistrc is now baseline 2024, which resolves to Chrome/Edge 130, Firefox 132, Safari 18.2+. That kills the light-dark() polyfill, un-flattens nesting, and drops the relative-color gates in one move. Note that baseline widely available would not work today: it resolves to Chrome 121, below light-dark()'s Chrome 123, so the polyfill still fires. Verified empirically.

Results: dist/mcss.css 159 kB → 130 kB, dist/mcss.min.css 121 kB → 94 kB (17.8 → 15.9 kB gzip), zero csstools artifacts in dist, the site build, and the per-file outputs.

Docs

  • start.mdx: browser support rewritten for the new floor; the light-dark() fallback claim corrected (tokens holding an unsupported function make consuming properties invalid at computed-value time, so pre-2024 browsers get unset colors, not the light palette).
  • PostCSS setup post: new floor section explaining the baseline 2024 query, the browserslist ≥ 4.25 requirement, a fourth output-check grep (grep -c "csstools" → 0), and a troubleshooting entry for the toggle variables.
  • CHANGELOG.md: 1.3.0 with the floor raise under Breaking, per the 1.2.0 precedent.

🤖 Generated with Claude Code

The .browserslistrc floor (defaults and supports css-cascade-layers,
~2022) admitted Chrome 109, so postcss-preset-env polyfilled
light-dark() into 403 --csstools-* scratch declarations in dist and
silently flattened all nesting, against the docs' "no polyfills"
promise. The polyfill's @supports not { :root * } rules could also
beat component token overrides across cascade layers.

The floor is now `baseline 2024` (Chrome/Edge 130, Firefox 132,
Safari 18.2+), matching the Baseline 2024 target the docs already
claim. dist/mcss.min.css: 121 kB -> 94 kB (17.8 -> 15.9 gzip).

Docs: start.mdx corrects the light-dark() fallback story (tokens go
unset in unsupported browsers, not the light palette) and the PostCSS
blog post documents the new floor, the browserslist 4.25 requirement,
and a csstools output check.

Closes #56

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@netlify

netlify Bot commented Jul 31, 2026

Copy link
Copy Markdown

Deploy Preview for mcssdev ready!

Name Link
🔨 Latest commit 4bfbcd8
🔍 Latest deploy log https://app.netlify.com/projects/mcssdev/deploys/6a6cc93c693f9100082ee892
😎 Deploy Preview https://deploy-preview-57--mcssdev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 100
Accessibility: 98
Best Practices: 100
SEO: 97
PWA: 60
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@minimaldesign
minimaldesign merged commit 34c92fa into main Jul 31, 2026
5 checks passed
@minimaldesign
minimaldesign deleted the baseline-2024-floor branch July 31, 2026 16:43
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.

postcss-preset-env polyfills light-dark(), which the docs say we never do

1 participant