├── .gitignore
├── .npmignore
├── README.md
├── index.js
├── package.json
└── test
├── expected.css
├── source.css
└── test.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | test/
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | postcss-spiffing
2 | ---
3 | > My hands are of your colour, but I shame
4 | To wear a heart so white.
5 | \- William Shakespeare, *Macbeth*
6 |
7 | 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.
8 |
9 | Write CSS using proper British English anywhere with `postcss-spiffing`.
10 |
11 | The main differences between this and `spiffing` by [muan](https://github.com/muan), are that this integrates with `postcss` and does not use regular expressions.
12 |
13 | ### Install
14 | ```bash
15 | npm install postcss-spiffing --save-dev
16 | ```
17 |
18 | ### Example
19 | ```css
20 | /* Your well-spelt CSS */
21 |
22 | body {
23 | background-colour: grey;
24 | transparency: 0.3;
25 | text-align: centre;
26 | text-transform: capitalise;
27 | border: 1px solid grey;
28 | }
29 |
30 | span {
31 | font-weight: plump;
32 | }
33 |
34 | .frame {
35 | background-photograph: url("/queen.png") !please;
36 | }
37 |
38 | .hello {
39 | content: "subjects";
40 | colour: grey;
41 | }
42 | ```
43 |
44 | will go to:
45 |
46 | ```css
47 | body {
48 | background-color: gray;
49 | opacity: 0.7;
50 | text-align: center;
51 | text-transform: capitalize;
52 | border: 1px solid gray;
53 | }
54 |
55 | span {
56 | font-weight: bold;
57 | }
58 |
59 | .frame {
60 | background-image: url("/queen.png") !important;
61 | }
62 |
63 | .hello {
64 | content: "subjects";
65 | color: gray;
66 | }
67 | ```
68 |
69 | ### Use
70 | ```js
71 | var postcss = require("postcss");
72 | var spiffing = require("postcss-spiffing");
73 | var fs = require("fs");
74 |
75 | var css = fs.readFileSync("random.css");
76 |
77 | console.log(postcss(spiffing()).process(css).css);
78 | ```
79 |
80 | To use this with `gulp`, use [gulp-postcss](https://github.com/w0rm/gulp-postcss).
81 |
82 | ### Changes Applied
83 | 1. `colour` goes to `color`
84 | 2. `plump` goes to `bold`
85 | 3. `capitalise` goes to `capitalize`
86 | 4. `!please` goes to `!important`
87 | 5. `centre` goes to `center`
88 | 6. `grey` goes to `gray`
89 | 7. `background-photograph` goes to `background-image` (`list-style-photograph` is supported too)
90 | 8. `transparency` goes to `opacity` (since transparency is the opposite of opacity it becomes (1-n))
91 | 9. `storey` goes to `z-index` (`ground` equals 1 and so on)
92 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | var postcss = require("postcss");
2 |
3 | module.exports = postcss.plugin("postcss-spiffing", function(opts) {
4 | return function(css) {
5 | css.walkDecls(function(decl) {
6 | decl.prop = decl.prop.replace(/colour/g, "color").replace(/photograph/g, "image");
7 | if (decl.prop === "font-weight" && decl.value === "plump") {
8 | decl.value = "bold";
9 | } else if (decl.prop === "transparency") {
10 | decl.prop = "opacity";
11 |
12 | if (Number(decl.value) == decl.value && (parseFloat(decl.value) <= 1 && parseFloat(decl.value) >= 0)) {
13 | decl.value = (1 - parseFloat(decl.value)).toFixed((Number(decl.value) + "").replace(".", "").length - 1);
14 | }
15 | } else if (decl.prop === "text-transform" && decl.value === "capitalise") {
16 | decl.value = "capitalize";
17 | } else if (decl.prop === "storey") {
18 | decl.prop = "z-index";
19 |
20 | if (decl.value === "ground") {
21 | decl.value = "1";
22 | } else {
23 | decl.value = Number(decl.value) + 1 + "";
24 | }
25 | }
26 |
27 | if (decl.value.match(/!please$/)) {
28 | decl.value = decl.value.substring(0, decl.value.length - 7).trim();
29 | decl.important = true;
30 | }
31 |
32 | if (decl.prop !== "content") {
33 | decl.value = decl.value.split(" ").map(function(i) {
34 | if (i === "centre") {
35 | return "center";
36 | }
37 |
38 | if (i === "grey") {
39 | return "gray";
40 | }
41 |
42 | return i;
43 | }).join(" ");
44 | }
45 |
46 | decl.value = decl.value.replace(/(var\(--[^\)]*)colour([^\)]*\))/g, "$1color$2");
47 | });
48 |
49 | css.walkAtRules(function(rule) {
50 | if (rule.name === "medium") {
51 | rule.name = "media";
52 | }
53 | });
54 | }
55 | });
56 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "postcss-spiffing",
3 | "version": "0.1.0",
4 | "description": "PostCSS plugin to use British English",
5 | "main": "index.js",
6 | "keywords": [
7 | "spiffing",
8 | "british english",
9 | "spelling",
10 | "css",
11 | "postcss",
12 | "postcssplugin"
13 | ],
14 | "author": "Hashan Punchihewa (hashanp.divshot.io)",
15 | "license": "MIT",
16 | "dependencies": {
17 | "postcss": "^5.0.19"
18 | },
19 | "repository": {
20 | "type": "git",
21 | "url": "git@github.com:HashanP/postcss-spiffing.git"
22 | },
23 | "devDependencies": {
24 | "expect.js": "^0.3.1",
25 | "mocha": "^2.4.5",
26 | "postcss": "^5.0.19"
27 | },
28 | "scripts": {
29 | "test": "mocha"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/test/expected.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --color-green: #0f0;
3 | }
4 |
5 | body {
6 | background-color: gray !important;
7 | opacity: 0.7;
8 | color: var(--color-green);
9 | text-align: center;
10 | justify-content: center;
11 | align-items: center;
12 | align-content: center;
13 | align-self: center;
14 | background-position: top center;
15 | font-weight: bold;
16 | text-transform: capitalize;
17 | border: 1px solid gray;
18 | z-index: 1;
19 | }
20 |
21 | .frame {
22 | background-image: url("/queen.png") !important;
23 | z-index: 2;
24 | }
25 |
26 | .background-test {
27 | background: gray url("/grey.png") top center;
28 | z-index: -9;
29 | }
30 |
31 | li {
32 | list-style-image: url("photograph.jpg");
33 | }
34 |
35 | @media screen and (min-width: 300px) {
36 | .hello {
37 | content: "subjects";
38 | color: gray;
39 | }
40 |
41 | .hello::after {
42 | content: "centre";
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/test/source.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --colour-green: #0f0;
3 | }
4 |
5 | body {
6 | background-colour: grey !please;
7 | transparency: 0.3;
8 | colour: var(--colour-green);
9 | text-align: centre;
10 | justify-content: centre;
11 | align-items: centre;
12 | align-content: centre;
13 | align-self: centre;
14 | background-position: top centre;
15 | font-weight: plump;
16 | text-transform: capitalise;
17 | border: 1px solid grey;
18 | storey: ground;
19 | }
20 |
21 | .frame {
22 | background-photograph: url("/queen.png") !please;
23 | storey: 1;
24 | }
25 |
26 | .background-test {
27 | background: grey url("/grey.png") top centre;
28 | storey: -10;
29 | }
30 |
31 | li {
32 | list-style-photograph: url("photograph.jpg");
33 | }
34 |
35 | @medium screen and (min-width: 300px) {
36 | .hello {
37 | content: "subjects";
38 | color: grey;
39 | }
40 |
41 | .hello::after {
42 | content: "centre";
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/test/test.js:
--------------------------------------------------------------------------------
1 | var postcss = require("postcss")
2 | expect = require("expect.js"),
3 | fs = require("fs"),
4 | path = require("path"),
5 | plugin = require("../");
6 |
7 |
8 | describe("Main test", function() {
9 | it("should translate correctly", function() {
10 | var source = fs.readFileSync(path.join(__dirname, "source.css"), "utf-8"),
11 | expected = fs.readFileSync(path.join(__dirname, "expected.css"), "utf-8"),
12 | translated = postcss([ plugin() ]).process(source).css;
13 |
14 | expect(translated).to.eql(expected);
15 | });
16 | });
17 |
--------------------------------------------------------------------------------