Expand additional shorthands

[pancaspe87]

Is your feature request related to a problem? Please describe. At current not all the available CSS shorthands get expanded, eg border: 1px solid black; doesn't get expanded into individual properties.

Describe the solution you'd like We need to add extra logic in https://github.com/atlassian-labs/compiled/tree/master/packages/css/src/plugins/expand-shorthands to support the remaining shorthands

[itsdouges]

For some context for shorthands it was a tradeoff of how commonly the property is expanded through to how explosive the resulting expansion would be.

Borders are a bit nefarious because they expand to quite a lot of properties, so the decision that was made initially was to ignore them for now.

[pancaspe87]

It seems that having shorthands may not produced the expected output for nested selectors 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 generate 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