@atlaskit/eslint-plugin-design-system 8.38.0 → 9.0.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 9.0.0
+
+### Major Changes
+
+- [#83454](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83454) [`be8b7ad6ff8e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/be8b7ad6ff8e) - Remove name autofixer from `consistent-css-prop-usage`. Variables for css / xcss / cssMap functions will no longer be required to end with "Styles".
+
+  [BREAKING] Some rule options have been changed:
+
+  - `fixNamesOnly` and `autoFixNames` have been removed, as there is no longer an autofixer that enforces variable names.
+    - If you use `fixNamesOnly: true`, we recommend switching to using `autoFix: false`.
+    - Users of the `autoFixNames` option should remove this from their configuration.
+  - `autoFix` option has been added. This controls whether the remaining autofixers should run or not (e.g. hoisting `css` function calls, wrapping objects in `css` function calls), and is `true` by default.
+
 ## 8.38.0
 
 ### Minor Changes

package/constellation/consistent-css-prop-usage/usage.mdx

@@ -16,7 +16,6 @@ This rule checks for the following cases:
 - Styles must be defined in the same file as their usage, and not be imported.
 - Styles should not contain spread operators (e.g. `css({ ...spreadStyles })`).
 - Styles must all be defined at the top of the file, or at the bottom of the file.
-- Styles must be in a variable whose name ends in `styles` (or `Styles`).
 
 This rule also has an autofixer that enforces and fixes the code (where practical) to meet the above requirements.
 
@@ -81,7 +80,7 @@ function Button({ children }) {
 
 ### Correct
 
-**Using the css() function to create a style object that follows the naming convention (ends in Styles) and passing it as a variable into the css={...} JSX attribute.**
+**Using the css() function to create a style object and passing it as a variable into the css={...} JSX attribute.**
 
 With the following options turned on:
 
@@ -181,23 +180,8 @@ Whether to exclude `css` attributes of React components from being affected by t
 
 This is `false` by default.
 
-### autoFixNames
+### autoFix
 
-When set to `true`, this rule will _turn on_ an autofixer that adds `Styles` at the end of existing style variables.
-
-```tsx
-//    vvvvv will be renamed to `myCssStyles`
-const myCss = { color: 'blue' };
-```
-
-Note that when hoisting styles, the name of the newly created style variable follows its own naming scheme (`styles`, `styles_1`, `styles_2`, ...) and is not affected by the value of `autoFixNames`.
+When set to `true`, this rule will turn on the autofixer. Set this to `false` if you do not want the autofixers to run.
 
 This is `true` by default.
-
-### fixNamesOnly
-
-When set to `true`, this rule will _turn off_ all autofixers other than the autofixer adding `Styles` to the end of existing style variables (which is controlled by `autoFixNames`). In other words, styles will no longer be hoisted and styles will no longer be wrapped in a `css`/`xcss` function call.
-
-This is `false` by default.
-
-If `autoFixNames` is `false` and `fixNamesOnly` is `true`, all autofixers will be turned off.

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -40,6 +39,18 @@ var getProgramNode = function getProgramNode(expression) {
   }
   return expression.parent;
 };
+var isDeclaredInsideComponent = function isDeclaredInsideComponent(expression) {
+  // These nodes imply that there is a distinct own scope (function scope / block scope),
+  // and so the presence of them means that expression was not defined in the module scope.
+  var NOT_MODULE_SCOPE = ['ArrowFunctionExpression', 'BlockStatement', 'ClassDeclaration', 'FunctionExpression'];
+  while (expression.type !== 'Program') {
+    if (NOT_MODULE_SCOPE.includes(expression.type)) {
+      return true;
+    }
+    expression = expression.parent;
+  }
+  return false;
+};
 var JSXExpressionLinter = /*#__PURE__*/function () {
   // File-level tracking of styles hoisted from the cssAtTopOfModule/cssAtBottomOfModule fixers.
 
@@ -119,13 +130,13 @@ var JSXExpressionLinter = /*#__PURE__*/function () {
         });
         return;
       }
-      if (identifier.parent.parent.parent.type !== 'Program') {
+      if (isDeclaredInsideComponent(identifier)) {
         // When variable is declared inside the component
         this.context.report({
           node: sourceIdentifier,
           messageId: this.configuration.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssAtTopOfModule',
           fix: function fix(fixer) {
-            if (_this.configuration.fixNamesOnly) {
+            if (!_this.configuration.autoFix) {
               return [];
             }
             return _this.fixCssNotInModuleScope(fixer, identifier, false);
@@ -147,7 +158,7 @@ var JSXExpressionLinter = /*#__PURE__*/function () {
             node: identifier,
             messageId: 'cssObjectTypeOnly',
             fix: function fix(fixer) {
-              if (_this.configuration.fixNamesOnly) {
+              if (!_this.configuration.autoFix) {
                 return [];
               }
               return _this.addCssFunctionCall(fixer, identifier.parent);
@@ -323,10 +334,11 @@ var JSXExpressionLinter = /*#__PURE__*/function () {
         // The last value is the bottom of the file
         fixerNodePlacement = programNode.body[programNode.body.length - 1];
       } else {
+        var _ref3;
         // Place after the last ImportDeclaration
-        fixerNodePlacement = programNode.body.length === 1 ? programNode.body[0] : programNode.body.find(function (node) {
+        fixerNodePlacement = (_ref3 = programNode.body.length === 1 ? programNode.body[0] : programNode.body.find(function (node) {
           return node.type !== 'ImportDeclaration';
-        });
+        })) !== null && _ref3 !== void 0 ? _ref3 : fixerNodePlacement;
       }
       var moduleString;
       var fixes = [];
@@ -410,7 +422,7 @@ var JSXExpressionLinter = /*#__PURE__*/function () {
             node: expression,
             messageId: this.configuration.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssAtTopOfModule',
             fix: function fix(fixer) {
-              if (_this3.configuration.fixNamesOnly) {
+              if (!_this3.configuration.autoFix) {
                 return [];
               }
 
@@ -455,8 +467,7 @@ var defaultConfig = {
   cssImportSource: _isSupportedImport.CSS_IN_JS_IMPORTS.compiled,
   xcssImportSource: _isSupportedImport.CSS_IN_JS_IMPORTS.atlaskitPrimitives,
   excludeReactComponents: false,
-  fixNamesOnly: false,
-  autoFixNames: true
+  autoFix: true
 };
 var rule = (0, _createRule.createLintRule)({
   meta: {
@@ -475,8 +486,7 @@ var rule = (0, _createRule.createLintRule)({
       cssObjectTypeOnly: "Create styles using objects passed to a css function call, e.g. `css({ textAlign: 'center'; })`.",
       cssInModule: "Imported styles should not be used; instead define in the module, import a component, or use a design token.",
       cssArrayStylesOnly: "Compose styles with an array on the css prop instead of using object spread.",
-      noMemberExpressions: "Styles should be a regular variable (e.g. 'buttonStyles'), not a member of an object (e.g. 'myObject.styles').",
-      shouldEndInStyles: 'Declared styles should end in "styles".'
+      noMemberExpressions: "Styles should be a regular variable (e.g. 'buttonStyles'), not a member of an object (e.g. 'myObject.styles')."
     },
     schema: [{
       type: 'object',
@@ -500,10 +510,7 @@ var rule = (0, _createRule.createLintRule)({
         excludeReactComponents: {
           type: 'boolean'
         },
-        autoFixNames: {
-          type: 'boolean'
-        },
-        fixNamesOnly: {
+        autoFix: {
           type: 'boolean'
         }
       },
@@ -511,80 +518,41 @@ var rule = (0, _createRule.createLintRule)({
     }]
   },
   create: function create(context) {
-    var _ref3;
     var mergedConfig = (0, _assign.default)({}, defaultConfig, context.options[0]);
-    var declarationSuffix = 'Styles';
-    var callSelectorFunctions = [].concat((0, _toConsumableArray2.default)(mergedConfig.cssFunctions), ['cssMap']);
-    var callSelector = callSelectorFunctions.map(function (fn) {
-      return "CallExpression[callee.name=".concat(fn, "]");
-    }).join(',');
-    return _ref3 = {}, (0, _defineProperty2.default)(_ref3, callSelector, function (node) {
-      if (node.parent.type !== 'VariableDeclarator') {
-        // We aren't interested in these that don't have a parent.
-        return;
-      }
-      var identifier = node.parent.id;
-      if (identifier.type === 'Identifier' && (identifier.name.endsWith(declarationSuffix) || identifier.name.startsWith(declarationSuffix.toLowerCase()) || identifier.name === declarationSuffix.toLowerCase())) {
-        // Already prefixed! Nothing to do.
-        return;
-      }
-      if (!mergedConfig.autoFixNames) {
-        return;
-      }
-      context.report({
-        node: identifier,
-        messageId: 'shouldEndInStyles',
-        fix: function fix(fixer) {
-          var _context$getScope$var;
-          var identifierName = identifier.type === 'Identifier' ? identifier.name : '';
-          var references = ((_context$getScope$var = context.getScope().variables.find(function (varb) {
-            return varb.name === identifierName;
-          })) === null || _context$getScope$var === void 0 ? void 0 : _context$getScope$var.references) || [];
-          var newIdentifierName = "".concat(identifierName
-          // Remove "Style" if it is already defined.
-          .replace(/Style$/, '')).concat(declarationSuffix);
-          return references.filter(function (ref) {
-            return ref.identifier.name === identifierName;
-          }).map(function (ref) {
-            if (ref.identifier.parent && ref.identifier.parent.shorthand) {
-              return fixer.replaceText(ref.identifier, "".concat(identifierName, ": ").concat(newIdentifierName));
-            }
-            return fixer.replaceText(ref.identifier, newIdentifierName);
-          });
-        }
-      });
-    }), (0, _defineProperty2.default)(_ref3, "JSXAttribute", function JSXAttribute(nodeOriginal) {
-      var node = nodeOriginal;
-      var name = node.name,
-        value = node.value;
-      if (mergedConfig.excludeReactComponents && node.parent.type === 'JSXOpeningElement') {
-        // e.g. <item.before />
-        if (node.parent.name.type === 'JSXMemberExpression') {
-          return;
-        }
-        // e.g. <div />, <MenuItem />
-        if (node.parent.name.type === 'JSXIdentifier' && !isDOMElementName(node.parent.name.name)) {
-          return;
-        }
-      }
-      if (name.type === 'JSXIdentifier' && mergedConfig.cssFunctions.includes(name.name)) {
-        // When not a jsx expression. For eg. css=""
-        if ((value === null || value === void 0 ? void 0 : value.type) !== 'JSXExpressionContainer') {
-          context.report({
-            node: node,
-            messageId: mergedConfig.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssAtTopOfModule'
-          });
-          return;
+    return {
+      JSXAttribute: function JSXAttribute(nodeOriginal) {
+        var node = nodeOriginal;
+        var name = node.name,
+          value = node.value;
+        if (mergedConfig.excludeReactComponents && node.parent.type === 'JSXOpeningElement') {
+          // e.g. <item.before />
+          if (node.parent.name.type === 'JSXMemberExpression') {
+            return;
+          }
+          // e.g. <div />, <MenuItem />
+          if (node.parent.name.type === 'JSXIdentifier' && !isDOMElementName(node.parent.name.name)) {
+            return;
+          }
         }
-        if (value.expression.type === 'JSXEmptyExpression') {
-          // e.g. the comment in
-          //      <div css={/* Hello there */} />
-          return;
+        if (name.type === 'JSXIdentifier' && mergedConfig.cssFunctions.includes(name.name)) {
+          // When not a jsx expression. For eg. css=""
+          if ((value === null || value === void 0 ? void 0 : value.type) !== 'JSXExpressionContainer') {
+            context.report({
+              node: node,
+              messageId: mergedConfig.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssAtTopOfModule'
+            });
+            return;
+          }
+          if (value.expression.type === 'JSXEmptyExpression') {
+            // e.g. the comment in
+            //      <div css={/* Hello there */} />
+            return;
+          }
+          var linter = new JSXExpressionLinter(context, name.name, mergedConfig, value.expression);
+          linter.run();
         }
-        var linter = new JSXExpressionLinter(context, name.name, mergedConfig, value.expression);
-        linter.run();
       }
-    }), _ref3;
+    };
   }
 });
 var _default = exports.default = rule;

package/dist/cjs/rules/utils/is-supported-import.js

@@ -3,7 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isStyledComponents = exports.isStyled = exports.isKeyframes = exports.isImportedFrom = exports.isEmotion = exports.isCxFunction = exports.isCssMap = exports.isCss = exports.isCompiled = exports.getImportSources = exports.DEFAULT_IMPORT_SOURCES = exports.CSS_IN_JS_IMPORTS = void 0;
+exports.isXcss = exports.isStyledComponents = exports.isStyled = exports.isKeyframes = exports.isImportedFrom = exports.isEmotion = exports.isCxFunction = exports.isCssMap = exports.isCss = exports.isCompiled = exports.getImportSources = exports.DEFAULT_IMPORT_SOURCES = exports.CSS_IN_JS_IMPORTS = void 0;
+// This should be kept in sync with
+// packages/design-system/eslint-plugin-ui-styling-standard/src/rules/utils/is-supported-import.tsx
+// whenever possible.
+//
+// TODO: would having an @atlassian/eslint-plugin-design-system-common
+// package be useful?
+
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 var CSS_IN_JS_IMPORTS = exports.CSS_IN_JS_IMPORTS = {
@@ -118,10 +125,12 @@ var isCssMap = exports.isCssMap = isSupportedImportWrapper('cssMap');
 var isKeyframes = exports.isKeyframes = isSupportedImportWrapper('keyframes');
 // `styled` is also the explicit default of `styled-components` and `@emotion/styled`, so we also match on default imports generally
 var isStyled = exports.isStyled = isSupportedImportWrapper('styled', ['styled-components', '@emotion/styled']);
+var isXcss = exports.isXcss = isSupportedImportWrapper('xcss');
 var isImportedFrom = exports.isImportedFrom = function isImportedFrom(moduleName) {
   var exactMatch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  return function (nodeToCheck, referencesInScope, importSources) {
-    if (!importSources.some(function (importSource) {
+  return function (nodeToCheck, referencesInScope) {
+    var importSources = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    if (importSources && !importSources.some(function (importSource) {
       return importSource === moduleName || !exactMatch && importSource.startsWith(moduleName);
     })) {
       // Don't go through the trouble of checking the import sources does not include this

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

@@ -24,6 +24,18 @@ const getProgramNode = expression => {
   }
   return expression.parent;
 };
+const isDeclaredInsideComponent = expression => {
+  // These nodes imply that there is a distinct own scope (function scope / block scope),
+  // and so the presence of them means that expression was not defined in the module scope.
+  const NOT_MODULE_SCOPE = ['ArrowFunctionExpression', 'BlockStatement', 'ClassDeclaration', 'FunctionExpression'];
+  while (expression.type !== 'Program') {
+    if (NOT_MODULE_SCOPE.includes(expression.type)) {
+      return true;
+    }
+    expression = expression.parent;
+  }
+  return false;
+};
 class JSXExpressionLinter {
   // File-level tracking of styles hoisted from the cssAtTopOfModule/cssAtBottomOfModule fixers.
 
@@ -92,13 +104,13 @@ class JSXExpressionLinter {
       });
       return;
     }
-    if (identifier.parent.parent.parent.type !== 'Program') {
+    if (isDeclaredInsideComponent(identifier)) {
       // When variable is declared inside the component
       this.context.report({
         node: sourceIdentifier,
         messageId: this.configuration.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssAtTopOfModule',
         fix: fixer => {
-          if (this.configuration.fixNamesOnly) {
+          if (!this.configuration.autoFix) {
             return [];
           }
           return this.fixCssNotInModuleScope(fixer, identifier, false);
@@ -120,7 +132,7 @@ class JSXExpressionLinter {
           node: identifier,
           messageId: 'cssObjectTypeOnly',
           fix: fixer => {
-            if (this.configuration.fixNamesOnly) {
+            if (!this.configuration.autoFix) {
               return [];
             }
             return this.addCssFunctionCall(fixer, identifier.parent);
@@ -285,8 +297,9 @@ class JSXExpressionLinter {
       // The last value is the bottom of the file
       fixerNodePlacement = programNode.body[programNode.body.length - 1];
     } else {
+      var _ref;
       // Place after the last ImportDeclaration
-      fixerNodePlacement = programNode.body.length === 1 ? programNode.body[0] : programNode.body.find(node => node.type !== 'ImportDeclaration');
+      fixerNodePlacement = (_ref = programNode.body.length === 1 ? programNode.body[0] : programNode.body.find(node => node.type !== 'ImportDeclaration')) !== null && _ref !== void 0 ? _ref : fixerNodePlacement;
     }
     let moduleString;
     let fixes = [];
@@ -363,7 +376,7 @@ class JSXExpressionLinter {
           node: expression,
           messageId: this.configuration.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssAtTopOfModule',
           fix: fixer => {
-            if (this.configuration.fixNamesOnly) {
+            if (!this.configuration.autoFix) {
               return [];
             }
 
@@ -404,8 +417,7 @@ const defaultConfig = {
   cssImportSource: CSS_IN_JS_IMPORTS.compiled,
   xcssImportSource: CSS_IN_JS_IMPORTS.atlaskitPrimitives,
   excludeReactComponents: false,
-  fixNamesOnly: false,
-  autoFixNames: true
+  autoFix: true
 };
 const rule = createLintRule({
   meta: {
@@ -424,8 +436,7 @@ const rule = createLintRule({
       cssObjectTypeOnly: `Create styles using objects passed to a css function call, e.g. \`css({ textAlign: 'center'; })\`.`,
       cssInModule: `Imported styles should not be used; instead define in the module, import a component, or use a design token.`,
       cssArrayStylesOnly: `Compose styles with an array on the css prop instead of using object spread.`,
-      noMemberExpressions: `Styles should be a regular variable (e.g. 'buttonStyles'), not a member of an object (e.g. 'myObject.styles').`,
-      shouldEndInStyles: 'Declared styles should end in "styles".'
+      noMemberExpressions: `Styles should be a regular variable (e.g. 'buttonStyles'), not a member of an object (e.g. 'myObject.styles').`
     },
     schema: [{
       type: 'object',
@@ -449,10 +460,7 @@ const rule = createLintRule({
         excludeReactComponents: {
           type: 'boolean'
         },
-        autoFixNames: {
-          type: 'boolean'
-        },
-        fixNamesOnly: {
+        autoFix: {
           type: 'boolean'
         }
       },
@@ -461,42 +469,7 @@ const rule = createLintRule({
   },
   create(context) {
     const mergedConfig = assign({}, defaultConfig, context.options[0]);
-    const declarationSuffix = 'Styles';
-    const callSelectorFunctions = [...mergedConfig.cssFunctions, 'cssMap'];
-    const callSelector = callSelectorFunctions.map(fn => `CallExpression[callee.name=${fn}]`).join(',');
     return {
-      [callSelector]: node => {
-        if (node.parent.type !== 'VariableDeclarator') {
-          // We aren't interested in these that don't have a parent.
-          return;
-        }
-        const identifier = node.parent.id;
-        if (identifier.type === 'Identifier' && (identifier.name.endsWith(declarationSuffix) || identifier.name.startsWith(declarationSuffix.toLowerCase()) || identifier.name === declarationSuffix.toLowerCase())) {
-          // Already prefixed! Nothing to do.
-          return;
-        }
-        if (!mergedConfig.autoFixNames) {
-          return;
-        }
-        context.report({
-          node: identifier,
-          messageId: 'shouldEndInStyles',
-          fix: fixer => {
-            var _context$getScope$var;
-            const identifierName = identifier.type === 'Identifier' ? identifier.name : '';
-            const references = ((_context$getScope$var = context.getScope().variables.find(varb => varb.name === identifierName)) === null || _context$getScope$var === void 0 ? void 0 : _context$getScope$var.references) || [];
-            const newIdentifierName = `${identifierName
-            // Remove "Style" if it is already defined.
-            .replace(/Style$/, '')}${declarationSuffix}`;
-            return references.filter(ref => ref.identifier.name === identifierName).map(ref => {
-              if (ref.identifier.parent && ref.identifier.parent.shorthand) {
-                return fixer.replaceText(ref.identifier, `${identifierName}: ${newIdentifierName}`);
-              }
-              return fixer.replaceText(ref.identifier, newIdentifierName);
-            });
-          }
-        });
-      },
       JSXAttribute(nodeOriginal) {
         const node = nodeOriginal;
         const {

package/dist/es2019/rules/utils/is-supported-import.js

@@ -1,3 +1,10 @@
+// This should be kept in sync with
+// packages/design-system/eslint-plugin-ui-styling-standard/src/rules/utils/is-supported-import.tsx
+// whenever possible.
+//
+// TODO: would having an @atlassian/eslint-plugin-design-system-common
+// package be useful?
+
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 export const CSS_IN_JS_IMPORTS = {
@@ -109,8 +116,14 @@ export const isCssMap = isSupportedImportWrapper('cssMap');
 export const isKeyframes = isSupportedImportWrapper('keyframes');
 // `styled` is also the explicit default of `styled-components` and `@emotion/styled`, so we also match on default imports generally
 export const isStyled = isSupportedImportWrapper('styled', ['styled-components', '@emotion/styled']);
-export const isImportedFrom = (moduleName, exactMatch = true) => (nodeToCheck, referencesInScope, importSources) => {
-  if (!importSources.some(importSource => importSource === moduleName || !exactMatch && importSource.startsWith(moduleName))) {
+export const isXcss = isSupportedImportWrapper('xcss');
+export const isImportedFrom = (moduleName, exactMatch = true) => (nodeToCheck, referencesInScope,
+/**
+ * If we strictly have specific import sources in the config scope, pass them to make this more performant.
+ * Pass `null` if you don't care if its configured or not.
+ */
+importSources = null) => {
+  if (importSources && !importSources.some(importSource => importSource === moduleName || !exactMatch && importSource.startsWith(moduleName))) {
     // Don't go through the trouble of checking the import sources does not include this
     // We'll assume this is skipped elsewhere.
     return false;

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

@@ -1,4 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -33,6 +32,18 @@ var getProgramNode = function getProgramNode(expression) {
   }
   return expression.parent;
 };
+var isDeclaredInsideComponent = function isDeclaredInsideComponent(expression) {
+  // These nodes imply that there is a distinct own scope (function scope / block scope),
+  // and so the presence of them means that expression was not defined in the module scope.
+  var NOT_MODULE_SCOPE = ['ArrowFunctionExpression', 'BlockStatement', 'ClassDeclaration', 'FunctionExpression'];
+  while (expression.type !== 'Program') {
+    if (NOT_MODULE_SCOPE.includes(expression.type)) {
+      return true;
+    }
+    expression = expression.parent;
+  }
+  return false;
+};
 var JSXExpressionLinter = /*#__PURE__*/function () {
   // File-level tracking of styles hoisted from the cssAtTopOfModule/cssAtBottomOfModule fixers.
 
@@ -112,13 +123,13 @@ var JSXExpressionLinter = /*#__PURE__*/function () {
         });
         return;
       }
-      if (identifier.parent.parent.parent.type !== 'Program') {
+      if (isDeclaredInsideComponent(identifier)) {
         // When variable is declared inside the component
         this.context.report({
           node: sourceIdentifier,
           messageId: this.configuration.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssAtTopOfModule',
           fix: function fix(fixer) {
-            if (_this.configuration.fixNamesOnly) {
+            if (!_this.configuration.autoFix) {
               return [];
             }
             return _this.fixCssNotInModuleScope(fixer, identifier, false);
@@ -140,7 +151,7 @@ var JSXExpressionLinter = /*#__PURE__*/function () {
             node: identifier,
             messageId: 'cssObjectTypeOnly',
             fix: function fix(fixer) {
-              if (_this.configuration.fixNamesOnly) {
+              if (!_this.configuration.autoFix) {
                 return [];
               }
               return _this.addCssFunctionCall(fixer, identifier.parent);
@@ -316,10 +327,11 @@ var JSXExpressionLinter = /*#__PURE__*/function () {
         // The last value is the bottom of the file
         fixerNodePlacement = programNode.body[programNode.body.length - 1];
       } else {
+        var _ref3;
         // Place after the last ImportDeclaration
-        fixerNodePlacement = programNode.body.length === 1 ? programNode.body[0] : programNode.body.find(function (node) {
+        fixerNodePlacement = (_ref3 = programNode.body.length === 1 ? programNode.body[0] : programNode.body.find(function (node) {
           return node.type !== 'ImportDeclaration';
-        });
+        })) !== null && _ref3 !== void 0 ? _ref3 : fixerNodePlacement;
       }
       var moduleString;
       var fixes = [];
@@ -403,7 +415,7 @@ var JSXExpressionLinter = /*#__PURE__*/function () {
             node: expression,
             messageId: this.configuration.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssAtTopOfModule',
             fix: function fix(fixer) {
-              if (_this3.configuration.fixNamesOnly) {
+              if (!_this3.configuration.autoFix) {
                 return [];
               }
 
@@ -448,8 +460,7 @@ var defaultConfig = {
   cssImportSource: CSS_IN_JS_IMPORTS.compiled,
   xcssImportSource: CSS_IN_JS_IMPORTS.atlaskitPrimitives,
   excludeReactComponents: false,
-  fixNamesOnly: false,
-  autoFixNames: true
+  autoFix: true
 };
 var rule = createLintRule({
   meta: {
@@ -468,8 +479,7 @@ var rule = createLintRule({
       cssObjectTypeOnly: "Create styles using objects passed to a css function call, e.g. `css({ textAlign: 'center'; })`.",
       cssInModule: "Imported styles should not be used; instead define in the module, import a component, or use a design token.",
       cssArrayStylesOnly: "Compose styles with an array on the css prop instead of using object spread.",
-      noMemberExpressions: "Styles should be a regular variable (e.g. 'buttonStyles'), not a member of an object (e.g. 'myObject.styles').",
-      shouldEndInStyles: 'Declared styles should end in "styles".'
+      noMemberExpressions: "Styles should be a regular variable (e.g. 'buttonStyles'), not a member of an object (e.g. 'myObject.styles')."
     },
     schema: [{
       type: 'object',
@@ -493,10 +503,7 @@ var rule = createLintRule({
         excludeReactComponents: {
           type: 'boolean'
         },
-        autoFixNames: {
-          type: 'boolean'
-        },
-        fixNamesOnly: {
+        autoFix: {
           type: 'boolean'
         }
       },
@@ -504,80 +511,41 @@ var rule = createLintRule({
     }]
   },
   create: function create(context) {
-    var _ref3;
     var mergedConfig = assign({}, defaultConfig, context.options[0]);
-    var declarationSuffix = 'Styles';
-    var callSelectorFunctions = [].concat(_toConsumableArray(mergedConfig.cssFunctions), ['cssMap']);
-    var callSelector = callSelectorFunctions.map(function (fn) {
-      return "CallExpression[callee.name=".concat(fn, "]");
-    }).join(',');
-    return _ref3 = {}, _defineProperty(_ref3, callSelector, function (node) {
-      if (node.parent.type !== 'VariableDeclarator') {
-        // We aren't interested in these that don't have a parent.
-        return;
-      }
-      var identifier = node.parent.id;
-      if (identifier.type === 'Identifier' && (identifier.name.endsWith(declarationSuffix) || identifier.name.startsWith(declarationSuffix.toLowerCase()) || identifier.name === declarationSuffix.toLowerCase())) {
-        // Already prefixed! Nothing to do.
-        return;
-      }
-      if (!mergedConfig.autoFixNames) {
-        return;
-      }
-      context.report({
-        node: identifier,
-        messageId: 'shouldEndInStyles',
-        fix: function fix(fixer) {
-          var _context$getScope$var;
-          var identifierName = identifier.type === 'Identifier' ? identifier.name : '';
-          var references = ((_context$getScope$var = context.getScope().variables.find(function (varb) {
-            return varb.name === identifierName;
-          })) === null || _context$getScope$var === void 0 ? void 0 : _context$getScope$var.references) || [];
-          var newIdentifierName = "".concat(identifierName
-          // Remove "Style" if it is already defined.
-          .replace(/Style$/, '')).concat(declarationSuffix);
-          return references.filter(function (ref) {
-            return ref.identifier.name === identifierName;
-          }).map(function (ref) {
-            if (ref.identifier.parent && ref.identifier.parent.shorthand) {
-              return fixer.replaceText(ref.identifier, "".concat(identifierName, ": ").concat(newIdentifierName));
-            }
-            return fixer.replaceText(ref.identifier, newIdentifierName);
-          });
-        }
-      });
-    }), _defineProperty(_ref3, "JSXAttribute", function JSXAttribute(nodeOriginal) {
-      var node = nodeOriginal;
-      var name = node.name,
-        value = node.value;
-      if (mergedConfig.excludeReactComponents && node.parent.type === 'JSXOpeningElement') {
-        // e.g. <item.before />
-        if (node.parent.name.type === 'JSXMemberExpression') {
-          return;
-        }
-        // e.g. <div />, <MenuItem />
-        if (node.parent.name.type === 'JSXIdentifier' && !isDOMElementName(node.parent.name.name)) {
-          return;
-        }
-      }
-      if (name.type === 'JSXIdentifier' && mergedConfig.cssFunctions.includes(name.name)) {
-        // When not a jsx expression. For eg. css=""
-        if ((value === null || value === void 0 ? void 0 : value.type) !== 'JSXExpressionContainer') {
-          context.report({
-            node: node,
-            messageId: mergedConfig.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssAtTopOfModule'
-          });
-          return;
+    return {
+      JSXAttribute: function JSXAttribute(nodeOriginal) {
+        var node = nodeOriginal;
+        var name = node.name,
+          value = node.value;
+        if (mergedConfig.excludeReactComponents && node.parent.type === 'JSXOpeningElement') {
+          // e.g. <item.before />
+          if (node.parent.name.type === 'JSXMemberExpression') {
+            return;
+          }
+          // e.g. <div />, <MenuItem />
+          if (node.parent.name.type === 'JSXIdentifier' && !isDOMElementName(node.parent.name.name)) {
+            return;
+          }
         }
-        if (value.expression.type === 'JSXEmptyExpression') {
-          // e.g. the comment in
-          //      <div css={/* Hello there */} />
-          return;
+        if (name.type === 'JSXIdentifier' && mergedConfig.cssFunctions.includes(name.name)) {
+          // When not a jsx expression. For eg. css=""
+          if ((value === null || value === void 0 ? void 0 : value.type) !== 'JSXExpressionContainer') {
+            context.report({
+              node: node,
+              messageId: mergedConfig.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssAtTopOfModule'
+            });
+            return;
+          }
+          if (value.expression.type === 'JSXEmptyExpression') {
+            // e.g. the comment in
+            //      <div css={/* Hello there */} />
+            return;
+          }
+          var linter = new JSXExpressionLinter(context, name.name, mergedConfig, value.expression);
+          linter.run();
         }
-        var linter = new JSXExpressionLinter(context, name.name, mergedConfig, value.expression);
-        linter.run();
       }
-    }), _ref3;
+    };
   }
 });
 export default rule;

package/dist/esm/rules/utils/is-supported-import.js

@@ -1,3 +1,10 @@
+// This should be kept in sync with
+// packages/design-system/eslint-plugin-ui-styling-standard/src/rules/utils/is-supported-import.tsx
+// whenever possible.
+//
+// TODO: would having an @atlassian/eslint-plugin-design-system-common
+// package be useful?
+
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 export var CSS_IN_JS_IMPORTS = {
@@ -112,10 +119,12 @@ export var isCssMap = isSupportedImportWrapper('cssMap');
 export var isKeyframes = isSupportedImportWrapper('keyframes');
 // `styled` is also the explicit default of `styled-components` and `@emotion/styled`, so we also match on default imports generally
 export var isStyled = isSupportedImportWrapper('styled', ['styled-components', '@emotion/styled']);
+export var isXcss = isSupportedImportWrapper('xcss');
 export var isImportedFrom = function isImportedFrom(moduleName) {
   var exactMatch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  return function (nodeToCheck, referencesInScope, importSources) {
-    if (!importSources.some(function (importSource) {
+  return function (nodeToCheck, referencesInScope) {
+    var importSources = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    if (importSources && !importSources.some(function (importSource) {
       return importSource === moduleName || !exactMatch && importSource.startsWith(moduleName);
     })) {
       // Don't go through the trouble of checking the import sources does not include this

package/dist/types/rules/consistent-css-prop-usage/types.d.ts

@@ -5,6 +5,5 @@ export type RuleConfig = {
     cssImportSource: ImportSource;
     xcssImportSource: ImportSource;
     excludeReactComponents: boolean;
-    autoFixNames: boolean;
-    fixNamesOnly: boolean;
+    autoFix: boolean;
 };

package/dist/types/rules/utils/is-supported-import.d.ts

@@ -31,7 +31,8 @@ export declare const isCxFunction: SupportedNameChecker;
 export declare const isCssMap: SupportedNameChecker;
 export declare const isKeyframes: SupportedNameChecker;
 export declare const isStyled: SupportedNameChecker;
-export declare const isImportedFrom: (moduleName: string, exactMatch?: boolean) => (nodeToCheck: Callee, referencesInScope: Reference[], importSources: ImportSource[]) => boolean;
+export declare const isXcss: SupportedNameChecker;
+export declare const isImportedFrom: (moduleName: string, exactMatch?: boolean) => (nodeToCheck: Callee, referencesInScope: Reference[], importSources?: ImportSource[] | null) => boolean;
 /**
  * Determine if this node is specifically from a `'styled-components'` import.
  * This is because `styled-components@3.4` APIs are not consistent with Emotion and Compiled,
@@ -39,7 +40,7 @@ export declare const isImportedFrom: (moduleName: string, exactMatch?: boolean)
  *
  * This can be cleaned up when `'styled-components'` is no longer a valid ImportSource.
  */
-export declare const isStyledComponents: (nodeToCheck: Callee, referencesInScope: Reference[], importSources: ImportSource[]) => boolean;
-export declare const isCompiled: (nodeToCheck: Callee, referencesInScope: Reference[], importSources: ImportSource[]) => boolean;
-export declare const isEmotion: (nodeToCheck: Callee, referencesInScope: Reference[], importSources: ImportSource[]) => boolean;
+export declare const isStyledComponents: (nodeToCheck: Callee, referencesInScope: Reference[], importSources?: ImportSource[] | null) => boolean;
+export declare const isCompiled: (nodeToCheck: Callee, referencesInScope: Reference[], importSources?: ImportSource[] | null) => boolean;
+export declare const isEmotion: (nodeToCheck: Callee, referencesInScope: Reference[], importSources?: ImportSource[] | null) => boolean;
 export {};

package/dist/types-ts4.5/rules/consistent-css-prop-usage/types.d.ts

@@ -5,6 +5,5 @@ export type RuleConfig = {
     cssImportSource: ImportSource;
     xcssImportSource: ImportSource;
     excludeReactComponents: boolean;
-    autoFixNames: boolean;
-    fixNamesOnly: boolean;
+    autoFix: boolean;
 };

package/dist/types-ts4.5/rules/utils/is-supported-import.d.ts

@@ -31,7 +31,8 @@ export declare const isCxFunction: SupportedNameChecker;
 export declare const isCssMap: SupportedNameChecker;
 export declare const isKeyframes: SupportedNameChecker;
 export declare const isStyled: SupportedNameChecker;
-export declare const isImportedFrom: (moduleName: string, exactMatch?: boolean) => (nodeToCheck: Callee, referencesInScope: Reference[], importSources: ImportSource[]) => boolean;
+export declare const isXcss: SupportedNameChecker;
+export declare const isImportedFrom: (moduleName: string, exactMatch?: boolean) => (nodeToCheck: Callee, referencesInScope: Reference[], importSources?: ImportSource[] | null) => boolean;
 /**
  * Determine if this node is specifically from a `'styled-components'` import.
  * This is because `styled-components@3.4` APIs are not consistent with Emotion and Compiled,
@@ -39,7 +40,7 @@ export declare const isImportedFrom: (moduleName: string, exactMatch?: boolean)
  *
  * This can be cleaned up when `'styled-components'` is no longer a valid ImportSource.
  */
-export declare const isStyledComponents: (nodeToCheck: Callee, referencesInScope: Reference[], importSources: ImportSource[]) => boolean;
-export declare const isCompiled: (nodeToCheck: Callee, referencesInScope: Reference[], importSources: ImportSource[]) => boolean;
-export declare const isEmotion: (nodeToCheck: Callee, referencesInScope: Reference[], importSources: ImportSource[]) => boolean;
+export declare const isStyledComponents: (nodeToCheck: Callee, referencesInScope: Reference[], importSources?: ImportSource[] | null) => boolean;
+export declare const isCompiled: (nodeToCheck: Callee, referencesInScope: Reference[], importSources?: ImportSource[] | null) => boolean;
+export declare const isEmotion: (nodeToCheck: Callee, referencesInScope: Reference[], importSources?: ImportSource[] | null) => boolean;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/eslint-plugin-design-system",
   "description": "The essential plugin for use with the Atlassian Design System.",
-  "version": "8.38.0",
+  "version": "9.0.0",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "publishConfig": {
@@ -54,7 +54,7 @@
     "@atlassian/eslint-utils": "^0.4.0",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.0.0",
-    "@types/eslint": "^8.4.5",
+    "@types/eslint": "^8.56.6",
     "@types/estraverse": "^5.1.7",
     "eslint": "^8.49.0",
     "jscodeshift": "^0.13.0",