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.