Tailwind CSS генерирует неправильный скомпилированный CSS для экранированных символов строк JavaScript. ⇐ Javascript

[Anonymous]

При передаче имени класса TailwindCSS в виде строки мне не нужно экранировать обратную косую черту, чтобы включить его в виде строки. Поскольку TailwindCSS анализирует исходный код напрямую, это также приводит к правильному созданию CSS:

Код: Выделить всё

 {/* class="after:content-['\a0_·_']" */}

Код: Выделить всё

@layer utilities {
/* for after:content-['\a0_·_'] */
.after\:content-\[\'\\a0_·_\'\] {
&::after {
--tw-content: '\a0 · ';
content: var(--tw-content);
}
}
}

Однако при передаче в выражении JSX обратная косая черта рассматривается как специальный символ, поэтому ее необходимо экранировать, чтобы представить в виде строки. В этом случае сгенерированный CSS, соответствующий классу в исходном коде, неверен, поскольку он не учитывает, что двойная обратная косая черта в исходном коде становится одинарной обратной косой чертой в выходных данных JSX.
В этом случае TailwindCSS сгенерирует правильный CSS, но JSX не передает обратную косую черту в виде строки

Код: Выделить всё

 {/* class="after:content-['a0_·_']" */}

поэтому мне придется использовать следующий вариант:

Код: Выделить всё

 {/* class="after:content-['\a0_·_']" */}

И TailwindCSS интерпретирует это так, как если бы обе обратные косые черты были сохранены как обычный текст в коде JSX:

Код: Выделить всё

@layer utilities {
/* for after:content-['\\a0_·_'] */
.after\:content-\[\'\\\\a0_·_\'\] {
&::after {
--tw-content: '\\a0 · ';
content: var(--tw-content);
}
}
}

Как я могу гарантировать, что даже несмотря на то, что мне приходится использовать двойную обратную косую черту в коде JSX, TailwindCSS по-прежнему правильно генерирует имя класса с одной обратной косой чертой?


Подробнее здесь: https://stackoverflow.com/questions/798 ... f-javascri