├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── demo
    ├── all-properties-example.css
    ├── all-properties-example.js
    ├── index-file.js
    ├── index.css
    ├── index.html
    └── index.js
├── package.json
├── papv-configuration.js
├── postcss-alter-property-value.js
├── postcss.config.js
├── test
    ├── fixtures
    │   ├── change-all-values-when-value-equals.css
    │   ├── change-all-values-when-value-equals.out.css
    │   ├── change-value-when-value-equals.css
    │   └── change-value-when-value-equals.out.css
    └── test.js
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | 
 6 | # Runtime data
 7 | pids
 8 | *.pid
 9 | *.seed
10 | 
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 | 
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 | 
17 | # nyc test coverage
18 | .nyc_output
19 | 
20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
21 | .grunt
22 | 
23 | # node-waf configuration
24 | .lock-wscript
25 | 
26 | # Compiled binary addons (http://nodejs.org/api/addons.html)
27 | build/Release
28 | 
29 | # Dependency directories
30 | node_modules
31 | jspm_packages
32 | 
33 | # Optional npm cache directory
34 | .npm
35 | 
36 | # Optional REPL history
37 | .node_repl_history
38 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | ## Changelog
 2 | 
 3 | ### 1.1.3
 4 | 
 5 | * Add keywords to package.json
 6 | * Add unit tests
 7 | 
 8 | ### 1.1.2
 9 | 
10 | * Refactor config files to make webpack hot reloading work on config editing
11 | 
12 | ### 1.1.1
13 | 
14 | * Minor documentation updates and code commenting
15 | 
16 | ### 1.1.0
17 | 
18 | * Support list of tasks per property name
19 | * Add * property syntax in the configuration
20 | 
21 | ### 1.0.6
22 | 
23 | * Add file.js example
24 | 
25 | ### 1.0.5
26 | 
27 | * Ability to replace part of a css short hand value 
28 | 
29 | ### 1.0.4
30 | 
31 | * Update description
32 | 
33 | ### 1.0.3
34 | 
35 | * Update readme
36 | 
37 | ### 1.0.2
38 | 
39 | * Fix typo in Readme
40 | 
41 | ### 1.0.1
42 | 
43 | * Add clone to options
44 | 
45 | ### 1.0.0
46 | 
47 | * No changes, first version
48 | 
49 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Kunuk Nykjær
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # postcss alter property value
  2 | Alter your CSS declarations.
  3 | 
  4 | # about
  5 | A tool for changing CSS declarations from a rule based configuration.
  6 | 
  7 | * Change property names
  8 | * Change values
  9 | * Clone a declaration with a new property name
 10 | 
 11 | Usage examples. 
 12 | * Simulate flexbox not working by removing `display: flex`
 13 | * Remove all `outline` usage
 14 | * Correct declaration `mouse: pointer` to `cursor: pointer`
 15 | * Simplify `background: #ddd` to `background-color: #ddd` if the value is a hex color
 16 | * For all properties, change value from `16px` to `1rem`
 17 | 
 18 | # npm
 19 | https://www.npmjs.com/package/postcss-alter-property-value
 20 | 
 21 | 
 22 | # configuration example
 23 | Check **postcss.config.js** for inspiration.
 24 | 
 25 | ```javascript
 26 | {
 27 |   /* optional */
 28 |   config: {
 29 |     /* add debug info */
 30 |     addInfo: true,
 31 |   },
 32 | 
 33 |   /* required */
 34 |   declarations: {      
 35 |     '*': {
 36 |       /* The *-property will evaluate all properties 
 37 |         The tasks for *-property is always executed first.
 38 |         This is a relative expensive task, I recommend to only use this if you must.
 39 |         */
 40 |       task: 'changeValue',
 41 |       to: 'translateY(2px)',
 42 |       whenValueEquals: 'translateY(10px)'
 43 |     },
 44 |     /* set all font-families to this value */
 45 |     'font-family': 'sans-serif',                  
 46 |     'mouse': {
 47 |       /* replace all mouse properties with cursor */
 48 |       task: 'changeProperty',
 49 |       to: 'cursor'
 50 |     },
 51 |     'transform': {
 52 |       /* clone a declaration and add before this declaration */
 53 |       task: 'cloneBefore',
 54 |       to: '-webkit-transform'
 55 |     },
 56 |     'display': {
 57 |       /* conditional change value */
 58 |       task: 'changeValue',
 59 |       to: 'flex',
 60 |       whenValueEquals: 'inline-flex'
 61 |     },
 62 |     'outline': {
 63 |       /* remove all outlines */
 64 |       task: 'remove'
 65 |     },
 66 |     'color': {
 67 |       /* replace all color names ending with blue */
 68 |       task: 'changeValue',
 69 |       to: 'orange',
 70 |       whenRegex: {
 71 |         value: 'blue$',
 72 |         flags: 'i' // ignore case sensitivity
 73 |       }
 74 |     },
 75 |     'font-size': {
 76 |       /* change to 2rem when value is a rem unit */
 77 |       task: 'changeValue',
 78 |       to: '2rem',
 79 |       whenRegex: {
 80 |         value: 'rem',
 81 |         flags: 'i'
 82 |       }
 83 |     },
 84 |     'border': [
 85 |       /* list of tasks for border property */
 86 |       {
 87 |         /* change border: 1px solid black
 88 |                 to border: 1px solid #000 */
 89 |         task: 'changeValue',
 90 |         to: '#000',
 91 |         whenRegex: {
 92 |           mode: 'partial',
 93 |           value: 'black',
 94 |           flags: 'i'
 95 |         },
 96 |       }, {
 97 |         /* change border: 1px solid #000
 98 |                 to border: 2px solid #000 */
 99 |         task: 'changeValue',
100 |         to: '2px',
101 |         whenRegex: {
102 |           mode: 'partial',
103 |           value: '1px',
104 |           flags: 'i'
105 |         }
106 |       }
107 |     ],
108 |     'background': {
109 |       /* simplify background to background-color 
110 |       if value is a hex */
111 |       task: 'changeProperty',
112 |       to: 'background-color',
113 |       whenRegex: {
114 |         value: '^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$',
115 |         flags: 'i'
116 |       }
117 |     }
118 |   } // end declarations
119 | }
120 | ```
121 | 
122 | A CSS file with these rules
123 | 
124 | ```css
125 | body {
126 |     font-family: Helvetica;
127 |     background: #FFD700;
128 |     mouse: pointer;
129 |     max-width: 900px;
130 |     margin: 0 auto;
131 |     color: LightbluE;
132 | }
133 | 
134 | p {    
135 |     font-size: 1rem;
136 |     font-family: Arial;
137 |     background: #fff;
138 |     padding: 1rem;    
139 |     color: dodgerblue;    
140 |     outline: 2px dashed red;
141 |     border: 1px solid black;
142 |     display: inline-flex;
143 |     transform: translateY(10px);    
144 | }
145 | ```
146 | 
147 | Is modified to
148 | ```css
149 | body {
150 |     font-family: sans-serif /* papv - changeValue from [Helvetica] */;
151 |     background-color: #FFD700 /* papv - changeProp from [background] */;
152 |     cursor: pointer /* papv - changeProp from [mouse] */;
153 |     max-width: 900px;
154 |     margin: 0 auto;
155 |     color: orange /* papv - changeValue from [LightbluE] */;
156 | }
157 | 
158 | p {    
159 |     font-size: 2rem /* papv - changeValue from [1rem] */;
160 |     font-family: sans-serif /* papv - changeValue from [Arial] */;
161 |     background-color: #fff /* papv - changeProp from [background] */;
162 |     padding: 1rem;
163 |     color: orange /* papv - changeValue from [dodgerblue] */;
164 |     border: 2px solid #000 /* --papv - changeValue from [1px solid black] */;
165 |     display: flex /* papv - changeValue from [inline-flex] */;
166 |     -webkit-transform: translateY(2px) /* papv - changeValue from [translateY(10px)] */;
167 |     transform: translateY(2px) /* papv - changeValue from [translateY(10px)] */;
168 | }
169 | ```
170 | 
171 | 
172 | 
173 | # development
174 | * Git clone the project or download it
175 | * npm install
176 | * npm start
177 | * Open a browser and go to http://localhost:3456/
178 | * Insert your styles in demo/index.css
179 | * Open and make changes to the configuration in postcss.config.js
180 | * Open dev tools in browser and inspect the elements
181 | 
182 | # command line usage example
183 | 
184 | `css-changes.js`
185 | 
186 | ```javascript
187 | const fs = require('fs');
188 | const postcss = require('postcss');
189 | const plugin = require('postcss-alter-property-value');
190 | const configuration = {
191 |     /* your configuration */
192 |     declarations: {
193 |         'background-color': {
194 |                 task: 'changeValue',
195 |                 to: '#fff',
196 |                 whenValueEquals: 'white'
197 |             }
198 |     }
199 | };
200 | fs.readFile('my.css', (err, css) => {
201 |     postcss([plugin(configuration)])
202 |         .process(css, { from: 'my.css', to: 'my-new.css' })
203 |         .then(result => {
204 |             fs.writeFile('my-new.css', result.css);
205 |         });
206 | });
207 | ```
208 | 
209 | Run in console/terminal 
210 | where `my-new.css` is generated from `my.css` and given configuration.
211 | 
212 | `node css-changes.js`
213 | 
214 | 


--------------------------------------------------------------------------------
/demo/all-properties-example.css:
--------------------------------------------------------------------------------
 1 | body {    
 2 |     background: white;
 3 |     font-size: 10px;
 4 | }
 5 | 
 6 | .box{
 7 |     color: white;
 8 |     padding: 10px;
 9 | }
10 | 
11 | p {    
12 |     background-color: white;
13 |     margin: 10px;
14 | }


--------------------------------------------------------------------------------
/demo/all-properties-example.js:
--------------------------------------------------------------------------------
 1 | /* run in console/terminal:
 2 |    node all-properties-example.js
 3 | */
 4 | 
 5 | const fs = require('fs');
 6 | const postcss = require('postcss');
 7 | 
 8 | const plugin = require('../postcss-alter-property-value');
 9 | const configuration = {
10 |     declarations: {
11 |         '*': [
12 |             {
13 |                 task: 'changeValue',
14 |                 to: '#fff',
15 |                 whenValueEquals: 'white'
16 |             },
17 |             {
18 |                 task: 'changeValue',
19 |                 to: '12px',
20 |                 whenValueEquals: '10px'
21 |             }
22 |         ]
23 |     }
24 | };
25 | 
26 | fs.readFile('all-properties-example.css', (err, css) => {
27 |     postcss([plugin(configuration)])
28 |         .process(css, { from: 'all-properties-example.css', to: 'all-properties-example.out.css' })
29 |         .then(result => {
30 |             //console.log(result.css);
31 |             fs.writeFile('all-properties-example.out.css', result.css);
32 |         });
33 | });


--------------------------------------------------------------------------------
/demo/index-file.js:
--------------------------------------------------------------------------------
 1 | const fs = require('fs');
 2 | const postcss = require('postcss');
 3 | const plugin = require('../postcss-alter-property-value');
 4 | const configuration = require( '../papv-configuration');
 5 | 
 6 | fs.readFile('index.css', (err, css) => {
 7 |     postcss([plugin(configuration)])
 8 |         .process(css, { from: 'index.css', to: 'index.out.css' })
 9 |         .then(result => {
10 |             fs.writeFile('index.out.css', result.css);
11 |             if ( result.map ) fs.writeFile('index.out.css.map', result.map);
12 |         });
13 | });


--------------------------------------------------------------------------------
/demo/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Helvetica;
 3 |     background: #FFD700;
 4 |     mouse: pointer;
 5 |     max-width: 900px;
 6 |     margin: 0 auto;
 7 |     color: LightbluE;
 8 | }
 9 | 
10 | p {    
11 |     font-size: 1rem;
12 |     font-family: Arial;
13 |     background: #fff;
14 |     padding: 1rem;    
15 |     color: dodgerblue;    
16 |     outline: 2px dashed red;
17 |     border: 1px solid black;
18 |     display: inline-flex;
19 |     transform: translateY(10px);    
20 | }


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8" />
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>postcss-alter-property-value demo</title>
 9 | </head>
10 | 
11 | <body>    
12 |     <p>
13 |         This is a demo of postcss-alter-property-value plugin. <br>
14 |     </p>
15 |     <p>
16 |         Open dev tools in browser and see the css changes for these html elements.
17 |     </p>
18 |     <p>
19 |         Open postcss.config.js to examine the modification rules.
20 |     </p>
21 | </body>
22 | 
23 | </html>


--------------------------------------------------------------------------------
/demo/index.js:
--------------------------------------------------------------------------------
1 | import styles from './index.css';
2 | 
3 | //import papvConfiguration from '../papv-configuration';
4 | //import papv from '../postcss-alter-property-value';
5 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "postcss-alter-property-value",
 3 |   "version": "1.1.3",
 4 |   "description": "",
 5 |   "main": "postcss-alter-property-value.js",
 6 |   "scripts": {
 7 |     "start": "npm run dev",
 8 |     "test": "mocha test/test.js",
 9 |     "nodemon": "nodemon --watch webpack.config.js ./node_modules/.bin/webpack-dev-server",
10 |     "dev": "webpack-dev-server --config webpack.config.js",
11 |     "prod": "webpack-dev-server --env.production",
12 |     "index-file": "cd demo && node index-file.js"
13 |   },
14 |   "repository": {
15 |     "type": "git",
16 |     "url": "git+https://github.com/kunukn/postcss-alter-property-value.git"
17 |   },
18 |   "keywords": [
19 |     "postcss-plugin",
20 |     "postcss",
21 |     "css"
22 |   ],
23 |   "author": "",
24 |   "license": "ISC",
25 |   "bugs": {
26 |     "url": "https://github.com/kunukn/postcss-alter-property-value/issues"
27 |   },
28 |   "homepage": "https://github.com/kunukn/postcss-alter-property-value#readme",
29 |   "devDependencies": {
30 |     "chai": "^3.5.0",
31 |     "css-loader": "^0.26.1",
32 |     "html-webpack-plugin": "^2.28.0",
33 |     "mocha": "^3.2.0",
34 |     "nodemon": "^1.11.0",
35 |     "postcss": "^5.2.15",
36 |     "postcss-loader": "^1.3.1",
37 |     "style-loader": "^0.13.1",
38 |     "webpack": "^2.2.1",
39 |     "webpack-dev-server": "^2.4.1"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/papv-configuration.js:
--------------------------------------------------------------------------------
 1 | module.exports =
 2 | {
 3 |   /* optional */
 4 |   config: {
 5 |     /* add debug info */
 6 |     addInfo: true,
 7 |   },
 8 | 
 9 |   /* required */
10 |   declarations: {      
11 |     '*': {
12 |     /* The *-property will evaluate all properties 
13 |         The tasks for *-property is always executed first.
14 |         This is a relative expensive task, I recommend to only use this if you must.
15 |     */
16 |       task: 'changeValue',
17 |       to: 'translateY(2px)',
18 |       whenValueEquals: 'translateY(10px)'
19 |     },
20 |     /* set all font-families to this value */
21 |     'font-family': 'sans-serif',                  
22 |     'mouse': {
23 |       /* replace all mouse properties with cursor */
24 |       task: 'changeProperty',
25 |       to: 'cursor'
26 |     },
27 |     'transform': {
28 |       /* clone a declaration and add before this declaration */
29 |       task: 'cloneBefore',
30 |       to: '-webkit-transform'
31 |     },
32 |     'display': {
33 |       /* conditional change value */
34 |       task: 'changeValue',
35 |       to: 'flex',
36 |       whenValueEquals: 'inline-flex'
37 |     },
38 |     'outline': {
39 |       /* remove all outlines */
40 |       task: 'remove'
41 |     },
42 |     'color': {
43 |       /* replace all color names ending with blue */
44 |       task: 'changeValue',
45 |       to: 'orange',
46 |       whenRegex: {
47 |         value: 'blue$',
48 |         flags: 'i' // ignore case sensitivity
49 |       }
50 |     },
51 |     'font-size': {
52 |       /* change to 2rem when value is a rem unit */
53 |       task: 'changeValue',
54 |       to: '2rem',
55 |       whenRegex: {
56 |         value: 'rem',
57 |         flags: 'i'
58 |       }
59 |     },
60 |     'border': [
61 |       /* list of task for border property */
62 |       {
63 |         /* change border: 1px solid black
64 |                 to border: 1px solid #000 */
65 |         task: 'changeValue',
66 |         to: '#000',
67 |         whenRegex: {
68 |           mode: 'partial',
69 |           value: 'black',
70 |           flags: 'i'
71 |         },
72 |       }, {
73 |         /* change border: 1px solid #000
74 |                 to border: 2px solid #000 */
75 |         task: 'changeValue',
76 |         to: '2px',
77 |         whenRegex: {
78 |           mode: 'partial',
79 |           value: '1px',
80 |           flags: 'i'
81 |         }
82 |       }
83 |     ],
84 |     'background': {
85 |       /* simplify background to background-color 
86 |       if value is a hex */
87 |       task: 'changeProperty',
88 |       to: 'background-color',
89 |       whenRegex: {
90 |         value: '^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$',
91 |         flags: 'i'
92 |       }
93 |     }
94 |   } // end declarations
95 | }
96 | 


--------------------------------------------------------------------------------
/postcss-alter-property-value.js:
--------------------------------------------------------------------------------
  1 | /* postcss alter property value (papv) */
  2 | /* ES5 code */
  3 | 
  4 | var postcss = require('postcss');
  5 | 
  6 | module.exports = postcss.plugin('postcss-alter-property-value', function (options) {
  7 |   var options = options || {},
  8 |     declarations = options.declarations || {},
  9 |     config = options.config || {};
 10 | 
 11 |   return function (root, result) {
 12 |     var props = Object.keys(declarations);
 13 | 
 14 |     props.map(function (prop, index) {
 15 |       if (prop === '*') {
 16 |         root.walkDecls(function (decl) {          
 17 |           declarationParser({ value: declarations[prop], decl: decl });
 18 |         });
 19 |       }
 20 |       else{
 21 |         root.walkDecls(prop, function (decl) {          
 22 |           declarationParser({ value: declarations[prop], decl: decl });
 23 |         });
 24 |       }
 25 |     });
 26 |   };
 27 | 
 28 |   /* Helper utils */
 29 | 
 30 |   function declarationParser(data) {
 31 |     if (Array.isArray(data.value)) {
 32 |       var valueArray = data.value;
 33 |       valueArray.map(function (value, index) {
 34 |         data.value = value;
 35 |         declarationParserHelper(data);
 36 |       });
 37 |     }
 38 |     else {
 39 |       declarationParserHelper(data);
 40 |     }
 41 |   }
 42 | 
 43 |   function declarationParserHelper(data) {
 44 |     var value = data.value,
 45 |         decl = data.decl,
 46 |         copyProp = decl.prop + '',
 47 |         copyVal = decl.value + '';
 48 | 
 49 |     if (typeof value === 'string') {
 50 |       decl.value = value;
 51 |       addInfoToValue(decl, ' /* papv - changeValue from [' + copyVal + '] */');
 52 |     } else if (typeof value === 'object' || value === undefined) {
 53 | 
 54 |       if (!value) {
 55 |         decl.prop = prop + '__papv__disable';
 56 |       } else if (!value.task) {
 57 |         // no task to do if not set, then don't do anything.
 58 |       } else {
 59 | 
 60 |         if (value.whenRegex && typeof value.whenRegex === 'object') {
 61 |           regexParser({ value: value, decl: decl });
 62 |         } else {
 63 | 
 64 |           switch (value.task) {
 65 |             case 'remove':
 66 |               if (hasNoFields(value)) {
 67 |                 decl.remove();
 68 |               } else if (value.whenValueEquals !== undefined && value.whenValueEquals === decl.value) {
 69 |                 decl.remove();
 70 |               }
 71 |               break;
 72 |             case 'cloneBefore':
 73 |               var node = decl.cloneBefore({ prop: value.to });
 74 |               break;
 75 |             case 'cloneAfter':
 76 |               var node = decl.cloneAfter({ prop: value.to });
 77 |               break;
 78 |             case 'disable':
 79 |               if (hasNoFields(value)) {
 80 |                 decl.prop = prop + '__papv_disable';
 81 |               } else if (value.whenValueEquals !== undefined && value.whenValueEquals === decl.value) {
 82 |                 decl.prop = prop + '__papv_disable';
 83 |               }
 84 |               break;
 85 |             case 'changeProperty':
 86 |               if (hasNoFields(value)) {
 87 |                 decl.prop = value.to;
 88 |                 addInfoToValue(decl, ' /* papv - changeProp from [' + copyProp + '] */');
 89 |               } else if (value.whenValueEquals !== undefined && value.whenValueEquals === decl.value) {
 90 |                 decl.prop = value.to;
 91 |                 addInfoToValue(decl, ' /* papv - changeProp from [' + copyProp + '] */');
 92 |               }
 93 |               break;
 94 |             case 'changeValue':
 95 |               if (hasNoFields(value)) {
 96 |                 decl.value = value.to;
 97 |                 addInfoToValue(decl, ' /* papv - changeValue from [' + copyVal + '] */');
 98 |               } else if (value.whenValueEquals !== undefined && value.whenValueEquals === decl.value) {
 99 |                 decl.value = value.to;
100 |                 addInfoToValue(decl, ' /* papv - changeValue from [' + copyVal + '] */');
101 |               }
102 |               break;
103 | 
104 |             default:
105 |               result.warn('unknown task: [' + value.task + ']');
106 |               break;
107 |           }
108 |         }
109 |       }
110 |     }
111 |   }
112 | 
113 | 
114 |   function regexParser(data) {
115 |     var value = data.value,
116 |       decl = data.decl,
117 |       whenRegex = value.whenRegex;
118 | 
119 |     if (whenRegex.value === undefined) {
120 |       return; // nothing to do when value is not set
121 |     }
122 | 
123 |     var copyProp = decl.prop + '',
124 |         copyVal = decl.value + '',
125 |         task = value.task;
126 | 
127 |     var regex = new RegExp(whenRegex.value, whenRegex.flags || '');
128 | 
129 |     switch (task) {
130 |       case 'disable':
131 |         if (regex.test(decl.value))
132 |           decl.prop = prop + '__papv_disable';
133 |         break;
134 |       case 'remove':
135 |         if (regex.test(decl.value))
136 |           decl.remove();
137 |         break;
138 |       case 'changeProperty':
139 |         if (regex.test(decl.value)) {
140 |           decl.prop = value.to;
141 |           addInfoToValue(decl, ' /* papv - changeProp from [' + copyProp + '] */');
142 |         }
143 |         break;
144 |       case 'changeValue':
145 |         switch (whenRegex.mode) {
146 |           case 'partial':
147 |             decl.value = decl
148 |               .value
149 |               .replace(regex, value.to);
150 |             addInfoToValue(decl, ' /* papv - changeValue from [' + copyVal + '] */');
151 |             break;
152 |           case 'replace':
153 |           default:
154 |             if (regex.test(decl.value)) {
155 |               decl.value = value.to;
156 |               addInfoToValue(decl, ' /* papv - changeValue from [' + copyVal + '] */');
157 |             }
158 |             break;
159 |         }
160 |         break;
161 |     }
162 |   }
163 | 
164 |   function hasNoFields(value) {
165 |     return value.whenValueEquals === undefined && value.whenRegex === undefined;
166 |   }
167 | 
168 |   function addInfoToValue(decl, str) {
169 |     if (config.addInfo && !containsString(decl.value, '/*')) {
170 |       decl.value += str;
171 |     }
172 |   }
173 | 
174 |   function containsString(str, substr){
175 |     return str && ~str.indexOf(substr)
176 |   }
177 | 
178 | });
179 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
  1 | /* 
  2 |     webpack watches this file, 
  3 |     edit and webpack hot reload the changes 
  4 | */ 
  5 | module.exports = (ctx) => {
  6 |     return {
  7 |         plugins: [require('./postcss-alter-property-value')(
  8 |             {
  9 |                 /* optional */
 10 |                 config: {
 11 |                     /* add debug info */
 12 |                     addInfo: true,
 13 |                 },
 14 |                 /* required */
 15 |                 declarations: {
 16 |                     '*': {
 17 |                         /* The *-property will evaluate all properties 
 18 |                            The tasks for *-property is always executed first.
 19 |                            This is a relative expensive task, I recommend to only use this if you must.
 20 |                         */
 21 |                         task: 'changeValue',
 22 |                         to: 'translateY(2px)',
 23 |                         whenValueEquals: 'translateY(10px)'
 24 |                     },
 25 |                     /* set all font-families to this value */
 26 |                     'font-family': 'sans-serif',
 27 |                     'mouse': {
 28 |                         /* replace all mouse properties with cursor */
 29 |                         task: 'changeProperty',
 30 |                         to: 'cursor'
 31 |                     },
 32 |                     'transform': {
 33 |                         /* clone a declaration and add before this declaration */
 34 |                         task: 'cloneBefore',
 35 |                         to: '-webkit-transform'
 36 |                     },
 37 |                     'display': {
 38 |                         /* conditional change value */
 39 |                         task: 'changeValue',
 40 |                         to: 'flex',
 41 |                         whenValueEquals: 'inline-flex'
 42 |                     },
 43 |                     'outline': {
 44 |                         /* remove all outlines */
 45 |                         task: 'remove'
 46 |                     },
 47 |                     'color': {
 48 |                         /* replace all color names ending with blue */
 49 |                         task: 'changeValue',
 50 |                         to: 'orange',
 51 |                         whenRegex: {
 52 |                             value: 'blue$',
 53 |                             flags: 'i' // ignore case sensitivity
 54 |                         }
 55 |                     },
 56 |                     'font-size': {
 57 |                         /* change to 2rem when value is a rem unit */
 58 |                         task: 'changeValue',
 59 |                         to: '2rem',
 60 |                         whenRegex: {
 61 |                             value: 'rem',
 62 |                             flags: 'i'
 63 |                         }
 64 |                     },
 65 |                     'border': [
 66 |                         /* list of task for border property */
 67 |                         {
 68 |                             /* change border: 1px solid black
 69 |                                     to border: 1px solid #000 */
 70 |                             task: 'changeValue',
 71 |                             to: '#000',
 72 |                             whenRegex: {
 73 |                                 mode: 'partial',
 74 |                                 value: 'black',
 75 |                                 flags: 'i'
 76 |                             },
 77 |                         }, {
 78 |                             /* change border: 1px solid #000
 79 |                                     to border: 2px solid #000 */
 80 |                             task: 'changeValue',
 81 |                             to: '2px',
 82 |                             whenRegex: {
 83 |                                 mode: 'partial',
 84 |                                 value: '1px',
 85 |                                 flags: 'i'
 86 |                             }
 87 |                         }
 88 |                     ],
 89 |                     'background': {
 90 |                         /* simplify background to background-color 
 91 |                         if value is a hex */
 92 |                         task: 'changeProperty',
 93 |                         to: 'background-color',
 94 |                         whenRegex: {
 95 |                             value: '^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$',
 96 |                             flags: 'i'
 97 |                         }
 98 |                     }
 99 |                 } // end declarations
100 |             }
101 |         )]
102 |     }
103 | }
104 | 
105 | 


--------------------------------------------------------------------------------
/test/fixtures/change-all-values-when-value-equals.css:
--------------------------------------------------------------------------------
1 | body{
2 |     background-color: white;
3 | }
4 | 
5 | .light {
6 |     background-color: white;
7 | }


--------------------------------------------------------------------------------
/test/fixtures/change-all-values-when-value-equals.out.css:
--------------------------------------------------------------------------------
1 | body{
2 |     background-color: #fff;
3 | }
4 | 
5 | .light {
6 |     background-color: #fff;
7 | }


--------------------------------------------------------------------------------
/test/fixtures/change-value-when-value-equals.css:
--------------------------------------------------------------------------------
1 | body{
2 |     background-color: white;
3 | }


--------------------------------------------------------------------------------
/test/fixtures/change-value-when-value-equals.out.css:
--------------------------------------------------------------------------------
1 | body{
2 |     background-color: #fff;
3 | }


--------------------------------------------------------------------------------
/test/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | /* 
 4 |     Unit tests made with inspiration 
 5 |     from https://github.com/iamvdo/postcss-opacity
 6 | */
 7 | 
 8 | var fs = require('fs');
 9 | var postcss = require('postcss');
10 | var plugin = require('../postcss-alter-property-value');
11 | 
12 | var chai = require('chai'),
13 |     expect = chai.expect;
14 | 
15 | chai.should();
16 | 
17 | var test = function (name, opts) {
18 |     var input = read('test/fixtures/' + name + '.css');
19 |     var output = read('test/fixtures/' + name + '.out.css');
20 |     expect(postcss(plugin(opts)).process(input).css).to.eql(output);
21 | };
22 | var testString = function (input, output, opts) {
23 |     expect(postcss(plugin(opts)).process(input).css).to.eql(output);
24 | };
25 | var read = function (path) {
26 |     return fs.readFileSync(path, 'utf-8');
27 | };
28 | 
29 | describe('postcss-alter-property-value', function () {
30 | 
31 |     describe('change value for background-color property', function () {
32 |         it('should change value to #fff when value is white', function () {
33 |             test('change-value-when-value-equals', {
34 |                 declarations: {
35 |                     'background-color':
36 |                     {
37 |                         task: 'changeValue',
38 |                         to: '#fff',
39 |                         whenValueEquals: 'white'
40 |                     }
41 |                 }
42 |             });
43 |         });
44 | 
45 |     });
46 | 
47 |     describe('change value for all properties', function () {
48 |         it('should change value to #fff when value is white', function () {
49 |             test('change-all-values-when-value-equals', {
50 |                 declarations: {
51 |                     '*':
52 |                     {
53 |                         task: 'changeValue',
54 |                         to: '#fff',
55 |                         whenValueEquals: 'white'
56 |                     }
57 |                 }
58 |             });
59 |         });
60 | 
61 |     });
62 | });
63 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack'),
 2 |     path = require('path'),
 3 |     HtmlWebpackPlugin = require('html-webpack-plugin'),
 4 |     papvConfiguration = require('./papv-configuration'),
 5 |     papv = require('./postcss-alter-property-value');
 6 | 
 7 | module.exports = (env = {}) => {
 8 | 
 9 |     const isProd = env.production === true;
10 |     const nodeEnv = isProd
11 |         ? 'production'
12 |         : 'development';
13 | 
14 |     console.log(`------------ ${nodeEnv} ------------`);
15 | 
16 |     const plugins = [
17 |         new webpack.DefinePlugin({
18 |             'process.env': {
19 |                 NODE_ENV: JSON.stringify(nodeEnv)
20 |             }
21 |         }),
22 |         new HtmlWebpackPlugin({filename: 'index.html', template: 'demo/index.html'})
23 |     ];
24 | 
25 |     return {
26 |         context: path.resolve('./'),
27 |         entry: {
28 |             demo: ['./demo/index']
29 |         },
30 |         devServer: {
31 |             open: true, // auto open browser?
32 |             contentBase: './',
33 |             noInfo: true,
34 |             port: 3456,
35 |             inline: true
36 |         },
37 |         plugins: plugins,
38 |         module: {
39 |             rules: [
40 |                 {
41 |                     test: /\.css$/,
42 |                     use: [
43 |                         'style-loader',
44 |                         'css-loader?importLoaders=1', {
45 |                             loader: 'postcss-loader',
46 |                             // options: {
47 |                             //     /* 
48 |                             //     use postcss.config.js 
49 |                             //     if you want hot reload changes
50 |                             //      */
51 |                             //     plugins:  (ctx) => {
52 |                             //         return [papv(papvConfiguration)];
53 |                             //     }
54 |                             // }
55 |                         }
56 |                     ],
57 |                     exclude: [/node_modules/]
58 |                 }
59 |             ]
60 |         },
61 |         resolve: {
62 |             extensions: ['.js']
63 |         },
64 |         externals: {}
65 |     }
66 | };


--------------------------------------------------------------------------------