fix: handle bracketed classes like [--trigger-over]

package.json

@@ -2,7 +2,7 @@
 	"name": "@kalimahapps/eslint-plugin-tailwind",
 	"description": "Provide eslint rules for tailwindcss",
 	"author": "khr2003",
-	"version": "1.0.8",
+	"version": "1.0.9",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/kalimahapps/eslint-plugin-tailwind.git"

rules/sort.js

@@ -229,6 +229,18 @@ class Tailwind {
 
 		const classListClone = [...this.classesList];
 
+		/**
+		 * Get bracketed classes.
+		 * Library like https://preline.co/ uses this syntax `[--trigger:hover]`
+		 * which causes the regex to break.
+		 */
+		const bracketedClasses = classListClone.filter((className) => {
+			return className.startsWith('[') && className.endsWith(']');
+		});
+
+		// remove bracketed classes from the list
+		this.removeFromArray(this.classesList, bracketedClasses);
+
 		// Loop through the classes and get classnames without any prefixes
 		this.classesList.forEach((className) => {
 			const canProceed = this.shouldSortClass(className);

tests/index.test.js

@@ -144,7 +144,7 @@ ruleTester.run('multiline', multlineRule, {
 						text-yellow-500"
 					></div>
 				`,
-			errors: [{message: 'Classes should be in multiple lines'}],
+			errors: [{ message: 'Classes should be in multiple lines' }],
 		},
 		{
 			code: `<template>
@@ -163,8 +163,8 @@ ruleTester.run('multiline', multlineRule, {
 						"
 					></div>
 				`,
-			options: [{quotesOnNewLine: true}],
-			errors: [{message: 'Classes should be in multiple lines'}],
+			options: [{ quotesOnNewLine: true }],
+			errors: [{ message: 'Classes should be in multiple lines' }],
 		},
 	],
 });
@@ -177,6 +177,9 @@ ruleTester.run('sort', sortRule, {
 		{
 			code: '<template><div class="grid grid-cols-2"></div></template>',
 		},
+		{
+			code: '<template><div class="grid grid-cols-2 [--strategy:static] [--trigger:hover]"></div></template>',
+		},
 	],
 	invalid: [
 		{
@@ -189,6 +192,11 @@ ruleTester.run('sort', sortRule, {
 			output: '<template><div class="grid grid-cols-2"></div></template>',
 			errors: [{ message: 'Classes are not sorted' }],
 		},
+		{
+			code: '<template><div class=" [--strategy:static] grid-cols-2 [--trigger:hover] grid "></div></template>',
+			output: '<template><div class="grid grid-cols-2 [--strategy:static] [--trigger:hover]"></div></template>',
+			errors: [{ message: 'Classes are not sorted' }],
+		},
 		{
 			code: '<template><div class="grid-cols-2 md:grid-cols-3 sm:grid-cols-1"></div></template>',
 			output: '<template><div class="grid-cols-2 sm:grid-cols-1 md:grid-cols-3"></div></template>',