Skip to content

Handling multiple selectors #401

Description

@Abban-Fahim

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions