postcss spiffing

spiffing pascacss

Tanganku sewarna denganmu, tapi aku malu
Untuk memakai hati yang begitu putih.
-William Shakespeare, Macbeth

Shakespeare tidak akan puas menggunakan "warna" daripada "warna" dalam CSS, begitu pula Anda! Dia akan menyadari bahwa dengan melakukan hal itu, dia akan memenuhi seluruh integritas tulisannya.

Tulis CSS menggunakan bahasa Inggris British yang tepat di mana saja dengan postcss-spiffing .

Perbedaan utama antara ini dan spiffing oleh muan, adalah bahwa ini terintegrasi dengan postcss dan tidak menggunakan ekspresi reguler.

Memasang

npm install postcss-spiffing --save-dev

Contoh

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

akan pergi ke:

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

Menggunakan

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

Untuk menggunakan ini dengan gulp , gunakan gulp-postcss.

Perubahan Diterapkan

1. colour berubah menjadi color
2. plump menjadi bold
3. capitalise menjadi capitalize
4. !please pergi ke !important
5. centre pergi ke center
6. grey menjadi gray
7. background-photograph menuju ke background-image ( list-style-photograph juga didukung)
8. transparency berubah menjadi opacity (karena transparansi adalah kebalikan dari opacity maka menjadi (1-n))
9. storey menuju z-index ( ground sama dengan 1 dan seterusnya)