Awesome

postcss-px-to-clamp

English | 中文

PostCSS plugin that converts px to clamp (clamp(min, val, max) or min(val, max) or max(val, min)).

.foo {
  width: 20vw;
  height: 20vh;
  line-height: 1.2;
  padding: 20px;
  padding-top: 20px;/* px-to-clamp-ignore */
  /* px-to-clamp-ignore-next */
  padding-left: 20px;
  border: 1px solid #000;
  font-size: 20em;
  margin-top: '20px';
  margin-left: "20px";
  margin-bottom: 20PX;
}

.foo {
  width: 20vw;
  height: 20vh;
  line-height: 1.2;
  padding: calc(0.02667 * clamp(200px, 100vw, 1200px));
  padding-top: 20px;
  padding-left: 20px;
  border: 1px solid #000;
  font-size: 20em;
  margin-top: '20px';
  margin-left: "20px";
  margin-bottom: 20PX;
}

If your project involves a fixed width, this script will help to convert pixels into viewport units.

Installation

npm install --save-dev postcss-px-to-clamp

Usage

Default Options:

interface DefaultOptions {
  viewportWidth: number
  maxViewportWidth?: string
  minViewportWidth?: string
  viewportUnit: 'vw' | 'vmin'
  fontViewportUnit: 'vw' | 'vmin'
  unitPrecision: number
  selectorBlackList: (string | RegExp)[]
  propBlackList: (string | RegExp)[]
  minPixelValue: number
  mediaQuery: boolean
  keyframesQuery: boolean
  replace: boolean
  include?: RegExp | RegExp[]
  exclude?: RegExp | RegExp[]
}

{
  viewportWidth: 750,
  viewportUnit: 'vw',
  fontViewportUnit: 'vw',
  unitPrecision: 5,
  selectorBlackList: [],
  propBlackList: [],
  minPixelValue: 1,
  mediaQuery: false,
  keyframesQuery: false,
  replace: true,
  exclude: undefined,
  include: undefined,
}

• viewportWidth The width of the viewport.
  • Px will be converted to vw.
• viewportUnit Unit used for calculation clamp(min, 100vw|100vmin, max).
• fontViewportUnit Font properties used viewportUnit.
• minViewportWidth The minimum width of the viewport.
  • Px will be converted to calc(val / viewportWidth * max(100w, minViewportWidth)).
• maxViewportWidth The maximum width of the viewport.
  • Px will be converted to calc(val / viewportWidth * min(100w, maxViewportWidth)).
  • If minViewportWidth and maxViewportWidth are both set px will be converted to calc(val / viewportWidth * clamp(minViewportWidth, 100w, maxViewportWidth)).
• unitPrecision The decimal numbers to allow the vw units to grow to.
• selectorBlackList Exclude selectors.
• propBlackList Exclude css properties.
• minPixelValue Will not be converted if x is less than or equal to minPixelValue.
• mediaQuery Allow px to be converted in media queries.
• keyframesQuery Allow px to be converted in keyframes queries.
• replace Append css for fallback or replace css.
• exclude Exclude some folder'.
• include Only included folder will be converted.