https://github.com/kelvindecosta/postcss-transform-variables
:electric_plug: PostCSS plugin that transforms identifiers of CSS custom properties.
https://github.com/kelvindecosta/postcss-transform-variables
css css-variables custom-properties obfuscation postcss postcss-plugin transformer
Last synced: 5 months ago
JSON representation
:electric_plug: PostCSS plugin that transforms identifiers of CSS custom properties.
- Host: GitHub
- URL: https://github.com/kelvindecosta/postcss-transform-variables
- Owner: kelvindecosta
- License: mit
- Created: 2022-08-13T20:20:39.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-12-01T09:06:40.000Z (over 3 years ago)
- Last Synced: 2025-09-13T04:52:29.356Z (10 months ago)
- Topics: css, css-variables, custom-properties, obfuscation, postcss, postcss-plugin, transformer
- Language: TypeScript
- Homepage:
- Size: 87.9 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# postcss-transform-variables
[](https://github.com/postcss/postcss-transform-variables/blob/master/CHANGELOG.md)
[](https://postcss.org/)
[](https://github.com/kelvindecosta/postcss-transform-variables/actions/workflows/ci.yml)
[](https://github.com/kelvindecosta/postcss-transform-variables/blob/main/LICENSE)
[PostCSS] plugin that transforms identifiers of [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*).
[postcss]: https://github.com/postcss/postcss
## Example
```diff
:root {
+ --kd-padding-y: 2px;
+ --kd-padding-x: 4px;
- --padding-y: 2px;
- --padding-x: 4px;
}
p {
+ padding-block: var(--kd-padding-y) var(--kd-padding-x);
- padding-block: var(--padding-y) var(--padding-x);
}
```
## Installation
```bash
# NPM
npm i -D postcss-transform-variables
# Yarn
yarn i -D postcss-transform-variables
# pnpm
pnpm i -D postcss-transform-variables
```
## Usage
Include `postcss-transform-variables` in the PostCSS configuration (eg: `postcss.config.js`).
```js
module.exports = {
plugins: [
require('postcss-transform-variables')({
transform: ({ identifier }) => `web-${identifier}`
})
]
};
```
## Options
### `transform`
Will be applied on the identifier of each custom property.
#### Type: `Function`
##### Arguments:
- `fields`:
- `identifier`: the name of the custom property without the double hyphen (`--`)
- `filepath`: the path to the file
- `rawCss`: the `css` string
##### Returns: `string`
#### Default: `({ identifier }) => identifier`
### `warnOnDetectCollision`
Whether to warn on collisions; when the identifiers of two custom properties transform to the same new identifier.
#### Type: `boolean`
#### Default: `true`
### `warnOnDetectNonDeterminism`
Whether to warn when a non-deterministic `transform` is detected; when two new identifiers are transformed from the identifier of the same custom property.
#### Type: `boolean`
#### Default: `true`