gajus / gajus/babel-plugin-react-css-modules
Working with state classes
Nadie ha tomado este issue todavía.
- Lenguaje dominante
- JavaScript
- Estrellas
- 2k
- Forks
- 159
- Métricas de merge de PR
- Sin PR fusionados en 30 d
Descripción
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
<div styleName="menu__item"></div>
this element can sometimes have this class
<div styleName="menu__item is-active"></div>
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
<div styleName="menu__item is-active">
<i styleName="menu__icon"></i>
</div>
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...
Guía de contribución
No hay ninguna guía de contribución indexada para este repositorio
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Línea de trabajo
El issue menciona el uso de styleName y selectores CSS anidados, pero no archivos del repositorio ni tests. Empieza localizando el punto de entrada de la transformación de styleName y los tests existentes de resolución de selectores; se considera terminado cuando se puedan ignorar clases de estado con prefijos como is- y u-, mientras los selectores anidados menu__item/menu__icon se resuelvan como se muestra.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- babel, css, javascript
- Área
- frontend, tooling
- Tipo de issue
- Nueva funcionalidad
- Dificultad
- 5/5
- Tiempo estimado
- Más de una semana
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 25/100