Use a custom PostCSS plugin for expanding nested selectors for static styles

[emmatown]

Currently we use postcss-nested to expand nested selectors. This causes a problem because it's inconsistent with the way we expand styles without extractStatic.

For example,

const cls = css`
  .some-class {
    background-color: hotpink;
  }
`

will expand to this without extractStatic

.css-hash.some-class {
  background-color: hotpink;
}

but it will expand to this with extractStatic

.css-hash .some-class {
  background-color: hotpink;
}

[ai]

Maybe it could be better to fix postcss-nested or fix how emotion uses postcss-nested

[emmatown]

@ai We don't use postcss-nested to expand selectors at runtime and we expand them differently to the way postcss-nested does. It's not really about fixing postcss-nested because emotion and postcss-nested expand them differently, neither way is necessarily wrong.

[emmatown]

Closing since we use stylis now.