https://github.com/cytle/postcss-rpx2rem
postcss-rpx2rem
https://github.com/cytle/postcss-rpx2rem
Last synced: about 1 month ago
JSON representation
postcss-rpx2rem
- Host: GitHub
- URL: https://github.com/cytle/postcss-rpx2rem
- Owner: cytle
- License: mit
- Created: 2018-07-13T08:01:14.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-10-01T19:04:30.000Z (over 1 year ago)
- Last Synced: 2024-10-31T18:20:49.084Z (7 months ago)
- Language: JavaScript
- Size: 83 KB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# PostCSS Rpx2rem [![Build Status][ci-img]][ci]
[PostCSS] plugin rpx2rem.
[PostCSS]: https://github.com/postcss/postcss
[ci-img]: https://travis-ci.org/cytle/postcss-rpx2rem.svg
[ci]: https://travis-ci.org/cytle/postcss-rpx2rem```css
/* target */
.foo {
height: 20px;
padding: 75rpx 1rem 0 20rpx;
content: "20rpx";
}
``````css
/* output */
.foo {
height: 20px;
padding: 1rem 1rem 0 0.26667rem;
content: "20rpx";
}
```## Usage
```js
const rpx2rem = require('postcss-rpx2rem');
postcss([rpx2rem()])
```### options
Type: `Object | Null`
Default:
```js
{
targetUnit: 'rpx',
outputUnit: 'rem',
proportion: 10 / 750, // 10rem / 750rpx; proportion = ouput / target
unitPrecision: 5,
replace: true,
mediaQuery: false
}
```- `targetUnit` (String) The target unit you want to replace
- `outputUnit` (String) The unit you want to output
- `proportion` (Number) The proportion you want to convert; proportion = ouput / target
- `unitPrecision` (Number) The decimal numbers to allow the REM units to grow to.
- `replace` (Boolean) replaces rules containing rems instead of adding fallbacks.
- `mediaQuery` (Boolean) Allow px to be converted in media queries.