https://github.com/stipsan/postcss-custom-properties-fallback

Adds fallbacks to your CSS var() functions
https://github.com/stipsan/postcss-custom-properties-fallback

Last synced: 17 days ago
JSON representation

Adds fallbacks to your CSS var() functions

• Host: GitHub
• URL: https://github.com/stipsan/postcss-custom-properties-fallback
• Owner: stipsan
• License: mit
• Created: 2020-11-20T13:27:16.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2024-09-16T17:36:17.000Z (about 2 months ago)
• Last Synced: 2024-10-18T11:38:28.973Z (26 days ago)
• Language: JavaScript
• Homepage:
• Size: 859 KB
• Stars: 2
• Watchers: 2
• Forks: 2
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# PostCSS Custom Properties Fallback

This plugins adds fallbacks to your [CSS Custom Properties] and works well as a compantion to [PostCSS Custom Properties].

## Pop Quiz!

If we remove `--color` from `:root`, what color will `h1` have in modern browsers?

```diff

:root {

-  --color: red;

}

body {

  color: green;

}

h1 {

  color: red;

  color: var(--color);

}

```

### Red or green, expand the right answer (no cheating/googling!):

  h1 is red

![The text "Wrong answer!" over a cat screaming while firing an automatic rifle](https://user-images.githubusercontent.com/81981/99829641-d6766100-2b5c-11eb-9d0d-efaa7e45cd1b.gif)

Nope, it's `green`!

Intuitively it's easy to think that if `--color` isn't defined, then the browser should skip the `color: var(--color)` and use the valid `color: red` above it.

Especially since this is what happens in [older browsers](https://caniuse.com/css-variables) that don't support [CSS Custom Properties].

The right answer is to use the second argument in `var()` (see [Example 10 in the spec](https://www.w3.org/TR/2015/CR-css-variables-1-20151203/#substitute-a-var)), also known as the fallback argument:

```css

color: var(--color, red);

```

Now it works like expected. See the spec for [more information on how invalid/missing values are treated](https://www.w3.org/TR/css-variables-1/#invalid-variables).

  h1 is green

![The text "Yes!" over a smiling and nodding Jack Nicholson](https://user-images.githubusercontent.com/81981/99828721-9d89bc80-2b5b-11eb-9c73-9628a678194b.gif)

Right answer! Check the wrong answer to learn why that is.

## Usage

Add [PostCSS Custom Properties Fallback] to your project:

```bash

npm install postcss-custom-properties-fallback --save-dev

```

Use it as a [PostCSS] plugin:

```js

const postcss = require('postcss');

const postcssCustomPropertiesFallback = require('postcss-custom-properties-fallback');

postcss([postcssCustomPropertiesFallback(/* pluginOptions */)]).process(

  YOUR_CSS /*, processOptions */

);

```

## Options

### importFrom

The `importFrom` option is required. It works [like](https://github.com/postcss/postcss-custom-properties/blob/master/README.md#importfrom) from [CSS Custom Properties], except it doesn't support importing from CSS [yet](https://github.com/stipsan/postcss-custom-properties-fallback/blob/153ed0bed5684641e466a8c0197abbe587144f8b/src/import-from.js#L11).

```js

postcssCustomPropertiesFallback({

  importFrom: { customProperties: { '--color': 'red' } },

});

```

```pcss

h1 {

  color: var(--color);

}

/* becomes */

h1 {

  color: var(--color, red);

}

```

[css custom properties]: https://www.w3.org/TR/css-variables-1/

[postcss]: https://github.com/postcss/postcss

[postcss custom properties]: https://github.com/postcss/postcss-custom-properties

[postcss custom properties fallback]: https://github.com/stipsan/postcss-custom-properties-fallback