Prefix CSS custom properties (CSS variables) with PostCSS.
npm install postcss-prefix-custom-properties> Prefix CSS custom properties (CSS variables) with PostCSS.
``bash`
npm i --d postcss-prefix-custom-properties
`css--ignored
/ Input (ignoring and squircle) /
:root {
--brand-color: #ff4757;
--fg: #333;
--bg: #ccc;
--ignored: 42px;
color: light-dark(var(--fg), var(--bg));
}
.button {
color: var(--brand-color);
border-radius: var(--squircle-radius, 8px);
padding: var(--ignored);
}
`
`css
/ Output /
:root {
--bs-brand-color: #ff4757;
--bs-fg: #333;
--bs-bg: #ccc;
--ignored: 42px;
color: light-dark(var(--bs-fg), var(--bs-bg));
}
.button {
color: var(--bs-brand-color);
border-radius: var(--squircle-radius, 8px);
padding: var(--ignored);
}
`
Add the plugin to your PostCSS configuration:
`js
// postcss.config.cjs
const prefixCustomProperties = require('postcss-prefix-custom-properties');
module.exports = {
plugins: [
prefixCustomProperties({
prefix: 'bs-',
ignore: ['--no-prefix', /^legacy-/]
})
]
};
`
- prefix (string, default ''): The prefix to prepend to every custom property name.ignore
- (array, default []): List of custom properties to leave untouched. Items can be--
literal strings (with or without the leading ) or regular expressions. Regular expressions--brand-color
are tested against both the full custom property name (e.g. ) and the namebrand-color
without the leading dashes (e.g. ).
Both declarations and usages (inside var() functions) are updated, as well as @property rules.
A small playground is available in example/. Run the script below to generate prefixed CSS intoexample/dist/output.css (the directory is gitignored).
`bash`
npm install
npm run example
The generated CSS demonstrates the plugin's behavior when applying a bs- prefix and ignoring--ignored
variables that match either the string or the regex /squircle/`.