Nuevo importador de paquetes en SASS

Cuando se trabaja en el desarrollo del frontend en JavaScript, aquellos que emplean Sass a menudo, se encuentran en la necesidad de utilizar estilos provenientes de dependencias para personalizar un tema preexistente o acceder a utilidades de estilo. Hasta ahora, Sass no había establecido un método estándar para gestionar la incorporación de paquetes de dependencias, lo que ha dado lugar a diversas soluciones específicas de dominio. Algunas de estas soluciones incluyen el uso del prefijo "~" en Webpack o la inclusión de "node_modules" en las rutas de carga ("loadPaths"). Esta falta de estandarización ha sido una fuente de frustración común para los desarrolladores, ya que dificulta la confiabilidad en las dependencias y puede complicar la migración de un proyecto a un nuevo proceso de compilación. Este innovador enfoque permitirá a los consumidores de paquetes escribir comandos de Sass altamente efectivos en configuraciones de estilos específicas.

Con la finalidad de abordar este problema, existe un proyecto que está presentando una innovadora propuesta: un nuevo tipo de importador que permite a los usuarios utilizar el esquema de URL "pkg:" para indicar a Sass que resuelva las dependencias siguiendo los estándares y convenciones específicas de un entorno determinado.

Para atender el caso de uso más común, están proponiendo la implementación de un importador de paquetes integrado dentro del ecosistema Node. Nuestra recomendación es que los autores de paquetes definan una exportación condicional de "sass" en los puntos de entrada de sus paquetes en su archivo "package.json" distribuido. Por ejemplo, un archivo "package.json" podría contener lo siguiente:

Este innovador enfoque permitirá a los consumidores de paquetes escribir comandos de Sass altamente efectivos en configuraciones de estilos específicas. Algunos ejemplos de estos comandos incluyen:

• @use "pkg:library";
• @use "pkg:library/utils";

Nuestro objetivo principal era facilitar a los usuarios de paquetes Sass el uso de las URLs "pkg:" sin requerir modificaciones por parte de los autores de los paquetes. Dado que muchos paquetes Sass ya definen sus puntos de entrada de diversas maneras, el importador de paquetes Node también admite diversas formas de definir estos puntos de entrada. Estas alternativas abarcan la mayoría de las implementaciones que hemos observado y se resuelven en el siguiente orden de prioridad:

1. Sass, style, o condición por defecto en las exportaciones package.json que resuelven a un archivo Sass o CSS.
2. Si no hay una sub-ruta, entonces busca la exportación raíz:
3. Sass key en package.json root.
4. Clave style en la raíz de package.json.
5. Archivo index en la raíz del paquete, resuelto para extensiones de archivo y parciales.
6. Si hay una ruta secundaria, resuélvala en relación con la raíz del paquete y busque las extensiones de archivo y los parciales.

Con el fin de entender mejor y permitir pruebas del algoritmo recomendado, hemos creado un repositorio de pruebas de Sass con implementaciones rudimentarias del uso de "pkg:".

Dado que el ecosistema Node se enfoca principalmente en la distribución de JavaScript, necesitábamos encontrar una manera de permitir a los autores de paquetes distribuir Sass de manera efectiva. En muchos aspectos, esta situación es análoga a la distribución de tipos de TypeScript, ya que los archivos de definición de tipos se distribuyen junto con el código compilado y, a menudo, no son la exportación principal en un paquete.

Después de analizar más de 400 paquetes de bibliotecas de diseño y frameworks, anticipamos que los consumidores de paquetes podrán utilizar "pkg:" para muchos paquetes sin necesidad de que los autores realicen modificaciones. Además, esta nueva capacidad permitirá a los autores de paquetes especificar y documentar mejor cómo se deben consumir sus recursos.

Nuestro análisis también reveló que los paquetes que distribuyen Sass suelen incluirlo junto con el código JavaScript. Algunos paquetes especifican un archivo Sass mediante la clave "sass" o un archivo CSS mediante la clave "style" en el archivo "package.json" raíz, y ambos enfoques serán compatibles con el importador de paquetes de Node. Observamos que se utiliza poco las claves principales o de módulo para archivos CSS o Sass, por lo que estas no serán compatibles.

Aunque actualmente el uso de campos de exportación condicional para especificar archivos Sass y CSS es limitado, esperamos que esta práctica aumente a medida que los autores de paquetes adopten las exportaciones condicionales. Además, herramientas de compilación como Vite, Parcel y Sass Loader for Webpack ya resuelven las rutas Sass utilizando condiciones personalizadas "sass" y "style".

Los usuarios deberán optar por el nuevo importador de paquetes importando "nodePackageImporter" de Sass e incluyéndolo en la lista de importadores. Es importante destacar que esta funcionalidad no estará disponible para Sass en el navegador.

Este proyecto aún se encuentra en fase de propuesta, por lo que puedes realizar cualquier sugerencia en el repositorio de Github del proyecto, es decir, https://github.com/sass/sass/blob/main/proposal/package-importer.d.ts.md.

- Zant