@tporl/postcss-px-to-viewport v0.1.0

postcss-px-to-viewport

PostCSS plugin to convert pixel units to viewport units.

Example

const options = {
  viewportSize: 750,
  unitPrecision: 6,
  viewportUnit: 'vw',
  fontViewportUnit: 'vw',
  selectorBlackList: ['.ignore'],
  propertyBlackList: ['font'],
  minSize: 1,
  mediaViewportSize: [['(min-width: 768px)', 768]],
}

Input

.foo {
  width: 100px;
  height: 100px;
  margin: 10vh 20px 20vh;
  border: 1px solid #333;
  border-radius: 10px;
  font-size: 12px;
  line-height: 20px; /* viewport-disable */
}

.ignore {
  width: 100px;
  height: 100px;
}

@media (min-width: 768px) {
  .foo {
    width: 150px;
    height: 150px;
    border: 2px solid #333;
  }
}

Output

.foo {
  width: 13.333333vw;
  height: 13.333333vw;
  margin: 10vh 2.666667vw 20vh;
  border: 1px solid #333;
  border-radius: 1.333333vw;
  font-size: 12px;
  line-height: 20px; /* viewport-disable */
}

.ignore {
  width: 100px;
  height: 100px;
}

@media (min-width: 768px) {
  .foo {
    width: 19.531250vw;
    height: 19.531250vw;
    border: 0.260417vw solid #333;
  }
}

Options

const defaultOptions = {
  viewportSize: 750,
  unitPrecision: 6,
  viewportUnit: 'vw',
  fontViewportUnit: 'vw',
  selectorBlackList: [],
  propertyBlackList: [],
  minSize: 1,
  mediaViewportSize: [],
}

• viewportSize (Number): The viewport size.
• unitPrecision (Number): The number of digits to appear after the decimal point.
• viewportUnit (String): The viewport units after replace.
• fontViewportUnit (String): The viewport units for font after replace.
• selectorBlackList (Array): The selectors to ignore.
• propertyBlackList (Array): The properties to ignore.
• minSize (Number): The minimum pixel value to replace.
• mediaViewportSize (Array): The viewport size for media query.

Usage

postcss([ require('postcss-px-to-viewport') ])

See PostCSS docs for examples for your environment.

License

MIT

Copyright (c) 2019-present, TPORL