feat(eslint-plugin): add support for eslint v9 (#1760)

* feat(eslint-plugin): add support for eslint v9

This change adds a set of compatibility functions to bridge the gap between the legacy context api and the new context api, allowing projects using this plugin to upgrade their version of eslint to v9.

* docs(eslint-plugin): changeset

* build(eslint-plugin): add engines to explicitly declare supported node versions

This change updates the versions of nodes we're running the test workflow again to v16, v18, v20, and v22 (the new LTS)

* docs(eslint-plugin): add changeset

* Fix shorthand-property-sorting crashing when styles not initialised (#1765)

* Fix shorthand-property-sorting crashing when styles not initialised

* Add changeset

* Added changeset reminder

* Version Packages (#1766)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: Grant Wong <[email protected]>
Co-authored-by: atlas-dst-bot <[email protected]>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: 4 people

.changeset/five-dolphins-taste.md

@@ -0,0 +1,5 @@
+---
+'@compiled/eslint-plugin': minor
+---
+
+add engines to formalize supported node versions - ^16.0.0 || >= 18.0.0

.changeset/five-pigs-explain.md

@@ -0,0 +1,5 @@
+---
+'@compiled/eslint-plugin': minor
+---
+
+support eslint v9

.eslintrc.js

@@ -10,7 +10,7 @@ module.exports = {
         ecmaFeatures: {
           jsx: true,
         },
-        ecmaVersion: 2018,
+        ecmaVersion: 2020,
         sourceType: 'module',
       },
       plugins: ['react-hooks'],
@@ -48,6 +48,8 @@ module.exports = {
           },
         ],
         'import/no-unresolved': 'off',
+        // TypeScript takes care of this for us (https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/namespace.md)
+        'import/namespace': 'off',
         'import/order': [
           'error',
           {

.github/workflows/test.yml

@@ -13,7 +13,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x, 16.x, 18.x]
+        node-version: [16.x, 18.x, 20.x, 22.x]
 
     steps:
       - uses: actions/checkout@v3

package.json

@@ -84,8 +84,9 @@
     "@types/react": "^17.0.69",
     "@types/react-dom": "^17.0.22",
     "@types/svgo": "^2.6.4",
-    "@typescript-eslint/eslint-plugin": "^5.59.8",
-    "@typescript-eslint/parser": "^5.59.8",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "@typescript-eslint/utils": "^6.21.0",
     "babel-loader": "^9.1.2",
     "eslint": "^8.44.0",
     "eslint-plugin-import": "^2.27.5",

packages/eslint-plugin/package.json

@@ -28,10 +28,14 @@
     "@types/estraverse": "^5.1.7",
     "@types/estree": "^1.0.3",
     "@types/estree-jsx": "^1.0.2",
-    "@typescript-eslint/parser": "^5.59.8",
+    "@typescript-eslint/parser": "^6.21.0",
+    "@typescript-eslint/utils": "^6.21.0",
     "eslint": "^8.41.0",
     "outdent": "^0.8.0",
-    "typescript": "^4.9.5"
+    "typescript": "~4.9.5"
+  },
+  "engines": {
+    "node": "^16.0.0 || >=18.0.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

packages/eslint-plugin/src/rules/jsx-pragma/index.ts

@@ -8,6 +8,7 @@ import {
   usesCompiledAPI,
 } from '../../utils/ast';
 import { addImportToDeclaration, removeImportFromDeclaration } from '../../utils/ast-to-string';
+import { getDeclaredVariables, getSourceCode } from '../../utils/context-compat';
 import {
   findJsxImportSourcePragma,
   findJsxPragma,
@@ -75,7 +76,7 @@ function createFixer(context: Rule.RuleContext, source: SourceCode, options: Opt
     const reactImport = findReactDeclarationWithDefaultImport(source);
     if (reactImport) {
       const [declaration, defaultImport] = reactImport;
-      const [defaultImportVariable] = context.getDeclaredVariables(defaultImport);
+      const [defaultImportVariable] = getDeclaredVariables(context, defaultImport);
 
       if (defaultImportVariable && defaultImportVariable.references.length === 0) {
         if (declaration.specifiers.length === 1) {
@@ -166,7 +167,7 @@ export const jsxPragmaRule: Rule.RuleModule = {
       importSources: [...DEFAULT_IMPORT_SOURCES, ...(optionsRaw.importSources ?? [])],
     };
 
-    const source = context.getSourceCode();
+    const source = getSourceCode(context);
     const comments = source.getAllComments();
 
     const compiledImports = findLibraryImportDeclarations(context, options.importSources);

packages/eslint-plugin/src/rules/local-cx-xcss/index.ts

@@ -1,6 +1,7 @@
 import type { Rule } from 'eslint';
 
 import { isCxFunction } from '../../utils';
+import { getScope } from '../../utils/context-compat';
 
 function getParentJSXAttribute(node: Rule.Node) {
   let parent: Rule.Node | null = node.parent;
@@ -34,7 +35,7 @@ export const localCXXCSSRule: Rule.RuleModule = {
       'CallExpression[callee.name="cx"]': (node: Rule.Node) => {
         if (
           node.type === 'CallExpression' &&
-          isCxFunction(node.callee as Rule.Node, context.getScope().references)
+          isCxFunction(node.callee as Rule.Node, getScope(context, node).references)
         ) {
           const parentJSXAttribute = getParentJSXAttribute(node);
           const propName = parentJSXAttribute?.name.name.toString();

packages/eslint-plugin/src/rules/no-css-prop-without-css-function/index.ts

@@ -11,6 +11,7 @@ import {
   buildImportDeclaration,
   getImportedName,
 } from '../../utils/ast-to-string';
+import { getScope, getSourceCode } from '../../utils/context-compat';
 
 type Q<T> = T extends TSESLint.Scope.Definition
   ? T['type'] extends 'Variable'
@@ -39,7 +40,7 @@ class NoCssPropWithoutCssFunctionRunner {
 
   constructor(private baseNode: TSESTree.JSXExpressionContainer, private context: Context) {
     this.jsxElement = traverseUpToJSXOpeningElement(this.baseNode);
-    this.references = context.getScope().references;
+    this.references = getScope(context, baseNode).references;
 
     this.ignoreIfImported = [];
     this.excludeReactComponents = false;
@@ -125,7 +126,7 @@ class NoCssPropWithoutCssFunctionRunner {
   private fixWrapper(node: CSSValue, context: Context) {
     function* fix(fixer: TSESLint.RuleFixer) {
       const compiledImports = findTSLibraryImportDeclarations(context);
-      const source = context.getSourceCode();
+      const source = getSourceCode(context);
 
       // The string that `css` from `@compiled/css` is imported as
       const cssImportName = getImportedName(compiledImports, 'css');
@@ -220,7 +221,6 @@ export const noCssPropWithoutCssFunctionRule: TSESLint.RuleModule<string> = {
   meta: {
     docs: {
       url: 'https://github.com/atlassian-labs/compiled/tree/master/packages/eslint-plugin/src/rules/no-css-prop-without-css-function',
-      recommended: 'error',
       description:
         'Disallows `css` prop usages where it is either not wrapped in the `css` import from `@compiled/react` or where `@compiled` cannot determine whether the `css` import is included at build time.',
     },

packages/eslint-plugin/src/rules/no-emotion-css/index.ts

@@ -3,6 +3,7 @@ import type { Rule } from 'eslint';
 import type { ImportSpecifier, ImportDeclaration } from 'estree';
 
 import { buildImportDeclaration, buildNamedImport } from '../../utils/ast-to-string';
+import { getSourceCode } from '../../utils/context-compat';
 
 const ALLOWED_EMOTION_IMPORTS = ['css', 'keyframes', 'ClassNames', 'jsx'];
 
@@ -18,8 +19,7 @@ const isEmotionImport = (node: ImportDeclaration) =>
  * @returns {Rule.Node} The `@compiled/react` node or undefined
  */
 const getCompiledNode = (context: Rule.RuleContext) => {
-  return context
-    .getSourceCode()
+  return getSourceCode(context)
     .ast.body.filter((node): node is ImportDeclaration => node.type === 'ImportDeclaration')
     .find((node) => node.source.value === COMPILED_IMPORT);
 };
@@ -39,8 +39,7 @@ export const noEmotionCssRule: Rule.RuleModule = {
   create(context) {
     return {
       Program() {
-        const pragma = context
-          .getSourceCode()
+        const pragma = getSourceCode(context)
           .getAllComments()
           .find((n) => n.value.includes('@jsxImportSource @emotion/react'));