CSS selectors with multiple rules redeclared in media queries results in multiple blocks

[runar]

I believe this issue is related to both #64 and #67, but it’s not quite the same as no duplication is involved.

If a CSS selector has multiple rules that are redeclared by the same media query, multiple media queries will be outputted with only one rule each. Take a look at the following example from the playground:

Input:

:root {
  --background: #fff;
  --color: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #000;
    --color: #fff;
  }
}

body {
  background-color: var(--background);
  color: var(--color);
}

Expected:

body {
  background-color: #fff;
  color: #000;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: #fff;
  }
}

Actual output:

body {
  background-color: #fff;
  color: #000;
}

@media (prefers-color-scheme: dark) {

  body {
  color: #fff;
  }
}

@media (prefers-color-scheme: dark) {

  body {
  background-color: #000;
  }
}

(Also notice how the rule order is reversed, indention is wrong, and an empty line is added below the media queries.)

[MadLittleMods]

@runar Please add the actual output and expected output to the issue description

[runar]

@runar Please add the actual output and expected output to the issue description

I apologize, I submitted the issue a bit too early by mistake. I’ve updated the first comment now, with expected and actual output!

[MadLittleMods]

@runar This looks like it stems from the same problem as https://github.com/MadLittleMods/postcss-css-variables/issues/67 so I am going to close in favor of that

You can fix the rule order with options.preserveAtRulesOrder

There isn't an existing issue for indentation weirdness. Not too high priority compared to the bugs in this project

[runar]

@MadLittleMods Would you be able to point me in the right direction to fix this? I lack the skills to debug this on my own, but I’ll give it a shot if you help me out with what files or functions might be the culprit.

For the record, this change by @CodyHouse seems to fix issue #67, but not the issue reported here.

[MadLittleMods]

@runar All of the logic would be in these files,

• lib/resolve-decl.js
• lib/resolve-value.js

But it probably won't be very straightforward to fix

[runar]

@MadLittleMods You’re right, so instead of spending the entire weekend on this, I’ll be happy with my own solution: Use PostCSS and cssnano (the mergeRules optimisation) to merge the media queries into one.

Thank you for responding so quickly!