From 976c9560fe49b92ee9836dabbf95dbb62ab87928 Mon Sep 17 00:00:00 2001 From: Yann Date: Fri, 31 Jul 2026 09:43:53 -0700 Subject: [PATCH] Blog post: show where postcss-mixins goes in the config The PostCSS setup post told readers to install postcss-mixins if they want mixins, but neither config block ever showed the plugin in the plugins array. It also claimed this site's config is "exactly the file above", when the repo's own postcss.config.cjs includes postcss-mixins. Add a commented opt-in line to both config blocks, state the plugin order rule (import, mixins, preset-env, matching build-css.mjs), and correct the sentence about the site's own config. Co-Authored-By: Claude Fable 5 --- src/content/blog/postcss-setup-for-mcss.mdx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/content/blog/postcss-setup-for-mcss.mdx b/src/content/blog/postcss-setup-for-mcss.mdx index 9075e93..dbf031a 100644 --- a/src/content/blog/postcss-setup-for-mcss.mdx +++ b/src/content/blog/postcss-setup-for-mcss.mdx @@ -96,6 +96,10 @@ const postcssPresetEnv = require("postcss-preset-env"); module.exports = { plugins: [ + // Uncomment if you opted into mixins. It has to run before preset-env, + // so the mixins are already expanded before anything else transforms + // the file. + // require("postcss-mixins"), postcssPresetEnv({ stage: 2, features: { @@ -149,7 +153,7 @@ You are done. Astro, Vite, Next, Nuxt, SvelteKit, Parcel, and anything else with import "./styles/main.css"; ``` -Bundlers also inline the `@import` chain themselves, which matters more than it looks: `@custom-media` definitions only apply within the stylesheet PostCSS is processing, so the breakpoint file has to be pulled into the same document as the files that use it. Your bundler is already doing that. (This site is an Astro project and its PostCSS config is exactly the file above, nothing more.) +Bundlers also inline the `@import` chain themselves, which matters more than it looks: `@custom-media` definitions only apply within the stylesheet PostCSS is processing, so the breakpoint file has to be pulled into the same document as the files that use it. Your bundler is already doing that. (This site is an Astro project and its PostCSS config is the file above with the `postcss-mixins` line uncommented, nothing more.) Run your usual `dev` and `build`. Nothing else changes. @@ -170,6 +174,7 @@ const postcssPresetEnv = require("postcss-preset-env"); module.exports = { plugins: [ require("postcss-import"), + // require("postcss-mixins"), // if you opted in postcssPresetEnv({ stage: 2, features: { @@ -181,7 +186,7 @@ module.exports = { }; ``` -Order is not a style preference here. Put it last and preset-env sees a file full of `@media (--md)` with no definitions in scope, leaves them alone, and ships them to the browser broken. +Order is not a style preference here. Put it last and preset-env sees a file full of `@media (--md)` with no definitions in scope, leaves them alone, and ships them to the browser broken. Mixins follow the same logic: `postcss-mixins` needs `postcss-import` to have inlined the `@define-mixin` blocks first, and preset-env wants the mixins already expanded, so the order is always import, mixins, preset-env. Then point a script at your entry file: