Feature request - Handle multiple selectors
- Dominant language
- JavaScript
- Stars
- 5.3k
- Forks
- 187
- PR merge metrics
- No merged PRs in 30d
Description
To make my styles more DRY it would be good Aphrodite could handle multiple selectors. For example, if I have a style sheet defined as
```
const style = StyleSheet.create({
selector1: {
':before, :after': {
...
}
});
```
At the moment this will generate a string in the form `selector1_[hash]:before, :after` which will obviously result in ALL `:after` pseudo-elements on the page receiving the style, not just the intended target. To fix it I'd have to define the same style for both the pseudo-elements separately. I know I can do something like:
```
const shared = {...};
const style = StyleSheet.create({
selector1: {
':before': shared,
':after': shared
});
```
but that's not really DRY and, if coming from CSS, it feels inefficient. Also, if it could be added, then (maybe) it would be possible to extend the nested styles after defining some base styles.
```
const style = StyleSheet.create({
selector1: {
':before, :after': {
...shared styling here
},
':before': {
...more specific styling here
}
});
```
I've used nested pseudo-elements in my examples but the same could also apply to higher level selectors such as
```
{
'selector1, selector2': {...shared},
selector1: {..specific}
}
```
Thanks
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by tracing how Aphrodite turns nested selector strings into generated CSS, then inspect the related tests if present. Use the issue's pseudo-element and top-level selector examples to define the expected scoping behavior; done means grouped selectors remain scoped to the intended generated class and are covered by tests.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100