postcss spiffing

postcss のスパイフィング

私の手はあなたの色だけど、恥ずかしい
こんなに白い心を身につけるなんて。
- ウィリアム・シェイクスピア、マクベス

シェイクスピアは、CSS で「color」ではなく「color」を使用することに妥協しなかっただろうし、あなたもそうすべきではありません。そうすることで自分の文章の完全性が完成することを彼は認識していたでしょう。

postcss-spiffingを使用して、どこでも適切なイギリス英語を使用して CSS を記述します。

これと muan によるspiffingの主な違いは、これが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. ! !importantへ行って!please
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 に等しいなど)