Exportando variables SCSS a JavaScript/Svelte a través de CSS Modules sin advertencia de lint.

23 Jul, 2023 Programación 0

Estoy intentando compartir las variables definidas en un archivo SASS con un componente Svelte a través de la funcionalidad :export como se define aquí.

Sé que es posible, ya que esto funciona exactamente como espero/deseo:

// styleExport.module.scss
$colors: (
  red: #ff0000,
  green: #00ff00, 
  blue: #0000ff
);

:export {
  @each $color, $value in $colors {
    #{$color}: $value;
  }
}

// component.svelte
<div><!-- algún marcado --></div>

<script>
  import importedColors from "../styleExport.module.scss";
  console.log(importedColors);
/*
 produce la salida esperada en la página de: 
 {red: '#f00f00', green: '#00ff00', blue: '#0000ff'}
*/
</script>

Esto funciona, pero genera la advertencia:

ADVERTENCIA: Probablemente no quieras usar el valor de color blanco en la interpolación aquí. Puede terminar representado como blanco, lo que probablemente generará CSS no válido. Siempre encierra los nombres de color entre comillas al usarlos como cadenas o claves de mapas (por ejemplo, “blanco”). Si realmente quieres usar el valor de color aquí, usa ””” + $color’.

Cuando actualizo el archivo styleExport.module.scss para usar su implementación de interpolación solicitada:

:export {
  @each $color, $value in $colors {
    #{'"" + $color'}: $value;
  }
}

Obtengo el error:

Intentaste analizar SCSS con el analizador CSS estándar; intenta de nuevo con el analizador postcss-scss.
Archivo: /app/src/lib/styles/testExport.module.scss
[build ]   1  |
[build ]   2  |  $colors: (
[build ]      |          ^
[build ]   3  |    red: #f00,
[build ]   4  |    green: #0f0,

Mis preguntas son:
– ¿Hay alguna forma de suprimir la advertencia de interpolación que estoy viendo en mi implementación inicial?
– Si no es así, ¿cómo puedo implementar esto de una manera que coincida con los estándares de interpolación esperados?

davy.ai

July 23, 2023 at 1:07 pm

Compartir variables desde un archivo SASS a un componente Svelte utilizando la funcionalidad de :export

Introducción

Para compartir variables desde un archivo SASS a un componente Svelte, se puede utilizar la funcionalidad de :export. En este escenario, un experto en TI está tratando de utilizar la funcionalidad de :export pero está enfrentando algunos problemas.

Problema

El experto está enfrentando un problema con la funcionalidad de :export en el cual puede compartir variables correctamente desde un archivo SASS a un componente Svelte, pero está recibiendo una advertencia. Además, cuando sigue la sugerencia dada en la advertencia, obtiene un error.

Solución

Suprimir la advertencia de interpolación

La advertencia se puede suprimir al poner entre comillas los nombres de colores al utilizarlos como cadenas o claves de un mapa. El experto puede modificar el archivo styleExport.module.scss para usar nombres de colores entre comillas como claves de mapa de la siguiente manera:

$colors: (
  "red": #ff0000,
  "green": #00ff00, 
  "blue": #0000ff
);

:export {
  @each $color, $value in $colors {
    #{$color}: $value;
  }
}

Implementar interpolación

Para implementar interpolación, el experto necesita utilizar el analizador postcss-scss en lugar del analizador CSS estándar. Esto se puede hacer instalando el analizador de la siguiente manera:

npm install postcss-scss --save-dev

Una vez instalado el analizador, el experto puede modificar el archivo rollup.config.js para utilizar el analizador postcss-scss de la siguiente manera:

svelte({
  // habilitar verificaciones en tiempo de ejecución cuando no esté en producción
  dev: !production,
  // extraer cualquier CSS de los componentes en un archivo separado 
  // para mejorar el rendimiento
  css: css => {
    css.write('public/bundle.css');
  },
  preprocess: {
    style: ({ content, attributes }) => {
      if (attributes.type !== 'text/scss') return;

      return new Promise((resolve, reject) => {
        postcss([scss()])
          .process(content, { syntax: scssSyntax })
          .then(result => {
            resolve({
              code: result.css,
              map: result.map,
            });
          })
          .catch(err => {
            reject(err);
          });
      });
    },
  },
}),

Luego, el experto puede modificar el archivo styleExport.module.scss para utilizar la interpolación de la siguiente manera:

$colors: (
  red: #ff0000,
  green: #00ff00, 
  blue: #0000ff
);

:export {
  @each $color, $value in $colors {
    #"#{$color}": $value;
  }
}

Conclusión

En conclusión, el experto puede suprimir la advertencia de interpolación utilizando nombres de colores entre comillas y puede implementar la interpolación utilizando el analizador postcss-scss.

Answer

davy.ai

July 23, 2023 at 1:07 pm
Compartir variables desde un archivo SASS a un componente Svelte utilizando la funcionalidad de :export

Introducción

Para compartir variables desde un archivo SASS a un componente Svelte, se puede utilizar la funcionalidad de :export. En este escenario, un experto en TI está tratando de utilizar la funcionalidad de :export pero está enfrentando algunos problemas.

Problema

El experto está enfrentando un problema con la funcionalidad de :export en el cual puede compartir variables correctamente desde un archivo SASS a un componente Svelte, pero está recibiendo una advertencia. Además, cuando sigue la sugerencia dada en la advertencia, obtiene un error.

Solución

Suprimir la advertencia de interpolación

La advertencia se puede suprimir al poner entre comillas los nombres de colores al utilizarlos como cadenas o claves de un mapa. El experto puede modificar el archivo styleExport.module.scss para usar nombres de colores entre comillas como claves de mapa de la siguiente manera:
```
$colors: (
  "red": #ff0000,
  "green": #00ff00, 
  "blue": #0000ff
);

:export {
  @each $color, $value in $colors {
    #{$color}: $value;
  }
}
```
Implementar interpolación

Para implementar interpolación, el experto necesita utilizar el analizador postcss-scss en lugar del analizador CSS estándar. Esto se puede hacer instalando el analizador de la siguiente manera:
```
npm install postcss-scss --save-dev
```
Una vez instalado el analizador, el experto puede modificar el archivo rollup.config.js para utilizar el analizador postcss-scss de la siguiente manera:
```
svelte({
  // habilitar verificaciones en tiempo de ejecución cuando no esté en producción
  dev: !production,
  // extraer cualquier CSS de los componentes en un archivo separado 
  // para mejorar el rendimiento
  css: css => {
    css.write('public/bundle.css');
  },
  preprocess: {
    style: ({ content, attributes }) => {
      if (attributes.type !== 'text/scss') return;

      return new Promise((resolve, reject) => {
        postcss([scss()])
          .process(content, { syntax: scssSyntax })
          .then(result => {
            resolve({
              code: result.css,
              map: result.map,
            });
          })
          .catch(err => {
            reject(err);
          });
      });
    },
  },
}),
```
Luego, el experto puede modificar el archivo styleExport.module.scss para utilizar la interpolación de la siguiente manera:
```
$colors: (
  red: #ff0000,
  green: #00ff00, 
  blue: #0000ff
);

:export {
  @each $color, $value in $colors {
    #"#{$color}": $value;
  }
}
```
Conclusión

En conclusión, el experto puede suprimir la advertencia de interpolación utilizando nombres de colores entre comillas y puede implementar la interpolación utilizando el analizador postcss-scss.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?