postcss plugin px2rem
postcss plugin px2rem.
A plugin for PostCSS that generates rem units from pixel units.
$ npm i --save postcss-plugin-px2rem
// input
h1 {
margin: 0 0 20px;
font-size: 32px;
line-height: 1.2;
letter-spacing: 1px;
}
// output
h1 {
margin: 0 0 0.2rem;
font-size: 0.32rem;
line-height: 1.2;
letter-spacing: 0.01rem;
}
import { writeFile, readFileSync } from 'fs';
import postcss from 'postcss';
import pxtorem from 'postcss-plugin-px2rem';
const css = readFileSync('/path/to/test.css', 'utf8');
const options = {
replace: false,
};
const processedCss = postcss(pxtorem(options)).process(css).css;
writeFile('/path/to/test.rem.css', processedCss, err => {
if (err) throw err;
console.log('Rem file written.');
});
import px2rem from 'postcss-plugin-px2rem';
const px2remOpts = {
......
};
export default {
module: {
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader!postcss-loader',
},
],
},
postcss: [px2rem(px2remOpts)],
}
webpack.connfig.js
import webpack from 'atool-build/lib/webpack';
import px2rem from 'postcss-plugin-px2rem';
export default webpackConfig => {
const px2remOpts = {
......
};
webpackConfig.postcss.push(px2rem(px2remOpts));
return webpackConfig;
};
Default:
{
rootValue: 100,
unitPrecision: 5,
propWhiteList: [],
propBlackList: [],
exclude:false,
selectorBlackList: [],
ignoreIdentifier: false,
replace: true,
mediaQuery: false,
minPixelValue: 0
}
rootValue
(Number|Object) The root element font size. Default is 100.
{ px: 50, rpx: 100 }
, it willunitPrecision
(Number) The decimal numbers to allow the REM units to grow to.propWhiteList
(Array) The properties that can change from px to rem.
propBlackList
(Array) The properties that should not change from px to rem.
exclude
(Reg) a way to exclude some folder,eg. /(node_module)/.selectorBlackList
(Array) The selectors to ignore and leave as px.
['body']
will match .body-class
[/^body$/]
will match body
but not .body
ignoreIdentifier
(Boolean/String) a way to have a single property ignored, when ignoreIdentifier enabled, then replace
would be set to true
automatically.replace
(Boolean) replaces rules containing rems instead of adding fallbacks.mediaQuery
(Boolean) Allow px to be converted in media queries.minPixelValue
(Number) Set the minimum pixel value to replace.MIT