stylus-px-to-relative-unit
A stylus plugin to convert px to relative length units (vw / rem)
Install
npm install stylus-px-to-relative-unit
Usage
// webpack.config.jsconst pxToUnit = ... loader: 'stylus-loader' options: use: ...
Options
Options | Default | Description |
---|---|---|
targetUnit | 'vw' | target relative length unit. Support 'vw', 'rem' and 'vw&rem' |
ignoreThreshold | 1 | px values less than this threshold won't be converted |
viewportWidth | 375 | base viewport width (for targetUnit: 'vw' ) |
viewportHeight | 667 | base viewport height (for targetUnit: 'vw', currently useless) |
htmlFontSize | 37.5 | base html font-size (for targetUnit: 'rem') |
needConvert | true |
targetUnit: 'vw&rem'
If you want to use unit vw and also worry about browser support, you can use 'vw&rem' mode. For example:
// Input .test border 3.75px solid #fff // Output.test { border: 0.1rem solid #fff; border: 1vw solid #fff;}
For browser doesn't support vw, it will automatically use rem to layout.
Notice: If you need to limit max/min width of the layout, this mode is not suit for you
needConvert
For special files don't want to be converted, add 'need-convert = false' on top of each stylus files.
// Inputneed-convert = false.test width 3.75px // Output.test { width: 3.75px;}
GLobal stylus function
This plugin will not convert px arguments in css functions like 'translate()', but provides some global stylus functions for users to convert px value manually.
px2vw(val)
// Input.test transform translate(px2vw(3.75px), px2vw(3.75px)) // Output.test { transform: translate(1vw, 1vw);}
px2rem(val)
// Input.test transform 3.75px), 3.75px)) // Output.test { transform: 0.1rem, 0.1rem);}
Ignored argument
For arguments don't want to be converted, wrap them with quote.
// Input.test padding '3.75px' 3.75px // Output.test { padding: 3.75px 1vw;}
Changelog
v1.2.0 - 2018/12/27
- Add 'needConvert' option
v1.1.1 - 2018/10/28
- Optimize output in 'vw&rem' mode
v1.1.0 - 2018/10/13
- Support option targetUnit 'vw&rem'
Acknowledgments
Inspired by jaywcjlove/stylus-px2rem
License
This project is licensed under the MIT License - see the LICENSE file for details