-
Notifications
You must be signed in to change notification settings - Fork 186
Handling multiple selectors #401
Copy link
Copy link
Open
Description
This issue is to resurface a four year old issue #196.
As the issue already explains, using a , to separate two psuedo slectors in the same style block, wont add the base style (with the hash) to the second psuedo-selector. I've been scrutinising the library's code and beleive it si due to the fact that the logic only targets the first psuedo selector in the generateSubtreeStyles function:
Lines 74 to 81 in 225f43c
| export const defaultSelectorHandlers /* : SelectorHandler[] */ = [ | |
| // Handle pseudo-selectors, like :hover and :nth-child(3n) | |
| function pseudoSelectors(selector, baseSelector, generateSubtreeStyles) { | |
| if (selector[0] !== ":") { | |
| return null; | |
| } | |
| return generateSubtreeStyles(baseSelector + selector); | |
| }, |
I don't have the expertise to solve this problem or I would submit a PR. I hope this sort of feature can be added.
Ideally, I would want it to work like this:
const style = StyleSheet.create({
selector1: {
':before, :after': {backgroundColor: "green"}
});to output something like this:
.selector1_HASH:before, .selector1_HASH:after {
background-color: green;
}Thanks!
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels