https://github.com/metonym/postcss-inline-css-vars
PostCSS plugin to inline CSS variables
https://github.com/metonym/postcss-inline-css-vars
css-variables postcss postcss-plugin
Last synced: 4 months ago
JSON representation
PostCSS plugin to inline CSS variables
- Host: GitHub
- URL: https://github.com/metonym/postcss-inline-css-vars
- Owner: metonym
- License: mit
- Created: 2024-12-16T00:17:32.000Z (12 months ago)
- Default Branch: master
- Last Pushed: 2025-07-06T02:16:39.000Z (5 months ago)
- Last Synced: 2025-08-17T21:38:49.517Z (4 months ago)
- Topics: css-variables, postcss, postcss-plugin
- Language: TypeScript
- Homepage:
- Size: 32.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-inline-css-vars
> PostCSS plugin to inline `:root` CSS variables.
This PostCSS plugin inlines CSS custom properties (CSS variables) by replacing `var()` references with their actual values.
```diff
- :root {
- --primary-color: #000000;
- }
.button {
- color: var(--primary-color);
+ color: #000000;
}
```
Once processed, the `:root` CSS variables are removed from the output.
The plugin supports nested variables.
```css
:root {
--primary: #ff0000;
--button-color: var(--primary);
}
```
Non-existent CSS variables are removed from the output. The `:root` declaration will still be removed.
```css
:root {
--primary: #ff0000;
}
.button {
color: var(--button-color); /* Declaration is removed */
}
```
If the input contains `:root` declarations with other selectors, all `:root` declarations will be preserved.
For instance, the following example assumes dynamically applied themes. As such, CSS variables cannot be inlined without having to generate more CSS.
```css
:root {
--primary-color: #ffffff;
}
:root.dark {
--primary-color: #000000;
}
```
## Installation
```bash
# NPM
npm i -D postcss-inline-css-vars
# pnpm
pnpm i -D postcss-inline-css-vars
# Yarn
yarn add -D postcss-inline-css-vars
# Bun
bun add -D postcss-inline-css-vars
```
## Usage
### Basic Usage
```js
import { inlineCssVars } from "postcss-inline-css-vars";
postcss(inlineCssVars()).process(css);
```
## Changelog
[CHANGELOG.md](CHANGELOG.md)
## License
[MIT](LICENSE)