fix: do not handle non-ASCII whitespace as separator (#246)

Author: uhyo

lib/util/ast.js

@@ -217,7 +217,7 @@ function extractClassnamesFromValue(classStr) {
   if (typeof classStr !== 'string') {
     return { classNames: [], whitespaces: [], headSpace: false, tailSpace: false };
   }
-  const separatorRegEx = /(\s+)/;
+  const separatorRegEx = /([\t\n\f\r ]+)/;
   let parts = classStr.split(separatorRegEx);
   if (parts[0] === '') {
     parts.shift();

lib/util/prettier/order.js

@@ -45,7 +45,7 @@ function sortClasses(classStr, { env, ignoreFirst = false, ignoreLast = false })
   }
 
   let result = '';
-  let parts = classStr.split(/(\s+)/);
+  let parts = classStr.split(/([\t\n\f\r ]+)/);
   let classes = parts.filter((_, i) => i % 2 === 0);
   let whitespace = parts.filter((_, i) => i % 2 !== 0);
 

tests/lib/rules/classnames-order.js

@@ -278,6 +278,9 @@ ruleTester.run("classnames-order", rule, {
       `,
       options: skipClassAttributeOptions,
     },
+    {
+      code: `<div class="py-1\u3000px-2 block">Do not treat full width space as class separator</div>`,
+    },
   ],
   invalid: [
     {
@@ -913,7 +916,7 @@ ruleTester.run("classnames-order", rule, {
       code: `
       <template>
         <div v-bind="data" :class="[
-          'py-1.5 font-semibold transition', 
+          'py-1.5 font-semibold transition',
           {
             'text-white': variant === 'white',
             'text-blue-500 hover:text-blue-400 border-blue-500': variant === 'primary',
@@ -924,7 +927,7 @@ ruleTester.run("classnames-order", rule, {
       output: `
       <template>
         <div v-bind="data" :class="[
-          'py-1.5 font-semibold transition', 
+          'py-1.5 font-semibold transition',
           {
             'text-white': variant === 'white',
             'border-blue-500 text-blue-500 hover:text-blue-400': variant === 'primary',

tests/lib/rules/no-custom-classname.js

@@ -1398,5 +1398,13 @@ ruleTester.run("no-custom-classname", rule, {
       ],
       errors: generateErrors("yolo custom"),
     },
+    {
+      code: `<div className="px-1\u3000py-2">Full-width space between classes</div>`,
+      errors: generateErrors("px-1\u3000py-2"),
+    },
+    {
+      code: `<div className="\u3000px-1 py-2\u3000">Full-width space before and after classes</div>`,
+      errors: generateErrors("\u3000px-1 py-2\u3000"),
+    },
   ],
 });