postcss-flexible
This is a postcss plugin for translating dpr(...)
, rem(...)
, url(...)
. Similar to px2rem, but using custom function istead of comments for syntax.
Usage
Webpack
module.exports = {
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}
]
},
postcss: function() {
// remUnit defaults to 75
return [require('postcss-flexible')({remUnit: 75})]
}
}
Example
Before processing:
.selector {
font-size: dpr(32px);
width: rem(75px);
line-height: 3;
/* replace all @[1-3]x in urls: `/a/@2x/x.png`, `/a@2x/x.png` or `/a/x@2x.png` */
background-image: url(/images/qr@2x.png);
}
After processing:
.selector {
width: 1rem;
line-height: 3;
}
[data-dpr="1"] .selector {
font-size: 16px;
background-image: url(/images/qr@1x.png);
}
[data-dpr="2"] .selector {
font-size: 32px;
background-image: url(/images/qr@2x.png);
}
[data-dpr="3"] .selector {
font-size: 48px;
background-image: url(/images/qr@3x.png);
}
options
-
desktop
: boolean, defaultfalse
-
baseDpr
: number, default2
-
remUnit
: number, default75
-
remPrecision
: number, default6
-
addPrefixToSelector
: function -
dprList
: array, default[3, 2, 1]
-
fontGear
: array, default[-1, 0, 1, 2, 3, 4]
-
enableFontSetting
: boolean, defaultfalse
-
addFontSizeToSelector
: function -
outputCSSFile
: function
Change Log
- add: generate different css files with fontGear
- support custom
fontGear
- support custom
enableFontSetting
- support custom
addFontSizeToSelector
- support custom
outputCSSFile
0.5.0
- support custom
dprList
0.4.0
- support custom
dprList
0.3.0
- add option
desktop
andaddPrefixToSelector
0.1.0
- handle
url()
0.0.3
- add
dpr()
andrem()
0.0.0
- First release.
License
MIT