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