Skip to content

mCSS 1.2.0

Latest

Choose a tag to compare

@minimaldesign minimaldesign released this 28 Jul 02:20
310dc07

mCSS 1.2.0 splits the drop-in framework file in two. mcss.css is now the framework core on its own (~17 KB min+gzip), and the component library moves into its own file, mcss.components.css (~5 KB min+gzip). If you build your own components on top of mCSS, you stop shipping a library you never use. If you want the library, you add one more line.

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

  • mcss.components.css: the component library has its own entry file. All 25 component.*.css files import there wrapped in @layer components, and dist/ gains the matching drop-ins mcss.components.css and mcss.components.min.css.
  • Import order between the two files does not matter. mcss.css declares the layer order, so the library lands in its components slot wherever you put the link, exactly like the existing theme slot:
<link rel="stylesheet" href="mcss.min.css" />
<link rel="stylesheet" href="mcss.components.min.css" /><!-- optional -->
  • Getting Started leads with installation now, comparing the source-plus-PostCSS route against the drop-in files so you can pick before reading the methodology.
  • New post: How to Set Up PostCSS for mCSS. The full build setup, why the config is mostly a list of things PostCSS must not touch, how to verify it worked, and what each failure mode looks like.

Breaking changes

  • dist/mcss.css and dist/mcss.min.css are the framework core only. Settings, base, elements, global, and helpers, plus the empty components and theme layer slots. If you use the component library, add dist/mcss.components.min.css next to it, or your components will lose their styles.
  • Source consumers: framework/mcss.css no longer imports component.*.css. Add @import url(./framework/mcss.components.css); to your entry file next to the existing framework import (see _global.css).

Nothing changed inside the components themselves. Every class, token, and Astro component works exactly as it did in 1.1.0; this release is only about which file they arrive in.

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