Usage no npm install needed!

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

README

PostCSS Default Unit

PostCSS plugin that adds a default unit to numeric css properties.

.foo {
    width: 200;
    margin: 0 auto 20;
    z-index: 1;
}

.foo {
    width: 200px;
    margin: 0 auto 20px;
    z-index: 1;
}

With npm do:

npm install postcss-default-unit --save

By default px is used.

postcss([ require('postcss-default-unit') ])

You can specify the desired unit.

postcss([ require('postcss-default-unit')({unit: '%'}) ])

This plugin must be set after the plugins that can modify the values (e.g. postcss-simple-vars). See PostCSS docs for examples for your environment.

Now postcss-default-unit ignores expressions in parentheses. It won't mess up your rgba or calc, but it won't also add a unit to your gradient.