https://github.com/csstools/custom-units
Use Custom Units in CSS
https://github.com/csstools/custom-units
Last synced: 11 months ago
JSON representation
Use Custom Units in CSS
- Host: GitHub
- URL: https://github.com/csstools/custom-units
- Owner: csstools
- Created: 2022-08-02T12:26:53.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-12-27T18:04:17.000Z (about 1 year ago)
- Last Synced: 2025-04-19T11:04:21.383Z (11 months ago)
- Language: JavaScript
- Size: 6.84 KB
- Stars: 19
- Watchers: 6
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# PostCSS Custom Units
**PostCSS Custom Units** lets you use custom units in CSS, following the [CSSWG Proposal](https://github.com/w3c/csswg-drafts/issues/7379).
```pcss
:root {
/** Step (approximately 4px when 1rem is 16px) */
--step: .25rem;
/** Relative Pixel (approximately 1px when 1rem is 16px) */
--rpx: .0625rem;
}
.my-component {
font-size: 24--rpx;
padding-inline: 3--step;
}
/* becomes */
:root {
/** Step (approximately 4px when 1rem is 16px) */
--step: .25rem;
/** Relative Pixel (approximately 1px when 1rem is 16px) */
--rpx: .0625rem;
}
.my-component {
font-size: max(24 * var(--rpx));
padding-inline: max(3 * var(--step));
}
```
## Usage
Add **PostCSS Custom Units** to your project:
```shell
npm install @csstools/custom-units --save-dev
```
Use **PostCSS Custom Units** to process your CSS:
```js
const postcssCustomUnits = require('@csstools/custom-units');
postcssCustomUnits.process(YOUR_CSS /*, processOptions, pluginOptions */);
```
Or use it as a **PostCSS** plugin:
```js
const postcss = require('postcss');
const postcssCustomUnits = require('@csstools/custom-units');
postcss([
postcssCustomUnits(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
```