├── .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 | --------------------------------------------------------------------------------