mCSS 1.3.0

[minimaldesign]

mCSS 1.3.0 makes the compile floor match what the docs have always claimed. The framework targets Baseline 2024 now, and postcss-preset-env stops polyfilling the features mCSS was built to use natively. The visible result: dist/ ships light-dark(), native nesting, and relative color syntax exactly as written, and gets smaller doing it (#56).

mCSS follows the copy-it-you-own-it model: there is no package to update. Grab dist/mcss.css (or mcss.min.css), copy the pieces you want, and edit them like anything else you wrote.

What's new

• dist/ is genuinely polyfill-free. dist/mcss.css drops 403 --csstools-* scratch declarations and the @supports triplets that came with them: 130 kB raw (was 159), 94 kB minified (was 121), 15.9 kB min+gzip (was 17.8). Nesting was being silently flattened by the same too-broad floor, so the shipped files now match the source rule for rule.
• The polyfill was not only a weight problem. Inside @layer theme, preset-env's @supports not (color: light-dark(…)) { :root * { … } } rule beat a component's own token override in @layer components. That whole class of cascade surprise is gone.
• The PostCSS setup post documents the new floor: why the query is baseline 2024 and not baseline widely available (which resolves to Chrome 121, below light-dark()'s Chrome 123, so the polyfill still fires), the browserslist 4.25 requirement, a grep -c "csstools" check that should print 0, and a troubleshooting entry for when the toggle variables show up anyway. It also now shows where postcss-mixins goes in the plugins array, which it had told you to install without ever placing it (Blog post: show where postcss-mixins goes in the config #58).
• New post: Building a component system that scales. The one rule that keeps a component system from rotting, a selector may only contain classes from its own block, with what coupling looks like and the correct ways to create context.
• The AI agents rules block and Getting Started grew the conventions that post argues for: one block per file, no raw colors or type sizes in a component, the global.print.css exception, why globals lose to components, and the theme's real remit (theme files are the one place allowed to select framework classes from outside, and a body rule belongs there rather than in project CSS).

Breaking changes

• The browser support floor is now Baseline 2024. .browserslistrc is baseline 2024, which resolves to Chrome/Edge 130, Firefox 132, Safari 18.2 or newer. The old floor (defaults and supports css-cascade-layers) bottomed out at Chrome 109, two years short of light-dark(), which is why the polyfill was firing at all.
• Browsers from the 2022 to 2024 window are no longer supported. In them, tokens holding light-dark() make the properties that consume them invalid at computed-value time, so colors come out unset rather than falling back to the light palette. The docs used to claim the light palette as the fallback; that claim was wrong for tokens under either floor, and has been corrected.

If you still need that window, build from source with your own lower .browserslistrc (or force features: { 'light-dark-function': true } in your preset-env config) and accept the polyfill along with the cascade caveat above. The framework source is unchanged; only the target it compiles against moved.

The full list is in the changelog. Built something with mCSS? Come show it off in the discussions.

---

This discussion was created from the release mCSS 1.3.0.