Losing styles when merging nested selectors

[eirikurn]

We're building components by composing different styles. However, if we use the same sub-selector in two places, only one will be compiled. Eg:

let buttonStyles = [
  padding(px(5)),
  media("(min-width: 768px)", [
    padding(px(10)),
  ]),
]

let typographyStyles = [
  fontSize(px(14)),
  media("(min-width: 768px)", [
    fontSize(px(16)),
  ]),
]

let Button = style(merge([
  buttonStyles,
  typographyStyles,
]))

In this case, only the buttonStyles media query works. This happens for any sub-selector, eg &:hover, &:focus, [dir=rtl] &.

Looking through the implementation, it seems like this issue is quite baked in, with how bs-css abstracts glamor objects as reason lists.

The example above may be arbitrary, but IMO a big draw for CSS-in-JS, and glamor especially, is composability. This bug and abstraction break it quite severely.

[wegry]

@eirikurn This should be fixed in bs-css@beta.

[giraud]

fixed in 8.0.0