CSS Modules classes are compiled as dynamic/reactive variables rather than static strings (Optimization)
Los mantenedores suelen responder en 1 día
Nadie ha tomado este issue todavía.
Evaluación
- Dificultad
- 5/5
- Tiempo estimado
- Más de una semana
- Aptitud para principiantes
- 25/100
- Tipo de issue
- Error
- Claridad
- Necesita aclaración
- Estado de actividad
- Estancado
- Stack tecnológico
- typescript, vite
- Área
- build-system, frontend, performance
Línea de trabajo
Comienza rastreando el orden de procesamiento de Solid Babel plugin y Vite CSS Modules; el issue proporciona un custom Vite plugin como punto de comparación. Determina si el cambio del orden de procesamiento pertenece a este repositorio o a Vite, y define la finalización como que CSS Module class strings se compilen como texto DOM estático y no reactivo sin el workaround.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
@ryansolid Just following up on the issue we discussed during your Friday stream.
CSS Module classes are substituted for static strings by Vite AFTER the Solid babel plugin runs, so the CSS class strings are not compiled into static text directly in the DOM strings. This has a considerable performance effect because it breaks up long strings that would otherwise be inserted into the DOM at once statically.
This can be alleviated slightly with a custom Vite plugin like this one, which adds @once to at least compile these without reactivity:
{
name: 'vite-plugin-optimize-solid-css-modules',
enforce: 'pre',
transform: {
handler: code => ({
code: code.replace(/class=\{([a-zA-Z '"`[\].-]+|(?:`(?:\$\{[a-zA-Z '"`[\].-]+\}\s*)+)`)\}/g, 'class={/*@once*/$1}'),
map: null,
}),
filter: { id: /\.[mc]?[jt]sx$/ },
},
}
But without a modification to the order that CSS modules are processed, getting CSS modules to match the performance of plain CSS won’t be possible. I’ve taken a stab at fixing it myself, but the fix may need to be contributed to Vite. Needs some further investigation.
- Lenguaje dominante
- TypeScript
- Estrellas
- 522
- Forks
- 72
- Merge medio
- 21 h 42 min
- PR fusionados (30 d)
- 35
Preparar el entorno
- Sin Dockerfile ni archivo de Docker Compose
- Sin plantilla de pull request
- Leer la 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 solidjs/solid-vite-plugin
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
solidjs/solid-vite-plugin#205 · 1 comentario · 2 reacciones ·
Los mantenedores suelen responder en 1 día
-
Dificultad 3/5 1-2 días Aptitud para principiantes 68/100
solidjs/solid-vite-plugin#391 ·
Los mantenedores suelen responder en 1 día
-
Dificultad 4/5 3-5 días Aptitud para principiantes 55/100
solidjs/solid-vite-plugin#390 ·
Los mantenedores suelen responder en 1 día
-
Dificultad 5/5 Más de una semana Aptitud para principiantes 35/100
solidjs/solid-vite-plugin#388 · 1 comentario ·
Los mantenedores suelen responder en 1 día
-
Dificultad 3/5 1-2 días Aptitud para principiantes 68/100
solidjs/solid-vite-plugin#387 ·
Los mantenedores suelen responder en 1 día
Todos los issues de solidjs/solid-vite-plugin
Issues similares
-
keytrace logo svg?Abierto
Dificultad 2/5 1-3 horas Aptitud para principiantes 65/100
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 84/100
cyclofinance/cyclo.site#448 ·
-
[sanity-plugin-media] Searching for a word with an apostrophe shows an error instead of resultsAbierto@sanity-io/studio bug sanity-plugin-media Sieve-Agent
Dificultad 2/5 1-3 horas Aptitud para principiantes 82/100
Los mantenedores suelen responder en 1 día
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 75/100
-
bug via-triage
Dificultad 2/5 1-3 horas Aptitud para principiantes 84/100
pingdotgg/t3code#15221 · 1 comentario ·
Los mantenedores suelen responder en 1 día