Upgrade to TS

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>
 

packages/class-variant/tsconfig.json

@@ -6,8 +6,5 @@
     },
     "include": [
         "src/**/*"
-    ],
-    "exclude": [
-        "src/**/*.test.*"
     ]
 }

packages/css/tsconfig.json

@@ -6,8 +6,5 @@
     },
     "include": [
         "src/**/*"
-    ],
-    "exclude": [
-        "src/**/*.test.*"
     ]
 }

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"

packages/eslint-plugin/src/index.ts

@@ -0,0 +1,3 @@
+import plugin from './plugin'
+
+module.exports = plugin

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

packages/eslint-plugin/lib/rules/class-collision.js → 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

packages/eslint-plugin/lib/rules/class-order.js → 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

packages/eslint-plugin/lib/rules/class-validation.js → 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

packages/eslint-plugin/lib/settings.js → packages/eslint-plugin/src/settings.ts

@@ -5,4 +5,4 @@ const settings = {
     config: 'master.css.*'
 }
 
-module.exports = settings
+export default settings

packages/eslint-plugin/lib/utils/are-declarations-equal.js → 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
+}

packages/eslint-plugin/lib/utils/ast.js → 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,22 +177,22 @@ 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 ''
     }
     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
-}
+}

packages/eslint-plugin/lib/utils/define-visitors.js → 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,23 +25,23 @@ 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)
             } else if (node.value && node.value.type === 'JSXExpressionContainer') {
                 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
+}

packages/eslint-plugin/lib/utils/resolve-context.js → packages/eslint-plugin/src/utils/resolve-context.ts

@@ -1,14 +1,12 @@
-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 {
         settings: resolvedSettings,
         options: context.options[0] || {},
         config: typeof config === 'object' ? config : exploreConfig(resolvedSettings?.config || '')
     }
-}
-
-module.exports = resolveContext
+}

packages/eslint-plugin/tests/class-matching/angular.test.js → 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: {