Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Handling multiple selectors #401

Open
Abban-Fahim opened this issue Sep 30, 2021 · 0 comments
Open

Handling multiple selectors #401

Abban-Fahim opened this issue Sep 30, 2021 · 0 comments

Comments

@Abban-Fahim
Copy link

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:

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant