postcss spiffing

postcss-spiffing

يدي من لونك لكني أشعر بالخجل
لارتداء قلب أبيض جدا.
- وليم شكسبير، ماكبث

لم يكن شكسبير ليقبل باستخدام "اللون" بدلاً من "اللون" في 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 وهكذا)