Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Color Format issues #558

Closed
meza opened this issue Apr 28, 2024 · 2 comments
Closed

Color Format issues #558

meza opened this issue Apr 28, 2024 · 2 comments
Labels
bug Something isn't working

Comments

@meza
Copy link

meza commented Apr 28, 2024

Describe the issue

Custom color formats are disregarded in the generated css.
Currently it all gets converted to lab

image

Expected behavior

When using any custom color format like hls or oklch, the generated CSS should retain those formats.

Steps to reproduce

Using:

win32-x64
vite/5.2.10
node-v21.7.1
stylex: 0.6.1
vite-plugin-stylex-dev: 0.6.1
remix: 2.9.1

Define color variables that use specific color formats.

Test case

import * as stylex from '@stylexjs/stylex';

const hues = {
  amber: 73.12
};

export const colours = stylex.defineVars({
  amber01: 'hsl(45,88%,6%)',
  amber02: `oklch(22.05% 0.046 ${hues.amber}deg)`,
  amber03: `oklch(25.32% 0.056 ${hues.amber}deg)`,
  amber04: `oklch(28.43% 0.0638 ${hues.amber}deg)`,
  amber05: `oklch(31.66% 0.0709 ${hues.amber}deg)`,
  amber06: `oklch(35.74% 0.0786 ${hues.amber}deg)`,
  amber07: `oklch(40.86% 0.088 ${hues.amber}deg)`,
  amber08: `oklch(47.33% 0.1045 ${hues.amber}deg)`,
  amber09: `oklch(81.69% 0.1638 ${hues.amber}deg)`,
  amber10: `oklch(86.59% 0.1539 ${hues.amber}deg)`,
  amber11: `oklch(76.93% 0.162 ${hues.amber}deg)`,
  amber12: `oklch(96.7% 0.031 ${hues.amber}deg)`
});

Additional comments

I tried with the vite-stylex-plugin and I tried with the vite-stylex-plugin-dev.
My styles that aren't through stylex come out untouched on the other end of my build chain, as expected.

@meza meza added the bug Something isn't working label Apr 28, 2024
@meza
Copy link
Author

meza commented Apr 28, 2024

What I just realised is that it gets converted to rgb as a default!
image

@meza
Copy link
Author

meza commented Apr 30, 2024

Ignore this, lightningcss was the culprit!

@meza meza closed this as completed Apr 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant