Skip to content
This repository has been archived by the owner on Jul 31, 2019. It is now read-only.

vvenv/postcss-flexible

Repository files navigation

postcss-flexible

This is a postcss plugin for translating dpr(...), rem(...), url(...). Similar to px2rem, but using custom function istead of comments for syntax.

Travis Coveralls dependencies devDependency Status NPM version

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/[email protected]` */
  background-image: url(/images/[email protected]);
}

After processing:

.selector {
  width: 1rem;
  line-height: 3;
}

[data-dpr="1"] .selector {
  font-size: 16px;
  background-image: url(/images/[email protected]);
}

[data-dpr="2"] .selector {
  font-size: 32px;
  background-image: url(/images/[email protected]);
}

[data-dpr="3"] .selector {
  font-size: 48px;
  background-image: url(/images/[email protected]);
}

options

  • desktop: boolean, default false
  • baseDpr: number, default 2
  • remUnit: number, default 75
  • remPrecision: number, default 6
  • addPrefixToSelector: function
  • dprList: array, default [3, 2, 1]
  • fontGear: array, default [-1, 0, 1, 2, 3, 4]
  • enableFontSetting: boolean, default false
  • addFontSizeToSelector: function
  • outputCSSFile: function

Change Log

0.5.0

  • add: generate different css files with fontGear
  • support custom fontGear
  • support custom enableFontSetting
  • support custom addFontSizeToSelector
  • support custom outputCSSFile

0.4.0

  • support custom dprList

0.3.0

  • add option desktop and addPrefixToSelector

0.1.0

  • handle url()

0.0.3

  • add dpr() and rem()

0.0.0

  • First release.

License

MIT