Fails to merge properties for a selector with other styles present

[Streemo]

Edit: See final update below.

a.css

#root {
  background-color: #f00;
}
body {
  text-align: center;
}

b.css

#root {
  width: 640px;
  height: 360px;
}

expected.css

#root{width:640px;height:360px;background-color:red}body{text-align:center}

actual.css

#root{background-color:red}body{text-align:center}#root{width:640px;height:360px}

If the body style is omitted, it merges the #root styles as expected.

[Streemo]

If the body declaration is first, it works as expected:

body {
  text-align: center;
}
#root {
  background-color: #f00;
}

b.css

#root {
  width: 640px;
  height: 360px;
}

actual.css === expected.css

body{text-align:center}#root{background-color:red;width:640px;height:360px}

[Streemo]

If each declaration is in a separate file, it works as expected, depending on the import order, see next comment:

a.css

#root {
  background-color: #f00;
}

b.css

body {
  text-align: center;
}

c.css

#root {
  width: 640px;
  height: 360px;
}

actual.css === expected.css

#root{background-color:red;width:640px;height:360px}body{text-align:center}

[Streemo]

index.js

import "a.css"
import "b.css"
import "c.css"

will produce the offending output, whereas importing a and c consecutively (the #root declarations) produced the expected output:

import "a.css"
import "c.css"
import "b.css"

So, does order matter with these sheets, really? Shouldn't they be merged anyway? I think it would be a bit cumbersome to have to optimize the order of my imports if it can be done automatically.

[NMFR]

Will take a look in the weekend, but i suspect it is a cssnano issue.

[NMFR]

It seems this is the expected behavior.

cssnano will only merge adjacent rules https://cssnano.co/optimisations/mergerules/