postcss-content-width-unit

PostCSS plugin which adds limit to vw unit

Usage no npm install needed!

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

README

PostCSS Content Width Unit Build Status Coverage Status

PostCSS plugin which adds limit to vw unit.

.foo {
  padding: 30rpx;
}

/* assuming contentMaxWidth = '1280px' */
.foo {
  padding: 2.3437vw;
}

@media screen and (min-width: 1280px) {
  .foo {
    padding: 30px;
  }
}

Usage

var contentWidthUnit = require('postcss-content-width-unit');

postcss([
  contentWidthUnit({contentMaxWidth: '1280px'})
]);

Options

contentMaxWidth: string, required

The global max-width value. Can be a variable name.

unit: string, optional, default: rpx

Content width unit which would be converted to regular CSS units.

See PostCSS docs for examples for your environment.