Skip to content

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

License

Notifications You must be signed in to change notification settings

wangguangyou/postcss-px-to-clamp

Repository files navigation

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.

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published