postcss-convert-unit

中文

Convert values and units in css through custom conversion rules. A new selector can be generated for the converted property.

Install

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

Usage

simple

postcss config：

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

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

Options

// example
{
  convertConfig: [
    {
      declMatcher: {
        sourceUnit: 'px',
        targetUnit: 'rem',
        afterDeclComment: 'rem'
      },
      precision: 5,
      removeMatchDecl: false,
      declConvertRules: [
        {
          value: value => value,
          withNewSelector: selector => selector
        }
      ]
    }
  ]
}

| Attribute | Description | Type | Default | Required | | :---:| :---: | :---: | :---: | :---: | | convertConfig | convert config list | convertItem[] | [] | yes|

• convertItem

| Attribute | Description | Type | Default | Required | | :---:| :---: | :---: | :---: | :---: | | declMatcher | match declaration | string | - | yes | | declConvertRules | declaration convert rules | convertRule[] | - | yes | | precision | value precision | number | 5 | no |

• declMatcher

| Attribute | Description | Type | Default | Required | | :---:| :---: | :---: | :---: | :---: | | sourceUnit | source unit | string | - | yes | | targetUnit | target unit | string | - | yes | | afterDeclComment | comment after declaration | string | - | no |

• convertRule

notice： If set withNewSelector, a new selector will be generated for the converted declaration; if not set withNewSelector, values and units will converted in origin declaration. for @keyframes, it will converted in origin declaration. If multiple convertRules are configured, the last configuration will take effect, because the post configuration will override the first configuration.

| Attribute | Description | Type | Default | Required | | :---:| :---: | :---: | :--- | :---: | | value | value convert rule | function(value)，value is matched value，you need implement convert rule，and return converted value| - | yes | | withNewSelector | new selector generated rule | function(selector)， selectoris matched selector，you need implement convert rule，and return new selector| - | no |