https://github.com/jverneaut/postcss-experimental-p3-colors
https://github.com/jverneaut/postcss-experimental-p3-colors
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/jverneaut/postcss-experimental-p3-colors
- Owner: jverneaut
- Created: 2021-11-12T17:01:35.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-11-12T20:37:35.000Z (over 3 years ago)
- Last Synced: 2025-03-18T12:14:30.664Z (2 months ago)
- Language: JavaScript
- Homepage: https://elastic-jennings-af761f.netlify.app
- Size: 90.8 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# PostCSS Experimental P3 Colors
⚠️ This project is experimental and should not be used without a full understanding of its shortcomings.
## What is this?
This project is a PostCSS plugin that allows the display of colors from the Display-P3 color space on compatible monitors. It is a partial implementation of the syntax defined here: [color() - CSS: Cascading Style Sheets | MDN]()
Although Google Chrome currently allows the display of P3 tagged images, this proposal is only implemented in Safari as of november 2021.
## How does it work?
This implementation is quite naïve in its approach and should not be relied upon for Serious Business™.
Given a color defined as rgb in the following form:
```css
background: color(display-p3 0 0.5 0);
```
...this plugin will:
1. Map each rgb values to their 8 bits counterparts
2. Generate a temporary PNG File containing a single pixel of the provided color
3. Add metadata to the file to enable the Display-P3 color profile
4. Convert the image to base64
5. Replace the whole `color()` function with the inlined version of the base64 image.
## Limitations
The conversion happens at build time. As such :
- You can't animate colors applied using this method
- You can't use javascript to manipulate colors
- Each time a color is defined in CSS, ~740 bytes are added to your file.