postcss-convert-unit

Convert css unit and value by custom rule

Usage no npm install needed!

<script type="module">
  import postcssConvertUnit from 'https://cdn.skypack.dev/postcss-convert-unit';
</script>

README

postcss-convert-unit

npm Actions Status coverage license

中文

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