├── .editorconfig ├── .gitignore ├── .rollup.js ├── .tape.js ├── .travis.yml ├── CHANGELOG.md ├── INSTALL.md ├── LICENSE.md ├── README.md ├── index.js ├── package.json └── test ├── colours.css └── colours.expect.css /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | indent_style = tab 7 | insert_final_newline = true 8 | trim_trailing_whitespace = true 9 | 10 | [*.md] 11 | trim_trailing_whitespace = false 12 | 13 | [*.{json,md,yml}] 14 | indent_size = 2 15 | indent_style = space 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | index.*.* 3 | package-lock.json 4 | *.log* 5 | *.result.css 6 | .* 7 | !.editorconfig 8 | !.gitignore 9 | !.rollup.js 10 | !.tape.js 11 | !.travis.yml 12 | -------------------------------------------------------------------------------- /.rollup.js: -------------------------------------------------------------------------------- 1 | import babel from 'rollup-plugin-babel'; 2 | 3 | export default { 4 | input: 'index.js', 5 | output: [ 6 | { exports: 'default', file: 'index.cjs.js', format: 'cjs', sourcemap: true }, 7 | { exports: 'default', file: 'index.es.mjs', format: 'es', sourcemap: true } 8 | ], 9 | plugins: [ 10 | babel({ 11 | presets: [ 12 | ['@babel/env', { modules: false, targets: { node: 6 } }] 13 | ] 14 | }) 15 | ] 16 | }; 17 | -------------------------------------------------------------------------------- /.tape.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | 'colours': { 3 | message: 'Converts colour to color' 4 | } 5 | }; 6 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | # https://docs.travis-ci.com/user/travis-lint 2 | 3 | language: node_js 4 | 5 | node_js: 6 | - 6 7 | 8 | install: 9 | - npm install --ignore-scripts 10 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changes to PostCSS Colour 2 | 3 | ### 1.0.0 (September 19, 2019) 4 | 5 | - Added: Initial version 6 | -------------------------------------------------------------------------------- /INSTALL.md: -------------------------------------------------------------------------------- 1 | # Installing PostCSS Colour 2 | 3 | [PostCSS Colour] runs in all Node environments, with special instructions for: 4 | 5 | | [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | 6 | | --- | --- | --- | --- | --- | --- | 7 | 8 | ## Node 9 | 10 | Add [PostCSS Colour] to your project: 11 | 12 | ```bash 13 | npm install postcss postcss-colour --save-dev 14 | ``` 15 | 16 | Use [PostCSS Colour] to process your CSS: 17 | 18 | ```js 19 | const postcssColour = require('postcss-colour'); 20 | 21 | postcssColour.process(YOUR_CSS /*, processOptions, pluginOptions */); 22 | ``` 23 | 24 | Or use it as a [PostCSS] plugin: 25 | 26 | ```js 27 | const postcss = require('postcss'); 28 | const postcssColour = require('postcss-colour'); 29 | 30 | postcss([ 31 | postcssColour(/* pluginOptions */) 32 | ]).process(YOUR_CSS /*, processOptions */); 33 | ``` 34 | 35 | ## PostCSS CLI 36 | 37 | Add [PostCSS CLI] to your project: 38 | 39 | ```bash 40 | npm install postcss-cli --save-dev 41 | ``` 42 | 43 | Use [PostCSS Colour] in your `postcss.config.js` configuration file: 44 | 45 | ```js 46 | const postcssColour = require('postcss-colour'); 47 | 48 | module.exports = { 49 | plugins: [ 50 | postcssColour(/* pluginOptions */) 51 | ] 52 | } 53 | ``` 54 | 55 | ## Webpack 56 | 57 | Add [PostCSS Loader] to your project: 58 | 59 | ```bash 60 | npm install postcss-loader --save-dev 61 | ``` 62 | 63 | Use [PostCSS Colour] in your Webpack configuration: 64 | 65 | ```js 66 | const postcssColour = require('postcss-colour'); 67 | 68 | module.exports = { 69 | module: { 70 | rules: [ 71 | { 72 | test: /\.css$/, 73 | use: [ 74 | 'style-loader', 75 | { loader: 'css-loader', options: { importLoaders: 1 } }, 76 | { loader: 'postcss-loader', options: { 77 | ident: 'postcss', 78 | plugins: () => [ 79 | postcssColour(/* pluginOptions */) 80 | ] 81 | } } 82 | ] 83 | } 84 | ] 85 | } 86 | } 87 | ``` 88 | 89 | ## Create React App 90 | 91 | Add [React App Rewired] and [React App Rewire PostCSS] to your project: 92 | 93 | ```bash 94 | npm install react-app-rewired react-app-rewire-postcss --save-dev 95 | ``` 96 | 97 | Use [React App Rewire PostCSS] and [PostCSS Colour] in your 98 | `config-overrides.js` file: 99 | 100 | ```js 101 | const reactAppRewirePostcss = require('react-app-rewire-postcss'); 102 | const postcssColour = require('postcss-colour'); 103 | 104 | module.exports = config => reactAppRewirePostcss(config, { 105 | plugins: () => [ 106 | postcssColour(/* pluginOptions */) 107 | ] 108 | }); 109 | ``` 110 | 111 | ## Gulp 112 | 113 | Add [Gulp PostCSS] to your project: 114 | 115 | ```bash 116 | npm install gulp-postcss --save-dev 117 | ``` 118 | 119 | Use [PostCSS Colour] in your Gulpfile: 120 | 121 | ```js 122 | const postcss = require('gulp-postcss'); 123 | const postcssColour = require('postcss-colour'); 124 | 125 | gulp.task('css', () => gulp.src('./src/*.css').pipe( 126 | postcss([ 127 | postcssColour(/* pluginOptions */) 128 | ]) 129 | ).pipe( 130 | gulp.dest('.') 131 | )); 132 | ``` 133 | 134 | ## Grunt 135 | 136 | Add [Grunt PostCSS] to your project: 137 | 138 | ```bash 139 | npm install grunt-postcss --save-dev 140 | ``` 141 | 142 | Use [PostCSS Colour] in your Gruntfile: 143 | 144 | ```js 145 | const postcssColour = require('postcss-colour'); 146 | 147 | grunt.loadNpmTasks('grunt-postcss'); 148 | 149 | grunt.initConfig({ 150 | postcss: { 151 | options: { 152 | use: [ 153 | postcssColour(/* pluginOptions */) 154 | ] 155 | }, 156 | dist: { 157 | src: '*.css' 158 | } 159 | } 160 | }); 161 | ``` 162 | 163 | [Gulp PostCSS]: https://github.com/postcss/gulp-postcss 164 | [Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss 165 | [PostCSS]: https://github.com/postcss/postcss 166 | [PostCSS CLI]: https://github.com/postcss/postcss-cli 167 | [PostCSS Loader]: https://github.com/postcss/postcss-loader 168 | [PostCSS Colour]: https://github.com/rjdestigter/postcss-colour 169 | [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss 170 | [React App Rewired]: https://github.com/timarney/react-app-rewired 171 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # CC0 1.0 Universal 2 | 3 | ## Statement of Purpose 4 | 5 | The laws of most jurisdictions throughout the world automatically confer 6 | exclusive Copyright and Related Rights (defined below) upon the creator and 7 | subsequent owner(s) (each and all, an “owner”) of an original work of 8 | authorship and/or a database (each, a “Work”). 9 | 10 | Certain owners wish to permanently relinquish those rights to a Work for the 11 | purpose of contributing to a commons of creative, cultural and scientific works 12 | (“Commons”) that the public can reliably and without fear of later claims of 13 | infringement build upon, modify, incorporate in other works, reuse and 14 | redistribute as freely as possible in any form whatsoever and for any purposes, 15 | including without limitation commercial purposes. These owners may contribute 16 | to the Commons to promote the ideal of a free culture and the further 17 | production of creative, cultural and scientific works, or to gain reputation or 18 | greater distribution for their Work in part through the use and efforts of 19 | others. 20 | 21 | For these and/or other purposes and motivations, and without any expectation of 22 | additional consideration or compensation, the person associating CC0 with a 23 | Work (the “Affirmer”), to the extent that he or she is an owner of Copyright 24 | and Related Rights in the Work, voluntarily elects to apply CC0 to the Work and 25 | publicly distribute the Work under its terms, with knowledge of his or her 26 | Copyright and Related Rights in the Work and the meaning and intended legal 27 | effect of CC0 on those rights. 28 | 29 | 1. Copyright and Related Rights. A Work made available under CC0 may be 30 | protected by copyright and related or neighboring rights (“Copyright and 31 | Related Rights”). Copyright and Related Rights include, but are not limited 32 | to, the following: 33 | 1. the right to reproduce, adapt, distribute, perform, display, communicate, 34 | and translate a Work; 35 | 2. moral rights retained by the original author(s) and/or performer(s); 36 | 3. publicity and privacy rights pertaining to a person’s image or likeness 37 | depicted in a Work; 38 | 4. rights protecting against unfair competition in regards to a Work, 39 | subject to the limitations in paragraph 4(i), below; 40 | 5. rights protecting the extraction, dissemination, use and reuse of data in 41 | a Work; 42 | 6. database rights (such as those arising under Directive 96/9/EC of the 43 | European Parliament and of the Council of 11 March 1996 on the legal 44 | protection of databases, and under any national implementation thereof, 45 | including any amended or successor version of such directive); and 46 | 7. other similar, equivalent or corresponding rights throughout the world 47 | based on applicable law or treaty, and any national implementations 48 | thereof. 49 | 50 | 2. Waiver. To the greatest extent permitted by, but not in contravention of, 51 | applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and 52 | unconditionally waives, abandons, and surrenders all of Affirmer’s Copyright 53 | and Related Rights and associated claims and causes of action, whether now 54 | known or unknown (including existing as well as future claims and causes of 55 | action), in the Work (i) in all territories worldwide, (ii) for the maximum 56 | duration provided by applicable law or treaty (including future time 57 | extensions), (iii) in any current or future medium and for any number of 58 | copies, and (iv) for any purpose whatsoever, including without limitation 59 | commercial, advertising or promotional purposes (the “Waiver”). Affirmer 60 | makes the Waiver for the benefit of each member of the public at large and 61 | to the detriment of Affirmer’s heirs and successors, fully intending that 62 | such Waiver shall not be subject to revocation, rescission, cancellation, 63 | termination, or any other legal or equitable action to disrupt the quiet 64 | enjoyment of the Work by the public as contemplated by Affirmer’s express 65 | Statement of Purpose. 66 | 67 | 3. Public License Fallback. Should any part of the Waiver for any reason be 68 | judged legally invalid or ineffective under applicable law, then the Waiver 69 | shall be preserved to the maximum extent permitted taking into account 70 | Affirmer’s express Statement of Purpose. In addition, to the extent the 71 | Waiver is so judged Affirmer hereby grants to each affected person a 72 | royalty-free, non transferable, non sublicensable, non exclusive, 73 | irrevocable and unconditional license to exercise Affirmer’s Copyright and 74 | Related Rights in the Work (i) in all territories worldwide, (ii) for the 75 | maximum duration provided by applicable law or treaty (including future time 76 | extensions), (iii) in any current or future medium and for any number of 77 | copies, and (iv) for any purpose whatsoever, including without limitation 78 | commercial, advertising or promotional purposes (the “License”). The License 79 | shall be deemed effective as of the date CC0 was applied by Affirmer to the 80 | Work. Should any part of the License for any reason be judged legally 81 | invalid or ineffective under applicable law, such partial invalidity or 82 | ineffectiveness shall not invalidate the remainder of the License, and in 83 | such case Affirmer hereby affirms that he or she will not (i) exercise any 84 | of his or her remaining Copyright and Related Rights in the Work or (ii) 85 | assert any associated claims and causes of action with respect to the Work, 86 | in either case contrary to Affirmer’s express Statement of Purpose. 87 | 88 | 4. Limitations and Disclaimers. 89 | 1. No trademark or patent rights held by Affirmer are waived, abandoned, 90 | surrendered, licensed or otherwise affected by this document. 91 | 2. Affirmer offers the Work as-is and makes no representations or warranties 92 | of any kind concerning the Work, express, implied, statutory or 93 | otherwise, including without limitation warranties of title, 94 | merchantability, fitness for a particular purpose, non infringement, or 95 | the absence of latent or other defects, accuracy, or the present or 96 | absence of errors, whether or not discoverable, all to the greatest 97 | extent permissible under applicable law. 98 | 3. Affirmer disclaims responsibility for clearing rights of other persons 99 | that may apply to the Work or any use thereof, including without 100 | limitation any person’s Copyright and Related Rights in the Work. 101 | Further, Affirmer disclaims responsibility for obtaining any necessary 102 | consents, permissions or other rights required for any use of the Work. 103 | 4. Affirmer understands and acknowledges that Creative Commons is not a 104 | party to this document and has no duty or obligation with respect to this 105 | CC0 or use of the Work. 106 | 107 | For more information, please see 108 | http://creativecommons.org/publicdomain/zero/1.0/. 109 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # PostCSS Colour [PostCSS][postcss] 2 | 3 | [PostCSS Colour] lets you use define colours in css the way her majesty Queen Elizabeth II intended it. 4 | 5 | Build and test architecture cloned from [postcss-short-size] 6 | 7 | ```pcss 8 | body { 9 | colour: Blue; 10 | background-colour: #fff; 11 | border-colour: rgb(25, 0, 0); 12 | } 13 | 14 | /* becomes */ 15 | 16 | body { 17 | color: Blue; 18 | background-color: #fff; 19 | border-color: rgb(25, 0, 0); 20 | } 21 | ``` 22 | 23 | ## Usage 24 | 25 | Add [PostCSS Colour] to your project: 26 | 27 | ```bash 28 | npm install postcss postcss-colour --save-dev 29 | ``` 30 | 31 | Use [PostCSS Colour] to process your CSS: 32 | 33 | ```js 34 | const postcssColour = require('postcss-colour'); 35 | 36 | postcssColour.process(YOUR_CSS /*, processOptions, pluginOptions */); 37 | ``` 38 | 39 | Or use it as a [PostCSS] plugin: 40 | 41 | ```js 42 | const postcss = require('postcss'); 43 | const postcssColour = require('postcss-colour'); 44 | 45 | postcss([ 46 | postcssColour(/* pluginOptions */) 47 | ]).process(YOUR_CSS /*, processOptions */); 48 | ``` 49 | 50 | [PostCSS Colour] runs in all Node environments, with special instructions for: 51 | 52 | | [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) | 53 | | --- | --- | --- | --- | --- | --- | 54 | 55 | [PostCSS]: https://github.com/postcss/postcss 56 | [PostCSS Colour]: https://github.com/rjdestigter/postcss-colour 57 | [postcss-short-size]: https://github.com/jonathantneal/postcss-short-size -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import postcss from "postcss"; 2 | 3 | const rx = /^((?:.*)-)?colour$/i; 4 | 5 | const postCssColour = () => { 6 | return { 7 | postcssPlugin: "postcss-colour", 8 | Root(root) { 9 | // for each colour declaration 10 | root.walkDecls(rx, (decl) => { 11 | const prefix = decl.prop.match(rx)[1] || ""; 12 | const values = postcss.list.space(decl.value); 13 | 14 | decl.cloneBefore({ 15 | prop: `${prefix}color`, 16 | value: values[0], 17 | }); 18 | 19 | // remove the original size declaration 20 | decl.remove(); 21 | }); 22 | }, 23 | }; 24 | }; 25 | 26 | Object.defineProperty(postCssColour, 'postcss', { value: true }); 27 | 28 | export default postCssColour; 29 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "postcss-colour", 3 | "version": "1.0.0", 4 | "description": " Define colours in css the way her majesty Queen Elizabeth II intended it.", 5 | "author": "John de Stigter ", 6 | "contributors": [ 7 | "Jonathan Neal " 8 | ], 9 | "license": "CC0-1.0", 10 | "repository": "rjdestigter/postcss-colour", 11 | "homepage": "https://github.com/rjdestigter/postcss-colour#readme", 12 | "bugs": "https://github.com/rjdestigter/postcss-colour/issues", 13 | "main": "index.cjs.js", 14 | "module": "index.es.mjs", 15 | "files": [ 16 | "index.cjs.js", 17 | "index.cjs.js.map", 18 | "index.es.mjs", 19 | "index.es.mjs.map" 20 | ], 21 | "scripts": { 22 | "prepublishOnly": "npm test", 23 | "pretest": "rollup -c .rollup.js", 24 | "test": "echo 'Running tests...'; npm run test:js && npm run test:tape", 25 | "test:js": "eslint *.js --cache --ignore-path .gitignore --quiet", 26 | "test:tape": "postcss-tape" 27 | }, 28 | "engines": { 29 | "node": ">=6.0.0" 30 | }, 31 | "devDependencies": { 32 | "@babel/core": "^7.1.2", 33 | "@babel/plugin-syntax-dynamic-import": "^7.0.0", 34 | "@babel/preset-env": "^7.1.0", 35 | "babel-eslint": "^10.0.1", 36 | "eslint": "^7.9.0", 37 | "eslint-config-dev": "^2.0.0", 38 | "postcss": "^8.0.5", 39 | "postcss-tape": "^6.0.0", 40 | "pre-commit": "^1.2.2", 41 | "rollup": "^2.27.1", 42 | "rollup-plugin-babel": "^4.0.3" 43 | }, 44 | "eslintConfig": { 45 | "extends": "dev", 46 | "parser": "babel-eslint" 47 | }, 48 | "keywords": [ 49 | "postcss", 50 | "css", 51 | "postcss-plugin", 52 | "colour" 53 | ] 54 | } 55 | -------------------------------------------------------------------------------- /test/colours.css: -------------------------------------------------------------------------------- 1 | a { 2 | colour: Red; 3 | background-colour: Red; 4 | border-colour: Red; 5 | border-top-colour: Red; 6 | } 7 | 8 | b { 9 | colour: rgba(0, 0, 0, 0.5); 10 | background-colour: rgba(0, 0, 0, 0.5); 11 | border-colour: rgba(0, 0, 0, 0.5); 12 | border-top-colour: rgba(0, 0, 0, 0.5); 13 | } 14 | 15 | c { 16 | colour: BLUE; 17 | background-colour: BLUE; 18 | border-colour: BLUE; 19 | border-top-colour: BLUE; 20 | } 21 | 22 | d { 23 | colour:#CCC; 24 | background-colour:#CCC; 25 | border-colour:#CCC; 26 | border-top-colour:#CCC; 27 | } 28 | -------------------------------------------------------------------------------- /test/colours.expect.css: -------------------------------------------------------------------------------- 1 | a { 2 | color: Red; 3 | background-color: Red; 4 | border-color: Red; 5 | border-top-color: Red; 6 | } 7 | 8 | b { 9 | color: rgba(0, 0, 0, 0.5); 10 | background-color: rgba(0, 0, 0, 0.5); 11 | border-color: rgba(0, 0, 0, 0.5); 12 | border-top-color: rgba(0, 0, 0, 0.5); 13 | } 14 | 15 | c { 16 | color: BLUE; 17 | background-color: BLUE; 18 | border-color: BLUE; 19 | border-top-color: BLUE; 20 | } 21 | 22 | d { 23 | color:#CCC; 24 | background-color:#CCC; 25 | border-color:#CCC; 26 | border-top-color:#CCC; 27 | } 28 | --------------------------------------------------------------------------------