postcss spiffing

melhoria pós-css

Minhas mãos são da sua cor, mas tenho vergonha
Usar um coração tão branco.
-William Shakespeare, Macbeth

Shakespeare não teria se contentado em usar “cor” em vez de “cor” em CSS, e você também não deveria! Ele teria reconhecido que, ao fazer isso, teria abrangido toda a integridade de sua escrita.

Escreva CSS usando o inglês britânico adequado em qualquer lugar com postcss-spiffing .

As principais diferenças entre este e spiffing do muan são que se integra ao postcss e não usa expressões regulares.

Instalar

npm install postcss-spiffing --save-dev

Exemplo

 /* 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;
}

irá para:

 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;
}

Usar

 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 ) ;

Para usar isso com gulp , use gulp-postcss.

Alterações aplicadas

1. colour vai para color
2. plump vai para bold
3. capitalise vai para capitalize
4. !please vá para !important
5. centre vai para center
6. grey vai para gray
7. background-photograph vai para background-image ( list-style-photograph também é suportada)
8. transparency vai para opacity (já que a transparência é o oposto da opacidade, ela se torna (1-n))
9. storey vai para z-index ( ground é igual a 1 e assim por diante)