A CSS post-processor that converts px to vw.
npm install @lihaochen/postcss-pxtovwA plugin for PostCSS that generates vw units from pixel units.
``shell`
npm i @lihaochen/postcss-pxtovw -D
`js`
// postcss.config.js
module.exports = {
plugins: {
'@lihaochen/postcss-pxtovw': {}
}
}
`css
/ input /
h1 {
margin: 0 0 20px;
font-size: 32px;
line-height: 1.2;
letter-spacing: 1px;
}
/ output /
h1 {
margin: 0 0 5.33333vw;
font-size: 8.53333vw;
line-height: 1.2;
letter-spacing: 1px;
}
`
- viewportWidth(number): The width of the viewport, default value is 375.unitPrecision
- (number): The decimal numbers to allow the vw units to grow to, default value is 5.minPixelValue
- (number): Set the minimum pixel value to replace, default value is 1.include
- (Rule[]): Only matching files will be converted, default value is [/.*/].exclude
- (Rule[]): Ignore matching files like 'node_modules', default value is [].includeProps
- (Rule[]): Only matching properies will be converted, default value is [/.*/].excludeProps
- (Rule[]): Ignore matching properies like 'font-size', default value is [].includeSelectors
- (Rule[]): Only matching selectors will be converted, default value is [/.*/].excludeSelectors
- (Rule[]): Ignore matching selectors like '.ignore', default value is [].mediaQuery
- (boolean): Allow px to be converted in media queries.
> The type Rule is defined as type Rule = string | RegExp | Function.string
>
> - : Include given value, like String.prototype.includes.RegExp
> - : By regular matching.Function
> - : When the return value is true, matching.
`js`
// postcss.config.js
module.exports = {
plugins: {
'@lihaochen/postcss-pxtovw': {
viewportWidth: 750,
unitPrecision: 3,
minPixelValue: 1
}
}
}
`js`
// postcss.config.js
module.exports = {
plugins: {
'@lihaochen/postcss-pxtovw': {
// Only process files containing the 'src/views/mobile' path.
include: ['src/views/mobile'],
// Do not process files containing the 'node_modules' path.
exclude: ['node_modules']
}
}
}
`js`
// postcss.config.js
module.exports = {
plugins: {
'@lihaochen/postcss-pxtovw': {
// Only process properies containing the 'font' name, like 'font-size'.
includeProps: ['font'],
// Do not process properies containing the 'margin' name, like 'margin'/'margin-top'/'margin-bottom'.
includeProps: ['margin']
}
}
}
`js`
// postcss.config.js
module.exports = {
plugins: {
'@lihaochen/postcss-pxtovw': {
// Only process selectors containing the 'src/views/mobile' name, like '.mobile'/'.mobile-title'.
includeSelectors: ['mobile'],
// Do not process selectors containing the 'ignore' name, like '.ignore'/'.ignore-rule'.
includeSelectors: ['node_modules']
}
}
}
#### Input
`css`
/ pxtovw-ignore /
.rule {
width: 20px;
height: 20px;
font-size: 15px;
}
.rule {
width: 20px;
height: 20px;
/ pxtovw-ignore /
font-size: 15px;
}
#### Output
`css``
.rule {
width: 20px;
height: 20px;
font-size: 15px;
}
.rule {
width: 5.33333vw;
height: 5.33333vw;
font-size: 15px;
}