Handling multiple selectors
- Dominant language
- JavaScript
- Stars
- 5.3k
- Forks
- 187
- PR merge metrics
- No merged PRs in 30d
Description
This issue is to resurface a four year old issue https://github.com/Khan/aphrodite/issues/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:
https://github.com/Khan/aphrodite/blob/225f43c5802259a9e042b384a1f4f2e5b48094ea/src/generate.js#L74-L81
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:
```js
const style = StyleSheet.create({
selector1: {
':before, :after': {backgroundColor: "green"}
});
```
to output something like this:
```css
.selector1_HASH:before, .selector1_HASH:after {
background-color: green;
}
```
Thanks!
Contributor guide
No contributing guide indexed for this repository
Research direction
Start in src/generate.js, especially generateSubtreeStyles at the referenced lines, and review the behavior described in issue 196. Update handling so comma-separated pseudo-selectors each receive the base class hash, producing grouped selectors like .selector1_HASH:before and .selector1_HASH:after.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100