Novelty Promotes Magicians

    postcss-flexible

    0.5.5 • Public • Published

    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/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, 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

    Install

    npm i postcss-flexible

    DownloadsWeekly Downloads

    6

    Version

    0.5.5

    License

    MIT

    Unpacked Size

    16.1 kB

    Total Files

    5

    Last publish

    Collaborators

    • imliwenfu
    • angus96