PostCSS Unit Converter

PostCSS plugin that provides a function to convert CSS values from one unit to another.

This is a wrapper on top of css-unit-converter to provide a convert() CSS function.

.foo {
    /* Input example */
    width: convert(600px, pt);
}
 
@media screen and (min-width: convert(200px, pt)) {
    bar {
        display: none;
    }
}

.foo {
    /* Output example */
    width: 450pt;
}
 
@media screen and (min-width: 150pt) {
    bar {
        display: none;
    }
}

Usage

postcss([ require('postcss-unit-converter')(options) ])

See PostCSS docs for examples for your environment.

options

Type: Object | Null
Default:

{
    precision: 5
}

• precision(Number): The maximum number of decimals.

Provided CSS functions

convert()

Converts a CSS value from one unit to another.

convert(sourceValue, targetUnit, precision);

Accepts 3 arguments:

• sourceValue: The value to be converted
• targetUnit: The target unit
• precision(optional): The maximum number of decimals. default is 5.

Available Units

• Length: px, cm, mm, in, pt, pc.
• Angle: deg, grad, rad, turn.
• Time: s, ms.
• Frequency: Hz, kHz.
• Resolution: dpi, dpcm, dppx.

Example

.foo {
    /* Input example */
    transform: rotate(convert(180deg, rad, 2));
}

.foo {
    /* Output example */
    transform: rotate(3.14rad);
}

Credits

Thanks to:

• css-unit-converter - Created by Andy Jansson.