lightningcss

lightningcss copied to clipboard

For example:

.text-red-200 {
  --tw-text-opacity: 1;
  color: oklch(92.19% 0.04 20 / var(--tw-text-opacity));
}

can be transpiled to something like this: (similar to how postcss-oklab-function does)

.text-red-200 {
  --tw-text-opacity: 1;
  color: rgba(255, 219, 218, var(--tw-text-opacity));
}

@supports (color: color(display-p3 0 0 0)) and (top: var(--f)) {
  .text-red-200 {
    color: color(display-p3 0.9775 0.86513 0.8587 / var(--tw-text-opacity));
  }
}

@supports (color: oklch(0% 0 0)) and (top: var(--f)) {
  .text-red-200 {
    color: oklch(92.19% 0.04 20 / var(--tw-text-opacity));
  }
}

Yeah that could probably be done. We already do it for rgb and hsl. Would be a matter of adding it in here if someone is interested in contributing. https://github.com/parcel-bundler/lightningcss/blob/9b3e6f425b1132243930737f306cb864b7b892d0/src/properties/custom.rs#L1496-L1617

I'm not much familiar with Rust 😅 Gave it a try, but looks like somehow fallbacks would also need to be generated in UnresolvedColor > to_css ? Someone from the community or the team might be better able to solve this.