https://github.com/jomurgel/postcss-unit-conversion
PostCSS plugin for converting units from px to em or rem.
https://github.com/jomurgel/postcss-unit-conversion
css hacktoberfest postcss scss units
Last synced: 5 months ago
JSON representation
PostCSS plugin for converting units from px to em or rem.
- Host: GitHub
- URL: https://github.com/jomurgel/postcss-unit-conversion
- Owner: jomurgel
- License: mit
- Created: 2018-11-14T19:09:42.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-12-07T17:57:07.000Z (over 7 years ago)
- Last Synced: 2025-10-10T14:40:44.311Z (9 months ago)
- Topics: css, hacktoberfest, postcss, scss, units
- Language: JavaScript
- Homepage:
- Size: 74.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# PostCSS Unit Conversion [![Build Status][ci-img]][ci] [](https://opensource.org/licenses/MIT)
[PostCSS] plugin for converting units from px to em or rem. Removes the need for using scss mixins like `em()` or `rem()`. Write in px and convert on the fly.
[PostCSS]: https://github.com/postcss/postcss
[ci-img]: https://travis-ci.org/jomurgel/postcss-unit-conversion.svg
[ci]: https://travis-ci.org/jomurgel/postcss-unit-conversion
## Usage
Add to project via from [postcss-unit-conversion on npm](https://www.npmjs.com/package/postcss-unit-conversion) and set options below.
``` bash
$ npm install --save-dev postcss-unit-conversion
```
And add to your project and requrire.
``` js
postcss([
require( 'postcss-unit-conversion' )( options )
]);
```
Set optional options (defaults below).
``` js
var options = {
base: 16,
precision: 3,
toEM: [
'letter-spacing',
'text-shadow'
],
toREM: [
'box-shadow',
'font-size',
'margin',
'padding'
]
};
```
Anything not added to either `toEM` or `toREM` will retain px (or supplied) values.
## Conversion
### In
```css
.foo {
border: 2px solid blue;
border-radius: 2px;
box-shadow: 5px 10px #888;
font-size: 32px;
letter-spacing: 2px;
margin: 2px 0;
padding: 10px 0;
text-shadow: 2px 2px #f00;
}
```
### Out
```css
.foo {
border: 2px solid blue;
border-radius: 2px;
box-shadow: 0.313rem 0.625rem #888;
font-size: 2.000rem;
letter-spacing: 0.125em;
margin: 0.125rem 0;
padding: 0.625rem 0;
text-shadow: 0.125em 0.125em #f00;
}
```
## Testing
Run
``` bash
$ npm run test
```
Tests the code example above. Will test against options provided in your post css setup.
See [PostCSS] docs for examples for your environment.
## Roadmap
- Add ignore option to ignore conversion of certain elements or classes.
- Webpack testing and support.