cssobj plugin to replace object key/value pair with new value (Object, Array, Function etc.)
- npm
npm i cssobj-plugin-replace
Then
var cssobj = require('cssobj')
var cssobj_plugin_replace = require('cssobj-plugin-replace')
cssobj(
{ p: {color: 'red'} },
{
plugins: [
cssobj_plugin_replace({
map:[
// replace red with blue
['color', 'red', 'blue']
]
})
]
}
)
// result:
p { color: blue; }
Replace color red
with blue
cssobj_plugin_replace({
map:[
['color', 'red', 'blue']
]
})
// { p:{color:'red'} } => p {color: blue;}
cssobj_plugin_replace({
map:[
['font', '123', [1, 2, 3]]
]
})
// { p:{font:123} } => p { font:1; font:2; font:3; }
cssobj_plugin_replace({
map:[
['font', 'heading', {fontFamily: 'Arial', fontSize: '24px', fontWeight: 'bold'}]
]
})
// { p:{font:'heading'} } => p { font-family: Arial; font-size: 24px; font-weight: bold; }
cssobj_plugin_replace({
map:[
['display', 'flex', [{display:'-webkit-flex'}, {display:'flex'}]]
]
})
// { p:{display:'flex'} } => p { display: -webkit-flex; display: flex; }
Use null as placeholder for any key/value matched.
null as value to match any value
cssobj_plugin_replace({
map:[
['display', null, [{display:'-webkit-flex'}, {display:'flex'}]]
]
})
// { p:{display:1} } => p { display: -webkit-flex; display: flex; }
null as key to match any key
cssobj_plugin_replace({
map:[
[null, 'red', [{display:'-webkit-flex'}, {display:'flex'}]]
]
})
// { p:{color:'red'} } => p { display: -webkit-flex; display: flex; }
newValue can be function to dynamic calc the replacement.
cssobj_plugin_replace({
map:[
[null, null, function(key, value){return value>0 ? {[key]: value+'px'} : {[key]:value} }]
]
})
// { p:{padding:1, margin:0} } => p { padding: 1px; margin:0; }
cssobj version >= 0.5.2
MIT