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

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 9.1.0
+
+### Minor Changes
+
+- [#84334](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/84334) [`b2134858ba58`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b2134858ba58) - The `use-tokens-typography` rule now applies token fallbacks that reference the constants exported via `@atlaskit/theme/typography`, rather than applying the fallback string inline.
+
+## 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/use-tokens-typography/transformers/style-object.js

@@ -32,7 +32,9 @@ var StyleObject = exports.StyleObject = {
     }
     var fontSizeNode = refs.fontSizeNode,
       fontSizeRaw = refs.fontSizeRaw,
-      tokensImportNode = refs.tokensImportNode;
+      tokensImportNode = refs.tokensImportNode,
+      themeImportNode = refs.themeImportNode,
+      shouldAddFallbackImport = refs.shouldAddFallbackImport;
     var fontSizeValue = (0, _utils.normaliseValue)('fontSize', fontSizeRaw);
 
     // -- Font weight --
@@ -123,6 +125,8 @@ var StyleObject = exports.StyleObject = {
         matchingToken: matchingToken,
         nodesToReplace: nodesToReplace,
         tokensImportNode: tokensImportNode,
+        themeImportNode: themeImportNode,
+        shouldAddFallbackImport: shouldAddFallbackImport,
         fontWeightReplacement: fontWeightReplacement,
         fontFamilyReplacement: fontFamilyReplacement,
         fontStyleReplacement: fontStyleReplacement
@@ -169,20 +173,47 @@ var StyleObject = exports.StyleObject = {
         success: false
       };
     }
-    var importDeclaration = _astNodes.Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/tokens');
+    var tokensImportDeclaration = _astNodes.Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/tokens');
 
     // If there is more than one `@atlaskit/tokens` import, then it becomes difficult to determine which import to transform
-    if (importDeclaration.length > 1) {
+    if (tokensImportDeclaration.length > 1) {
       return {
         success: false
       };
     }
+
+    // This exists purely because we're not inlining the fallback values
+    // and instead referencing a `fontFallback` object that exists in @atlaskit/theme/typography.
+    // This is a temporary measure until fallbacks are no longer required
+    var shouldAddFallbackImport = 'full';
+    var themeImportDeclaration = _astNodes.Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/theme/typography');
+    if (themeImportDeclaration.length) {
+      // Import exists, check if specifier exists
+      shouldAddFallbackImport = 'specifier';
+      var fallbackImport = themeImportDeclaration[0].specifiers.find(function (specifier) {
+        // @atlaskit/theme/typography has no default export so we can safely narrow this type
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(specifier, 'ImportSpecifier')) {
+          return false;
+        }
+        if (specifier.imported.name === 'fontFallback') {
+          return true;
+        }
+        return false;
+      });
+
+      // Exact import already exists, no need to add
+      if (fallbackImport) {
+        shouldAddFallbackImport = false;
+      }
+    }
     return {
       success: true,
       refs: {
         fontSizeNode: fontSizeNode,
         fontSizeRaw: fontSizeRaw,
-        tokensImportNode: importDeclaration[0]
+        tokensImportNode: tokensImportDeclaration[0],
+        themeImportNode: themeImportDeclaration[0],
+        shouldAddFallbackImport: shouldAddFallbackImport
       }
     };
   },
@@ -191,14 +222,24 @@ var StyleObject = exports.StyleObject = {
       var matchingToken = refs.matchingToken,
         nodesToReplace = refs.nodesToReplace,
         tokensImportNode = refs.tokensImportNode,
+        themeImportNode = refs.themeImportNode,
+        shouldAddFallbackImport = refs.shouldAddFallbackImport,
         fontWeightReplacement = refs.fontWeightReplacement,
         fontFamilyReplacement = refs.fontFamilyReplacement,
         fontStyleReplacement = refs.fontStyleReplacement;
       var fontSizeNode = nodesToReplace[0];
-      return (!tokensImportNode ? [(0, _utils.insertTokensImport)(fixer)] : []).concat(nodesToReplace.map(function (node, index) {
+      var root = context.getSourceCode().ast.body;
+      var fallbackImport;
+      if (shouldAddFallbackImport === 'full') {
+        fallbackImport = (0, _utils2.insertFallbackImportFull)(root, fixer);
+      } else if (shouldAddFallbackImport === 'specifier') {
+        fallbackImport = (0, _utils2.insertFallbackImportSpecifier)(fixer, themeImportNode);
+      }
+      var fallbackName = (matchingToken.tokenName === 'font.body' ? 'font.body.medium' : matchingToken.tokenName).replace('font', 'fontFallback');
+      return (!tokensImportNode ? [(0, _utils2.insertTokensImport)(root, fixer)] : []).concat(fallbackImport ? [fallbackImport] : [], nodesToReplace.map(function (node, index) {
         // Replace first node with token, delete remaining nodes. Guaranteed to be fontSize
         if (index === 0) {
-          return fixer.replaceText(node, "".concat((0, _utils2.getTokenProperty)('font', matchingToken.tokenName, matchingToken.tokenValue)));
+          return fixer.replaceText(node, "".concat((0, _utils2.getTokenProperty)('font', matchingToken.tokenName, fallbackName, true)));
         }
 
         // We don't replace fontWeight/fontFamily/fontStyle here in case it occurs before the font property.

package/dist/cjs/rules/use-tokens-typography/utils.js

@@ -11,6 +11,9 @@ exports.findTypographyTokenForValues = findTypographyTokenForValues;
 exports.fontWeightTokens = exports.fontWeightMap = exports.fontFamilyTokens = void 0;
 exports.getLiteralProperty = getLiteralProperty;
 exports.getTokenProperty = getTokenProperty;
+exports.insertFallbackImportFull = insertFallbackImportFull;
+exports.insertFallbackImportSpecifier = insertFallbackImportSpecifier;
+exports.insertTokensImport = insertTokensImport;
 exports.isTypographyProperty = exports.isFontSizeSmall = exports.isFontSize = exports.isFontFamily = exports.isCodeFontFamily = void 0;
 exports.isValidPropertyNode = isValidPropertyNode;
 exports.notUndefined = notUndefined;
@@ -18,6 +21,7 @@ exports.typographyValueToToken = exports.typographyProperties = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var _palettesRaw = require("@atlaskit/tokens/palettes-raw");
 var _tokensRaw = require("@atlaskit/tokens/tokens-raw");
+var _astNodes = require("../../ast-nodes");
 var typographyProperties = exports.typographyProperties = ['fontSize', 'fontWeight', 'fontFamily', 'lineHeight'];
 var isTypographyProperty = exports.isTypographyProperty = function isTypographyProperty(propertyName) {
   return typographyProperties.includes(propertyName);
@@ -115,21 +119,38 @@ function isValidPropertyNode(node) {
   }
   return true;
 }
-function getTokenNode(tokenName, tokenValue) {
+function getTokenNode(tokenName, tokenValue, isFallbackMember) {
+  var fallback;
+  if (isFallbackMember) {
+    fallback = createMemberExpressionFromArray(tokenValue.split('.'));
+  } else {
+    fallback = (0, _eslintCodemodUtils.literal)(tokenValue);
+  }
   return (0, _eslintCodemodUtils.callExpression)({
     callee: (0, _eslintCodemodUtils.identifier)({
       name: 'token'
     }),
     arguments: [(0, _eslintCodemodUtils.literal)({
       value: "'".concat(tokenName, "'")
-    }), (0, _eslintCodemodUtils.literal)(tokenValue)],
+    }), fallback],
     optional: false
   });
 }
+function createMemberExpressionFromArray(array) {
+  if (array.length === 1) {
+    return (0, _eslintCodemodUtils.identifier)(array[0]);
+  }
+  var property = array.pop();
+  return (0, _eslintCodemodUtils.memberExpression)({
+    object: createMemberExpressionFromArray(array),
+    property: (0, _eslintCodemodUtils.identifier)(property)
+  });
+}
 function getTokenProperty(propertyName, tokenName, tokenFallback) {
+  var isFallbackMember = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   return (0, _eslintCodemodUtils.property)({
     key: (0, _eslintCodemodUtils.identifier)(propertyName),
-    value: getTokenNode(tokenName, tokenFallback)
+    value: getTokenNode(tokenName, tokenFallback, isFallbackMember)
   });
 }
 function getLiteralProperty(propertyName, propertyValue) {
@@ -143,4 +164,19 @@ function convertPropertyNodeToStringableNode(node) {
     key: node.key,
     value: node.value
   });
+}
+function insertTokensImport(root, fixer) {
+  return _astNodes.Root.insertImport(root, {
+    module: '@atlaskit/tokens',
+    specifiers: ['token']
+  }, fixer);
+}
+function insertFallbackImportFull(root, fixer) {
+  return _astNodes.Root.insertImport(root, {
+    module: '@atlaskit/theme/typography',
+    specifiers: ['fontFallback']
+  }, fixer);
+}
+function insertFallbackImportSpecifier(fixer, themeImportNode) {
+  return _astNodes.Import.insertNamedSpecifiers(themeImportNode, ['fontFallback'], fixer);
 }

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 {