@atlaskit/eslint-plugin-design-system 10.7.0 → 10.7.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 10.7.1
+
+### Patch Changes
+
+- [#111413](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111413)
+  [`492737dbcfc65`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/492737dbcfc65) -
+  Fixes `consistent-css-prop-usage` to prevent unsafe auto-fixes. Previously style declarations
+  could be hoisted out of components even if they referenced variables only defined in the
+  component's scope.
+
 ## 10.7.0
 
 ### Minor Changes

package/dist/cjs/rules/consistent-css-prop-usage/index.js

@@ -12,6 +12,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var _estraverse = _interopRequireDefault(require("estraverse"));
 var _assign = _interopRequireDefault(require("lodash/assign"));
+var _findVariable = require("@atlaskit/eslint-utils/find-variable");
 var _isSupportedImport = require("@atlaskit/eslint-utils/is-supported-import");
 var _astNodes = require("../../ast-nodes");
 var _createRule = require("../utils/create-rule");
@@ -250,11 +251,40 @@ var JSXExpressionLinter = /*#__PURE__*/function () {
     key: "potentiallyHasLocalVariable",
     value: function potentiallyHasLocalVariable(node) {
       var _this2 = this;
+      /**
+       * If we've passed an `Identifier` then it is an identifier that's been
+       * passed to the `css` prop.
+       *
+       * We need to check its initializer to see if it is safe to auto-fix.
+       */
+      if (node.type === 'Identifier') {
+        var variable = (0, _findVariable.findVariable)({
+          identifier: node,
+          sourceCode: this.context.getSourceCode()
+        });
+        if (!variable) {
+          // If we cannot resolve the variable then we cannot check it, so assume worst-case.
+          return true;
+        }
+        return variable.defs.some(function (def) {
+          // If the binding isn't from a variable declaration we assume worst-case.
+          if (def.type !== 'Variable') {
+            return true;
+          }
+          var init = def.node.init;
+          if (!init) {
+            // If there is no initializer something weird is happening so assume worst-case.
+            return true;
+          }
+          return _this2.potentiallyHasLocalVariable(init);
+        });
+      }
       var hasPotentiallyLocalVariable = false;
       var isImportedVariable = function isImportedVariable(identifier) {
         return !!(0, _getImportNodeBySource.getModuleOfIdentifier)(_this2.context.getSourceCode(), identifier);
       };
       _estraverse.default.traverse(node, {
+        fallback: 'iteration',
         enter: function enter(node, _parent) {
           if ((0, _eslintCodemodUtils.isNodeOfType)(node, 'SpreadElement') ||
           // @ts-expect-error remove once we can be sure that no parser interprets
@@ -342,15 +372,15 @@ var JSXExpressionLinter = /*#__PURE__*/function () {
       }
       var moduleString;
       var fixes = [];
+      if (this.potentiallyHasLocalVariable(node)) {
+        return [];
+      }
       if (node.type === 'Identifier') {
         var identifier = node;
         var declarator = identifier.parent.parent;
         moduleString = sourceCode.getText(declarator);
         fixes.push(fixer.remove(declarator));
       } else {
-        if (this.potentiallyHasLocalVariable(node)) {
-          return [];
-        }
         var _declarator = this.getDeclaratorString();
         var text = sourceCode.getText(node);
 

package/dist/es2019/rules/consistent-css-prop-usage/index.js

@@ -3,6 +3,7 @@
 import { getIdentifierInParentScope, insertAtStartOfFile, insertImportDeclaration, isNodeOfType } from 'eslint-codemod-utils';
 import estraverse from 'estraverse';
 import assign from 'lodash/assign';
+import { findVariable } from '@atlaskit/eslint-utils/find-variable';
 import { CSS_IN_JS_IMPORTS } from '@atlaskit/eslint-utils/is-supported-import';
 import { Import } from '../../ast-nodes';
 import { createLintRule } from '../utils/create-rule';
@@ -217,9 +218,40 @@ class JSXExpressionLinter {
    * @returns Whether the node potentially has a local variable (and thus is not safe to hoist).
    */
   potentiallyHasLocalVariable(node) {
+    /**
+     * If we've passed an `Identifier` then it is an identifier that's been
+     * passed to the `css` prop.
+     *
+     * We need to check its initializer to see if it is safe to auto-fix.
+     */
+    if (node.type === 'Identifier') {
+      const variable = findVariable({
+        identifier: node,
+        sourceCode: this.context.getSourceCode()
+      });
+      if (!variable) {
+        // If we cannot resolve the variable then we cannot check it, so assume worst-case.
+        return true;
+      }
+      return variable.defs.some(def => {
+        // If the binding isn't from a variable declaration we assume worst-case.
+        if (def.type !== 'Variable') {
+          return true;
+        }
+        const {
+          init
+        } = def.node;
+        if (!init) {
+          // If there is no initializer something weird is happening so assume worst-case.
+          return true;
+        }
+        return this.potentiallyHasLocalVariable(init);
+      });
+    }
     let hasPotentiallyLocalVariable = false;
     const isImportedVariable = identifier => !!getModuleOfIdentifier(this.context.getSourceCode(), identifier);
     estraverse.traverse(node, {
+      fallback: 'iteration',
       enter: function (node, _parent) {
         if (isNodeOfType(node, 'SpreadElement') ||
         // @ts-expect-error remove once we can be sure that no parser interprets
@@ -303,15 +335,15 @@ class JSXExpressionLinter {
     }
     let moduleString;
     let fixes = [];
+    if (this.potentiallyHasLocalVariable(node)) {
+      return [];
+    }
     if (node.type === 'Identifier') {
       const identifier = node;
       const declarator = identifier.parent.parent;
       moduleString = sourceCode.getText(declarator);
       fixes.push(fixer.remove(declarator));
     } else {
-      if (this.potentiallyHasLocalVariable(node)) {
-        return [];
-      }
       const declarator = this.getDeclaratorString();
       const text = sourceCode.getText(node);
 

package/dist/esm/rules/consistent-css-prop-usage/index.js

@@ -7,6 +7,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { getIdentifierInParentScope, insertAtStartOfFile, insertImportDeclaration, isNodeOfType } from 'eslint-codemod-utils';
 import estraverse from 'estraverse';
 import assign from 'lodash/assign';
+import { findVariable } from '@atlaskit/eslint-utils/find-variable';
 import { CSS_IN_JS_IMPORTS } from '@atlaskit/eslint-utils/is-supported-import';
 import { Import } from '../../ast-nodes';
 import { createLintRule } from '../utils/create-rule';
@@ -243,11 +244,40 @@ var JSXExpressionLinter = /*#__PURE__*/function () {
     key: "potentiallyHasLocalVariable",
     value: function potentiallyHasLocalVariable(node) {
       var _this2 = this;
+      /**
+       * If we've passed an `Identifier` then it is an identifier that's been
+       * passed to the `css` prop.
+       *
+       * We need to check its initializer to see if it is safe to auto-fix.
+       */
+      if (node.type === 'Identifier') {
+        var variable = findVariable({
+          identifier: node,
+          sourceCode: this.context.getSourceCode()
+        });
+        if (!variable) {
+          // If we cannot resolve the variable then we cannot check it, so assume worst-case.
+          return true;
+        }
+        return variable.defs.some(function (def) {
+          // If the binding isn't from a variable declaration we assume worst-case.
+          if (def.type !== 'Variable') {
+            return true;
+          }
+          var init = def.node.init;
+          if (!init) {
+            // If there is no initializer something weird is happening so assume worst-case.
+            return true;
+          }
+          return _this2.potentiallyHasLocalVariable(init);
+        });
+      }
       var hasPotentiallyLocalVariable = false;
       var isImportedVariable = function isImportedVariable(identifier) {
         return !!getModuleOfIdentifier(_this2.context.getSourceCode(), identifier);
       };
       estraverse.traverse(node, {
+        fallback: 'iteration',
         enter: function enter(node, _parent) {
           if (isNodeOfType(node, 'SpreadElement') ||
           // @ts-expect-error remove once we can be sure that no parser interprets
@@ -335,15 +365,15 @@ var JSXExpressionLinter = /*#__PURE__*/function () {
       }
       var moduleString;
       var fixes = [];
+      if (this.potentiallyHasLocalVariable(node)) {
+        return [];
+      }
       if (node.type === 'Identifier') {
         var identifier = node;
         var declarator = identifier.parent.parent;
         moduleString = sourceCode.getText(declarator);
         fixes.push(fixer.remove(declarator));
       } else {
-        if (this.potentiallyHasLocalVariable(node)) {
-          return [];
-        }
         var _declarator = this.getDeclaratorString();
         var text = sourceCode.getText(node);
 

package/package.json

@@ -1,96 +1,88 @@
 {
-  "name": "@atlaskit/eslint-plugin-design-system",
-  "description": "The essential plugin for use with the Atlassian Design System.",
-  "version": "10.7.0",
-  "author": "Atlassian Pty Ltd",
-  "license": "Apache-2.0",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "atlassian": {
-    "team": "Design System Team",
-    "releaseModel": "continuous",
-    "productPushConsumption": [
-      "jira"
-    ],
-    "website": {
-      "name": "ESLint plugin",
-      "category": "Tooling"
-    },
-    "runReact18": true
-  },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "module:es2019": "dist/es2019/index.js",
-  "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.5 <4.9": {
-      "*": [
-        "dist/types-ts4.5/*",
-        "dist/types-ts4.5/index.d.ts"
-      ]
-    }
-  },
-  "sideEffects": false,
-  "atlaskit:src": "src/index.tsx",
-  "af:exports": {
-    ".": "./src/index.tsx"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ~18.2.0"
-  },
-  "dependencies": {
-    "@atlaskit/eslint-utils": "^1.6.0",
-    "@atlaskit/tokens": "*",
-    "@babel/runtime": "^7.0.0",
-    "@typescript-eslint/utils": "^5.48.1",
-    "ajv": "^6.12.6",
-    "eslint-codemod-utils": "^1.8.6",
-    "esquery": "^1.5.0",
-    "estraverse": "^5.3.0",
-    "lodash": "^4.17.21",
-    "semver": "^7.5.2"
-  },
-  "devDependencies": {
-    "@af/formatting": "*",
-    "@atlaskit/ds-lib": "^2.3.0",
-    "@atlaskit/theme": "^12.9.0",
-    "@atlassian/codegen": "*",
-    "@atlassian/eslint-utils": "^0.5.0",
-    "@emotion/react": "^11.7.1",
-    "@emotion/styled": "^11.0.0",
-    "@types/eslint": "^8.56.6",
-    "@types/esquery": "^1.5.3",
-    "@types/estraverse": "^5.1.7",
-    "eslint": "^8.49.0",
-    "jscodeshift": "^0.13.0",
-    "outdent": "^0.5.0",
-    "react": "^16.8.0",
-    "ts-jest": "26.5.6",
-    "ts-node": "^10.9.1",
-    "tsconfig-paths": "^4.2.0",
-    "typescript": "~5.4.2"
-  },
-  "scripts": {
-    "ak-postbuild": "cp -r configs dist",
-    "codegen": "ts-node -r tsconfig-paths/register ./scripts/codegen.tsx",
-    "codegen-token-maps": "ts-node -r tsconfig-paths/register ./scripts/token-maps/codegen-token-maps.tsx"
-  },
-  "techstack": {
-    "@atlassian/frontend": {
-      "import-structure": "atlassian-conventions",
-      "circular-dependencies": "file-and-folder-level"
-    },
-    "@repo/internal": {
-      "dom-events": "use-bind-event-listener",
-      "design-system": "v1",
-      "deprecation": "no-deprecated-imports",
-      "styling": [
-        "static",
-        "emotion"
-      ]
-    }
-  },
-  "homepage": "https://atlassian.design/components/eslint-plugin-design-system"
-}
+	"name": "@atlaskit/eslint-plugin-design-system",
+	"description": "The essential plugin for use with the Atlassian Design System.",
+	"version": "10.7.1",
+	"author": "Atlassian Pty Ltd",
+	"license": "Apache-2.0",
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org/"
+	},
+	"atlassian": {
+		"team": "Design System Team",
+		"releaseModel": "continuous",
+		"productPushConsumption": ["jira"],
+		"website": {
+			"name": "ESLint plugin",
+			"category": "Tooling"
+		},
+		"runReact18": true
+	},
+	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
+	"main": "dist/cjs/index.js",
+	"module": "dist/esm/index.js",
+	"module:es2019": "dist/es2019/index.js",
+	"types": "dist/types/index.d.ts",
+	"typesVersions": {
+		">=4.5 <4.9": {
+			"*": ["dist/types-ts4.5/*", "dist/types-ts4.5/index.d.ts"]
+		}
+	},
+	"sideEffects": false,
+	"atlaskit:src": "src/index.tsx",
+	"af:exports": {
+		".": "./src/index.tsx"
+	},
+	"peerDependencies": {
+		"react": "^16.8.0 || ^17.0.0 || ~18.2.0"
+	},
+	"dependencies": {
+		"@atlaskit/eslint-utils": "^1.6.0",
+		"@atlaskit/tokens": "*",
+		"@babel/runtime": "^7.0.0",
+		"@typescript-eslint/utils": "^5.48.1",
+		"ajv": "^6.12.6",
+		"eslint-codemod-utils": "^1.8.6",
+		"esquery": "^1.5.0",
+		"estraverse": "^5.3.0",
+		"lodash": "^4.17.21",
+		"semver": "^7.5.2"
+	},
+	"devDependencies": {
+		"@af/formatting": "*",
+		"@atlaskit/ds-lib": "^2.3.0",
+		"@atlaskit/theme": "^12.9.0",
+		"@atlassian/codegen": "*",
+		"@atlassian/eslint-utils": "^0.5.0",
+		"@emotion/react": "^11.7.1",
+		"@emotion/styled": "^11.0.0",
+		"@types/eslint": "^8.56.6",
+		"@types/esquery": "^1.5.3",
+		"@types/estraverse": "^5.1.7",
+		"eslint": "^8.49.0",
+		"jscodeshift": "^0.13.0",
+		"outdent": "^0.5.0",
+		"react": "^16.8.0",
+		"ts-jest": "26.5.6",
+		"ts-node": "^10.9.1",
+		"tsconfig-paths": "^4.2.0",
+		"typescript": "~5.4.2"
+	},
+	"scripts": {
+		"ak-postbuild": "cp -r configs dist",
+		"codegen": "ts-node -r tsconfig-paths/register ./scripts/codegen.tsx",
+		"codegen-token-maps": "ts-node -r tsconfig-paths/register ./scripts/token-maps/codegen-token-maps.tsx"
+	},
+	"techstack": {
+		"@atlassian/frontend": {
+			"import-structure": "atlassian-conventions",
+			"circular-dependencies": "file-and-folder-level"
+		},
+		"@repo/internal": {
+			"dom-events": "use-bind-event-listener",
+			"design-system": "v1",
+			"deprecation": "no-deprecated-imports",
+			"styling": ["static", "emotion"]
+		}
+	},
+	"homepage": "https://atlassian.design/components/eslint-plugin-design-system"
+}