Media query ordering changes when converting to object
Nadie ha tomado este issue todavía.
Evaluación
- Dificultad
- 3/5
- Tiempo estimado
- 1-2 días
- Aptitud para principiantes
- 38/100
- Tipo de issue
- Error
- Claridad
- Bastante claro
- Estado de actividad
- Estancado
- Stack tecnológico
- javascript
- Área
- frontend
Línea de trabajo
Start by reproducing the supplied CSS-to-object conversion and trace how media-query rules and default selectors are ordered. The fix is done when the converted object preserves the CSS cascade so the dark-mode media-query values remain effective; no specific source file or test is named in the issue.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
I have a problem where a given rule's default definition (.leoButton.isSecondary) gets placed after the media query, which changes the behavior of the rendering. As such, the default overrides the media query, and the media query never takes effect.
Is this a known bug? Is there any known fix for this?
Input
.button.isPrimary {
--bg: var(--color-secondary-light-mode-70);
--bg-hover: var(--color-secondary-light-mode-80);
--bg-active: var(--color-secondary-light-mode-90);
--bg-focus: var(--color-secondary-light-mode-70);
--bg-loading: var(--color-secondary-light-mode-50);
--bg-disabled: var(--color-gray-70);
--color: white;
}
@media (prefers-color-scheme: dark) {
.button.isPrimary {
--bg: var(--color-secondary-dark-mode-50);
--bg-hover: var(--color-secondary-dark-mode-60);
--bg-active: var(--color-secondary-dark-mode-70);
--bg-loading: var(--color-secondary-dark-mode-60);
}
}
.button.isSecondary {
--bg: white;
--bg-active: --color-gray-20;
--color: var(--color-gray-90);
--color-hover: var(--color-secondary-light-mode-70);
--color-loading: var(--color-gray-70);
--border-width: 1px;
--border-color: var(--color-gray-30);
}
@media (prefers-color-scheme: dark) {
.button.isSecondary {
--bg: black;
--color-hover: var(--color-secondary-dark-mode-80);
}
}
Output
{
".button.isPrimary": {
"--bg": "var(--color-secondary-light-mode-70)",
"--bg-hover": "var(--color-secondary-light-mode-80)",
"--bg-active": "var(--color-secondary-light-mode-90)",
"--bg-focus": "var(--color-secondary-light-mode-70)",
"--bg-loading": "var(--color-secondary-light-mode-50)",
"--bg-disabled": "var(--color-gray-70)",
"--color": "white"
},
"@media (prefers-color-scheme: dark)": [
{
".button.isPrimary": {
"--bg": "var(--color-secondary-dark-mode-50)",
"--bg-hover": "var(--color-secondary-dark-mode-60)",
"--bg-active": "var(--color-secondary-dark-mode-70)",
"--bg-loading": "var(--color-secondary-dark-mode-60)"
}
},
{
".button.isSecondary": {
"--bg": "black",
"--color-hover": "var(--color-secondary-dark-mode-80)"
}
}
],
".button.isSecondary": {
"--bg": "white",
"--bg-active": "--color-gray-20",
"--color": "var(--color-gray-90)",
"--color-hover": "var(--color-secondary-light-mode-70)",
"--color-loading": "var(--color-gray-70)",
"--border-width": "1px",
"--border-color": "var(--color-gray-30)"
}
}
- Lenguaje dominante
- JavaScript
- Estrellas
- 667
- Forks
- 24
- Métricas de merge de PR
- Sin PR fusionados en 30 d
Preparar el entorno
Inicia el contenedor de desarrollo del proyecto en tu navegador, con tu propia cuenta de GitHub.
- Sin Dockerfile ni archivo de Docker Compose
- Sin plantilla de pull request
- Sin guía de contribución
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.
Más de postcss/postcss-js
-
.sync APIAbierto
Dificultad 1/5 Menos de una hora Aptitud para principiantes 48/100
postcss/postcss-js#72 · 1 comentario ·
-
Dificultad 4/5 3-5 días Aptitud para principiantes 25/100
postcss/postcss-js#64 · 3 comentarios ·
Todos los issues de postcss/postcss-js
Issues similares
-
automated issue report
Dificultad 2/5 1-3 horas Aptitud para principiantes 62/100
lirantal/discoprint#36 ·
Los mantenedores suelen responder en 1 día
-
accepting PR Content:HTML
Dificultad 1/5 Menos de una hora Aptitud para principiantes 88/100
mdn/content#45988 · 1 comentario ·
Los mantenedores suelen responder en 1 día
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 72/100
pnpm/pnpm#16635 · 1 comentario ·
Los mantenedores suelen responder en 1 día
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 82/100
txn2/mcp-data-platform#2030 ·
Los mantenedores suelen responder en 1 día
-
ci hacktoberfest help wanted size/small type/bug type/docs type/enhancement up-for-grabs
Dificultad 2/5 1-3 horas Aptitud para principiantes 88/100
Redo-San/RedoSan-Authenticity#527 ·
Los mantenedores suelen responder en 1 día