https://github.com/johnwatkins0/postcss-custom-prop-fallbacks

Provides fallbacks for custom properties set in :root.
https://github.com/johnwatkins0/postcss-custom-prop-fallbacks

css-custom-properties postcss

Last synced: 2 days ago
JSON representation

Provides fallbacks for custom properties set in :root.

• Host: GitHub
• URL: https://github.com/johnwatkins0/postcss-custom-prop-fallbacks
• Owner: johnwatkins0
• License: mit
• Created: 2017-09-04T18:05:50.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-04-29T19:47:47.000Z (over 6 years ago)
• Last Synced: 2024-04-23T23:46:47.693Z (7 months ago)
• Topics: css-custom-properties, postcss
• Language: JavaScript
• Size: 46.9 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# postcss-custom-prop-fallbacks

Provides fallbacks for custom properties set in :root. The plugin **does not** remove the original rule that uses the custom property, but rather places a fallback on the line above for browsers that don't recognize the feature. See the example below.

## Install

```

npm install --save-dev postcss-custom-prop-fallbacks

```

## Usage

### Postcss.config.js

```Javascript

const customPropFallbacks = require('postcss-custom-prop-fallbacks');

module.exports = {

  plugins: [customPropFallbacks],

};

```

The following input:

```CSS

:root {

  --gutter: 1.5rem;

  --brand-primary: #002878;

}

.some-element {

  background-color: var(--brand-primary);

  margin-right: calc(var(--gutter) * 1.3333);

}

```

Will produce the following:

```CSS

:root {

  --gutter: 1.5rem;

  --brand-primary: #002878;

}

.some-element {

  background-color: #002878;

  background-color: var(--brand-primary);

  margin-right: calc(1.5rem * 1.3333);

  margin-right: calc(var(--gutter) * 1.3333);

}

```