postcss spiffing

Postcss-спифтинг

Мои руки твоего цвета, но мне стыдно
Носить такое белое сердце.
- Уильям Шекспир, Макбет

Шекспир не согласился бы использовать в CSS «цвет», а не «цвет», и вы тоже! Он бы осознал, что, поступая так, он бы составил всю целостность своего письма.

Пишите CSS, используя правильный британский английский, где угодно с помощью postcss-spiffing .

Основные различия между этим и spiffing с помощью muan заключаются в том, что он интегрируется с postcss и не использует регулярные выражения.

Установить

npm install postcss-spiffing --save-dev

Пример

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

пойдет в:

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

Использовать

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

Чтобы использовать это с gulp , используйте gulp-postcss.

Применены изменения

1. colour переходит в color
2. plump переходит в bold
3. capitalise идет к capitalize
4. !please перейдите к !important
5. centre идет в center
6. grey становится gray
7. background-photograph переходит в background-image (также поддерживается list-style-photograph )
8. transparency переходит в opacity (поскольку прозрачность является противоположностью непрозрачности, она становится (1-n))
9. storey переходит в z-index ( ground равна 1 и т. д.)