项目作者: hashanp

项目描述 :
PostCSS plugin to use British English
高级语言: JavaScript
项目地址: git://github.com/hashanp/postcss-spiffing.git
创建时间: 2015-04-05T19:21:49Z
项目社区:https://github.com/hashanp/postcss-spiffing

开源协议:

下载


postcss-spiffing

My hands are of your colour, but I shame

To wear a heart so white.

- William Shakespeare, Macbeth

Shakespeare wouldn’t have settled for using “color” rather than “colour” in CSS, and neither should you! He would’ve recognised that in doing so, he would’ve comprised the whole integrity of his writing.

Write CSS using proper British English anywhere with postcss-spiffing.

The main differences between this and spiffing by muan, are that this integrates with postcss and does not use regular expressions.

Install

  1. npm install postcss-spiffing --save-dev

Example

  1. /* Your well-spelt CSS */
  2. body {
  3. background-colour: grey;
  4. transparency: 0.3;
  5. text-align: centre;
  6. text-transform: capitalise;
  7. border: 1px solid grey;
  8. }
  9. span {
  10. font-weight: plump;
  11. }
  12. .frame {
  13. background-photograph: url("/queen.png") !please;
  14. }
  15. .hello {
  16. content: "subjects";
  17. colour: grey;
  18. }

will go to:

  1. body {
  2. background-color: gray;
  3. opacity: 0.7;
  4. text-align: center;
  5. text-transform: capitalize;
  6. border: 1px solid gray;
  7. }
  8. span {
  9. font-weight: bold;
  10. }
  11. .frame {
  12. background-image: url("/queen.png") !important;
  13. }
  14. .hello {
  15. content: "subjects";
  16. color: gray;
  17. }

Use

  1. var postcss = require("postcss");
  2. var spiffing = require("postcss-spiffing");
  3. var fs = require("fs");
  4. var css = fs.readFileSync("random.css");
  5. console.log(postcss(spiffing()).process(css).css);

To use this with gulp, use gulp-postcss.

Changes Applied

  1. colour goes to color
  2. plump goes to bold
  3. capitalise goes to capitalize
  4. !please goes to !important
  5. centre goes to center
  6. grey goes to gray
  7. background-photograph goes to background-image (list-style-photograph is supported too)
  8. transparency goes to opacity (since transparency is the opposite of opacity it becomes (1-n))
  9. storey goes to z-index (ground equals 1 and so on)