@atlaskit/eslint-plugin-design-system 8.26.0 → 8.27.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 8.27.0
+
+### Minor Changes
+
+- [#72966](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/72966) [`ec187f466e23`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ec187f466e23) - Update `consistent-css-prop-usage` to incorporate some updates previously made to the `@compiled/eslint-plugin` equivalent.
+
+  1. Add autofixer to add the `css` function for the following scenario:
+
+  ```
+  const styles = { ... };
+  <div css={styles} />
+  ```
+
+  Note that this autofixer will not run if local variables are used inside the style object (e.g. `{ height: makeTaller ? '5px' : '2px' }`), or if there are spread elements, template literals, and other tricky-to-parse code. These continue to require fixing manually.
+
+  (This rule would previously only autofix if the file was originally `<div css={{ ... }} />`)
+
+  2. Add `import { css } from '@compiled/react'` (or `xcss`) automatically when fixing. The package from which to import the `css` function can be specified through the `importSource` option.
+
+  3. Add `excludeReactComponents` to exclude linting React components (i.e. components that start with uppercase). Sometimes it may not be desirable to have this rule apply to React components (e.g. `@atlaskit/button`), which could either use the Emotion or Compiled APIs when they expose a `css` prop. Passing a function from the wrong library can result in the styling erroneously not being applied.
+
+  4. Treat `{ ... } as const` statements the same way as `{ ... }` objects.
+
+  5. Add `fixNamesOnly` to disable all autofixers _except_ the autofixer that adds `styles` to the end of existing style variables. For example, in `<div css={buttonComponent} />; const buttonComponent = css({ ... })`, `buttonComponent` will continue to be renamed to `buttonComponentStyles`. Autofixers that will be _disabled_ include hoisting the styles to the top-most scope, and adding the `css` function call around style objects.
+
 ## 8.26.0
 
 ### Minor Changes

package/constellation/index/usage.mdx

@@ -58,14 +58,19 @@ Every product should be defining styles in the same way, using the same tools, e
 
 This rule checks for the following cases:
 
-- When styles are defined inline.
-- When styles are not using `css` object api.
-- When styles are coming from outside of the module i.e. using imports.
-- When styles are spread inside another styles and not using array composition.
+- Styles should not be defined inline; it should instead be in a standalone variable.
+  - The exception for this is style composition (e.g. `<div css={[baseStyles, moreStyles]} />`), which is a way to combine styles from two variables.
+- Styles must be wrapped in a `css` function call.
+- 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.
 
 All the above can also work for custom `css` functions, such as `xcss` (https://atlassian.design/components/primitives/xcss/).
 
-This rule has options - see below.
+This rule has several options - see below.
 
 <h3>Examples</h3>
 
@@ -197,13 +202,44 @@ This rule comes with options to support different repository configurations.
 
 #### cssFunctions
 
-An array of function names the linting rule should target. Defaults to `['css', 'xcss']`. Functionality of cssMap will be linted regardless of the configuration of `cssFunctions` as it can be used with either attribute.
+An array of function names the linting rule should target. Defaults to `['css', 'xcss']`. The functionality of `cssMap` will be linted regardless of the configuration of `cssFunctions`, as it can be used with either attribute.
 
 #### stylesPlacement
 
+Either `top` or `bottom`.
+
 The rule prevents inline styles from being created. This option defines what the error message should say: "(...) styles at the top (...)" or "(...) styles at the bottom (...)".
 Defaults to `top`.
 
+#### cssImportSource
+
+When auto-fixing the contents of the `css` attribute, this rule will wrap CSS styles in a `css(...)` function call or `` css\`...\`  `` template expression, and it will add an import declaration for the `css` function. `cssImportSource` is a string that determines what package `css` should be imported from.
+
+This is `@compiled/react` by default.
+
+#### xcssImportSource
+
+When auto-fixing the contents of the `xcss` attribute, this rule will wrap XCSS styles in a `xcss(...)` function call, and it will add an import declaration for the `xcss` function. `cssImportSource` is a string that determines what package `xcss` should be imported from.
+
+This is `@atlaskit/primitives` by default.
+
+#### excludeReactComponents
+
+Whether to exclude `css` attributes of React components from being affected by this ESLint rule. We assume that an element is a React component if its name starts with a capital letter, e.g. `<Button />`.
+
+This is `false` by default.
+
+#### fixNamesOnly
+
+When enabled, this rule will only add `styles` at the end of existing style variables. All other autofixers will be disabled. For example:
+
+```tsx
+//    vvvvv will be renamed to `myCssStyles`
+const myCss = { color: 'blue' };
+```
+
+This is `false` by default.
+
 ## ensure-design-token-usage
 
 Using design tokens results in a harmonious experience for end users whilst providing theming and consistency.
@@ -708,8 +744,6 @@ In Compiled, exporting keyframes declarations may result in unexpected errors wh
 
 <h3>Examples</h3>
 
-<!-- To fill out -- tell us when this rule will mark violations. -->
-
 #### Incorrect
 
 ```tsx

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

@@ -9,21 +9,28 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _estraverse = _interopRequireDefault(require("estraverse"));
 var _assign = _interopRequireDefault(require("lodash/assign"));
+var _astNodes = require("../../ast-nodes");
 var _createRule = require("../utils/create-rule");
+var _getFirstSupportedImport = require("../utils/get-first-supported-import");
+var _getImportNodeBySource = require("../utils/get-import-node-by-source");
+var _isSupportedImport = require("../utils/is-supported-import");
 // eslint-disable-next-line import/no-extraneous-dependencies
 
-// File-level tracking of styles hoisted from the cssOnTopOfModule/cssAtBottomOfModule fixers
+// File-level tracking of styles hoisted from the cssAtTopOfModule/cssAtBottomOfModule fixers
 var hoistedCss = [];
+var isDOMElementName = function isDOMElementName(elementName) {
+  return elementName.charAt(0) !== elementName.charAt(0).toUpperCase() && elementName.charAt(0) === elementName.charAt(0).toLowerCase();
+};
 function isCssCallExpression(node, cssFunctions) {
   cssFunctions = [].concat((0, _toConsumableArray2.default)(cssFunctions), ['cssMap']);
   return !!((0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && node.callee && node.callee.type === 'Identifier' && cssFunctions.includes(node.callee.name) && node.arguments.length && node.arguments[0].type === 'ObjectExpression');
 }
 function findSpreadProperties(node) {
-  // @ts-ignore
   return node.properties.filter(function (property) {
     return property.type === 'SpreadElement' ||
-    // @ts-ignore
+    // @ts-expect-error
     property.type === 'ExperimentalSpreadProperty';
   });
 }
@@ -34,9 +41,8 @@ var getProgramNode = function getProgramNode(expression) {
   return expression.parent;
 };
 
-// TODO: This can be optimised by implementing a fixer at the very end (Program:exit) and handling all validations at once
 /**
- * Generates the declarator string when fixing the cssOnTopOfModule/cssAtBottomOfModule cases.
+ * Generates the declarator string when fixing the cssAtTopOfModule/cssAtBottomOfModule cases.
  * When `styles` already exists, `styles_1, styles_2, ..., styles_X` are incrementally created for each unhoisted style.
  * The generated `styles` varibale declaration names must be manually modified to be more informative at the discretion of owning teams.
  */
@@ -68,7 +74,7 @@ var getDeclaratorString = function getDeclaratorString(context) {
   hoistedCss = [].concat((0, _toConsumableArray2.default)(hoistedCss), ["".concat(declaratorName).concat(count)]);
   return "".concat(declaratorName).concat(count);
 };
-function analyzeIdentifier(context, sourceIdentifier, configuration) {
+function analyzeIdentifier(context, sourceIdentifier, configuration, cssAttributeName) {
   var _getIdentifierInParen, _getIdentifierInParen2;
   var scope = context.getScope();
   var _ref = (_getIdentifierInParen = (_getIdentifierInParen2 = (0, _eslintCodemodUtils.getIdentifierInParentScope)(scope, sourceIdentifier.name)) === null || _getIdentifierInParen2 === void 0 ? void 0 : _getIdentifierInParen2.identifiers) !== null && _getIdentifierInParen !== void 0 ? _getIdentifierInParen : [],
@@ -90,8 +96,11 @@ function analyzeIdentifier(context, sourceIdentifier, configuration) {
     // When variable is declared inside the component
     context.report({
       node: sourceIdentifier,
-      messageId: configuration.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssOnTopOfModule',
+      messageId: configuration.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssAtTopOfModule',
       fix: function fix(fixer) {
+        if (configuration.fixNamesOnly) {
+          return [];
+        }
         return fixCssNotInModuleScope(fixer, context, configuration, identifier);
       }
     });
@@ -99,10 +108,30 @@ function analyzeIdentifier(context, sourceIdentifier, configuration) {
   }
   if (identifier.parent && identifier.parent.init && !isCssCallExpression(identifier.parent.init, configuration.cssFunctions)) {
     // When variable value is not of type css({})
-    context.report({
-      node: identifier,
-      messageId: 'cssObjectTypeOnly'
-    });
+    var value = identifier.parent.init;
+    if (!value) {
+      return;
+    }
+    var valueExpression =
+    // @ts-expect-error remove once eslint types are switched to @typescript-eslint
+    value.type === 'TSAsExpression' ? value.expression : value;
+    if (['ObjectExpression', 'TemplateLiteral'].includes(valueExpression.type)) {
+      context.report({
+        node: identifier,
+        messageId: 'cssObjectTypeOnly',
+        fix: function fix(fixer) {
+          if (configuration.fixNamesOnly) {
+            return [];
+          }
+          return addCssFunctionCall(fixer, context, identifier.parent, configuration, cssAttributeName);
+        }
+      });
+    } else {
+      context.report({
+        node: identifier,
+        messageId: 'cssObjectTypeOnly'
+      });
+    }
     return;
   }
   var spreadProperties = (0, _eslintCodemodUtils.isNodeOfType)(identifier.parent.init, 'CallExpression') && findSpreadProperties(identifier.parent.init.arguments[0]);
@@ -118,12 +147,133 @@ function analyzeIdentifier(context, sourceIdentifier, configuration) {
 }
 
 /**
- * Fixer for the cssOnTopOfModule/cssAtBottomOfModule violation cases.
+ * Returns a fixer that adds `import { css } from 'import-source'` or
+ * `import { xcss } from 'import-source'` to the start of the file, depending
+ * on the value of cssAttributeName and importSource.
+ */
+var addImportSource = function addImportSource(context, fixer, configuration, cssAttributeName) {
+  var importSource = cssAttributeName === 'xcss' ? configuration.xcssImportSource : configuration.cssImportSource;
+
+  // Add the `import { css } from 'my-css-in-js-library';` statement
+  var packageImport = (0, _getFirstSupportedImport.getFirstSupportedImport)(context, [importSource]);
+  if (packageImport) {
+    var addCssImport = _astNodes.Import.insertNamedSpecifiers(packageImport, [cssAttributeName], fixer);
+    if (addCssImport) {
+      return addCssImport;
+    }
+  } else {
+    return (0, _eslintCodemodUtils.insertAtStartOfFile)(fixer, "".concat((0, _eslintCodemodUtils.insertImportDeclaration)(importSource, [cssAttributeName]), ";\n"));
+  }
+};
+
+/**
+ * Returns a list of fixes that:
+ * - add the `css` or `xcss` function call around the current node.
+ * - add an import statement for the package from which `css` is imported
+ */
+var addCssFunctionCall = function addCssFunctionCall(fixer, context, node, configuration, cssAttributeName) {
+  var fixes = [];
+  var sourceCode = context.getSourceCode();
+  if (node.type !== 'VariableDeclarator' || !node.init || !cssAttributeName) {
+    return [];
+  }
+  var compiledImportFix = addImportSource(context, fixer, configuration, cssAttributeName);
+  if (compiledImportFix) {
+    fixes.push(compiledImportFix);
+  }
+  var init = node.init;
+  var initString = sourceCode.getText(init);
+  if (node.init.type === 'TemplateLiteral') {
+    fixes.push(fixer.replaceText(init, "".concat(cssAttributeName).concat(initString)));
+  } else {
+    fixes.push(fixer.replaceText(init, "".concat(cssAttributeName, "(").concat(initString, ")")));
+  }
+  return fixes;
+};
+
+/**
+ * Check if the expression has or potentially has a local variable
+ * (as opposed to an imported one), erring on the side ot "yes"
+ * when an expression is too complicated to analyse.
+ *
+ * This is useful because expressions containing local variables
+ * cannot be easily hoisted, whereas this is not a problem with imported
+ * variables.
+ *
+ * @param context Context of the rule.
+ * @param node Any node that is potentially hoistable.
+ * @returns Whether the node potentially has a local variable (and thus is not safe to hoist).
+ */
+var potentiallyHasLocalVariable = function potentiallyHasLocalVariable(context, node) {
+  var hasPotentiallyLocalVariable = false;
+  var isImportedVariable = function isImportedVariable(identifier) {
+    return !!(0, _getImportNodeBySource.getModuleOfIdentifier)(context.getSourceCode(), identifier);
+  };
+  _estraverse.default.traverse(node, {
+    enter: function enter(node, _parent) {
+      if ((0, _eslintCodemodUtils.isNodeOfType)(node, 'SpreadElement') ||
+      // @ts-expect-error remove once we can be sure that no parser interprets
+      // the spread operator as ExperimentalSpreadProperty anymore
+      (0, _eslintCodemodUtils.isNodeOfType)(node, 'ExperimentalSpreadProperty')) {
+        // Spread elements could contain anything... so we don't bother.
+        //
+        // e.g. <div css={css({ ...(!height && { visibility: 'hidden' })} />
+        hasPotentiallyLocalVariable = true;
+        this.break();
+      }
+      if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'Property')) {
+        return;
+      }
+      switch (node.value.type) {
+        case 'Literal':
+          break;
+        case 'Identifier':
+          // e.g. css({ margin: myVariable })
+          if (!isImportedVariable(node.value.name)) {
+            hasPotentiallyLocalVariable = true;
+          }
+          this.break();
+          break;
+        case 'MemberExpression':
+          // e.g. css({ margin: props.color })
+          //      css({ margin: props.media.color })
+          if (node.value.object.type === 'Identifier' && isImportedVariable(node.value.object.name)) {
+            // We found an imported variable, don't do anything.
+          } else {
+            // e.g. css({ margin: [some complicated expression].media.color })
+            // This can potentially get too complex, so we assume there's a local
+            // variable in there somewhere.
+            hasPotentiallyLocalVariable = true;
+          }
+          this.break();
+          break;
+        case 'TemplateLiteral':
+          if (!!node.value.expressions.length) {
+            // Too many edge cases here, don't bother...
+            // e.g. css({ animation: `${expandStyles(right, rightExpanded, isExpanded)} 0.2s ease-in-out` });
+            hasPotentiallyLocalVariable = true;
+            this.break();
+          }
+          break;
+        default:
+          // Catch-all for values such as "A && B", "A ? B : C"
+          hasPotentiallyLocalVariable = true;
+          this.break();
+          break;
+      }
+    }
+  });
+  return hasPotentiallyLocalVariable;
+};
+
+/**
+ * Fixer for the cssAtTopOfModule/cssAtBottomOfModule violation cases.
  * This deals with Identifiers and Expressions passed from the traverseExpressionWithConfig() function.
+ *
  * @param fixer The ESLint RuleFixer object
- * @param context The context of the node
+ * @param context The context of the rule
  * @param configuration The configuration of the rule, determining whether the fix is implmeneted at the top or bottom of the module
- * @param node Either an IdentifierWithParent node. Expression, or SpreadElement that we handle
+ * @param node Any potentially hoistable node, or an identifier.
  * @param cssAttributeName An optional parameter only added when we fix an ObjectExpression
  */
 var fixCssNotInModuleScope = function fixCssNotInModuleScope(fixer, context, configuration, node, cssAttributeName) {
@@ -142,35 +292,42 @@ var fixCssNotInModuleScope = function fixCssNotInModuleScope(fixer, context, con
     });
   }
   var moduleString;
-  var implementFixer = [];
+  var fixes = [];
   if (node.type === 'Identifier') {
     var identifier = node;
     var declarator = identifier.parent.parent;
     moduleString = sourceCode.getText(declarator);
-    implementFixer.push(fixer.remove(declarator));
+    fixes.push(fixer.remove(declarator));
   } else {
+    if (potentiallyHasLocalVariable(context, node)) {
+      return [];
+    }
     var _declarator = getDeclaratorString(context);
     var text = sourceCode.getText(node);
 
     // If this has been passed, then we know it's an ObjectExpression
     if (cssAttributeName) {
       moduleString = "const ".concat(_declarator, " = ").concat(cssAttributeName, "(").concat(text, ");");
+      var compiledImportFix = addImportSource(context, fixer, configuration, cssAttributeName);
+      if (compiledImportFix) {
+        fixes.push(compiledImportFix);
+      }
     } else {
-      moduleString = moduleString = "const ".concat(_declarator, " = ").concat(text, ";");
+      moduleString = "const ".concat(_declarator, " = ").concat(text, ";");
     }
-    implementFixer.push(fixer.replaceText(node, _declarator));
+    fixes.push(fixer.replaceText(node, _declarator));
   }
-  return [].concat(implementFixer, [
-  // Insert the node either before or after
+  return [].concat(fixes, [
+  // Insert the node either before or after, depending on the rule configuration
   configuration.stylesPlacement === 'bottom' ? fixer.insertTextAfter(fixerNodePlacement, '\n' + moduleString) : fixer.insertTextBefore(fixerNodePlacement, moduleString + '\n')]);
 };
 
 /**
  * Handle different cases based on what's been passed in the css-related JSXAttribute
- * @param context the context of the node
+ * @param context the context of the rule
  * @param expression the expression of the JSXAttribute value
  * @param configuration what css-related functions to account for (eg. css, xcss, cssMap), and whether to detect bottom vs top expressions
- * @param cssAttributeName used to encapsulate ObjectExpressions when cssOnTopOfModule/cssAtBottomOfModule violations are triggered
+ * @param cssAttributeName used to encapsulate ObjectExpressions when cssAtTopOfModule/cssAtBottomOfModule violations are triggered
  */
 var traverseExpressionWithConfig = function traverseExpressionWithConfig(context, expression, configuration, cssAttributeName) {
   function traverseExpression(expression) {
@@ -178,7 +335,7 @@ var traverseExpressionWithConfig = function traverseExpressionWithConfig(context
       case 'Identifier':
         // {styles}
         // We've found an identifier - time to analyze it!
-        analyzeIdentifier(context, expression, configuration);
+        analyzeIdentifier(context, expression, configuration, cssAttributeName);
         break;
       case 'ArrayExpression':
         // {[styles, moreStyles]}
@@ -207,8 +364,12 @@ var traverseExpressionWithConfig = function traverseExpressionWithConfig(context
         // We've found elements that shouldn't be here! Report an error.
         context.report({
           node: expression,
-          messageId: configuration.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssOnTopOfModule',
+          messageId: configuration.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssAtTopOfModule',
           fix: function fix(fixer) {
+            if (configuration.fixNamesOnly) {
+              return [];
+            }
+
             // Don't fix CallExpressions unless they're from cssFunctions or cssMap
             if (expression.type === 'CallExpression' && !isCssCallExpression(expression, configuration.cssFunctions)) {
               return [];
@@ -220,6 +381,17 @@ var traverseExpressionWithConfig = function traverseExpressionWithConfig(context
           }
         });
         break;
+
+      // @ts-expect-error - our ESLint-related types assume vanilla JS, when in fact
+      // it is running @typescript-eslint
+      //
+      // Switching to the more accurate @typescript-eslint types would break
+      // eslint-codemod-utils and all ESLint rules in packages/design-system,
+      // so we just leave this as-is.
+      case 'TSAsExpression':
+        // @ts-expect-error
+        traverseExpression(expression.expression);
+        break;
       default:
         // Do nothing!
         break;
@@ -229,10 +401,15 @@ var traverseExpressionWithConfig = function traverseExpressionWithConfig(context
 };
 var defaultConfig = {
   cssFunctions: ['css', 'xcss'],
-  stylesPlacement: 'top'
+  stylesPlacement: 'top',
+  cssImportSource: _isSupportedImport.CSS_IN_JS_IMPORTS.compiled,
+  xcssImportSource: _isSupportedImport.CSS_IN_JS_IMPORTS.atlaskitPrimitives,
+  excludeReactComponents: false,
+  fixNamesOnly: false
 };
 var rule = (0, _createRule.createLintRule)({
   meta: {
+    type: 'problem',
     name: 'consistent-css-prop-usage',
     docs: {
       description: 'Ensures consistency with `css` and `xcss` prop usages',
@@ -242,13 +419,42 @@ var rule = (0, _createRule.createLintRule)({
     },
     fixable: 'code',
     messages: {
-      cssOnTopOfModule: "Create styles at the top of the module scope using the respective css function.",
+      cssAtTopOfModule: "Create styles at the top of the module scope using the respective css function.",
       cssAtBottomOfModule: "Create styles at the bottom of the module scope using the respective css function.",
-      cssObjectTypeOnly: "Create styles using objects passed to the css function.",
-      cssInModule: "Imported styles should not be used, instead define in the module, import a component, or use a design token.",
+      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".'
-    }
+    },
+    schema: [{
+      type: 'object',
+      properties: {
+        cssFunctions: {
+          type: 'array',
+          items: [{
+            type: 'string'
+          }]
+        },
+        stylesPlacement: {
+          type: 'string',
+          enum: ['top', 'bottom']
+        },
+        cssImportSource: {
+          type: 'string'
+        },
+        xcssImportSource: {
+          type: 'string'
+        },
+        excludeReactComponents: {
+          type: 'boolean'
+        },
+        fixNamesOnly: {
+          type: 'boolean'
+        }
+      },
+      additionalProperties: false
+    }]
   },
   create: function create(context) {
     var _ref3;
@@ -290,9 +496,20 @@ var rule = (0, _createRule.createLintRule)({
           });
         }
       });
-    }), (0, _defineProperty2.default)(_ref3, "JSXAttribute", function JSXAttribute(node) {
+    }), (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;
+        }
+      }
 
       // Always reset to empty array
       hoistedCss = [];
@@ -300,11 +517,16 @@ var rule = (0, _createRule.createLintRule)({
         // When not a jsx expression. For eg. css=""
         if ((value === null || value === void 0 ? void 0 : value.type) !== 'JSXExpressionContainer') {
           context.report({
-            node: value,
-            messageId: mergedConfig.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssOnTopOfModule'
+            node: node,
+            messageId: mergedConfig.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssAtTopOfModule'
           });
           return;
         }
+        if (value.expression.type === 'JSXEmptyExpression') {
+          // e.g. the comment in
+          //      <div css={/* Hello there */} />
+          return;
+        }
         traverseExpressionWithConfig(context, value.expression, mergedConfig, name.name);
       }
     }), _ref3;

package/dist/cjs/rules/utils/create-no-exported-rule/is-styled-component.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isStyledComponent = void 0;
-var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _getFirstSupportedImport = require("../get-first-supported-import");
 /**
  * Given a list of node, find and return the callee of the first Compiled or styled-components `styled` function call found in the list.
  *
@@ -48,15 +48,11 @@ var findNode = function findNode(nodes) {
  * @returns The local name used to import the `styled` API.
  */
 var getStyledImportSpecifierName = function getStyledImportSpecifierName(context, importSources) {
-  var _supportedImports$0$s;
-  var isSupportedImport = function isSupportedImport(node) {
-    return (0, _eslintCodemodUtils.isNodeOfType)(node, 'ImportDeclaration') && typeof node.source.value === 'string' && importSources.includes(node.source.value);
-  };
-  var source = context.getSourceCode();
-  var supportedImports = source.ast.body.filter(isSupportedImport);
-  return (_supportedImports$0$s = supportedImports[0].specifiers.find(function (spec) {
-    return spec.type === 'ImportSpecifier' && spec.imported.name === 'styled';
-  })) === null || _supportedImports$0$s === void 0 ? void 0 : _supportedImports$0$s.local.name;
+  var _supportedImport$spec;
+  var supportedImport = (0, _getFirstSupportedImport.getFirstSupportedImport)(context, importSources);
+  return supportedImport === null || supportedImport === void 0 || (_supportedImport$spec = supportedImport.specifiers.find(function (spec) {
+    return spec.type === 'ImportSpecifier' && spec.imported.name === 'styled' || spec.type === 'ImportDefaultSpecifier' && spec.local.name === 'styled';
+  })) === null || _supportedImport$spec === void 0 ? void 0 : _supportedImport$spec.local.name;
 };
 
 /**

package/dist/cjs/rules/utils/get-first-supported-import.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getFirstSupportedImport = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+/**
+ * Get the first import declaration in the file that matches any of the packages
+ * in `importSources`.
+ *
+ * @param context Rule context.
+ * @param importSources The packages to check import statements for. If importSources
+ *                      contains more than one package, the first import statement
+ *                      detected in the file that matches any of the packages will be
+ *                      returned.
+ * @returns The first import declaration found in the file.
+ */
+var getFirstSupportedImport = exports.getFirstSupportedImport = function getFirstSupportedImport(context, importSources) {
+  var isSupportedImport = function isSupportedImport(node) {
+    return (0, _eslintCodemodUtils.isNodeOfType)(node, 'ImportDeclaration') && typeof node.source.value === 'string' && importSources.includes(node.source.value);
+  };
+  var source = context.getSourceCode();
+  var supportedImports = source.ast.body.filter(isSupportedImport);
+  if (supportedImports.length) {
+    return supportedImports[0];
+  }
+};

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

@@ -13,7 +13,8 @@ var CSS_IN_JS_IMPORTS = exports.CSS_IN_JS_IMPORTS = {
   emotionReact: '@emotion/react',
   emotionCore: '@emotion/core',
   styledComponents: 'styled-components',
-  atlaskitCss: '@atlaskit/css'
+  atlaskitCss: '@atlaskit/css',
+  atlaskitPrimitives: '@atlaskit/primitives'
 };
 
 // A CSS-in-JS library an import of a valid css, cx, cssMap, etc.