constyble

consommer

Un linter de complexité CSS, basé sur CSS-Analyzer. Ne laissez pas votre CSS se développer au-delà des seuils que vous fournissez.

Installation

npm install constyble
# or
yarn add constyble

Usage

Nous avons besoin d'une configuration avec des seuils et des CSS pour le comparer.

 # 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

Le résultat ressemblera à quelque chose comme ceci:

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

Notez que cet exemple n'utilise qu'un seul test (sélectionneurs d'ID totaux).

Fichier de configuration

Constyble essaiera de récupérer un fichier .constyblerc dans votre répertoire actuel. Vous pouvez également spécifier un fichier de configuration JSON différent avec l'option --config (voir usage). La configuration JSON devrait ressembler à ceci:

 {
	// 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" ]
}

Toutes les options possibles pour le fichier de configuration peuvent être trouvées sur @ projectWallace / CSS-Analyzer. Les commentaires JSON sont autorisés.

Journaliste personnalisé

Par défaut, Constyble rapportera le format de TAP, mais vous pouvez tuer la sortie dans quelque chose que vous pouvez trouver plus joli, comme le tap-nyan, le robinet ou tout autre reporter de tapage.

tap-nyan

$ constyble style.css | tap-nyan

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

Utilisation dans CI

Si un test échoue, Constyble sortira avec un code de sortie non nulle. Lorsque vous exécutez Constyble dans vos constructions CI, cela peut entraîner l'échec de la construction. C'est exactement ce que Constyble a été conçu pour faire.

Exemple d'utilisation avec package.json:

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

Le nom

Constyble est un mélange du style des mots et du gendarme. Ce forfait est comme un policier (constable) pour vos styles. Auparavant, ce package s'appelait Gromit, mais cela a été abandonné parce qu'il est trop étroitement lié au projet principal «Wallace» dont ce package fait partie.

Projets connexes

• Analyseur CSS - L'analyseur qui alimente ce module
• Wallace CLI - outil CLI pour @ projectwallace / CSS-Analyzer
• CSS Analyzer Diff - calcule le diff entre deux ensembles d'analyse CSS
• Trieur de couleur - trier les couleurs CSS par teinte, saturation, légèreté et opacité

Licence

MIT © Bart Veneman