From 11a1c803e2b06b9647ba2ddd7d689361ebb406ef Mon Sep 17 00:00:00 2001
From: 1aron <i@aron.tw>
Date: Thu, 26 Oct 2023 23:17:44 +0800
Subject: [PATCH] Upgrade to TS

---
 examples/eslint/collision.html                |  2 +-
 packages/class-variant/tsconfig.json          |  3 --
 packages/css/tsconfig.json                    |  3 --
 packages/eslint-plugin/lib/index.js           |  4 --
 packages/eslint-plugin/package.json           | 18 +++++---
 packages/eslint-plugin/src/index.ts           |  3 ++
 packages/eslint-plugin/src/plugin.ts          | 13 ++++++
 .../rules/class-collision.ts}                 | 15 ++++---
 .../rules/class-order.ts}                     | 14 +++---
 .../rules/class-validation.ts}                | 13 +++---
 .../{lib/settings.js => src/settings.ts}      |  2 +-
 .../utils/are-declarations-equal.ts}          |  6 +--
 .../{lib/utils/ast.js => src/utils/ast.ts}    | 30 ++++---------
 .../utils/define-visitors.ts}                 | 20 ++++-----
 .../utils/resolve-context.ts}                 | 10 ++---
 .../{angular.test.js => angular.test.ts}      |  5 +--
 .../tests/class-matching/react.test.js        | 45 -------------------
 .../tests/class-matching/react.test.ts        | 44 ++++++++++++++++++
 .../{svelte.test.js => svelte.test.ts}        |  4 +-
 .../{vue.test.js => vue.test.ts}              |  4 +-
 .../{collision.test.js => collision.test.ts}  |  5 +--
 .../tests/{order.test.js => order.test.ts}    |  5 +--
 ...{validation.test.js => validation.test.ts} |  4 +-
 packages/eslint-plugin/tsconfig.json          | 11 +++++
 packages/extractor.vite/tsconfig.json         |  3 --
 packages/extractor.webpack/tsconfig.json      |  3 --
 packages/language-server/tsconfig.json        |  3 --
 packages/language-service/tsconfig.json       |  3 --
 packages/react/tsconfig.json                  |  3 --
 packages/renderer/tsconfig.json               |  3 --
 packages/server.nitro/tsconfig.json           |  3 --
 packages/theme-service/tsconfig.json          |  3 --
 packages/validator/tsconfig.json              |  3 --
 .../vscode-language-service/tsconfig.json     |  3 --
 pnpm-lock.yaml                                | 36 +++++++++++++--
 35 files changed, 178 insertions(+), 171 deletions(-)
 delete mode 100644 packages/eslint-plugin/lib/index.js
 create mode 100644 packages/eslint-plugin/src/index.ts
 create mode 100644 packages/eslint-plugin/src/plugin.ts
 rename packages/eslint-plugin/{lib/rules/class-collision.js => src/rules/class-collision.ts} (91%)
 rename packages/eslint-plugin/{lib/rules/class-order.js => src/rules/class-order.ts} (96%)
 rename packages/eslint-plugin/{lib/rules/class-validation.js => src/rules/class-validation.ts} (90%)
 rename packages/eslint-plugin/{lib/settings.js => src/settings.ts} (90%)
 rename packages/eslint-plugin/{lib/utils/are-declarations-equal.js => src/utils/are-declarations-equal.ts} (83%)
 rename packages/eslint-plugin/{lib/utils/ast.js => src/utils/ast.ts} (92%)
 rename packages/eslint-plugin/{lib/utils/define-visitors.js => src/utils/define-visitors.ts} (85%)
 rename packages/eslint-plugin/{lib/utils/resolve-context.js => src/utils/resolve-context.ts} (65%)
 rename packages/eslint-plugin/tests/class-matching/{angular.test.js => angular.test.ts} (89%)
 delete mode 100644 packages/eslint-plugin/tests/class-matching/react.test.js
 create mode 100644 packages/eslint-plugin/tests/class-matching/react.test.ts
 rename packages/eslint-plugin/tests/class-matching/{svelte.test.js => svelte.test.ts} (87%)
 rename packages/eslint-plugin/tests/class-matching/{vue.test.js => vue.test.ts} (97%)
 rename packages/eslint-plugin/tests/{collision.test.js => collision.test.ts} (85%)
 rename packages/eslint-plugin/tests/{order.test.js => order.test.ts} (99%)
 rename packages/eslint-plugin/tests/{validation.test.js => validation.test.ts} (93%)
 create mode 100644 packages/eslint-plugin/tsconfig.json

diff --git a/examples/eslint/collision.html b/examples/eslint/collision.html
index 53cc167fc..e1e94cb68 100644
--- a/examples/eslint/collision.html
+++ b/examples/eslint/collision.html
@@ -1,5 +1,5 @@
 <!-- eslint-disable @master/css/class-order -->
-<div class="m:10 m:40 m:50 m:60 m:20 m:30:hover m:40@dark">
+<div class="m:10 m:40 m:50 m:60 m:20 m:40@sm m:60@sm m:30:hover m:40@dark">
     ...
 </div>
 
diff --git a/packages/class-variant/tsconfig.json b/packages/class-variant/tsconfig.json
index 72d032ee5..cc43df129 100644
--- a/packages/class-variant/tsconfig.json
+++ b/packages/class-variant/tsconfig.json
@@ -6,8 +6,5 @@
     },
     "include": [
         "src/**/*"
-    ],
-    "exclude": [
-        "src/**/*.test.*"
     ]
 }
\ No newline at end of file
diff --git a/packages/css/tsconfig.json b/packages/css/tsconfig.json
index 1f3fc00a5..3f0b6470b 100644
--- a/packages/css/tsconfig.json
+++ b/packages/css/tsconfig.json
@@ -6,8 +6,5 @@
     },
     "include": [
         "src/**/*"
-    ],
-    "exclude": [
-        "src/**/*.test.*"
     ]
 }
\ No newline at end of file
diff --git a/packages/eslint-plugin/lib/index.js b/packages/eslint-plugin/lib/index.js
deleted file mode 100644
index af57784c4..000000000
--- a/packages/eslint-plugin/lib/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-
-const requireIndex = require('requireindex')
-
-module.exports.rules = requireIndex(__dirname + '/rules')
\ No newline at end of file
diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json
index 2954f361c..4cfefd740 100644
--- a/packages/eslint-plugin/package.json
+++ b/packages/eslint-plugin/package.json
@@ -1,7 +1,11 @@
 {
     "name": "@master/eslint-plugin-css",
     "scripts": {
-        "test": "jest"
+        "build": "techor pack 'src/**/*.ts' --format cjs",
+        "dev": "pnpm run build --watch --no-declare",
+        "test": "jest",
+        "type-check": "tsc --noEmit",
+        "lint": "eslint src"
     },
     "keywords": [
         "mastercss",
@@ -22,21 +26,25 @@
         "directory": "packages/eslint-plugin"
     },
     "sideEffects": false,
-    "main": "./lib/index.js",
-    "exports": "./lib/index.js",
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": "./dist/index.js",
+    "files": [
+        "dist"
+    ],
     "publishConfig": {
         "access": "public"
     },
     "dependencies": {
         "@master/css": "workspace:^",
         "@master/css-validator": "workspace:^",
-        "explore-config": "^2.2.10",
-        "requireindex": "^1.2.0"
+        "explore-config": "^2.2.10"
     },
     "devDependencies": {
         "@angular-eslint/template-parser": "^16.2.0",
         "@types/node": "^20.6.0",
         "@typescript-eslint/parser": "^5.50.0",
+        "@typescript-eslint/utils": "^6.9.0",
         "eslint": "^7.1.0",
         "svelte-eslint-parser": "^0.33.1",
         "vue-eslint-parser": "^9.3.1"
diff --git a/packages/eslint-plugin/src/index.ts b/packages/eslint-plugin/src/index.ts
new file mode 100644
index 000000000..4b17651da
--- /dev/null
+++ b/packages/eslint-plugin/src/index.ts
@@ -0,0 +1,3 @@
+import plugin from './plugin'
+
+module.exports = plugin
\ No newline at end of file
diff --git a/packages/eslint-plugin/src/plugin.ts b/packages/eslint-plugin/src/plugin.ts
new file mode 100644
index 000000000..b11aacf80
--- /dev/null
+++ b/packages/eslint-plugin/src/plugin.ts
@@ -0,0 +1,13 @@
+import classCollision from './rules/class-collision'
+import classOrder from './rules/class-order'
+import classValidation from './rules/class-validation'
+
+const plugin = {
+    rules: {
+        'class-collision': classCollision,
+        'class-order': classOrder,
+        'class-validation': classValidation
+    }
+}
+
+export default plugin
\ No newline at end of file
diff --git a/packages/eslint-plugin/lib/rules/class-collision.js b/packages/eslint-plugin/src/rules/class-collision.ts
similarity index 91%
rename from packages/eslint-plugin/lib/rules/class-collision.js
rename to packages/eslint-plugin/src/rules/class-collision.ts
index 170ed054c..62f542577 100644
--- a/packages/eslint-plugin/lib/rules/class-collision.js
+++ b/packages/eslint-plugin/src/rules/class-collision.ts
@@ -1,10 +1,11 @@
-const areDeclarationsEqual = require('../utils/are-declarations-equal')
-const astUtil = require('../utils/ast')
-const defineVisitors = require('../utils/define-visitors')
-const resolveContext = require('../utils/resolve-context')
-const { createValidRules } = require('@master/css-validator')
+import * as astUtil from '../utils/ast'
+import areDeclarationsEqual from '../utils/are-declarations-equal'
+import defineVisitors from '../utils/define-visitors'
+import resolveContext from '../utils/resolve-context'
+import { createValidRules } from '@master/css-validator'
+import { Rule } from 'eslint'
 
-module.exports = {
+export default {
     meta: {
         docs: {
             description: 'Avoid declaring the identical CSS property repeatedly',
@@ -83,4 +84,4 @@ module.exports = {
         }
         return defineVisitors({ context, options, settings, config }, visitNode)
     },
-}
+} as Rule.RuleModule
\ No newline at end of file
diff --git a/packages/eslint-plugin/lib/rules/class-order.js b/packages/eslint-plugin/src/rules/class-order.ts
similarity index 96%
rename from packages/eslint-plugin/lib/rules/class-order.js
rename to packages/eslint-plugin/src/rules/class-order.ts
index 33b0986a4..6b962f17f 100644
--- a/packages/eslint-plugin/lib/rules/class-order.js
+++ b/packages/eslint-plugin/src/rules/class-order.ts
@@ -1,10 +1,10 @@
+import * as astUtil from '../utils/ast'
+import defineVisitors from '../utils/define-visitors'
+import resolveContext from '../utils/resolve-context'
+import { reorderForReadableClasses } from '@master/css'
+import { Rule } from 'eslint'
 
-const astUtil = require('../utils/ast')
-const defineVisitors = require('../utils/define-visitors')
-const resolveContext = require('../utils/resolve-context')
-const { reorderForReadableClasses } = require('@master/css')
-
-module.exports = {
+export default {
     meta: {
         docs: {
             description: 'Enforce a consistent and logical order of classes',
@@ -151,4 +151,4 @@ module.exports = {
         }
         return defineVisitors({ context, options, settings, config }, visitNode)
     },
-}
+} as Rule.RuleModule
\ No newline at end of file
diff --git a/packages/eslint-plugin/lib/rules/class-validation.js b/packages/eslint-plugin/src/rules/class-validation.ts
similarity index 90%
rename from packages/eslint-plugin/lib/rules/class-validation.js
rename to packages/eslint-plugin/src/rules/class-validation.ts
index 814393b75..19de5e8c9 100644
--- a/packages/eslint-plugin/lib/rules/class-validation.js
+++ b/packages/eslint-plugin/src/rules/class-validation.ts
@@ -1,9 +1,10 @@
-const astUtil = require('../utils/ast')
-const defineVisitors = require('../utils/define-visitors')
-const resolveContext = require('../utils/resolve-context')
-const { validate } = require('@master/css-validator')
+import * as astUtil from '../utils/ast'
+import defineVisitors from '../utils/define-visitors'
+import resolveContext from '../utils/resolve-context'
+import { validate } from '@master/css-validator'
+import { Rule } from 'eslint'
 
-module.exports = {
+export default {
     meta: {
         docs: {
             description: 'Check the validity of classes with your configuration',
@@ -61,4 +62,4 @@ module.exports = {
         }
         return defineVisitors({ context, options, settings, config }, visitNode)
     },
-}
+} as Rule.RuleModule
\ No newline at end of file
diff --git a/packages/eslint-plugin/lib/settings.js b/packages/eslint-plugin/src/settings.ts
similarity index 90%
rename from packages/eslint-plugin/lib/settings.js
rename to packages/eslint-plugin/src/settings.ts
index 2cbbac22c..f37414ab2 100644
--- a/packages/eslint-plugin/lib/settings.js
+++ b/packages/eslint-plugin/src/settings.ts
@@ -5,4 +5,4 @@ const settings = {
     config: 'master.css.*'
 }
 
-module.exports = settings
\ No newline at end of file
+export default settings
\ No newline at end of file
diff --git a/packages/eslint-plugin/lib/utils/are-declarations-equal.js b/packages/eslint-plugin/src/utils/are-declarations-equal.ts
similarity index 83%
rename from packages/eslint-plugin/lib/utils/are-declarations-equal.js
rename to packages/eslint-plugin/src/utils/are-declarations-equal.ts
index 8b3fa6e38..ce2b02e1a 100644
--- a/packages/eslint-plugin/lib/utils/are-declarations-equal.js
+++ b/packages/eslint-plugin/src/utils/are-declarations-equal.ts
@@ -1,4 +1,4 @@
-function areDeclarationsEqual(aDeclarations, bDeclarations) {
+export default function areDeclarationsEqual(aDeclarations, bDeclarations) {
     // 获取对象A和B的所有属性名
     const aKeys = Object.keys(aDeclarations);
     const bKeys = Object.keys(bDeclarations);
@@ -17,6 +17,4 @@ function areDeclarationsEqual(aDeclarations, bDeclarations) {
 
     // 如果所有属性都匹配，返回true
     return true;
-}
-
-module.exports = areDeclarationsEqual
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/packages/eslint-plugin/lib/utils/ast.js b/packages/eslint-plugin/src/utils/ast.ts
similarity index 92%
rename from packages/eslint-plugin/lib/utils/ast.js
rename to packages/eslint-plugin/src/utils/ast.ts
index c05a6ede2..73ec10716 100644
--- a/packages/eslint-plugin/lib/utils/ast.js
+++ b/packages/eslint-plugin/src/utils/ast.ts
@@ -1,7 +1,6 @@
-
 const separatorRegEx = /([\t\n\f\r ]+)/
 
-function extractRangeFromNode(node) {
+export function extractRangeFromNode(node) {
     if (node.type === 'TextAttribute' && node.name === 'class') {
         return [node.valueSpan.fullStart.offset, node.valueSpan.end.offset]
     }
@@ -13,7 +12,7 @@ function extractRangeFromNode(node) {
     }
 }
 
-function extractValueFromNode(node) {
+export function extractValueFromNode(node) {
     if (node.type === 'TextAttribute' && node.name === 'class') {
         return node.value
     }
@@ -33,7 +32,7 @@ function extractValueFromNode(node) {
     }
 }
 
-function extractClassnamesFromValue(classStr) {
+export function extractClassnamesFromValue(classStr) {
     if (typeof classStr !== 'string') {
         return { classNames: [], whitespaces: [], headSpace: false, tailSpace: false }
     }
@@ -65,7 +64,7 @@ function extractClassnamesFromValue(classStr) {
  * @param {Array} ignoredKeys Optional, set object keys which should not be parsed e.g. for `cva`
  * @returns {void}
  */
-function parseNodeRecursive(rootNode, childNode, cb, skipConditional = false, isolate = false, ignoredKeys = [], context = null) {
+export function parseNodeRecursive(rootNode, childNode, cb, skipConditional = false, isolate = false, ignoredKeys = [], context = null) {
     // TODO allow vue non litteral
     let originalClassNamesValue
     let classNames
@@ -178,7 +177,7 @@ function parseNodeRecursive(rootNode, childNode, cb, skipConditional = false, is
     }
 }
 
-function getTemplateElementPrefix(text, raw) {
+export function getTemplateElementPrefix(text, raw) {
     const idx = text.indexOf(raw)
     if (idx === 0) {
         return ''
@@ -186,14 +185,14 @@ function getTemplateElementPrefix(text, raw) {
     return text.split(raw).shift()
 }
 
-function getTemplateElementSuffix(text, raw) {
+export function getTemplateElementSuffix(text, raw) {
     if (text.indexOf(raw) === -1) {
         return ''
     }
     return text.split(raw).pop()
 }
 
-function getTemplateElementBody(text, prefix, suffix) {
+export function getTemplateElementBody(text, prefix, suffix) {
     let arr = text.split(prefix)
     arr.shift()
     let body = arr.join(prefix)
@@ -202,7 +201,7 @@ function getTemplateElementBody(text, prefix, suffix) {
     return arr.join(suffix)
 }
 
-function findLoc(text, lines, startLine, endLine) {
+export function findLoc(text, lines, startLine, endLine) {
     const targetLines = text.match(/.+(?:\r\n|\n)?/g)
 
     let checkingTargetLine = 0
@@ -240,15 +239,4 @@ function findLoc(text, lines, startLine, endLine) {
         }
     }
     return null
-}
-
-module.exports = {
-    extractRangeFromNode,
-    extractValueFromNode,
-    extractClassnamesFromValue,
-    getTemplateElementPrefix,
-    getTemplateElementSuffix,
-    getTemplateElementBody,
-    parseNodeRecursive,
-    findLoc
-}
+}
\ No newline at end of file
diff --git a/packages/eslint-plugin/lib/utils/define-visitors.js b/packages/eslint-plugin/src/utils/define-visitors.ts
similarity index 85%
rename from packages/eslint-plugin/lib/utils/define-visitors.js
rename to packages/eslint-plugin/src/utils/define-visitors.ts
index 06e00c7cc..c6cc8d5e5 100644
--- a/packages/eslint-plugin/lib/utils/define-visitors.js
+++ b/packages/eslint-plugin/src/utils/define-visitors.ts
@@ -1,4 +1,6 @@
-function defineVisitors({ context, settings }, visitNode) {
+import type { RuleListener } from '@typescript-eslint/utils/ts-eslint'
+
+export default function defineVisitors({ context, settings }: any, visitNode) {
 
     const isFnNode = (node) => {
         let calleeName = ''
@@ -23,9 +25,9 @@ function defineVisitors({ context, settings }, visitNode) {
 
     const classMatchingRegex = new RegExp(settings.classMatching)
 
-    const scriptVisitor = {
+    const scriptVisitor: RuleListener = {
         CallExpression,
-        JSXAttribute: function (node) {
+        JSXAttribute: function (node: any) {
             if (!node.name || !classMatchingRegex.test(node.name.name)) return
             if (node.value && node.value.type === 'Literal') {
                 visitNode(node)
@@ -33,13 +35,13 @@ function defineVisitors({ context, settings }, visitNode) {
                 visitNode(node, node.value.expression)
             }
         },
-        SvelteAttribute: function (node) {
+        SvelteAttribute: function (node: any) {
             if (!node.key?.name || !classMatchingRegex.test(node.key.name)) return
             for (const eachValue of node.value) {
                 visitNode(node, eachValue)
             }
         },
-        TextAttribute: function (node) {
+        TextAttribute: function (node: any) {
             if (!node.name || !classMatchingRegex.test(node.name)) return
             visitNode(node)
         },
@@ -51,9 +53,9 @@ function defineVisitors({ context, settings }, visitNode) {
         },
     }
 
-    const templateBodyVisitor = {
+    const templateBodyVisitor: RuleListener = {
         CallExpression,
-        VAttribute: function (node) {
+        VAttribute: function (node: any) {
             if (node.value && node.value.type === 'VLiteral') {
                 visitNode(node)
             } else if (node.value && node.value.type === 'VExpressionContainer' && node.value.expression.type === 'ArrayExpression') {
@@ -73,6 +75,4 @@ function defineVisitors({ context, settings }, visitNode) {
     } else {
         return context.parserServices.defineTemplateBodyVisitor(templateBodyVisitor, scriptVisitor)
     }
-}
-
-module.exports = defineVisitors
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/packages/eslint-plugin/lib/utils/resolve-context.js b/packages/eslint-plugin/src/utils/resolve-context.ts
similarity index 65%
rename from packages/eslint-plugin/lib/utils/resolve-context.js
rename to packages/eslint-plugin/src/utils/resolve-context.ts
index 64c0ead85..a9e0fa354 100644
--- a/packages/eslint-plugin/lib/utils/resolve-context.js
+++ b/packages/eslint-plugin/src/utils/resolve-context.ts
@@ -1,7 +1,7 @@
-const settings = require('../settings')
-const exploreConfig = require('explore-config').default
+import settings from '../settings'
+import exploreConfig from 'explore-config'
 
-const resolveContext = function (context) {
+export default function resolveContext (context) {
     const resolvedSettings = Object.assign(settings, context.settings?.['@master/css'])
     const config = resolvedSettings?.config
     return {
@@ -9,6 +9,4 @@ const resolveContext = function (context) {
         options: context.options[0] || {},
         config: typeof config === 'object' ? config : exploreConfig(resolvedSettings?.config || '')
     }
-}
-
-module.exports = resolveContext
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/packages/eslint-plugin/tests/class-matching/angular.test.js b/packages/eslint-plugin/tests/class-matching/angular.test.ts
similarity index 89%
rename from packages/eslint-plugin/tests/class-matching/angular.test.js
rename to packages/eslint-plugin/tests/class-matching/angular.test.ts
index 6a98d2615..b3097ea46 100644
--- a/packages/eslint-plugin/tests/class-matching/angular.test.js
+++ b/packages/eslint-plugin/tests/class-matching/angular.test.ts
@@ -1,6 +1,5 @@
-
-const rule = require('../../lib/rules/class-order')
-const RuleTester = require('eslint').RuleTester
+import rule from '../../src/rules/class-order'
+import { RuleTester } from 'eslint'
 
 new RuleTester({
     parserOptions: {
diff --git a/packages/eslint-plugin/tests/class-matching/react.test.js b/packages/eslint-plugin/tests/class-matching/react.test.js
deleted file mode 100644
index 768295382..000000000
--- a/packages/eslint-plugin/tests/class-matching/react.test.js
+++ /dev/null
@@ -1,45 +0,0 @@
-
-const rule = require('../../lib/rules/class-validation')
-const RuleTester = require('eslint').RuleTester
-
-new RuleTester({
-    parserOptions: {
-        ecmaFeatures: {
-            jsx: true
-        }
-    },
-    parser: require.resolve('@typescript-eslint/parser')
-}).run('class matching react', rule, {
-    valid: [
-        // { code: '<h1 className={"bg:black"}>Welcome {name}</h1>' }
-    ],
-    invalid: [
-        // { code: '<h1 className={"bg:error"}>Welcome {name}</h1>', errors: [{ messageId: 'invalidClass' }] },
-        {
-            code: `
-                import React from 'react'
-                import { styled } from '@master/css.react'
-
-                const H1 = styled.h1\`text-align:cente\`
-
-                export default () => (
-                    <H1>Hello World</H1>
-                )
-            `,
-            errors: [{ messageId: 'invalidClass' }],
-        },
-        // {
-        //     code: `
-        //         import React from 'react'
-        //         import { styled } from '@master/css.react'
-
-        //         const H1 = styled.h1('text-align:cente')
-
-        //         export default () => (
-        //             <H1>Hello World</H1>
-        //         )
-        //     `,
-        //     errors: [{ messageId: 'invalidClass' }],
-        // },
-    ]
-})
\ No newline at end of file
diff --git a/packages/eslint-plugin/tests/class-matching/react.test.ts b/packages/eslint-plugin/tests/class-matching/react.test.ts
new file mode 100644
index 000000000..52945b08d
--- /dev/null
+++ b/packages/eslint-plugin/tests/class-matching/react.test.ts
@@ -0,0 +1,44 @@
+import rule from '../../src/rules/class-validation'
+import { RuleTester } from 'eslint'
+
+new RuleTester({
+    parserOptions: {
+        ecmaFeatures: {
+            jsx: true
+        }
+    },
+    parser: require.resolve('@typescript-eslint/parser')
+}).run('class matching react', rule, {
+    valid: [
+        { code: '<h1 className={"bg:black"}>Welcome {name}</h1>' }
+    ],
+    invalid: [
+        { code: '<h1 className={"bg:error"}>Welcome {name}</h1>', errors: [{ messageId: 'invalidClass' }] },
+        {
+            code: `
+                import React from 'react'
+                import { styled } from '@master/css.react'
+
+                const H1 = styled.h1\`text-align:cente\`
+
+                export default () => (
+                    <H1>Hello World</H1>
+                )
+            `,
+            errors: [{ messageId: 'invalidClass' }],
+        },
+        {
+            code: `
+                import React from 'react'
+                import { styled } from '@master/css.react'
+
+                const H1 = styled.h1('text-align:cente')
+
+                export default () => (
+                    <H1>Hello World</H1>
+                )
+            `,
+            errors: [{ messageId: 'invalidClass' }],
+        },
+    ]
+})
\ No newline at end of file
diff --git a/packages/eslint-plugin/tests/class-matching/svelte.test.js b/packages/eslint-plugin/tests/class-matching/svelte.test.ts
similarity index 87%
rename from packages/eslint-plugin/tests/class-matching/svelte.test.js
rename to packages/eslint-plugin/tests/class-matching/svelte.test.ts
index 9b5963dbd..f1e864d42 100644
--- a/packages/eslint-plugin/tests/class-matching/svelte.test.js
+++ b/packages/eslint-plugin/tests/class-matching/svelte.test.ts
@@ -1,6 +1,6 @@
+import rule from '../../src/rules/class-order'
+import { RuleTester } from 'eslint'
 
-const rule = require('../../lib/rules/class-order')
-const RuleTester = require('eslint').RuleTester
 const ruleTester = new RuleTester({
     parserOptions: {
         ecmaFeatures: {
diff --git a/packages/eslint-plugin/tests/class-matching/vue.test.js b/packages/eslint-plugin/tests/class-matching/vue.test.ts
similarity index 97%
rename from packages/eslint-plugin/tests/class-matching/vue.test.js
rename to packages/eslint-plugin/tests/class-matching/vue.test.ts
index 17f0d058a..03dfe3a59 100644
--- a/packages/eslint-plugin/tests/class-matching/vue.test.js
+++ b/packages/eslint-plugin/tests/class-matching/vue.test.ts
@@ -1,6 +1,6 @@
+import rule from '../../src/rules/class-order'
+import { RuleTester } from 'eslint'
 
-const rule = require('../../lib/rules/class-order')
-const RuleTester = require('eslint').RuleTester
 const ruleTester = new RuleTester({
     parserOptions: {
         ecmaFeatures: {
diff --git a/packages/eslint-plugin/tests/collision.test.js b/packages/eslint-plugin/tests/collision.test.ts
similarity index 85%
rename from packages/eslint-plugin/tests/collision.test.js
rename to packages/eslint-plugin/tests/collision.test.ts
index d7264cadc..55a09de53 100644
--- a/packages/eslint-plugin/tests/collision.test.js
+++ b/packages/eslint-plugin/tests/collision.test.ts
@@ -1,6 +1,5 @@
-
-const rule = require('../lib/rules/class-collision')
-const RuleTester = require('eslint').RuleTester
+import rule from '../src/rules/class-collision'
+import { RuleTester } from 'eslint'
 
 new RuleTester({
     parserOptions: {
diff --git a/packages/eslint-plugin/tests/order.test.js b/packages/eslint-plugin/tests/order.test.ts
similarity index 99%
rename from packages/eslint-plugin/tests/order.test.js
rename to packages/eslint-plugin/tests/order.test.ts
index dc6e6b653..1a45bcddb 100644
--- a/packages/eslint-plugin/tests/order.test.js
+++ b/packages/eslint-plugin/tests/order.test.ts
@@ -1,6 +1,5 @@
-
-const rule = require('../lib/rules/class-order')
-const RuleTester = require('eslint').RuleTester
+import rule from '../src/rules/class-order'
+import { RuleTester } from 'eslint'
 
 new RuleTester({
     parserOptions: {
diff --git a/packages/eslint-plugin/tests/validation.test.js b/packages/eslint-plugin/tests/validation.test.ts
similarity index 93%
rename from packages/eslint-plugin/tests/validation.test.js
rename to packages/eslint-plugin/tests/validation.test.ts
index b5859c78b..4eb120f2c 100644
--- a/packages/eslint-plugin/tests/validation.test.js
+++ b/packages/eslint-plugin/tests/validation.test.ts
@@ -1,5 +1,5 @@
-const rule = require('../lib/rules/class-validation')
-const RuleTester = require('eslint').RuleTester
+import rule from '../src/rules/class-validation'
+import { RuleTester } from 'eslint'
 
 new RuleTester({
     parserOptions: {
diff --git a/packages/eslint-plugin/tsconfig.json b/packages/eslint-plugin/tsconfig.json
new file mode 100644
index 000000000..91da3c93b
--- /dev/null
+++ b/packages/eslint-plugin/tsconfig.json
@@ -0,0 +1,11 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "baseUrl": ".",
+        "rootDir": "src",
+        "moduleResolution": "Bundler"
+    },
+    "include": [
+        "src/**/*"
+    ]
+}
\ No newline at end of file
diff --git a/packages/extractor.vite/tsconfig.json b/packages/extractor.vite/tsconfig.json
index 952bd07b0..e19b941fd 100644
--- a/packages/extractor.vite/tsconfig.json
+++ b/packages/extractor.vite/tsconfig.json
@@ -5,8 +5,5 @@
     },
     "include": [
         "src/**/*"
-    ],
-    "exclude": [
-        "src/**/*.test.*"
     ]
 }
\ No newline at end of file
diff --git a/packages/extractor.webpack/tsconfig.json b/packages/extractor.webpack/tsconfig.json
index 952bd07b0..e19b941fd 100644
--- a/packages/extractor.webpack/tsconfig.json
+++ b/packages/extractor.webpack/tsconfig.json
@@ -5,8 +5,5 @@
     },
     "include": [
         "src/**/*"
-    ],
-    "exclude": [
-        "src/**/*.test.*"
     ]
 }
\ No newline at end of file
diff --git a/packages/language-server/tsconfig.json b/packages/language-server/tsconfig.json
index 952bd07b0..e19b941fd 100644
--- a/packages/language-server/tsconfig.json
+++ b/packages/language-server/tsconfig.json
@@ -5,8 +5,5 @@
     },
     "include": [
         "src/**/*"
-    ],
-    "exclude": [
-        "src/**/*.test.*"
     ]
 }
\ No newline at end of file
diff --git a/packages/language-service/tsconfig.json b/packages/language-service/tsconfig.json
index 952bd07b0..e19b941fd 100644
--- a/packages/language-service/tsconfig.json
+++ b/packages/language-service/tsconfig.json
@@ -5,8 +5,5 @@
     },
     "include": [
         "src/**/*"
-    ],
-    "exclude": [
-        "src/**/*.test.*"
     ]
 }
\ No newline at end of file
diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
index 72d032ee5..cc43df129 100644
--- a/packages/react/tsconfig.json
+++ b/packages/react/tsconfig.json
@@ -6,8 +6,5 @@
     },
     "include": [
         "src/**/*"
-    ],
-    "exclude": [
-        "src/**/*.test.*"
     ]
 }
\ No newline at end of file
diff --git a/packages/renderer/tsconfig.json b/packages/renderer/tsconfig.json
index 1f3fc00a5..3f0b6470b 100644
--- a/packages/renderer/tsconfig.json
+++ b/packages/renderer/tsconfig.json
@@ -6,8 +6,5 @@
     },
     "include": [
         "src/**/*"
-    ],
-    "exclude": [
-        "src/**/*.test.*"
     ]
 }
\ No newline at end of file
diff --git a/packages/server.nitro/tsconfig.json b/packages/server.nitro/tsconfig.json
index 1f3fc00a5..3f0b6470b 100644
--- a/packages/server.nitro/tsconfig.json
+++ b/packages/server.nitro/tsconfig.json
@@ -6,8 +6,5 @@
     },
     "include": [
         "src/**/*"
-    ],
-    "exclude": [
-        "src/**/*.test.*"
     ]
 }
\ No newline at end of file
diff --git a/packages/theme-service/tsconfig.json b/packages/theme-service/tsconfig.json
index 1f3fc00a5..3f0b6470b 100644
--- a/packages/theme-service/tsconfig.json
+++ b/packages/theme-service/tsconfig.json
@@ -6,8 +6,5 @@
     },
     "include": [
         "src/**/*"
-    ],
-    "exclude": [
-        "src/**/*.test.*"
     ]
 }
\ No newline at end of file
diff --git a/packages/validator/tsconfig.json b/packages/validator/tsconfig.json
index 1f3fc00a5..3f0b6470b 100644
--- a/packages/validator/tsconfig.json
+++ b/packages/validator/tsconfig.json
@@ -6,8 +6,5 @@
     },
     "include": [
         "src/**/*"
-    ],
-    "exclude": [
-        "src/**/*.test.*"
     ]
 }
\ No newline at end of file
diff --git a/packages/vscode-language-service/tsconfig.json b/packages/vscode-language-service/tsconfig.json
index 72a74864f..72a320ac5 100644
--- a/packages/vscode-language-service/tsconfig.json
+++ b/packages/vscode-language-service/tsconfig.json
@@ -5,8 +5,5 @@
     },
     "include": [
         "src/**/*"
-    ],
-    "exclude": [
-        "src/**/*.test.*"
     ]
 }
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 176fc2897..886519b6e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1120,9 +1120,6 @@ importers:
       explore-config:
         specifier: ^2.2.10
         version: 2.5.17
-      requireindex:
-        specifier: ^1.2.0
-        version: 1.2.0
     devDependencies:
       '@angular-eslint/template-parser':
         specifier: ^16.2.0
@@ -1133,6 +1130,9 @@ importers:
       '@typescript-eslint/parser':
         specifier: ^5.50.0
         version: 5.62.0(eslint@7.32.0)(typescript@5.2.2)
+      '@typescript-eslint/utils':
+        specifier: ^6.9.0
+        version: 6.9.0(eslint@7.32.0)(typescript@5.2.2)
       eslint:
         specifier: ^7.1.0
         version: 7.32.0
@@ -5592,6 +5592,16 @@ packages:
     dev: true
     optional: true
 
+  /@eslint-community/eslint-utils@4.4.0(eslint@7.32.0):
+    resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+    dependencies:
+      eslint: 7.32.0
+      eslint-visitor-keys: 3.4.3
+    dev: true
+
   /@eslint-community/eslint-utils@4.4.0(eslint@8.50.0):
     resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -8486,6 +8496,25 @@ packages:
       - typescript
     dev: true
 
+  /@typescript-eslint/utils@6.9.0(eslint@7.32.0)(typescript@5.2.2):
+    resolution: {integrity: sha512-5Wf+Jsqya7WcCO8me504FBigeQKVLAMPmUzYgDbWchINNh1KJbxCgVya3EQ2MjvJMVeXl3pofRmprqX6mfQkjQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@7.32.0)
+      '@types/json-schema': 7.0.13
+      '@types/semver': 7.5.3
+      '@typescript-eslint/scope-manager': 6.9.0
+      '@typescript-eslint/types': 6.9.0
+      '@typescript-eslint/typescript-estree': 6.9.0(typescript@5.2.2)
+      eslint: 7.32.0
+      semver: 7.5.4
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
   /@typescript-eslint/visitor-keys@5.62.0:
     resolution: {integrity: sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -21250,6 +21279,7 @@ packages:
   /requireindex@1.2.0:
     resolution: {integrity: sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==}
     engines: {node: '>=0.10.5'}
+    dev: true
 
   /requires-port@1.0.0:
     resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}