Откуда и зачем в Create React App конвертация hsl в rgb?

Question

[Alex Karo]

Недавно столкнулся с тем, что цвета в hsl в инлайн стилях конвертируются в rgb при использовании сборки create-react-app

Пример:
https://codesandbox.io/s/agitated-fermat-7vts7

Проверил на чистом реакте - все норм, конвертации нет:
https://codepen.io/zarza666/pen/OJPyaRO

При этом я ловил такой баг, что оно пыталось конвертировать в compile time, а мне нужен был расчет цвета в runtime. Но в песочнице воспроизвести не вышло.

Есть у кого-то мысли, откуда взялась эта конвертация и зачем нужна?
Ни в гугле, ни на гитхабе я ответа на этот вопрос не нашел.

Comments

[Rustam Bainazarov]

Без понятия, я в этом не разбираюсь. Хочу лишь сказать, что у rgba поддержка браузеров лучше. Так что это даже плюс.

Answer 1

[Danila]

делает это не CRA или реакт, а браузер, в примере на codepen у тебя используется древняя версия реакта, от того и результаты разные.
попробуй
document.body.style.color = 'hsl(10, 10%, 10%)';
если честно, не вижу в этом никакой проблемы, ты ведь внутри реакта работаешь с hsl значением, так какая разница во что он там конвертирует на выходе.
проблема может возникнуть если только ты будешь читать атрибут напрямую у DOM элемента, и тебе нужен будет hsl, но в таком случае ты что-то делаешь неправильно.

Comments

[Alex Karo]

Оу, версию не проверил, с какого-то другого пена брал
Получается, по CRA ошибался
А это поведение где-то в доках описано?

[Alex Karo]

Нет, читать стиль из DOM не требуется, но отладке несколько мешает
Когда вместо ожидаемого значения ты получаешь не тот цвет, а с точки зрения кода и console.log все нормально - не понятно, куда копать

[Danila]

Alex Karo, цвет один и тот же, только формат другой
почему браузер так делает я не знаю, в спеках ECMAScript работа с цветами осуществляется только через RGBColor, видимо поэтому браузеры и конвертируют в него, это касается не только HSL

[Alex Karo]

Данила,
Хм? Браузер?
В браузерах, вроде, все норм - там ничего не конвертируется (во всяком случае для "пользователя")
HSL добавлен в CSS3 и описан этой спекой https://drafts.csswg.org/css-color-3/#hsl-color

Полагаю, за конвертацию должен отвечать ReactDOM, но ничего такого в исходниках найти не могу

[Alex Karo]

А, ecmascript...
А там описана работа с цветом?

[Danila]

Alex Karo, реакт тут не причем, браузер все цвета конвертирует в RGB, цсс в том числе (можешь посмотреть в dev tools > computed styles элемента)

[Alex Karo]

А, осознал =)
Хм...
Тогда почему старый реакт выдавал в инлайн стилях hsl?
Ладно, это уже не так важно =)

[Alex Karo]

Похоже, не конвертирует, если использовать setAttribute

[Danila]

Alex Karo, видимо старый реакт иначе применял инлайновые стили, возможно даже через setAttribute