@supports (and other similar selectors) get injected at the end of the CSS blob

[majapw]

@supports and @media selectors do not actually have greater specificity than their non-wrapped counterparts. As such, if I have the following code:

const styles = StyleSheet.create({
  container: {
    background: 'white',
    ['@supports(--custom: properties)']: {
      background: 'red',
    },
  },
  container_inverse: {
    background: 'blue',
  },
});

function Foo() {
  return <div className={css(styles.container, styles.container_inverse)}>Foo</div>;
};

I would expect the background to be blue, but because all special selectors are injected at the end of the css blob, the div's background is actually red. @-selectors should be injected into the CSS immediately after the rule for which they are defined.

to: @garrettberg @lencioni