Skip to content

Blog post: show where postcss-mixins goes in the config #58

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
minimaldesign merged 1 commit into from
Jul 31, 2026
Merged

Blog post: show where postcss-mixins goes in the config #58

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions src/content/blog/postcss-setup-for-mcss.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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.

Expand All @@ -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: {
Expand All @@ -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:

Expand Down
Loading