postcss spiffing

postcss-siffing

Mis manos son de tu color, pero me da vergüenza
Llevar un corazón tan blanco.
-William Shakespeare, Macbeth

Shakespeare no se habría conformado con usar "color" en lugar de "color" en CSS, ¡y tú tampoco deberías hacerlo! Habría reconocido que, al hacerlo, habría comprometido toda la integridad de su escritura.

Escriba CSS utilizando el inglés británico adecuado en cualquier lugar con postcss-spiffing .

Las principales diferencias entre esto y spiffing by muan son que se integra con postcss y no utiliza expresiones regulares.

Instalar

npm install postcss-spiffing --save-dev

Ejemplo

 /* 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á a:

 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 esto con gulp , use gulp-postcss.

Cambios aplicados

1. colour va al color
2. plump va a bold
3. capitalise va a capitalize
4. !please vaya a !important
5. centre va al center
6. grey se vuelve gray
7. background-photograph va a background-image ( list-style-photograph también es compatible)
8. transparency pasa a opacity (dado que la transparencia es lo opuesto a la opacidad, se convierte en (1-n))
9. storey va al z-index ( ground es igual a 1 y así sucesivamente)