Repository files navigation

This is apostcss plugin for translatingdpr(...),rem(...),url(...). Similar topx2rem, but using custom function istead of comments for syntax.

module.exports={module:{loaders:[{test:/\.css$/,loader:"style-loader!css-loader!postcss-loader"}]},postcss:function(){// remUnit defaults to 75return[require('postcss-flexible')({remUnit:75})]}}

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);}

• 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

• add: generate different css files with fontGear
• support customfontGear
• support customenableFontSetting
• support customaddFontSizeToSelector
• support customoutputCSSFile

• support customdprList

• add optiondesktop andaddPrefixToSelector

• handleurl()

• adddpr() andrem()

• First release.

MIT