https://github.com/b2ns/postcss-unit
a postcss plugin which convert any css unit
https://github.com/b2ns/postcss-unit
em postcss-plugin px rpx unit vw
Last synced: 6 months ago
JSON representation
a postcss plugin which convert any css unit
- Host: GitHub
- URL: https://github.com/b2ns/postcss-unit
- Owner: b2ns
- License: mit
- Created: 2019-01-04T02:38:27.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-01-07T15:42:11.000Z (almost 7 years ago)
- Last Synced: 2025-06-27T16:50:48.270Z (6 months ago)
- Topics: em, postcss-plugin, px, rpx, unit, vw
- Language: JavaScript
- Size: 3.91 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# postcss-unit
Unlike other postcss plugins only dealing with specific unit (px2rem, px2vw, px2rpx, ...), this one convert **any unit** in css as long as you provide *the convert funtcion* !!!
## Install
```shell
$ npm install postcss-unit --save-dev
```
## Usage
Like all other postcss plugins, you may use it with Webpack, Gulp, Grunt or other workflow, please refer [this](https://github.com/postcss/postcss)
## Example
### Default options
```javascript
// with default options
{
from: 'px',
to: 'rpx',
convert: num => num, // function to convert the matched number
precision: 3, // negative (-1) to leave the number as it is
minValue: 0, // number not less than this will be converted
mediaQuery: false, // enable conversion in @media query
propWhiteList: [], // string or regexp
selectorBlackList: [] // string or regexp
}
```
```css
/* input */
.border-bottom {
padding: 0 20px;
border-bottom: 1px solid;
}
/* output */
.border-bottom {
padding: 0 20rpx;
border-bottom: 1rpx solid;
}
```
### Multi options
```javascript
// give an array of optins to do multi convert at the same time
[{
from: 'px',
to: 'vw',
convert: num => num / 7.5,
precision: 5,
minValue: 1,
mediaQuery: true,
selectorBlackList: ['.ignore']
}, {
from: 'em',
to: 'rem',
precision: -1,
propWhiteList: [/font-.*/gi],
}, {
from: 'cm',
to: 'mm',
convert: num => num * 10
}]
```
```css
/* input */
@media screen and (max-width: 768px) {
h1 {
height: 10em;
margin: 20cm 100mm;
padding: 5px 1px;
font-size: 1.5em;
line-height: 1.25;
}
body .ignore h2 {
padding: 5px 1px;
}
}
/* output */
@media screen and (max-width: 102.40000vw) {
h1 {
height: 10em;
margin: 200mm 100mm;
padding: 0.66667vw 1px;
font-size: 1.5rem;
line-height: 1.25;
}
body .ignore h2 {
padding: 5px 1px;
}
}
```