Khan / Khan/aphrodite

Feature request - Handle multiple selectors

Open
#196 4 comments 13 reactions 0 assignees View on GitHub
enhancement
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.