Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

postcss-strip-units

whitneyit15kMIT2.0.1

PostCSS plugin that strips units off of property values

postcss, css, postcss-plugin, strip, strip-units

readme

PostCSS Strip Units Build Status

PostCSS plugin that strips units off of property values.

When working with vertical rhythm the need to do mathematical operations on variables arises. This plugin tries to aid in the requirement.

In its simplest form it converts the following:

.foo {
    test: strip(2em);
}

Will produce the following.

.foo {
    test: 2;
}

You can also use postcss-calc and postcss-custom-properties to achieve the following.

:root {
    --base-spacing-unit: 20px;
    --base-font-size: 14px;
    --rhythm: calc((strip(var(--base-spacing-unit)) / strip(var(--base-font-size))) * 1em);
}
.foo {
    font-size: var(--base-font-size);
    line-height: var(--rhythm);
}

You will generate the following css.

.foo {
    font-size: 14px;
    line-height: 1.428571429;
}

Usage

postcss([ require('postcss-strip-units') ])

If you want to use the calc and var functions you can configure postcss like so.

postcss([
    require('postcss-custom-properties'),
    require('postcss-strip-units'),
    require('postcss-calc')
])

See PostCSS docs for examples for your environment.

Options

Example:

const stripe = require('postcss-strip');
const postcssPlugins = [stripe({
    functionName : 'removeUnit'
})]

functionName

Type: string
Default: stripe

The name of the funciton to use in your CSS. By default it is strip()