https://github.com/silvermine/postcss-css-var-fallback
PostCSS plugin to insert fallbacks for CSS Custom Properties
https://github.com/silvermine/postcss-css-var-fallback
css css-custom-properties css-variables postcss
Last synced: about 1 year ago
JSON representation
PostCSS plugin to insert fallbacks for CSS Custom Properties
- Host: GitHub
- URL: https://github.com/silvermine/postcss-css-var-fallback
- Owner: silvermine
- License: mit
- Created: 2021-08-31T15:00:59.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-08-23T00:19:02.000Z (almost 2 years ago)
- Last Synced: 2025-03-25T15:04:39.662Z (about 1 year ago)
- Topics: css, css-custom-properties, css-variables, postcss
- Language: JavaScript
- Homepage:
- Size: 359 KB
- Stars: 1
- Watchers: 3
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# PostCSS CSS Var Fallback
[](https://www.npmjs.com/package/@silvermine/postcss-css-var-fallback)
[](./LICENSE)
[](https://travis-ci.com/silvermine/postcss-css-var-fallback)
[](https://coveralls.io/github/silvermine/postcss-css-var-fallback?branch=main)
[](https://david-dm.org/silvermine/postcss-css-var-fallback)
[](https://david-dm.org/silvermine/postcss-css-var-fallback#info=devDependencies&view=table)
[](https://conventionalcommits.org)
[PostCSS] plugin to insert fallbacks for CSS vars.
[PostCSS]: https://github.com/postcss/postcss
```css
.foo {
/* Input example */
color: var(--color, #4a6da7);
}
```
```css
.foo {
/* Output example */
color: #4a6da7;
color: var(--color, #4a6da7);
}
```
## Usage
**Step 1:** Install plugin:
```sh
npm install --save-dev postcss @silvermine/postcss-css-var-fallback
```
**Step 2:** Check you project for existed PostCSS config: `postcss.config.js`
in the project root, `"postcss"` section in `package.json`
or `postcss` in bundle config.
If you do not use PostCSS, add it according to [official docs]
and set this plugin in settings.
**Step 3:** Add the plugin to plugins list:
```diff
module.exports = {
plugins: [
+ require('@silvermine/postcss-css-var-fallback'),
require('autoprefixer')
]
}
```
## Limitations
Be aware that this plugin does not add a fallback for declarations with `var` statements
when there is more than one declaration for a given CSS property in a single rule.
For example, this plugin will not add a fallback for the `var` statement in this case:
```css
.example {
color: red;
color: var(--textColor, #333);
}
```
The plugin assumes that the previous `color: red` declaration is a fallback. This prevents
the plugin from having to parse the `var(--textColor, #333)` statement and compare the
fallback there with any other `color:` declaration values. We found that such a check
impacted performance enough that it was not worth the cost.
To avoid incorrect or missing fallbacks, ensure that the CSS that you write does not have
extraneous/duplicate declarations for the same CSS property.
[official docs]: https://github.com/postcss/postcss#usage