https://github.com/postcss/postcss-relative-opacity
PostCSS plugin to add opacity to any colors with Relative Color Syntax
https://github.com/postcss/postcss-relative-opacity
Last synced: 3 months ago
JSON representation
PostCSS plugin to add opacity to any colors with Relative Color Syntax
- Host: GitHub
- URL: https://github.com/postcss/postcss-relative-opacity
- Owner: postcss
- License: mit
- Created: 2023-11-29T14:57:55.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-29T16:28:36.000Z (about 2 years ago)
- Last Synced: 2024-04-14T02:32:52.810Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 40 KB
- Stars: 14
- Watchers: 9
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# PostCSS Relative Opacity
[PostCSS] plugin to add opacity to any color with [Relative Color Syntax].
CSS Colors 5 allows you to change any color including adding opacity. This
syntax gained [broad support] in mid-2024, but for older browsers, this plugin
partially polyfills this syntax via [`color-mix()`].
```css
.notice {
background: oklch(from var(--accent-color) l c h / 30%);
}
```
will be processed to:
```css
.notice {
background: color-mix(in srgb, var(--accent-color) 30%, transparent);
}
```
This polyfill is based on [Adam Argyle idea].
---
Made at Evil Martians, product consulting for developer tools.
---
[Relative Color Syntax]: https://www.w3.org/TR/css-color-5/#relative-color
[broad support]: https://caniuse.com/css-relative-colors
[Adam Argyle idea]: https://twitter.com/argyleink/status/1633681345607241730?s=20
[`color-mix()`]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix
[PostCSS]: https://github.com/postcss/postcss
## Usage
**Step 1:** Install plugin:
```sh
npm install --save-dev postcss postcss-relative-opacity
```
**Step 2:** Check your 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-relative-opacity'),
require('autoprefixer')
]
}
```
[official docs]: https://github.com/postcss/postcss#usage