postcss-custom-media: incorrect rendering with nested rules

[massimo-cassandro]

Bug description

In custom media queries inside nested rules, the parent selectors are ignored

Source CSS

.some-class {

  .nested {
    flex-direction: column;

    @media (--my-custom-media) {
      flex-direction: row;
    }
  }
}

Expected CSS

.some-class {
  .nested {
    flex-direction: column;
  }
}
@media (min-width: 480px) { /* --my-custom-media */
  .some-class {
    .nested {
      flex-direction: row;
    }
  }
}

Actual CSS

.some-class {
  .nested {
    flex-direction: column;
  }
}
@media (min-width: 480px) { /* --my-custom-media */
  .nested {
    flex-direction: row;
  }
}

Playgound example

No response

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

N/A

Debug output

No response

Extra config

No response

What plugin are you experiencing this issue on?

PostCSS Custom Media Queries

Plugin version

11.0.5

What OS are you experiencing this on?

macOS

Node Version

22.3.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]

https://preset-env.cssdb.org/playground/#JTdCJTIyc291cmNlJTIyJTNBJTIyJTQwY3VzdG9tLW1lZGlhJTIwLS1teS1jdXN0b20tbWVkaWElMjAobWluLXdpZHRoJTNBJTIwNDgwcHgpJTNCJTVDbiU1Q24uc29tZS1jbGFzcyUyMCU3QiU1Q24lNUNuJTIwJTIwLm5lc3RlZCUyMCU3QiU1Q24lMjAlMjAlMjAlMjBmbGV4LWRpcmVjdGlvbiUzQSUyMGNvbHVtbiUzQiU1Q24lNUNuJTIwJTIwJTIwJTIwJTQwbWVkaWElMjAoLS1teS1jdXN0b20tbWVkaWEpJTIwJTdCJTVDbiUyMCUyMCUyMCUyMCUyMCUyMGZsZXgtZGlyZWN0aW9uJTNBJTIwcm93JTNCJTVDbiUyMCUyMCUyMCUyMCU3RCU1Q24lMjAlMjAlN0QlNUNuJTdEJTIyJTJDJTIyY29uZmlnJTIyJTNBJTdCJTIyYnJvd3NlcnMlMjIlM0ElNUIlMjIlM0UlMjAwLjIlMjUlMjBhbmQlMjBub3QlMjBkZWFkJTIyJTVEJTJDJTIybWluaW11bVZlbmRvckltcGxlbWVudGF0aW9ucyUyMiUzQTAlMkMlMjJzdGFnZSUyMiUzQTIlMkMlMjJsb2dpY2FsJTIyJTNBJTdCJTIyaW5saW5lRGlyZWN0aW9uJTIyJTNBJTIybGVmdC10by1yaWdodCUyMiUyQyUyMmJsb2NrRGlyZWN0aW9uJTIyJTNBJTIydG9wLXRvLWJvdHRvbSUyMiU3RCU3RCU3RA==

With latest PostCSS Preset Env you get:

.some-class .nested {
  flex-direction: column;
}

@media (min-width: 480px) {
  .some-class .nested {
    flex-direction: row;
  }
}

This seems correct.

---

Can you provide a complete reproduction that shows that the issue is with postcss-custom-media or postcss-nesting?

[massimo-cassandro]

thank you
it doesn't preserve nested rules, but it works

[romainmenke]

@massimo-cassandro What was the issue then?
What tool was creating the incorrect output?

[massimo-cassandro]

Hi I'm using webpack and postcss.
There is no real problem, you lose the nesting of the css rules, but it is not a serious issue

[romainmenke]

So your original output was also correct and the Actual CSS example posted above isn't what was actually produced by your setup?

---

I just want to know if there is a tool that is producing incorrect output. Because if there is, then I should fix that.

I can only fix what I understand :)

[massimo-cassandro]

I understand what you mean and I really appreciate your help.

I did some more tests, and now, after rebuilding my initial configuration (but with postcss-preset-env). and I can't get the result of your demo anymore. Surely, I'm using some wrong config.

I'm using PostCSS with webpack, this is my configuration before adding postcss-preset-env.

/* eslint-env node */
const isDevelopment = process.env.NODE_ENV === 'development';

const postcssConfig = {
 plugins: [

 require('@csstools/postcss-global-data')({
 files: [
 './node_modules/open-props/media.min.css',
 './frontend/css/custom-properties-figma.css',
 './frontend/css/custom-properties.css',
 ]
 }),

 require('postcss-jit-props')({
 ...require('open-props'),
 custom_selector: ':where(html)'
 }),

 require('autoprefixer'),

 require('postcss-custom-media')({
 preserve: isDevelopment
 }),

 ]
};

if (process.env.NODE_ENV === 'production') {
 postcssConfig.plugins.push(
 require('cssnano')({
 preset: 'default',
 })
 );
}
module.exports = postcssConfig;

I don't use postcss-nesting. My autoprefixer reads its config from a .browserslistrc file.

Honestly, I think it's all getting a bit too clunky, and I'm thinking about using Sass for media queries. I'm not too keen on it, I'd like to use custom media, but I don't want to spend hours configuring postCSS plugins...

Thanks again for your help

[romainmenke]

Thank you for providing this extra info.

I tried this config as best as possible.
I don't have access to your exact stylesheets.

However I don't get any broken output.

For this input:

.some-class {

	.nested {
		flex-direction: column;

		@media (--xxs-only) {
			flex-direction: row;
		}
	}
}

I get:

:where(html) {}

.some-class {

	.nested {
		flex-direction: column;

		@media (min-width: 0px) and (max-width: 239px) {
			flex-direction: row;
		}

		@media (--xxs-only) {
			flex-direction: row;
		}
	}
}

---

Is it possible that PostCSS is working correctly but that Webpack (or part of your Webpack config) is causing issues?

I don't ever use Webpack to process CSS because Webpack is JavaScript bundler and not a CSS bundler.

[massimo-cassandro]

I use webpack because I need to process both js and css. I recently switched from rollup to webpack and found that it is the most convenient solution for my work.
Of course, it is possible that my webpack configuration is somehow conflicting with postcss, can you give me the postcss configuration you used to do another test in my environment?

Thank You

[romainmenke]

Sure!

We have a recipe that is fairly similar to your config.
I've modified it to your config, but removed the references to files that are yours.

#1520

The config is here: https://github.com/csstools/postcss-plugins/blob/repro-1519--ambitious-woodpecker-c6f183a4ef/postcss-recipes/open-props/postcss.config.js

You can run that yourself by:

• cloning the repo
• checking out the branch repro-1519--ambitious-woodpecker-c6f183a4ef
• cd postcss-recipes/open-props
• npm ci
• npm run style

[massimo-cassandro]

Tried cloning the repo: all works as expected
Tried in my project: same problem (actually, your postcss configuration is pretty much the same I did).
At this point the only notable difference, as you noticed, is that I use webpack.
I'll try to do some more testing.
In the meantime, thanks for the help

[romainmenke]

One thing you could try is to use a dedicated CSS bundler like:

• https://www.npmjs.com/package/postcss-import
• https://www.npmjs.com/package/@csstools/postcss-bundler

postcss-import has more config options, but @csstools/postcss-bundler has fewer issues.

Then Webpack won't be tasked with processing multiple files, only your entrypoint.
This might be sufficient to avoid the issue.

---

Might be worth it to create a minimal repro in a GitHub project.
I think your config is quite common and that this should work.
Would be nice to get this resolved :)

[massimo-cassandro]

Thanks. As soon as I can, I'll try it and let you know

[massimo-cassandro]

found the problem.
In my project I use fonts from @fontsource and use their sass mixins to load them.
I had a solitary scss file, just for fonts and of course sass-loader in my webpack-config.
After removing sass all works fine.
I tried changing the loader order first but got a lot of errors, so I decided to completely avoid sass.

I honestly didn't imagine it could create such a conflict. I have other projects where I use sass with webpack and postcss (without postcss-custom-media), and I never had any problems.
Anyway, now it works.

Thanks again for your help

[romainmenke]

That is indeed surprising.
I guess that Sass somehow corrupts these even before postcss runs.

Thank you for investigating further 🙇