Losing styles when merging nested selectors
eirikurn opened this issue · comments
Eiríkur Heiðar Nilsson commented
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.
Zach Wegrzyniak commented
@eirikurn This should be fixed in bs-css@beta
.
Hervé Giraud commented
fixed in 8.0.0