Desde la actualización de ayer (de mi servidor alojado en https://doomemacs.discourse.group), ninguno de mis CSS personalizados se aplica. Los cambios en mi(s) tema(s) o en el CSS de los componentes no tienen efecto (aunque los cambios en su <head> u otras secciones HTML funcionan correctamente).
Hay una etiqueta link sospechosa que apunta a una hoja de estilos vacía, cuyo hash cambia cada vez que modifico mi CSS. Parece que Discourse está fallando silenciosamente al compilar mis hojas de estilos. No hay menciones de fallos en mis registros de errores y discourse_theme sube mis hojas de estilos sin quejas, pero sin efecto alguno.
¿Podría un administrador echar un vistazo, por favor?
Hola @hlissner, estoy trabajando en una solución para esto. Una actualización reciente del núcleo rompió el componente del tema en tu instancia. Debería tener una solución pronto.
La corrección ya está integrada en el núcleo y tu sitio está desplegado, @hlissner. Ten en cuenta que desactivé dos componentes del tema: el que tiene estilos personalizados (que puedes volver a activar) y discourse-theme-category-homepage, que necesita actualizarse en la fuente principal antes de que puedas activarlo. Más detalles sobre esto en Enhanced category-box display component - #7 by pmusaraj
¡Gracias! Las hojas de estilo ahora se cargan correctamente, sin embargo, las variables de color SCSS no parecen heredar el esquema de colores de mi tema. Por ejemplo, $secondary devuelve su valor predeterminado, #ffffff, en lugar de #282c34. ¿Podría tratarse de otra regresión derivada de e8b8272?
Sí, es otra regresión. Es una solución un poco complicada… y para la gran mayoría de las variables de color, los componentes de tema deberían usar propiedades personalizadas de CSS. Puedes consultar esta guía Update themes and plugins to support automatic dark mode para obtener una visión general y algunos ejemplos sobre cómo agregar variaciones de color personalizadas en un archivo especial color_definitions.scss en tu componente de tema.
¿Hay alguna forma mejor de hacerlo? Podría agregar estilos directamente a cada tema, pero planeo tener muchos y preferiría manejar algunos casos generales desde un componente central y global siempre que sea posible.
Sí, tiene sentido. ¿Probaste agregar ese SCSS anterior a un archivo nuevo en common/color_definitions.scss? Debería funcionar sin problemas si lo agregas allí. (También hay una pestaña en la interfaz de usuario para esa hoja de estilos especial.)
Estaba a punto de probar exactamente eso, cuando Discourse se cayó con un mensaje de «El software que impulsa este foro de discusión encontró un problema inesperado», jaja.
Puedes acceder al sitio a través de /safe-mode, lo que desactiva los temas y componentes, y así podrás ver qué sucedió.
Sin embargo, esto es otra regresión más; esos errores de SCSS no deberían hacer colapsar todo el sitio. Ciertamente lo solucionaré en los próximos días.
¡Eso funcionó! Las variables de color están correctamente establecidas en el ámbito de color_definitions.scss. El único problema es que no puedo importar otros hojas de estilo desde ella. Por ejemplo:
¡Gracias por tu ayuda! La PR fue fusionada, mi instancia se actualizó y puedo importar hojas de estilo en color_definitions.scss, pero este problema ha vuelto a aparecer:
Esta vez, esto afecta también a las variables en color_definitions.scss.
¿Es posible hacer lo que estás intentando sin heredar las variables SCSS del tema padre? Es un caso de uso muy específico y preferiría no añadir esa complejidad en el núcleo.
Claro que es posible, solo incómodo, porque requerirá cientos de líneas de código SCSS repetitivo por tema (y un sistema de compilación para compartir variables entre todos ellos) que no eran necesarias hace una semana. Dicho esto, probablemente sea mejor hacerlo de todos modos, para evitar problemas con futuras refactorizaciones del proceso de compilación de Discourse. Lo haré. ¡Gracias!
Esa guía está un poco desactualizada, sí, aunque lo que te está causando problemas en tu caso no son las variables principales, sino los colores SCSS en un componente que no hereda el esquema de colores del tema. (No obstante, revisaré la guía y la actualizaré.)
Un poco de contexto: en agosto/septiembre de 2020 pasamos a usar propiedades personalizadas de CSS para los colores. La razón principal de ese cambio fue poder soportar el modo oscuro automático de una manera ligera y rápida. Los temas tienen CSS y JS, por lo que no se pueden cambiar rápidamente, pero al usar propiedades personalizadas de CSS, los esquemas de colores sí pueden alternarse al instante, sin recargar la página.
Veo en tu sitio que tienes 4 temas, cada uno con un esquema de colores, y un componente compartido entre los temas para los estilos comunes. Podrías lograr esencialmente lo mismo con un tema principal (que contendría todos los estilos compartidos) y 4 esquemas de colores seleccionables por el usuario. Tendrías que mover todos los cálculos de color en el archivo color_definitions.scss del tema principal, pero es factible; trataré de encontrar un momento y probaré esto mañana.
Eso sería ideal, pero llegué a la configuración actual porque los múltiples esquemas de color no funcionaban para mí. Algunos esquemas producen colores pobres para variables generadas automáticamente como --primary-low. Simplemente redefinir la variable puede funcionar para un esquema de color, pero no para otro. Una solución más general es posible si la redefinimos basándonos en $primary, o condicionalmente según el ID o nombre del esquema de color, pero sin ninguna de estas opciones, son necesarios múltiples temas, para que pueda tener un color_definitions.scss por tema (la duplicación que me gustaría evitar). ¿O hay una mejor opción que me esté perdiendo?
