https://github.com/devmattrick/postcss-color-5

[WIP] PostCSS plugin to add support for CSS Color Module Level 5 (color-mix, color-contrast, color-adjust).
https://github.com/devmattrick/postcss-color-5

5 color color-adjust color-contrast color-mix css module postcss postcss-plugin

Last synced: about 1 month ago
JSON representation

[WIP] PostCSS plugin to add support for CSS Color Module Level 5 (color-mix, color-contrast, color-adjust).

• Host: GitHub
• URL: https://github.com/devmattrick/postcss-color-5
• Owner: devmattrick
• License: mit
• Created: 2021-02-08T18:53:08.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-02-09T06:37:35.000Z (almost 4 years ago)
• Last Synced: 2024-10-27T16:19:31.551Z (3 months ago)
• Topics: 5, color, color-adjust, color-contrast, color-mix, css, module, postcss, postcss-plugin
• Language: TypeScript
• Homepage:
• Size: 72.3 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# PostCSS Color 5

[PostCSS] plugin to add support for [CSS Color Module Level 5] (color-mix, color-contrast, color-adjust).

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

[CSS Color Module Level 5]: https://drafts.csswg.org/css-color-5/

```css

.foo {

  /* TODO */

}

```

```css

.foo {

  /* Output example */

}

```

## Compatibility Notice

This plugin currently tracks the [editor's draft] of CSS Color Module Level 5, which is still in a state of uncertainty.

This means that a lot of the syntax may change. This plugin follows semver and will not break existing setups, but just

be aware that the CSS you write now may not be standard when the draft is actually accepted! It also may break between

major versions of postcss-color-5.

[editor's draft]: https://drafts.csswg.org/css-color-5/

## Usage

**Step 1:** Install plugin:

```sh

npm install --save-dev postcss postcss-color-5

```

**Step 2:** Check you project for existing 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('postcss-color-5'),

    require('autoprefixer')

  ]

}

```

[official docs]: https://github.com/postcss/postcss#usage