Khan / Khan/aphrodite

Handling multiple selectors

Open
#401 0 comments 1 reaction 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.