Convert css unit and value by custom rule
npm install postcss-convert-unit



Convert values and units in css through custom conversion rules. A new selector can be generated for the converted property.
``npm`
npm install postcss-convert-unit --save-dev
#### simple
---
postcss config:
`javascript`
// postcss.config.js
module.exports = {
plugins: {
"postcss-convert-units": {
convertConfig: [
{
declMatcher: {
sourceUnit: 'px',
targetUnit: 'rem'
},
declConvertRules: [{
value: value => value
}]
}
]
}
}
};
input:
`css`
.div {
padding: 20px 0 10px 5em;
}
output:
`css`
.div {
padding: 20rem 0 10rem 5em;
}
#### px2rem
---
postcss config:
`javascript[data-dpr="1"] ${selector}
// postcss.config.js
module.exports = {
plugins: {
"postcss-convert-units": {
convertConfig: [
{
declMatcher: {
sourceUnit: 'px',
targetUnit: 'rem'
},
declConvertRules: [
{
value: value => value / 75
}
]
},
{
declMatcher: {
sourceUnit: 'px',
targetUnit: 'px',
afterDeclComment: 'px'
},
removeMatchDecl: true,
declConvertRules: [
{
withNewSelector: selector => ,[data-dpr="2"] ${selector}
value: value => value / 2
},
{
withNewSelector: selector => ,[data-dpr="3"] ${selector}
value: value => value
},
{
withNewSelector: selector => ,`
value: value => value / 2 * 3
}
]
}
]
}
}
};
input:
`css
.selector {
height: 64px; /px/
font-size: 28px; /px/
border: 1px solid #ddd; /no/
width: 150px;
}
`
output:
`css
.selector {
border: 1px solid #ddd; /no/
width: 2rem;
}
[data-dpr="1"] .selector {
height: 32px;
font-size: 14px;
}
[data-dpr="2"] .selector {
height: 64px;
font-size: 28px;
}
[data-dpr="3"] .selector {
height: 96px;
font-size: 42px;
}
`
javascript
// example
{
convertConfig: [
{
declMatcher: {
sourceUnit: 'px',
targetUnit: 'rem',
afterDeclComment: 'rem'
},
precision: 5,
removeMatchDecl: false,
declConvertRules: [
{
value: value => value,
withNewSelector: selector => selector
}
]
}
]
}
`| Attribute | Description | Type | Default | Required |
| :---:| :---: | :---: | :---: | :---: |
| convertConfig | convert config list | convertItem[] | [] | yes|
- convertItem
| Attribute | Description | Type | Default | Required |
| :---:| :---: | :---: | :---: | :---: |
| declMatcher | match declaration | string | - | yes |
| declConvertRules | declaration convert rules | convertRule[] | - | yes |
| precision | value precision | number | 5 | no |
- declMatcher
| Attribute | Description | Type | Default | Required |
| :---:| :---: | :---: | :---: | :---: |
| sourceUnit | source unit | string | - | yes |
| targetUnit | target unit | string | - | yes |
| afterDeclComment | comment after declaration | string | - | no |
- convertRule
notice: If set
`withNewSelector`, a new selector will be generated for the converted declaration; if not set `withNewSelector`, values and units will converted in origin declaration. for @keyframes, it will converted in origin declaration. If multiple `convertRules` are configured, the last configuration will take effect, because the post configuration will override the first configuration.| Attribute | Description | Type | Default | Required |
| :---:| :---: | :---: | :--- | :---: |
| value | value convert rule | function(value),
`value` is matched value,you need implement convert rule,and return converted value| - | yes |
| withNewSelector | new selector generated rule | function(selector), `selector``is matched selector,you need implement convert rule,and return new selector| - | no |