ChristianMurphy/postcss-combine-duplicated-selectors

Bundle process hangs when postcss-preset-env has to parse OKLCH color for both 'light' and 'dark' color-scheme media queries

Closed this issue · 2 comments

mevbg commented

I have a project that is setup to use the following two PostCSS plugins:
• postcss-preset-env
• postcss-combine-duplicated-selectors

In my stylesheets, I have written color scheme media queries similar to the following
(this is just simplified version so to ease the reading):

@media (prefers-color-scheme: light) {
  :root {
    --text-color: oklch(0% 0 0);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-color: oklch(100% 0 0);
  }
}

When running the Webpack bundle process, the parsing of OKLCH colors by postcss-preset-env gets broken, as the outcome is that the build hangs and the computer's fan starts to rush.

This happens specifically when both color-scheme media queries are defined one after another with the use of OKLCH colors inside. If it's just one of them only defined – it works fine.

After spending couple of hours digging, I found out that it is the postcss-combine-duplicated-selectors that somehow bugs the process. Once commented out in PostCSS config, everything works as expected.

ChristianMurphy commented

Heya @methodev!
Sorry you ran into a spot of trouble.
Thanks for taking the time to write this up.

I'm not able to replicate the issue.
I ran the CSS you provided through, and don't see it hanging.
I do think it shows some interesting new syntax, I've added it to the test suite.
The code works without hanging across multiple versions of node and multiple operating systems https://github.com/ChristianMurphy/postcss-combine-duplicated-selectors/actions/runs/4422477292

A few ideas worth exploring if the issue persists for you:

  1. check if you are running the latest version of postcss, postcss-preset-env, and postcss-combine-duplicated-selectors
  2. check if plugin order matters, does reversing the order from what you currently have solve it?

If the issue persists, consider sharing a minimal reproducible example of what you are seeing: https://stackoverflow.com/help/minimal-reproducible-example

consider using a codesandbox like: https://jake.stackblitz.com/edit/node-jvwvza?file=index.js to show the issue

  • 👍1
ChristianMurphy commented

Depending on what you have your env set to, it could also be related to #212
If it nests @media and @supports that is not yet supported, but a PR would be welcome.

  • 👍1