gajus / gajus/babel-plugin-react-css-modules
Working with state classes
- Langage dominant
- JavaScript
- Étoiles
- 2k
- Forks
- 159
- Métriques de merge des PR
- Aucune PR mergée en 30 j
Description
We are using this library in 2 of our projects and works really well.
But one of the practices that we usually use are "State classes" like http://smacss.com/book/type-state
for example if we have
```
```
this element can sometimes have this class
```
```
To try to style things like this we had to use multiple modules and have a CSS like:
```
.menu__item {
color: red;
}
.is-active {
color: blue;
}
```
ideally we would like to use
```
.menu__item {
color: red;
&.is-active {
color: blue;
}
}
```
But ok we can more or less work, the problem is when you have something inside `menu__item`
```
```
In that case we cannot do that:
```
.menu__item {
color: red;
}
.is-active {
color: blue;
.menu__icon {
color: yellow;
}
}
```
or ideally:
```
.menu {
&__item {
color: red;
&.is-active {
color: blue;
}
}
&__item.is-active &__icon {
color: yellow;
}
}
```
Are you planning some feature to "disable" selectors that start with a prefix?
For example, for us can be useful to ignore "is-", "u-", etc...
Guide de contribution
Aucun guide de contribution indexé pour ce dépôt
Piste de recherche
L’issue mentionne l’utilisation de styleName et des sélecteurs CSS imbriqués, mais aucun fichier du dépôt ni aucun test. Commencez par localiser le point d’entrée de la transformation de styleName et les tests existants de résolution des sélecteurs ; le travail est terminé lorsque les classes d’état préfixées telles que is- et u- peuvent être ignorées, tandis que les sélecteurs imbriqués menu__item/menu__icon sont résolus comme indiqué.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- babel, css, javascript
- Domaine
- frontend, tooling
- Type d'issue
- Fonctionnalité
- Difficulté
- 5/5
- Temps estimé
- Plus d'une semaine
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 25/100