Cómo analizar CSS utilizando Stylelint

Spanish (Español) translation by Carlos (you can also view the original English article)

Un linter es, según Wikipedia: «Una herramienta que analiza el código fuente para señalar errores de programación, fallos, errores de estilo y construcciones sospechosas». Los linters existen desde hace un buen tiempo, sin embargo, si eres nuevo en CSS puede que sea la primera vez que escuches sobre ellos. Un linter de CSS mantendrá tus hojas de estilo bajo control y ¡te hará un mejor codificador!

¿Cuáles son los beneficios de los linters para CSS?

Como desarrolladores front-end esperamos que el código que escribimos sea enviado a producción y sea disfrutado por los usuarios de nuestro producto. Pasamos una gran cantidad de tiempo asegurándonos de que el código que estamos escribiendo esté libre de fallos y errores. Pero, ¿cuántos de estos errores podemos descubrir sin tener que ejecutar el código? Aquí es donde entran las pruebas, aunque hay cosas que las pruebas no detectan, o que no se pueden probar en absoluto.

Por ejemplo, como desarrollador de JavaScript, ¿darás prioridad y harás pruebas para manejar los casos de puntos y comas que falten? ¿O a los problemas de rendimiento que surgen al hacer uso de un selector universal?

El uso de linters en CSS hace posible captar los tipos de problemas de los que quizá no estés consciente. Esto es especialmente útil para los principiantes, cuyas habilidades se encuentran en las primeras fases. Además, los beneficios del uso de linters van mucho más allá del rendimiento, y alcanza a áreas como el análisis estático, los problemas de seguridad, etc.

¿Por qué utilizar Stylelint como tu linter?

Stylelint es, en palabras de los propios desarrolladores:

«Un linter poderoso y moderno que te ayuda a evitar errores y a hacer cumplir las convenciones en tus estilos».

Estas son algunas de las características que Stylelint te ofrece;

Admite la sintaxis más reciente de CSS y entiende la sintaxis similar a CSS, como SCSS y Less.
Corrige de forma automática algunos estilos de errores.
Tiene más de 170 reglas integradas para detectar errores y hacer cumplir las convenciones estilísticas.
Brinda la posibilidad de que habilites sólo las reglas que desees utilizar y configurarlas según tus preferencias.
Admite una configuración compartida que puede ser útil cuando se trabaja en equipo.

Aquí puedes encontrar más de sus características.

Cómo utilizar Stylint

Existen diferentes formas de usar Stylelint, ya sea instalando un plugin para tu editor de código favorito, o un plugin para Post CSS, pero vamos a usar la Línea de Comandos.

Empieza por instalar el paquete NPM en tu máquina. Abre tu terminal y escribe el siguiente comando:

1	npm install -g stylelint

El comando anterior instala Stylelint de manera global. Si lo prefieres basado en proyectos, puedes hacerlo con el siguiente comando:

1	npm install stylelint --save-dev

A continuación se tiene esto en el archivo package.json y se añadirá a tu proyecto.

1	"scripts": {
2	"stylelint": "stylelint ’*/.scss’"
3	}

Ejecutando el comando Linter

Nota: antes de ejecutar el linter deberás ajustar la configuración, la cual cubriremos en un momento. Sin la configuración se producirá un error.

Existen diferentes combinaciones cuando se ejecuta el comando para utilizar el linter en tu hoja de estilo. Iniciemos con la anterior.

1	stylelint "*/.scss"

Este comando buscará los estilos en tu aplicación e intentará analizar el código para hallar posibles errores. Si quieres ejecutar Stylelint en un directorio en particular, deberás usar:

1	stylelint "styles/*.css"

Esto funciona si ya tienes Stylelint instalado de manera global en tu máquina. Si no lo tienes, puedes añadirlo a la sección de scripts de tu archivo package.json. El comando hará uso del linter en todos los archivos .css contenidos en el directorio styles.

También hay un comando para los casos en los que desees utilizar el linter en los estilos que están contenidos en los archivos HTML.

1	stylelint "home/*.html"

Esto manejará los estilos que estén escritos en los bloques de <style> en todos los archivos HTML en home.

Configuración de Stylelint

Stylelint usa una configuración para averiguar cómo quieres utilizar el linter en tus estilos. Al ser una herramienta «que no tiene una forma exacta de hacer las cosas», no tiene estilos activados por defecto, aunque hay configuraciones predeterminadas que se pueden utilizar.

Las reglas que desees usar estarán contenidas en la configuración. Te encontrarás con errores si intentas utilizar el linter sin tener una configuración. Stylelint no tendrá ni idea de qué hacer, pues espera un archivo de configuración.

Existen diferentes métodos que se pueden usar cuando se ajusta la configuración:

Una propiedad stylelint en tu archivo package.json.
Un archivo .stylelintrc. Este archivo puede estar en formato JSON o YAML.
Un archivo stylelint.config.js que exporta un objeto JavaScript.

Estos son los lugares en que Stylelint observará cuando busque la configuración a utilizar. La configuración esperada por Stylelint es un objeto que debe tener las siguientes claves; rules, extends, plugins, processors, ignoreFiles.

Aquí se muestra un ejemplo de cómo podría ser un archivo de configuración:

{
    "extends": "stylelint-config-standard",
    "plugins": [
        "stylelint-no-browser-hacks/lib"
    ],
    "rules": {
        "indentation": 2,
        "string-quotes": "double",
        "no-duplicate-selectors": true,
        "color-hex-case": "lower",
        "color-hex-length": "long",
        "color-named": "never",
         "property-no-unknown": true,
        "plugin/no-browser-hacks": [true, {
          "browsers": [
            "last 2 versions",
            "ie >=8"
          ]
        }],
    }
}

Aquí estamos especificando la configuración que queremos extender: la configuración estándar.

Luego añadimos algunas reglas que queramos usar. Al iniciar con Stylelint, posiblemente desees utilizar un archivo de configuración existente. Extender las configuraciones ya existentes es una manera relativamente fácil de empezar, luego puedes desactivar los estilos añadiéndolos al objeto rules con tu propio valor de configuración.

Reglas

Además de las reglas que están desactivadas por defecto, no existen valores predeterminados para ninguna de ellas; tendrás que configurar las que quieras utilizar. Para configurar una regla, hay que utilizar el nombre de la regla (que es la clave) y de la configuración de la regla (que es el valor). Aquí hay un ejemplo de cómo sería esto:

1	"rules": {
2	"indentation": 2
3	}

En el fragmento anterior, estoy activando la regla indentation. Esto lo hago añadiendo el par de claves y valores, que es el nombre y la configuración de la regla, al objeto reglas.

De acuerdo con la documentación, existen tres maneras de configurar una regla:

Un valor único, como el ejemplo que tenemos arriba.
Un array con 2 valores, el primero será la opción principal, mientras que el segundo es la opción secundaria
Un valor null, esto desactiva la regla.

Las reglas están divididas en diferentes categorías, como las reglas para los errores, los problemas de estilo y las características de las limitantes del lenguaje.

Revisa la documentación para repasar de forma adecuada las posibles reglas. Aquí hay algunas que podemos cubrir:

Prevenir valores hexadecimales no válidos

Styelint hace posible prevenir valores hexadecimales inválidos utilizando la regla color-no-invalid-hex.

1	"rules": {
2	"color-no-invalid-hex": true
3	}

Eso hará que un estilo como este no sea válido:

1	a { color: #00; }

Esta regla te ayudará a evitar que tú y tu equipo usen por error un valor hexadecimal inválido para tu color, o tu background-color u otros casos en los que tengas que utilizar un color hexadecimal.

Añadir una nueva línea después de un punto y coma

También hay una regla para agregar una nueva línea después de un punto y coma en un bloque de declaración.

1	"rules": {
2	"declaration-block-semicolon-newline-after": "always"
3	}

Esta regla tiene tres valores posibles:

always: esto solicita que siempre se agregue una nueva línea después de un punto y coma.
always-multi-line: esto solicita una nueva línea cuando la regla se extienda a través de múltiples líneas.
never-multi-line: con este valor nunca debe haber un espacio en blanco después del punto y coma en las reglas de líneas múltiples.

Puedes consultar la documentación para conocer más sobre esta regla.

Plugins de Stylelint

Los plugins permiten usar reglas que no estén definidas en Stylelint por defecto. Tú, o los miembros de la comunidad, pueden crear plugins que adopten las metodologías de Stylelint. Estos plugins los puedes utilizar además de Stylelint. Ya hay bastantes plugins disponibles para que los pruebes.

stylelint-color-format es un plugin que convierte el color hexadecimal al formato RGB o HSL. Para utilizarlo, primero debes instalar el paquete.

1	npm install --save-dev stylelint-color-format

Luego, lo añades al conjunto de plugins en tu configuración.

1	{
2	"plugins": ["stylelint-color-format"]
3	}

Con ello, puede añadir a las reglas objetos para indicar el nombre de la regla y el valor que quieras usar.

{
  "rules": {
    "color-format/format": {
      "format": "rgb"
    }
  }
}

Conclusión

Hay mucho que aprender acerca de Stylelint, por ahora deberías tener un buen entendimiento de lo que es y cómo funciona. A partir de hoy, puedes empezar a adoptarlo en tu flujo de trabajo, y considerar el uso de otros linters (como ESLint) para mantener tu JavaScript y otro código que escribas ¡bajo control!