You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
We are using used-styles with Tailwind CSS in our project, and I noticed an issue with the critical CSS generation when classes contain unescaped characters, such as : or []. Examples of such classes include:
.md:mb-0
.text-[#000]
Tailwind CSS automatically escapes these classes during the CSS build process, transforming them into:
.md\:mb-0
.text-\[#000\]
However, when calling getCriticalStyles, your library cannot locate these classes correctly, as it searches for the unescaped versions (e.g., md:mb-0), while the build files contain their escaped counterparts (e.g., md\:mb-0).
Simulate a Tailwind-like scenario by adding the class md:mb-0 to a React component.
Define the corresponding CSS rule in the main CSS file, e.g., .md\:mb-0 { margin-bottom: 0; }.
Observe the result: the class md:mb-0 is not included in the critical styles.
Suggested Solution
Would it be possible to add support for Tailwind CSS in your library by escaping class names when searching them in the build files? This should resolve the issue.
Thanks.
The text was updated successfully, but these errors were encountered:
Hi! Thanks for the library.
We are using used-styles with Tailwind CSS in our project, and I noticed an issue with the critical CSS generation when classes contain unescaped characters, such as
:
or[]
. Examples of such classes include:.md:mb-0
.text-[#000]
Tailwind CSS automatically escapes these classes during the CSS build process, transforming them into:
.md\:mb-0
.text-\[#000\]
However, when calling
getCriticalStyles
, your library cannot locate these classes correctly, as it searches for the unescaped versions (e.g.,md:mb-0
), while the build files contain their escaped counterparts (e.g.,md\:mb-0
).Steps to Reproduce
md:mb-0
to a React component..md\:mb-0 { margin-bottom: 0; }
.md:mb-0
is not included in the critical styles.Suggested Solution
Would it be possible to add support for Tailwind CSS in your library by escaping class names when searching them in the build files? This should resolve the issue.
Thanks.
The text was updated successfully, but these errors were encountered: