PostCSS plugin that transforming css from px to rem.
It's also avaliable as:
$ npm i --save-dev cupools/pxremvar pxrem = require('pxrem')
var option = {
root: 75,
filter: /^border/
}
pxrem.process('.foo { width: 75px; border: 1px solid #000; }', option).toString()
//=> '.foo { width: 1rem; border: 1px solid #000; }'- root: root value from px to rem, default to 75
- fixed: precision of rem value, default to 6
- filter: css declaration that should be ignored, can be regexp or function, default to null
- keepPx: keep px for compatible in old browsers, default to false
- commentFilter: the comment that after css declaration which should be ignored, default to 'no'
- enable: enable the plugin, default to true
var pxrem = require('pxrem')
var content = require('fs').readFileSync('style.css')
var option = {
root: 75,
fixed: 6,
filter: function(prop, value, decl) {
if (prop === 'border' && value.indexOf('1px') === 0) {
return true
}
return false
}
}
var result = pxrem.process(content, option)
console.log(result.toString())/* source */
.foo {
width: 75px;
height: 10px;
font-size: 24px; /*no*/
background: url('icon.png') no-repeat;
background-size: 15px 15px;
border: 1px solid #000;
}
/* output */
.foo {
width: 1rem;
height: 0.133333rem;
font-size: 24px;
background: url('icon.png') no-repeat;
background-size: 0.2rem 0.2rem;
border: 1px solid #000;
}var pxrem = require('pxrem')
var content = require('fs').readFileSync('style.css')
var option = { keepPx: true }
var result = pxrem.process(content, option)
console.log(result.toString())/* source */
.foo {
width: 75px;
height: 10px;
font-size: 24px; /*no*/
background: url('icon.png') no-repeat;
background-size: 15px 15px;
}
/* output */
.foo {
width: 75px;
width: 1rem;
height: 10px;
height: 0.133333rem;
font-size: 24px;
background: url('icon.png') no-repeat;
background-size: 15px 15px;
background-size: 0.2rem 0.2rem;
}$ npm i && npm testCopyright (c) 2016 cupools
Licensed under the MIT license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent