postcss-custom-media v9 not replacing variables

[gpoitch]

Bug description

Since updating to v9+ (9.0.1) postcss-custom-media is not compiling and replacing custom media variables. Have been using v8 for a while with no issue.

Source CSS

@custom-media --tabletUp (min-width: 768px);

@media (--tabletUp) {
  a { color: red; }
}

Expected CSS

@media (min-width: 768px) {
  a { color: red; }
}

Actual CSS

@media (--tabletUp) {
  a { color: red; }
}

Does it happen with npx @csstools/csstools-cli <plugin-name> minimal-example.css?

No response

Debug output

No response

Extra config

Used via webpack:

{
  loader: 'postcss-loader',
  options: {
    postcssOptions: {
      plugins: [postcssCustomMedia(), autoprefixer()]
    }
  }
}

What plugin are you experiencing this issue on?

PostCSS Custom Media Queries

Plugin version

9.0.1

What OS are you experiencing this on?

macOS

Node Version

19.1.0

Validations

• Follow our Code of Conduct
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this bug?

• I'm willing to open a PR

[romainmenke]

@gpoitch Thank you for reaching out!

I did a quick check and it works on our end : https://github.com/csstools/postcss-plugins/pull/722/files

Are there maybe other plugins that can be interfering?

[romainmenke]

Also see : #705 (comment)

It seems that for some users something is "sticky" and after updating the plugins @custom-media are not transformed at first.

I don't know that user's or your setup.
Maybe there is a cached config or a watcher still running?

[gpoitch]

Same issue with postcss-custom-media as the only plugin and cleaning any possible caches and reinstalling all node_modules.

I didn't see a changelog but maybe something changed with how separate files are combined? My setup has all the variables in its own file that gets imported at the root of the app.

@custom-media --tabletUp (min-width: 768px);
@custom-media --desktopUp (min-width: 1025px);
:root {
  --primaryColor: blue;
  --textColor: black;
}

[romainmenke]

🤔 We did indeed change something could affect that.

We now use prepare to make it safe to re-use the same plugin instance multiple times.
https://github.com/csstools/postcss-plugins/blob/postcss-preset-env--v8/plugins/postcss-custom-media/src/index.ts#L25-L26

Before this change the discovered @custom-media declarations would be shared between runs, even when those runs didn't have anything to do with one another.

Can you share a minimal example of two CSS files?

• one file with the @custom-media declarations
• one file where you use them

I want to make sure I am accurately reproducing how you are bundling.

[gpoitch]

Here is a minimal example:

variables.css:

@custom-media --tabletUp (min-width: 768px);

:root {
  --primaryColor: blue;
}

app.css:

.box {
  width: 100px;
  height: 100px;
  background: var(--primaryColor);
}

@media (--tabletUp) {
  .box {
    width: 300px;
    height: 300px;
  }
}

app.js:

import './variables.css'
import style from './app.css'

const box = document.createElement('div')
box.className = style.box
document.body.appendChild(box)

[romainmenke]

I can't get that to work, even with version 8.
Where there any other dependency updates?

Result is :

@custom-media --tabletUp (min-width: 768px);

:root {
	--primaryColor: blue;
}

.box {
	width: 100px;
	height: 100px;
	background: var(--primaryColor);
}

@media (--tabletUp) {
	.box {
		width: 300px;
		height: 300px;
	}
}

[gpoitch]

Nothing else changed. Had been working fine for years on v8 and works correctly when I downgrade back to 8

[romainmenke]

Found it, and can confirm.

It wasn't working for me because I was checking this in the same workspace as the updated plugins and WebPack loaders do not always find the right version in that case.

This is a very bad bug in the postcss loader for webpack :/
It appears to work in v8, but only by accident.

It is one big race condition.

• your variables file is likely small and parses quickly
• your other files are likely larger and parse slower
• all files are handled in parallel
• in v8 there is a shared object to store the @custom-media object
• variables finish first and object gets populated
• other files finish second and can use the @custom-media object

This is what happens when files are of similar length :
Each time the contents change I ran npm run build

Screen.Recording.2022-11-21.at.15.50.14.mov

I have no idea how to fix this :(

The changes we did in v9 were intended to make it safe to use the same plugin instance multiple times.

Since @custom-media from one file are no longer shared with the other files the fix in v9 is working as intended. Unfortunately this is causing real issues for users like yourself.

We will have to see the response is from PostCSS Loader on this.

[romainmenke]

@gpoitch This issue is somewhat related : postcss/postcss-import#304

The reason I use postcss-import is that I also use postcss-cssnext and have global variables defined in a variables.css that I need to import in all of my css files. And because cssnext needs to work with these values like color modifications, the variables need to be accessible in that stage.

If you want to share state between files you could use postcss-import.

This config works well and consistent :

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
	mode: 'production',
	entry: './index.js',
	target: 'node',
	optimization: {
		minimize: false,
	},
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'bundle.cjs',
	},
	module: {
		rules: [
			{
				test: /\.css$/i,
				use: [
					MiniCssExtractPlugin.loader,
					{
						loader: 'css-loader',
						options: { importLoaders: 1 },
					},
					{
						loader: 'postcss-loader',
						options: {
							postcssOptions: {
								plugins: [
									['postcss-import'],
									['postcss-preset-env'],
								],
							},
						},
					},
				],
			},
		],
	},
	plugins: [
		new MiniCssExtractPlugin({
			filename: '[name].css',
		}),
	],
};

@import url(./variables.css);

.box {
  width: 100px;
  height: 100px;
  background: var(--primaryColor);
}

@media (--tabletUp) {
  .box {
    width: 300px;
    height: 300px;
  }
}

[gpoitch]

Interesting. Thanks for digging into it! I'm okay with staying on v8 for now. Just wanted to surface the issue incase it was something simple or others were having issues.