# gulp-px2rem-converter

> Gulp plugin. Converts all properties in pixels to rem, also converts all media in pixels in em

Latest version **1.6.0** (published 2023-01-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install gulp-px2rem-converter
pnpm add gulp-px2rem-converter
yarn add gulp-px2rem-converter
bun add gulp-px2rem-converter
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.6.0 |
| Published | 2023-01-17 |
| First published | 2021-02-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 283.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Yevhenii Kleshchev |
| Maintainers | dasx10 |
| Keywords | gulpplugin, gulp, css, less, scss, converter, pixel, px, to, rem, em, rem2px, media2em, media |

## Links

- npm: https://www.npmjs.com/package/gulp-px2rem-converter
- Repository: https://github.com/dasx10/gulp-px-to-rem
- Homepage: https://github.com/dasx10/gulp-px-to-rem#readme
- Issues: https://github.com/dasx10/gulp-px-to-rem/issues
- npm.io page: https://npm.io/package/gulp-px2rem-converter

## Dependencies (1)

- [gulp-util](https://npm.io/package/gulp-util.md) ^3.0.8

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.6.0 (latest) — 2023-01-17
- 1.5.9 — 2021-02-22
- 1.5.8 — 2021-02-20
- 1.5.7 — 2021-02-20
- 1.5.6 — 2021-02-20
- 1.5.5 — 2021-02-20
- 1.5.4 — 2021-02-20
- 1.5.3 — 2021-02-20
- 1.5.2 — 2021-02-20
- 1.5.1 — 2021-02-20
- 1.5.0 — 2021-02-20
- 1.4.7 — 2021-02-19
- 1.4.6 — 2021-02-19
- 1.4.5 — 2021-02-19
- 1.4.4 — 2021-02-19
- … 15 more at https://npm.io/package/gulp-px2rem-converter/versions

## README

# gulp converter pixel to rem
[![Build Status](https://travis-ci.com/dasx10/gulp-px2rem-converter.svg?branch=master)](https://travis-ci.com/dasx10/gulp-px2rem-converter)
----
Convert all `px` to `rem`
## install

```
npm i -D gulp-px2rem-converter
```

## use
```
const gulp = require('gulp');
const pxToRem = require('gulp-px2rem-converter')

function css(){
    return gulp.src('./*.css')
    .pipe(pxToRem())
    .pipe(gulp.dest('./dist'))
}

module.exports.css = css;
```

If you are not using `:root` or `html` or they do not have a `font-size` then you can ignore it. The default value `16px` will be taken or you can specify this value manually
```
pxToRem(16)
```
or
```
pxToRem('16px')
```
or
```
pxToRem('100%')
```
## run
```
gulp css
```

## example
input
```
html{
    font-size: 62.5%;
}
div{
    padding: 160px;
    border:1px solid red;
}
@media (min-width:120px){
    div{
        padding: 120px;
    }
}
```
output
```
html{
    font-size: 62.5%;
}
div{
    padding: 16rem;
    border:0.1rem solid red;
}
@media (min-width:12em){
    div{
        padding: 12rem;
    }
}
```
## example use :root
input
```

:root{
    font-size: 20px;
}
html{
    font-size: 20px;
}
div{
    padding: 40px;
}
@media(min-width:1200px){
    div{
        padding: 60px;
    }
}
```
output
```
:root{
    font-size: 20px;
}
html{
    font-size: 1rem;
}
div{
    padding: 2rem;
}
@media(min-width:60em){
    div{
        padding: 3rem;
    }
}
```

----
## info

The plugin works with units such as `%` or `px`. If you are using other devices, do not use this plugin. Unable to compute units that are dynamic by the browser.

Also converts all `@media` to `em` where `px` was used. Using `em` will resize all dimensions to those specified by the user. `rem` is not used due to bugs in Safari browsers

The plugin is not case sensitive.
You can enter both `px` and `PX` or `Px`

Doesn't work if you use `font-size` in `:root` or `html`
in `@ media`.
By default will take only the first `font-size` in `:root` or `html` if there is no` font-size` value in `:root`

## compatibility

css less(http://lesscss.org/) scss

---
_Source: https://npm.io/package/gulp-px2rem-converter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._