chore!: convert eslint plugin to esm (#2930)

wix · Dec 13, 2023 · 2c441dd · 2c441dd
1 parent ff5faa1
commit 2c441dd
Show file tree

Hide file tree

Showing 12 changed files with 228 additions and 227 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -40,7 +40,8 @@
         "@typescript-eslint/restrict-plus-operands": "off",
         "@typescript-eslint/restrict-template-expressions": "off",
         "@typescript-eslint/unbound-method": "off",
-        "@typescript-eslint/no-misused-promises": "off" // ToDo: remove once eslint fix issue.
+        "@typescript-eslint/no-misused-promises": "off", // ToDo: remove once eslint fix issue.
+        "@typescript-eslint/no-base-to-string": "off" // this rule is not working properly
       }
     },
     {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -43,8 +43,9 @@
     "@types/react-dom": "^18.2.17",
     "@types/validate-npm-package-name": "^4.0.2",
     "@types/yargs": "^17.0.32",
-    "@typescript-eslint/eslint-plugin": "^5.61.0",
-    "@typescript-eslint/parser": "^5.61.0",
+    "@typescript-eslint/eslint-plugin": "^6.13.1",
+    "@typescript-eslint/parser": "^6.13.1",
+    "@typescript-eslint/rule-tester": "^6.13.1",
     "autoprefixer": "^10.4.16",
     "c8": "^8.0.1",
     "chai": "^4.3.10",

diff --git a/packages/core/src/parser.ts b/packages/core/src/parser.ts
@@ -3,7 +3,7 @@ import postcssNested from 'postcss-nested';
 import postcssJS from 'postcss-js';
 import safeParser from 'postcss-safe-parser';
 
-export type CSSObject = any & object;
+export type CSSObject = object;
 
 const processor = postcss([postcssNested()]);
 

diff --git a/packages/e2e-test-kit/src/browser-functions.ts b/packages/e2e-test-kit/src/browser-functions.ts
@@ -9,7 +9,7 @@ export function filterAssetResponses(responses: Response[], assetNames: string[]
 function getStyleElementsMetadata({
     includeRuntimeId,
     includeCSSContent,
-}: any | { includeCSSContent?: boolean; includeRuntimeId?: boolean } = {}) {
+}: void | { includeCSSContent?: boolean; includeRuntimeId?: boolean } = {}) {
     const styleElements = Array.from(document.head.getElementsByTagName('style'));
     return styleElements.map((styleEl) => {
         const data: { id?: string; depth?: string; css?: string; runtime?: string } = {

diff --git a/packages/eslint-plugin-stylable/package.json b/packages/eslint-plugin-stylable/package.json
@@ -3,13 +3,19 @@
   "version": "5.16.0",
   "description": "eslint plugin for Stylable usages",
   "main": "dist/index.js",
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.js",
+    "./rule": "./dist/stylable-es-lint.js"
+  },
   "scripts": {
     "test": "mocha \"dist/test/**/*.spec.js\" --timeout 5000"
   },
   "dependencies": {
     "@file-services/node": "^8.3.3",
     "@stylable/core": "^5.16.0",
-    "@typescript-eslint/utils": "^5.61.0"
+    "@typescript-eslint/utils": "^6.13.1",
+    "postcss-safe-parser": "^7.0.0"
   },
   "keywords": [
     "eslint",

diff --git a/packages/eslint-plugin-stylable/src/index.ts b/packages/eslint-plugin-stylable/src/index.ts
@@ -1,8 +1,8 @@
-import unknownLocals from './stylable-es-lint';
+import unknownLocals from './stylable-es-lint.js';
 
-export = {
+export default {
     rules: {
-        'unknown-locals': unknownLocals,
+        'unknown-locals': unknownLocals as unknown,
     },
     configs: {
         recommended: {

diff --git a/packages/eslint-plugin-stylable/src/stylable-es-lint.ts b/packages/eslint-plugin-stylable/src/stylable-es-lint.ts
@@ -1,13 +1,15 @@
-import fs from '@file-services/node';
+import { nodeFs as fs } from '@file-services/node';
 import path from 'path';
 import { Stylable, StylableMeta, createDefaultResolver } from '@stylable/core';
-import { safeParse, StylableExports } from '@stylable/core/dist/index-internal';
+import safeParser from 'postcss-safe-parser';
 import {
     ESLintUtils,
     AST_NODE_TYPES,
     ASTUtils,
     TSESTree as esTree,
 } from '@typescript-eslint/utils';
+import { createRequire } from 'node:module';
+import { pathToFileURL } from 'node:url';
 
 const { isIdentifier } = ASTUtils;
 
@@ -28,8 +30,8 @@ export default createRule({
             fileSystem: fs,
             projectRoot: process.cwd(),
             resolveModule: moduleResolver,
-            requireModule: require,
-            cssParser: safeParse,
+            requireModule: createRequire(pathToFileURL(process.cwd())),
+            cssParser: safeParser,
         });
 
         function reportDiagnostics(meta: StylableMeta, node: esTree.ImportDeclaration) {
@@ -68,7 +70,7 @@ export default createRule({
                 ) as esTree.ImportSpecifier[];
 
                 namedImports.forEach(({ imported, local }) => {
-                    const exportName = imported.name as keyof StylableExports;
+                    const exportName = imported.name as keyof typeof exports;
 
                     if (exportName in exports) {
                         const variable = context.getScope().variables.find((varDefs) => {
@@ -127,7 +129,7 @@ export default createRule({
         ],
         docs: {
             description: '',
-            recommended: 'error',
+            recommended: 'recommended',
         },
     },
 });
@@ -141,6 +143,7 @@ function getStylableRequest(importStatement: esTree.ImportDeclaration) {
 }
 
 function getMemberAccessor(
+    // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
     property: esTree.PrivateIdentifier | esTree.Expression,
     isComputed: boolean
 ) {

diff --git a/packages/eslint-plugin-stylable/src/tsconfig.json b/packages/eslint-plugin-stylable/src/tsconfig.json
@@ -1,7 +1,9 @@
 {
   "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "../dist"
+    "outDir": "../dist",
+    "module": "Node16" /* Specify what module code is generated. */,
+    "moduleResolution": "Node16"
   },
   "references": [{ "path": "../../core/src" }]
 }
diff --git a/packages/eslint-plugin-stylable/test/stylable-es-lint.spec.ts b/packages/eslint-plugin-stylable/test/stylable-es-lint.spec.ts
@@ -1,13 +1,13 @@
 import path from 'path';
 import fs from 'fs';
-import { ESLintUtils } from '@typescript-eslint/utils';
-import StylableLint from 'eslint-plugin-stylable/dist/stylable-es-lint';
+import { RuleTester } from '@typescript-eslint/rule-tester';
+import StylableLint from 'eslint-plugin-stylable/rule';
 import { createTempDirectorySync } from '@stylable/e2e-test-kit';
 
 // mock afterAll for RuleTester (should be fixed in next version)
 (globalThis as any).afterAll = (globalThis as any).after;
 
-const tester = new ESLintUtils.RuleTester({
+const tester = new RuleTester({
     parser: '@typescript-eslint/parser',
     parserOptions: {
         sourceType: 'module',

diff --git a/packages/eslint-plugin-stylable/test/tsconfig.json b/packages/eslint-plugin-stylable/test/tsconfig.json
@@ -2,6 +2,8 @@
   "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "../dist/test",
+    "module": "Node16" /* Specify what module code is generated. */,
+    "moduleResolution": "Node16",
     "types": ["node", "externals", "mocha"]
   },
   "references": [{ "path": "../src" }, { "path": "../../e2e-test-kit/src" }]

diff --git a/pleb.config.mjs b/pleb.config.mjs
@@ -1,17 +1,5 @@
 export default {
   pinnedPackages: [
-    {
-      name: '@typescript-eslint/eslint-plugin',
-      reason: 'drop node 14 and type issues with ESLintUtils.RuleCreator',
-    },
-    {
-      name: '@typescript-eslint/parser',
-      reason: 'drop node 14 and type issues with ESLintUtils.RuleCreator',
-    },
-    {
-      name: '@typescript-eslint/utils',
-      reason: 'drop node 14 and type issues with ESLintUtils.RuleCreator',
-    },
     {
       name: 'flat',
       reason: 'esm only',