[v4] Upgrading beta.4 -> beta.5 causes error: [postcss] Custom media query --md-up is not defined

[TobyPerplex]

What version of Tailwind CSS are you using?

4.0.0-beta.5 & 4.0.0-beta.6

What build tool (or framework if it abstracts the build tool) are you using?

vite 6.0.3

What version of Node.js are you using?

v22.8.0

What browser are you using?

Chrome 131.0.6778.109 (Official Build) (arm64)

What operating system are you using?

macOS

Describe your issue

With this postcss config:

import advancedVariables from 'postcss-advanced-variables';
import tailwind from '@tailwindcss/postcss';
import globalData from '@csstools/postcss-global-data';
import customMedia from 'postcss-custom-media';

export default {
    plugins: [
        advancedVariables,
        tailwind,
        globalData({
            // So you dont have to import them when using scoped css
            files: ['src/styles/base/custom-media.css'],
        }),
        customMedia,
    ],
};

and 4.0.0-beta.4 both pnpm dev/vite and pnpm build/vite build commands work perfectly. But using this same postcss config with 4.0.0-beta.5 or 4.0.0-beta.6 only the pnpm dev/vite command works perfectly. pnpm build/vite build throws this error:

> vite build

vite v6.0.3 building for production...
✓ 205 modules transformed.
x Build failed in 1.36s
error during build:
[vite:css] [postcss] Custom media query --md-up is not defined

I already tried rearranging the order of plugins in every way imaginable.

[philipp-spiess]

The difference between dev and prod comes from prod using an additional lightningcss minfication pass. Lightningcss will transform the custom media query so that it's no longer necessary to run postcss-custom-media in the first place. How does a production CSS file look like if you remove that plugin?

[TobyPerplex]

I see, removing that plugin and adding @import 'base/custom-media.css'; in my main.css solved that error because it is now lightningcss instead of postcss that should parse the custom media correct?

Well, now it can now continue parsing the rest of the css but that introduces a new error [vite:css] [postcss] postcss-advanced-variables: Could not resolve the mixin for "full-size". This is because of my postcss-advanced-variables mixins in base/mixins.css which is imported in my main.css. Did you guys disable all non-tailwind postcss plugins altogether between beta.4 and beta.5 or something? I feel like it has to with this PR that's breaking a lot of postcss plugins when running prod: #15297

[philipp-spiess]

Hm, this plugin is also implemented using a Root visitor https://github.com/csstools/postcss-advanced-variables/blob/main/src/index.js#L10C1-L10C18. This is also going to run after Tailwind CSS unless you port it to use a Once visitor.

Did you guys disable all non-tailwind postcss plugins altogether between beta.4 and beta.5 or something?

What we did is change the order at which the Tailwind CSS v4 postcss plugin is run to be the exact same place at which the v3 plugin ran as there were a lot of plugins that were no longer working with v4 (e.g. when used with Vite, url() rebasing was no longer working as expected).

I'm really curious to understand your use case for postcss-advanced-variables and how this works together with Tailwind CSS in your example.

[TobyPerplex]

I use tailwind for its grid, theming and some utility classes. I also write a lot of custom css and prefer to use postcss-advanced-variables for that so I can use mixins with parameters and even use @if/@else statements in those mixins. Is there anything you can change in v4 beta so I can keep using that package like in beta.4? I'd really like to upgrade to beta.6.

[TobyPerplex]

In the meantime, I've opened an issue in the postcss-advanced-variables repo to ask if they can release a version with a Once visitor.