Raise the compile floor to Baseline 2024, stop polyfilling light-dark() - #57
Merged
Conversation
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>
✅ Deploy Preview for mcssdev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.

Closes #56.
The verdict on the issue
Verified end to end. With the shipped floor,
light-dark()expands into the scratch-property +@supportstriplet 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.cssshipped 403--csstools-*declarations.The root cause is that
defaults and supports css-cascade-layersresolves to a minimum of Chrome 109 (the last Windows 7 build, kept alive by usage-baseddefaults), two years short oflight-dark().What else the old floor was transforming
Tested feature by feature through the repo config:
@supportsgates that cannot produce real fallbacks (var()inputs), pure noise.oklch()/color-mix()/hwb()are unused, and:has(),@scope,@container,@property,random()all passed through already.@custom-mediacompiling is the one intended transform and is unchanged.The fix (issue's option 1)
.browserslistrcis nowbaseline 2024, which resolves to Chrome/Edge 130, Firefox 132, Safari 18.2+. That kills thelight-dark()polyfill, un-flattens nesting, and drops the relative-color gates in one move. Note thatbaseline widely availablewould not work today: it resolves to Chrome 121, belowlight-dark()'s Chrome 123, so the polyfill still fires. Verified empirically.Results:
dist/mcss.css159 kB → 130 kB,dist/mcss.min.css121 kB → 94 kB (17.8 → 15.9 kB gzip), zerocsstoolsartifacts in dist, the site build, and the per-file outputs.Docs
start.mdx: browser support rewritten for the new floor; thelight-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).baseline 2024query, 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