Language-tools: El resaltado de CSS no utilizado siempre está en mal estado

Creado en 14 sept. 2020  ·  14Comentarios  ·  Fuente: sveltejs/language-tools

Describe el error
Cuando se utilizan bloques de estilo SCSS, las líneas amarillas onduladas de CSS no utilizadas no aparecen en el lugar correcto.

image

Debe resaltar la clase .introduction , pero resalta la propiedad height (o cualquier última propiedad del primer estilo definido) en su lugar.

Al volver a un bloque CSS normal sin el atributo lang , funciona bien.

Reproducir

  1. Haz un componente simple con algunos elementos.
  2. Agregue algo de CSS vainilla usado y no usado sin funciones SCSS o azúcar sintáctica
  3. Cambie <style> a <style lang="scss">

Comportamiento esperado
Funciona igual que cuando es solo un bloque <style> normal

Capturas de pantalla
Véase más arriba

Sistema (complete la siguiente información):

  • SO: Windows
  • IDE: VScode
  • Complemento / Paquete: "Svelte para VSCode"

Contexto adicional
No se habilitaron complementos o extensiones adicionales al realizar la captura de pantalla. Incluso reinicié vscode por si acaso.

bug

Comentario más útil

Esto debería arreglarse con la versión 4.6.1 de svelte-preprocess .

Todos 14 comentarios

¿Podría publicar el fragmento de código que le dio los garabatos en esta línea?

¿Podría publicar el fragmento de código que le dio los garabatos en esta línea?

No debería importar qué código uses. Rápidamente comienza a romperse en mi extremo. Cuanto más código, peor se pone.

Aquí hay una REPL rápida:
https://svelte.dev/repl/97a01882d3444d77ad2a62480e310921?version=3.25.0

En mi IDE, con el atributo SCSS
image

sin el atributo:
image

Gracias. Necesito verificar si las líneas están desviadas por algún desplazamiento, pero en general me temo que no podemos hacer mucho ya que confiamos en los mapas de origen y si están equivocados / no tan buenos, entonces no hay nada que podamos hacer.

Mapas de origen que se generan durante la transpilación de SCSS a CSS. Necesitamos hacer esto antes de pasar el código al compilador Svelte (que da las advertencias no utilizadas) porque solo puede manejar CSS.

¿Son los mapas de origen algo que pueda arreglar por mi parte? ¿O es un problema con el preproceso esbelto? ¿enrollar?
Por suerte para mí, sé qué CSS estoy escribiendo y qué HTML estoy eliminando, así que puedo lidiar con esto por ahora. ¿Hay alguna manera sensata de apagarlos en caso de que tenga que hacerlo?

https://github.com/sveltejs/svelte/pull/5015 debe fusionarse para admitir el mapa de origen del preprocesador

¿Son los mapas de origen algo que pueda arreglar por mi parte? ¿O es un problema con el preproceso esbelto? ¿enrollar?

El compilador scss ( node-sass / sass , depende de lo que esté usando) produce los mapas de origen.

Por suerte para mí, sé qué CSS estoy escribiendo y qué HTML estoy eliminando, así que puedo lidiar con esto por ahora. ¿Hay alguna manera sensata de apagarlos en caso de que tenga que hacerlo?

Si desea desactivar algunas advertencias de forma global, puede hacerlo a través de esta opción .

sveltejs / svelte # 5015 debe fusionarse para admitir el mapa fuente del preprocesador

No para las herramientas de lenguaje, en este momento hacemos el mapeo nosotros mismos (pero con suerte podemos arrojar un montón de código una vez que este aterrice).

sveltejs / svelte # 5015 debe fusionarse para admitir el mapa fuente del preprocesador

Parece que es una solicitud de extracción relativamente popular. ¿Alguna razón conocida de por qué aún no se ha fusionado?

Está alto en nuestro radar. Sin embargo, todavía no está en un estado fusionable. Dejé algunos comentarios al respecto.

Verifiqué, pero no pude reproducir las compensaciones de línea que experimenta cuando usa solo SCSS. ¿Usas PostCSS también? Solo puedo reproducir si también uso PostCSS. Si es así, el motivo es que faltan mapas de origen de PostCSS. Abrí este problema en svelte-preprocess para él.

Lo siento por la respuesta tardía. Tengo https://www.npmjs.com/package/postcss-load-config instalado. Eso es todo.

¿Entonces esto significa que está usando postcss, entonces postcss: true es parte de la configuración de su preprocesador? Si es así, esto se solucionará después de que se solucione el problema dentro de svelte-preprocess .

¿Entonces esto significa que está usando postcss, entonces postcss: true es parte de la configuración de su preprocesador?

Si postcss se establece en verdadero de forma predeterminada, sí.

Si es así, esto se solucionará una vez que se solucione el problema dentro de svelte-preprocess.

👀

Esto debería arreglarse con la versión 4.6.1 de svelte-preprocess .

¿Fue útil esta página
0 / 5 - 0 calificaciones