Hello, recently applying prettier-plugin-tailwindcss broke our styling 😭 so here is a fix.

Problem

According to the web standard, HTML's class attribute is split by ASCII whitespace into a set of classes. In other words, non-ASCII whitespace characters are not class separators.

For example, px-1　py-2 is one class (notice that the spece in between is a U+3000), not two classes (px-1 and py-2).

However, this plugin wrongly treats non-ASCII whitespace as a class separator, which may lead to unintended change of meaning of code.

The concrete scenario is that, when I newly applied prettier-plugin-tailwindcss to our project there was code like:

<div className="relative w-full px-1[U+3000]z-10" />

where px-1 and z-10 weren't effective due to the U+3000.

After applying this plugin this turned into:

<div className="relative z-10 w-full[U+3000]px-1" />

Now z-10 revived and w-full went ineffective instead, which led to unwanted styling change.

Solution

This PR fixes the problem by treating only ASCII whitespace as separators.

Note

Of course use of U+3000 is a mistake and should have been prevented by some sort of linting. However, eslint-plugin-tailwindcss had the same issue 😢