https://github.com/lab4studio/postcss-px-to-rem
PostCSS plugin that automatically converts pixel (px) values to rem units in your CSS, allowing for scalable and responsive designs by basing measurements on the root font size.
https://github.com/lab4studio/postcss-px-to-rem
postcss postcss-plugin px-to-em px-to-rem
Last synced: 4 months ago
JSON representation
PostCSS plugin that automatically converts pixel (px) values to rem units in your CSS, allowing for scalable and responsive designs by basing measurements on the root font size.
- Host: GitHub
- URL: https://github.com/lab4studio/postcss-px-to-rem
- Owner: lab4studio
- License: mit
- Created: 2025-04-06T16:11:49.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-17T09:10:23.000Z (about 1 year ago)
- Last Synced: 2025-10-01T12:39:45.028Z (9 months ago)
- Topics: postcss, postcss-plugin, px-to-em, px-to-rem
- Language: JavaScript
- Homepage:
- Size: 65.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# postcss-px-to-rem
A lightweight [PostCSS](https://github.com/postcss/postcss) plugin that converts pixel (`px`) units to relative `rem` or `em` units—improving scalability and accessibility in your CSS.
```css
h1 {
@apply text-[length:rem(32px_16px_3)];
}
```
---
## Installation
Install via npm:
```bash
npm install -D @lab4studio/postcss-px-to-rem
```
Then add the plugin to your `postcss.config.cjs`:
```js
module.exports = {
plugins: {
'@lab4studio/postcss-px-to-rem': {
base: 16,
precision: 2,
},
},
};
```
> **Note:** Both `base` and `precision` options are optional. Defaults are `base: 16` and `precision: 4`.
---
## Why use it?
While pixel units are convenient, they do not scale with user preferences—such as browser-level font size settings. This plugin allows you to retain the simplicity of `px` while outputting responsive and accessible `rem`/`em` values.
---
## Usage
This plugin parses and converts any `rem(...)` or `em(...)` functions inside your CSS values:
```css
h1 {
@apply text-[length:rem(32px_16px_3)];
}
{{ markdown }}
```
> **Note:** You can omit the unit if using the plugin in a compatible utility or expression context.
---
## Input → Output Example
```css
/* Input */
h1 {
margin: 0 0 rem(16px);
font-size: rem(20px_10);
line-height: 1.2;
letter-spacing: em(1px);
}
```
```css
/* Output */
h1 {
margin: 0 0 1rem;
font-size: 2rem;
line-height: 1.2;
letter-spacing: 0.0625em;
}
```
---
## Plugin Options
```js
{
base: 16, // Base font size to calculate rem/em values
precision: 5 // Decimal precision for converted values
}
```
- **`base`** (`number`) – The root font size used as a reference for conversion.
- **`precision`** (`number`) – Number of decimal places to retain in the result.
---
## License
MIT License – see [LICENSE-MIT](./LICENSE-MIT) for details.