Unexpected overrides with stylesheet extraction

[pancaspe87]

It seems that having shorthands may not produced the expected output when stylesheet extraction is enabled.

Given

const nestedSelectors = css`
  .intro {
    .intro-heading {
        .intro-logo {
          background: url("https://images.unsplash.com/photo-1593558159516-d0be2a960c52?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aWNlY3JlYW18ZW58MHx8MHx8&w=1000&q=80") left top no-repeat;
          background-size: 100%;
        }
    }
}`;

Stylesheet extraction will generate

._1b3x1osq .intro .intro-heading .intro-logo{background-size:100%}
._bkmu74eu .intro .intro-heading .intro-logo{background:url("https://images.unsplash.com/photo-1593558159516-d0be2a960c52?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aWNlY3JlYW18ZW58MHx8MHx8&w=1000&q=80") left top no-repeat}

Resulting in background-size:100% not being applied as it gets overridden by the shorthand and it fallbacks to initial

Workaround break the background shorthand into atomic declarations

Solution

1. Consider expanding all shorthands OR
2. Preserve order of CSS declarations. Stylesheet extraction should generated instead

._bkmu74eu .intro .intro-heading .intro-logo{background:url("https://images.unsplash.com/photo-1593558159516-d0be2a960c52?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aWNlY3JlYW18ZW58MHx8MHx8&w=1000&q=80") left top no-repeat}
._1b3x1osq .intro .intro-heading .intro-logo{background-size:100%}

cc @JakeLane

Originally posted by @pancaspe87 in https://github.com/atlassian-labs/compiled/issues/806#issuecomment-1144479497