https://github.com/yarastqt/postcss-theme-fallback

A postcss plugin to adding fallback values for css-variables
https://github.com/yarastqt/postcss-theme-fallback

css-vars css-vars-fallback postcss postcss-plugin

Last synced: 12 days ago
JSON representation

A postcss plugin to adding fallback values for css-variables

• Host: GitHub
• URL: https://github.com/yarastqt/postcss-theme-fallback
• Owner: yarastqt
• License: mit
• Created: 2021-01-18T04:40:44.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2021-01-25T11:59:56.000Z (almost 4 years ago)
• Last Synced: 2024-11-05T11:50:39.987Z (about 2 months ago)
• Topics: css-vars, css-vars-fallback, postcss, postcss-plugin
• Language: TypeScript
• Homepage:
• Size: 120 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# postcss-theme-fallback [][postcss]

[![NPM Version][npm-img]][npm-url] [![github (ci)][github-ci]][github-ci]

A postcss plugin to adding fallback values for css-variables.

## ✈️ Install

```sh

npm i -DE postcss-theme-fallback

```

## ☄️ Usage

```js

// postcss.config.js

module.exports = {

  plugins: [

    require('postcss-theme-fallback')({

      // Use variables from object:

      variables: {

        '--var-a': '10px',

        '--var-b': '20px',

      },

      // Or load variables from theme:

      // themeSource: './src/theme/acme.css',

    }),

  ],

}

```

### Options

| Name                                  | Description                                            | Default |

|---------------------------------------|--------------------------------------------------------|---------|

| `variables?` *Record* | Object with theme variables                            |         |

| `themeSource?` *string*               | A source path to theme, uses for extract css-variables |         |

| `silent?` *boolean*                   | Disable warnings output                                | false   |

## 🌈 Example

```css

/* input.css */

.component {

  width: var(--var-a);

}

/* output.css */

.component {

  width: var(--var-a, 10px);

}

```

## License

Project is [MIT licensed](https://github.com/yarastqt/postcss-theme-fallback/blob/master/LICENSE.md).

[npm-img]: https://img.shields.io/npm/v/postcss-theme-fallback.svg

[npm-url]: https://www.npmjs.com/package/postcss-theme-fallback

[github-ci]: https://github.com/yarastqt/postcss-theme-fallback/workflows/ci/badge.svg?branch=master

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