postcss spiffing

postcss-spiffing

Mes mains sont de ta couleur, mais j'ai honte
Porter un cœur si blanc.
- William Shakespeare, Macbeth

Shakespeare ne se serait pas contenté d'utiliser « couleur » plutôt que « couleur » en CSS, et vous non plus ne devriez pas le faire ! Il aurait reconnu qu'en agissant ainsi, il aurait compris toute l'intégrité de son écriture.

Écrivez du CSS en utilisant l'anglais britannique approprié n'importe où avec postcss-spiffing .

Les principales différences entre ceci et spiffing by muan sont que cela s'intègre à postcss et n'utilise pas d'expressions régulières.

Installer

npm install postcss-spiffing --save-dev

Exemple

 /* Your well-spelt CSS */

body {
  background-colour : grey;
  transparency : 0.3 ;
  text-align : centre;
  text-transform : capitalise;
  border : 1 px solid grey;
}

span {
  font-weight : plump;
}

. frame {
  background-photograph : url ( "/queen.png" ) !please;
}

. hello {
	content : "subjects" ;
	colour : grey;
}

ira à :

 body {
  background-color : gray;
  opacity : 0.7 ;
  text-align : center;
  text-transform : capitalize;
  border : 1 px solid gray;
}

span {
  font-weight : bold;
}

. frame {
  background-image : url ( "/queen.png" ) !important ;
}

. hello {
	content : "subjects" ;
	color : gray;
}

Utiliser

 var postcss = require ( "postcss" ) ;
var spiffing = require ( "postcss-spiffing" ) ;
var fs = require ( "fs" ) ;

var css = fs . readFileSync ( "random.css" ) ;

console . log ( postcss ( spiffing ( ) ) . process ( css ) . css ) ;

Pour l'utiliser avec gulp , utilisez gulp-postcss.

Modifications appliquées

1. colour va à color
2. plump devient bold
3. capitalise va capitalize
4. !please allez à !important
5. centre va au center
6. grey devient gray
7. background-photograph va à background-image ( list-style-photograph est également pris en charge)
8. transparency passe à opacity (puisque la transparence est l'opposé de l'opacité, elle devient (1-n))
9. storey va à z-index ( ground est égal à 1 et ainsi de suite)