postcss alter property value
Alter your css declarations.
about
A tool for changing css declarations from a rule based configuration.
- Change property names
- Change values
- Clone a declaration with a new property name
Usage examples.
- Simulate flexbox not working by removing
display: flex
- Remove all
outline
usage - Correct declaration
mouse: pointer
tocursor: pointer
- Simplify
background: #ddd
tobackground-color: #ddd
if the value is a hex color - For all properties, change value from
16px
to1rem
npm
https://www.npmjs.com/package/postcss-alter-property-value
configuration example
Check postcss.config.js for inspiration.
/* optional */ config: /* add debug info */ addInfo: true /* required */ declarations: '*': /* The *-property will evaluate all properties The tasks for *-property is always executed first. This is a relative expensive task, I recommend to only use this if you must. */ task: 'changeValue' to: 'translateY(2px)' whenValueEquals: 'translateY(10px)' /* set all font-families to this value */ 'font-family': 'sans-serif' 'mouse': /* replace all mouse properties with cursor */ task: 'changeProperty' to: 'cursor' 'transform': /* clone a declaration and add before this declaration */ task: 'cloneBefore' to: '-webkit-transform' 'display': /* conditional change value */ task: 'changeValue' to: 'flex' whenValueEquals: 'inline-flex' 'outline': /* remove all outlines */ task: 'remove' 'color': /* replace all color names ending with blue */ task: 'changeValue' to: 'orange' whenRegex: value: 'blue$' flags: 'i' // ignore case sensitivity 'font-size': /* change to 2rem when value is a rem unit */ task: 'changeValue' to: '2rem' whenRegex: value: 'rem' flags: 'i' 'border': /* list of tasks for border property */ /* change border: 1px solid black to border: 1px solid #000 */ task: 'changeValue' to: '#000' whenRegex: mode: 'partial' value: 'black' flags: 'i' /* change border: 1px solid #000 to border: 2px solid #000 */ task: 'changeValue' to: '2px' whenRegex: mode: 'partial' value: '1px' flags: 'i' 'background': /* simplify background to background-color if value is a hex */ task: 'changeProperty' to: 'background-color' whenRegex: value: '^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$' flags: 'i' // end declarations
A css file with these rules
Is modified to
development
- Git clone the project or download it
- npm install
- npm start
- Open a browser and go to http://localhost:3456/
- Insert your styles in demo/index.css
- Open and make changes to the configuration in postcss.config.js
- Open dev tools in browser and inspect the elements
command line usage example
css-changes.js
const fs = ;const postcss = ;const plugin = ;const configuration = /* your configuration */ declarations: 'background-color': task: 'changeValue' to: '#fff' whenValueEquals: 'white' ;fs;
Run in console/terminal
where my-new.css
is generated from my.css
and given configuration.
node css-changes.js