constyble

constyble

Un enlace de complejidad CSS, basado en CSS-Analyzer. No permita que su CSS crezca más allá de los umbrales que proporcione.

Instalación

npm install constyble
# or
yarn add constyble

Uso

Necesitamos una configuración con umbrales y CSS para compararla.

 # Default usage (assuming a .constyblerc file in the current directory)
$ constyble style.css

# Read from StdIn (assuming a .constyblerc file in the current directory)
$ cat style.css | constyble

# Custom config
$ constyble style.css --config my-config.json

El resultado se verá como esto:

TAP version 13
# Subtest: selectors.id.total
    ok 1 - selectors.id.total should not be larger than 0 (actual: 0)
    1..1
ok 1 - selectors.id.total # time=6.024ms

1..1
# time=15.076ms

Tenga en cuenta que este ejemplo usa solo 1 prueba (selectores de ID totales).

Archivo de configuración

Constyble intentará obtener un archivo .constyblerc en su directorio actual. También puede especificar un archivo de configuración JSON diferente con la opción --config (consulte el uso). La configuración JSON debería parecer similar a esto:

 {
	// Do not exceed 4095, otherwise IE9 will drop any subsequent rules
	"selectors.total" : 4095 ,
	"selectors.id.total" : 0 ,
	"values.colors.totalUnique" : 2 ,
	"values.colors.unique" : [ "#fff" , "#000" ]
}

Todas las opciones posibles para el archivo de configuración se pueden encontrar en @ProjectWallace/CSS-Analyzer. Los comentarios de JSON están permitidos.

Reportero personalizado

De manera predeterminada, Constyble informará en el formato TAP, pero puede encender la salida en algo que puede encontrar más bonito, como Tap-Nyan, Tap-Dot o cualquier otro Tap-Reporter.

Tap-Nyan

$ constyble style.css | tap-nyan

 1   -_,------,
 0   -_ |   / _ /
 0   -^ | __( ^ .^)
     -  " "  " "
  Pass ! 

Uso en CI

Si alguna prueba falla, Constyble saldrá con un código de salida distinto de cero. Cuando ejecuta Constyble en sus compilaciones de CI, esto puede hacer que la construcción falle. Esto es exactamente lo que Constyble fue diseñado para hacer.

Uso de ejemplo con paquete.json:

{
	"name" : " my-package " ,
	"version" : " 0.1.0 " ,
	"scripts" : {
		"test" : " constyble compiled-styles.css "
	},
	"devDependencies" : {
		"constyble" : " * "
	}
}

El nombre

Constyble es una mezcla de las palabras estilo y agente. Este paquete es como un oficial de policía (agente) para sus estilos. Anteriormente, este paquete se llamaba Gromit, pero eso se eliminó porque está demasiado relacionado con el proyecto principal de 'Wallace' del que este paquete es parte.

Proyectos relacionados

• Analizador CSS: el analizador que alimenta este módulo
• Wallace CLI - Herramienta CLI para @ProjectWallace/CSS -Analyzer
• CSS Analyzer Diff: calcula la diferencia entre dos conjuntos de análisis CSS
• Camor de color: clasifique los colores CSS por tono, saturación, ligereza y opacidad

Licencia

MIT © Bart Veneman