postcss-px-to-viewport-nl
A plugin for PostCSS that generates viewport units (vw, vh, vmin, vmax) from pixel units.
Usage
If your project involves a fixed width, this script will help to convert pixels into viewport units.
Input/Output
// {} // {}
Example
'use strict'; var fs = ;var postcss = ;var pxToViewport = ;var css = fs;var options = replace: false;var processedCss = css; fs;
Options
Default:
unitToConvert: 'px' viewportWidth: 320 viewportHeight: 568 // not now used; TODO: need for different units and math for different properties unitPrecision: 5 viewportUnit: 'vw' fontViewportUnit: 'vw' // vmin is more suitable. filePathBlackList: minPixelValue: 1 mediaQuery: false
-
unitToConvert
(String) unit to convert, by default, it is px. -
viewportWidth
(Number) The width of the viewport. -
viewportHeight
(Number) The height of the viewport. -
unitPrecision
(Number) The decimal numbers to allow the REM units to grow to. -
viewportUnit
(String) Expected units. -
fontViewportUnit
(String) Expected units for font. -
filePathBlackList
(Array) The selectors to ignore and leave as px.- ['/home/', '/contact-us/']
[/home/
will match every file which filepath contains '/home/', like'/your-repository/project/src/home/index.vue'
or'/your-repository/project/src/home/index.scss'
- ['/home/', '/contact-us/']
-
minPixelValue
(Number) Set the minimum pixel value to replace. -
mediaQuery
(Boolean) Allow px to be converted in media queries.
Use with gulp-postcss
var gulp = ;var postcss = ;var pxtoviewport = ; gulp;