gajus / gajus/babel-plugin-react-css-modules

Working with state classes

Ouverte
#273 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub
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

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.