Символ "<" внутри блока CSS превращается в бессмысленный мусор.

[Mitrotsky]

Наглядный пример того, как это выглядит:

И как это должно выглядеть:

Преобразование этого символа из "<" в "\003C" ломает как минимум следующий функционал CSS:

• At-правило property (MDN) - невозможно задать синтаксис создаваемой переменной.
• Функция type() (MDN) - невозможно задать тип.
  • Да, это экспериментальная функция.

edit: Дополнительно:

• range-синтаксис в медиавыражениях (W3) - все выражения со знаком "меньше" не считаются как валидный синтаксис.
• At-правило function (MDN) - невозможно задать тип для значений.
  • Экспериментальное аналогично функции type.

Это делает невозможным добавление такого синтаксиса на сайт без костылей - в текущем виде можно загрузить файл CSS на сайт и использовать at-правило import. Однако данный метод крайне неудобен для использования, поскольку при каждом изменении нужно удалять и загружать файл заново.

Раньше здесь был мат.

[jewalky]

Нужно собирать цсс на стороне JS, обходя синтаксис HTML. Тогда можно будет этот символ не ломать.

В текущем виде просто так взять и убрать нельзя, будет отверстие в движке