Package Exports

postcss-convert-unit

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-convert-unit) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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)， `selector`is matched selector，you need implement convert rule，and return new selector	-	no