postcss-conversion-unit v0.1.0

postcss-convert-unit

对 css 中的值与单位通过自定义转换规则进行转换。能为转换后的属性生成新的选择器。

Install

npm install postcss-convert-unit --save-dev

Usage

示例

简单示例

插件配置：

// postcss.config.js
module.exports = {
  plugins: {
    "postcss-convert-units": {
      convertConfig: [
        {
          declMatcher: {
            sourceUnit: 'px',
            targetUnit: 'rem'
          },
          declConvertRules: [{
            value: value => value
          }]
        }
      ]
    }
  }
};

input:

.div {
  padding: 20px 0 10px 5em;
}

output:

.div {
  padding: 20rem 0 10rem 5em;
}

模拟px2rem

插件配置：

// postcss.config.js
module.exports = {
  plugins: {
    "postcss-convert-units": {
      convertConfig: [
        {
          declMatcher: {
            sourceUnit: 'px',
            targetUnit: 'rem'
          },
          declConvertRules: [
            {
              value: value => value / 75
            }
          ]
        },
        {
          declMatcher: {
            sourceUnit: 'px',
            targetUnit: 'px',
            afterDeclComment: 'px'
          },
          removeMatchDecl: true,
          declConvertRules: [
            {
              withNewSelector: selector => `[data-dpr="1"] ${selector}`,
              value: value => value / 2
            },
            {
              withNewSelector: selector => `[data-dpr="2"] ${selector}`,
              value: value => value
            },
            {
              withNewSelector: selector => `[data-dpr="3"] ${selector}`,
              value: value => value / 2 * 3
            }
          ]
        }
      ]
    }
  }
};

input:

.selector {
  height: 64px; /*px*/
  font-size: 28px; /*px*/
  border: 1px solid #ddd; /*no*/
  width: 150px;
}

output:

.selector {
  border: 1px solid #ddd; /*no*/
  width: 2rem;
}
[data-dpr="1"] .selector {
  height: 32px;
  font-size: 14px;
}
[data-dpr="2"] .selector {
  height: 64px;
  font-size: 28px;
}
[data-dpr="3"] .selector {
  height: 96px;
  font-size: 42px;
}

option

type convertConfig = ConvertItem[]
interface ConvertItem {
    declMatcher: DeclsMatcher
    precision: number
    removeMatchDecl: boolean
    declConvertRules: ConvertRule[]
}
interface DeclsMatcher {
    sourceUnit: string
    targetUnit: string
    afterDeclComment: string
}
interface ConvertRule {
    value: (value: number)=>  number
    withNewSelector: (selector: number) => string
}

• option

• convertItem

• declMatcher

• convertRule

注意： 如果配置 withNewSelector 将生产新的选择器；如果未配置 withNewSelector 将在源定义处进行单位转换。 对 @keyframes ，将直接在源定义处进行单位转换，如果配置了多个convertRule，最后配置的才会生效，因为后配置的会覆盖先配置的。