0.0.3 • Published 2 years ago
postcss-transform-variables v0.0.3
postcss-transform-variables
PostCSS plugin that transforms identifiers of CSS custom properties.
Example
: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
# 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
).
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 filerawCss
: thecss
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.