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

.browserslistrc

@@ -1,4 +1,6 @@
-# mCSS support floor: browsers with native cascade-layer support (~Baseline 2022+).
-# This keeps postcss-preset-env from polyfilling features the framework relies on
-# natively (see also the cascade-layers note in postcss.config.cjs).
-defaults and supports css-cascade-layers
+# mCSS support floor: Baseline 2024. Everything the framework uses natively
+# (cascade layers, nesting, :has(), light-dark(), @scope, relative colors)
+# is inside this floor, so postcss-preset-env has nothing to polyfill; the
+# only transform left is resolving @custom-media, which no browser ships.
+# Requires browserslist >= 4.25 for the baseline query.
+baseline 2024

CHANGELOG.md

@@ -2,6 +2,19 @@
 
 All notable changes to mCSS. The framework follows the copy-it-you-own-it model: there is no package to update, so version numbers mark states of the repository you can copy from (each release is also a git tag).
 
+## 1.3.0 (2026-07-31)
+
+The compile floor now matches the docs: mCSS targets Baseline 2024, and the build stops polyfilling the features the framework was always meant to use natively ([#56](https://github.com/minimaldesign/mCSS/issues/56)).
+
+### Breaking
+
+- **Browser support floor raised to Baseline 2024** (`.browserslistrc` is now `baseline 2024`: Chrome/Edge 130, Firefox 132, Safari 18.2 or newer). The old floor (`defaults and supports css-cascade-layers`, ~2022) admitted browsers without `light-dark()`, so postcss-preset-env was polyfilling it, against the docs' "no polyfills" promise, and the polyfill's `@supports not (…) { :root * }` rules could beat component token overrides across cascade layers. Browsers from the 2022 to 2024 window are no longer supported; in them, `light-dark()` tokens now compute to unset colors, not the light palette (the old fallback claim in the docs was wrong for tokens either way, and has been corrected).
+
+### Fixed
+
+- **`dist/` is now genuinely polyfill-free.** `dist/mcss.css` drops 403 `--csstools-*` scratch declarations and ships `light-dark()`, nesting, and relative color syntax as written: 130 kB raw (was 159), 94 kB minified (was 121), 15.9 kB min+gzip (was 17.8). Nesting was previously being silently flattened by the same too-broad floor.
+- The [PostCSS setup post](https://mcss.dev/blog/postcss-setup-for-mcss) documents the new floor, the browserslist 4.25 requirement for the `baseline` query, a `grep -c "csstools"` output check, and a troubleshooting entry for the `light-dark()` polyfill firing.
+
 ## 1.2.0 (2026-07-27)
 
 Core and components split: the drop-in framework file no longer bundles the component library, so sites that build their own components stop paying for it.

dist/css/base.reset.css

@@ -1,4 +1,4 @@
-/*! mCSS v1.2.0 | MIT | https://mcss.dev */
+/*! mCSS v1.3.0 | MIT | https://mcss.dev */
 /*
 SETTINGS MEDIA QUERIES
 

dist/css/component.avatar.css

@@ -1,4 +1,4 @@
-/*! mCSS v1.2.0 | MIT | https://mcss.dev */
+/*! mCSS v1.3.0 | MIT | https://mcss.dev */
 /*
 SETTINGS MEDIA QUERIES
 
@@ -37,9 +37,8 @@ xxl: 1920px
   position: relative;
   display: inline-block;
   width: var(--avatar-size);
-}
 
-  .avatar  > div {
+  > div {
     display: flex;
     justify-content: center;
     aspect-ratio: 1;
@@ -52,7 +51,10 @@ xxl: 1920px
     color: var(--avatar-color);
     overflow: hidden;
   }
-    :is(.avatar.is-online,.avatar.is-offline):after {
+
+  &.is-online,
+  &.is-offline {
+    &:after {
       content: "";
       display: block;
       width: var(--status-dot-size);
@@ -64,9 +66,11 @@ xxl: 1920px
       border-radius: var(--radius-round);
       background-color: var(--avatar-status-dot-color-offline);
     }
-  .avatar.is-online:after {
+  }
+  &.is-online:after {
     background-color: var(--avatar-status-dot-color-online);
   }
+}
 
 .avatar-sm {
   --avatar-size: var(--sm3);

dist/css/component.badge.css

@@ -1,4 +1,4 @@
-/*! mCSS v1.2.0 | MIT | https://mcss.dev */
+/*! mCSS v1.3.0 | MIT | https://mcss.dev */
 /*
 SETTINGS MEDIA QUERIES
 
@@ -38,26 +38,26 @@ xxl: 1920px
   border-radius: var(--badge-border-radius);
 
   /* Variants only swap the local custom properties */
-}
 
-  .badge.badge-primary {
+  &.badge-primary {
     --badge-color: var(--badge-primary-color);
     --badge-background-color: var(--badge-primary-background-color);
   }
 
-  .badge.badge-success {
+  &.badge-success {
     --badge-color: var(--badge-success-color);
     --badge-background-color: var(--badge-success-background-color);
   }
 
-  .badge.badge-danger {
+  &.badge-danger {
     --badge-color: var(--badge-danger-color);
     --badge-background-color: var(--badge-danger-background-color);
   }
 
-  .badge.badge-warning {
+  &.badge-warning {
     --badge-color: var(--badge-warning-color);
     --badge-background-color: var(--badge-warning-background-color);
   }
+}
 
 }

dist/css/component.banner.css

@@ -1,4 +1,4 @@
-/*! mCSS v1.2.0 | MIT | https://mcss.dev */
+/*! mCSS v1.3.0 | MIT | https://mcss.dev */
 /*
 SETTINGS MEDIA QUERIES
 
@@ -37,15 +37,18 @@ xxl: 1920px
   text-align: center;
   color: var(--banner-color);
   background: var(--banner-background-color);
-}
 
-  .banner a {
+  a {
     color: inherit;
     font-weight: var(--semi-bold);
   }
-  .banner_content p {
+}
+
+.banner_content {
+  p {
     margin-bottom: 0;
   }
+}
 
 .banner_close {
   display: flex;
@@ -58,11 +61,11 @@ xxl: 1920px
   background: transparent;
   border: none;
   cursor: pointer;
-}
 
-  .banner_close svg {
+  svg {
     width: var(--sm1);
     height: var(--sm1);
   }
+}
 
 }

dist/css/component.breadcrumbs.css

@@ -1,4 +1,4 @@
-/*! mCSS v1.2.0 | MIT | https://mcss.dev */
+/*! mCSS v1.3.0 | MIT | https://mcss.dev */
 /*
 SETTINGS MEDIA QUERIES
 
@@ -26,7 +26,9 @@ xxl: 1920px
 
 @layer components {
 /* BREADCRUMBS */
-  .breadcrumbs ol {
+
+.breadcrumbs {
+  ol {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -37,39 +39,40 @@ xxl: 1920px
     font-size: var(--text-sm);
   }
 
-  .breadcrumbs li {
+  li {
     display: flex;
     align-items: center;
     gap: var(--xs2);
   }
 
   /* separator between crumbs; the / "" alt text keeps it out of the
      accessibility tree in browsers that support the syntax */
-  .breadcrumbs li + li::before {
+  li + li::before {
     content: var(--breadcrumbs-separator);
     color: var(--breadcrumbs-separator-color);
   }
 
 @supports (content: "a" / "a") {
-.breadcrumbs li + li::before {
+li + li::before {
     content: var(--breadcrumbs-separator) / "";
   }
 }
 
-  .breadcrumbs a {
+  a {
     color: var(--breadcrumbs-color);
     -webkit-text-decoration: none;
     text-decoration: none;
     transition: color var(--transition);
-  }
 
-    :is(.breadcrumbs a):hover {
+    &:hover {
       color: var(--link-color);
     }
+  }
 
-  .breadcrumbs [aria-current="page"] {
+  [aria-current="page"] {
     color: var(--breadcrumbs-color-current);
     font-weight: var(--semi-bold);
   }
+}
 
 }