Reference another stylesheet
- Dominant language
- JavaScript
- Stars
- 7.1k
- Forks
- 386
- PR merge metrics
- No merged PRs in 30d
Description
__Is your feature request related to a problem? Please describe.__
As a user of React-JSS I would like to override children component styles without specifity hacks.
For example I have a Button component that its background color is red , and I have a Button Group component that sets the default background color of all child buttons to yellow, I would like to reference the button to sheet to override it.
The current outcome css would be something like
```javascript
// from createUseStyles at "button.tsx"
{
small: {},
primary: {},
button: {
"&$primary$small": {
backgroundColor: "red"
}
}
}
```
turns into
```css
.button-1-0-1.primary-1-2-0.small-1-0-0 {
background-color: "red"
}
```
and
```javascript
// from createUseStyles at "button-group.tsx"
{
childButton: {}, // given through className to all children buttons
buttonGroup: {
"& > $childButton": {
backgroundColor: "yellow"
}
}
}
```
turns into
```css
.buttonGroup-2-2-1 > .childButton-1-0-2 {
background-color: "yellow"
}
```
the specifity of the button sheet is stronger,
currently to beat it I would have to do some hacks like that
```javascript
{
childButton: {},
buttonGroup: {
"& > $childButton$childButton$childButton": {
backgroundColor: "yellow"
}
}
}
```
__Describe the solution you'd like__
I would like to be able to reference another sheet perhaps by code (importing the other use styles and referencing it in mine),
another option is to add another special reference syntax maybe something like
```javascript
{
childButton: {},
buttonGroup: {
"& > $childButton%buttonSheet$button": {
backgroundColor: "yellow"
}
}
}
```
__Are you willing to implement it?__
Willing to try, would love maybe some guidance to start
Contributor guide
Research direction
Start at the createUseStyles entry point and review how references such as $childButton are resolved within a stylesheet. Define and validate a way for one sheet to reference another so child styles can be overridden without specificity hacks; the issue provides no test file, so add coverage for the Button and Button Group examples.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100