@atlaskit/eslint-plugin-design-system 5.5.0 → 6.0.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 6.0.1
+
+### Patch Changes
+
+- [`fa18829653d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fa18829653d) - Updated spacing rule to ignore gridSize functions that accept arguments as these are custom and not part of the Design System.
+
+## 6.0.0
+
+### Major Changes
+
+- [`c8174712a85`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c8174712a85) - New rule consistent-css-prop-usage available as part of the recommended preset. For detailed docs please see: https://atlassian.design/components/eslint-plugin-design-system/usage#consistent-css-prop-usage
+
 ## 5.5.0
 
 ### Minor Changes

package/README.md

@@ -49,6 +49,7 @@ module.exports = {
 
 | Rule                                                                                                    | Description                                                                                     | Recommended | Fixable | Suggestions |
 | ------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ----------- | ------- | ----------- |
+| <a href="./src/rules/consistent-css-prop-usage/README.md">consistent-css-prop-usage</a>                 | Ensures consistency with CSS and xCSS prop usages                                               | Yes         | Yes     |             |
 | <a href="./src/rules/ensure-design-token-usage/README.md">ensure-design-token-usage</a>                 | Enforces usage of design tokens.                                                                | Yes         | Yes     | Yes         |
 | <a href="./src/rules/ensure-design-token-usage-spacing/README.md">ensure-design-token-usage-spacing</a> | Enforces usage of spacing design tokens rather than hard-coded values.                          |             | Yes     |             |
 | <a href="./src/rules/icon-label/README.md">icon-label</a>                                               | Enforces accessible usage of icon labels when composed with Atlassian Design System components. | Yes         | Yes     |             |

package/constellation/index/usage.mdx

@@ -13,6 +13,7 @@ This plugin contains rules that should be used when working with the [Atlassian
 
 | Rule                                                                               | Description                                                                                     | Recommended | Fixable | Suggestions |
 | ---------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ----------- | ------- | ----------- |
+| <a href="#consistent-css-prop-usage">consistent-css-prop-usage</a>                 | Ensures consistency with CSS and xCSS prop usages                                               | Yes         | Yes     |             |
 | <a href="#ensure-design-token-usage">ensure-design-token-usage</a>                 | Enforces usage of design tokens.                                                                | Yes         | Yes     | Yes         |
 | <a href="#ensure-design-token-usage-spacing">ensure-design-token-usage-spacing</a> | Enforces usage of spacing design tokens rather than hard-coded values.                          |             | Yes     |             |
 | <a href="#icon-label">icon-label</a>                                               | Enforces accessible usage of icon labels when composed with Atlassian Design System components. | Yes         | Yes     |             |
@@ -30,6 +31,100 @@ This plugin contains rules that should be used when working with the [Atlassian
 <!-- START_RULE_CONTENT_CODEGEN -->
 <!-- @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen -->
 
+## consistent-css-prop-usage
+
+> Ensures consistency with CSS prop usage.
+
+<h3>Rationale</h3>
+
+Every product should be defining styles in the same way, using the same tools, enforced by the same linting rules, which we can then all evolve and scale together.
+
+<h3>How the rule works</h3>
+
+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.
+
+This rule has no options.
+
+<h3>Examples</h3>
+
+👎 Example of **incorrect** code for this rule:
+
+```js
+function Button({ children }) {
+  return <div css={css({...})}>{children}</div>;
+                   ^^^^^^^ css functional call is used inline
+}
+```
+
+```js
+const container = {
+      ^^^^^^^^^ should be a css function call
+  zIndex: 10,
+};
+
+function Button({ children }) {
+  return <button css={container}>{children}</button>;
+}
+```
+
+```js
+import { container } from './styles';
+         ^^^^^^^^^ styles should be local, not shared
+
+function Button({ children }) {
+  return <button css={container}>{children}</button>;
+}
+```
+
+```js
+const baseContainerStyles = css({
+  zIndex: 5,
+});
+
+const containerStyles = css({
+  ...baseContainerStyles,
+  ^^^^^^^^^^^^^^^^^^^^^^ compose styles with an array to the css call instead
+  zIndex: 7,
+});
+
+function Button({ children }) {
+  return <button css={containerStyles}>{children}</button>;
+}
+```
+
+👍 Example of **correct** code for this rule:
+
+```js
+const containerStyles = css({
+  zIndex: 1,
+});
+
+function Button({ children }) {
+  return <button css={containerStyles}>{children}</button>;
+}
+```
+
+```js
+const baseContainerStyles = css({
+  zIndex: 5,
+});
+
+const containerStyles = css({
+  zIndex: 7,
+});
+
+function Button({ children }) {
+  return (
+    <button css={[baseContainerStyles, containerStyles]}>{children}</button>
+  );
+}
+```
+
 ## ensure-design-token-usage
 
 Using color design tokens enables our experiences to be themed and harmonious.

package/dist/cjs/presets/all.codegen.js

@@ -6,12 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::3f9b973d6350522de7bd32f13c58ce56>>
+ * @codegen <<SignedSource::42b6b42f38f30d690b6a38a2b6369b70>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = {
   plugins: ['@atlaskit/design-system'],
   rules: {
+    '@atlaskit/design-system/consistent-css-prop-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage-spacing': 'error',
     '@atlaskit/design-system/icon-label': 'warn',

package/dist/cjs/presets/recommended.codegen.js

@@ -6,12 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b3d2f24d8d37a87fc2bbd964dfdcb87c>>
+ * @codegen <<SignedSource::5b7e085532640c14193d07c63e0f5442>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = {
   plugins: ['@atlaskit/design-system'],
   rules: {
+    '@atlaskit/design-system/consistent-css-prop-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage': 'error',
     '@atlaskit/design-system/icon-label': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',

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

@@ -0,0 +1,182 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _createRule = require("../utils/create-rule");
+var declarationSuffix = 'Styles';
+function isCssCallExpression(node) {
+  return !!((0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && node.callee && node.callee.type === 'Identifier' && (node.callee.name === 'css' || node.callee.name === 'xcss') && 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
+    property.type === 'ExperimentalSpreadProperty';
+  });
+}
+function analyzeIdentifier(context, sourceIdentifier) {
+  var _getIdentifierInParen;
+  var scope = context.getScope();
+  var _ref = ((_getIdentifierInParen = (0, _eslintCodemodUtils.getIdentifierInParentScope)(scope, sourceIdentifier.name)) === null || _getIdentifierInParen === void 0 ? void 0 : _getIdentifierInParen.identifiers) || [],
+    _ref2 = (0, _slicedToArray2.default)(_ref, 1),
+    identifier = _ref2[0];
+  if (!identifier || !identifier.parent) {
+    // Identifier isn't in the module, skip!
+    return;
+  }
+  if (identifier.parent.type !== 'VariableDeclarator') {
+    // When variable is not in the file or coming from import
+    context.report({
+      node: sourceIdentifier,
+      messageId: 'cssInModule'
+    });
+    return;
+  }
+  if (identifier.parent.parent.parent.type !== 'Program') {
+    // When variable is declared inside the component
+    context.report({
+      node: sourceIdentifier,
+      messageId: 'cssOnTopOfModule'
+    });
+    return;
+  }
+  if (identifier.parent && identifier.parent.init && !isCssCallExpression(identifier.parent.init)) {
+    // When variable value is not of type css({})
+    context.report({
+      node: identifier,
+      messageId: 'cssObjectTypeOnly'
+    });
+    return;
+  }
+  var spreadProperties = (0, _eslintCodemodUtils.isNodeOfType)(identifier.parent.init, 'CallExpression') && findSpreadProperties(identifier.parent.init.arguments[0]);
+  if (spreadProperties) {
+    // TODO: Recursively handle spread items in children properties.
+    spreadProperties.forEach(function (prop) {
+      context.report({
+        node: prop,
+        messageId: 'cssArrayStylesOnly'
+      });
+    });
+  }
+}
+function traverseExpression(context, expression) {
+  switch (expression.type) {
+    case 'Identifier':
+      // {styles}
+      // We've found an identifier - time to analyze it!
+      analyzeIdentifier(context, expression);
+      break;
+    case 'ArrayExpression':
+      // {[styles, moreStyles]}
+      // We've found an array expression - let's traverse again over each element individually.
+      expression.elements.forEach(function (element) {
+        return traverseExpression(context, element);
+      });
+      break;
+    case 'LogicalExpression':
+      // {isEnabled && styles}
+      // We've found a logical expression - we're only interested in the right expression so
+      // let's traverse that and see what it is!
+      traverseExpression(context, expression.right);
+      break;
+    case 'ConditionalExpression':
+      // {isEnabled ? styles : null}
+      // We've found a conditional expression - we're only interested in the consequent and
+      // alternate (styles : null)
+      traverseExpression(context, expression.consequent);
+      traverseExpression(context, expression.alternate);
+      break;
+    case 'CallExpression':
+    case 'ObjectExpression':
+    case 'TaggedTemplateExpression':
+    case 'TemplateLiteral':
+      // We've found elements that shouldn't be here! Report an error.
+      context.report({
+        node: expression,
+        messageId: 'cssOnTopOfModule'
+      });
+      break;
+    default:
+      // Do nothing!
+      break;
+  }
+}
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'consistent-css-prop-usage',
+    docs: {
+      description: 'Ensures consistency with CSS and xCSS prop usages',
+      url: 'https://developer.atlassian.com/cloud/framework/atlassian-frontend/development/styling',
+      recommended: true,
+      severity: 'error'
+    },
+    fixable: 'code',
+    messages: {
+      cssOnTopOfModule: "Create styles at the top of the module scope using the 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.",
+      cssArrayStylesOnly: "Compose styles with an array on the CSS prop instead of using object spread.",
+      shouldEndInStyles: 'Declared styles should end in "styles".'
+    }
+  },
+  create: function create(context) {
+    return {
+      'CallExpression[callee.name=css], CallExpression[callee.name=xcss]': function CallExpressionCalleeNameCssCallExpressionCalleeNameXcss(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)) {
+          // Already prefixed! Nothing to do.
+          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);
+            });
+          }
+        });
+      },
+      JSXAttribute: function JSXAttribute(node) {
+        var name = node.name,
+          value = node.value;
+        if (name.type === 'JSXIdentifier' && (name.name === 'css' || name.name === 'xcss')) {
+          // When not a jsx expression. For eg. css=""
+          if ((value === null || value === void 0 ? void 0 : value.type) !== 'JSXExpressionContainer') {
+            context.report({
+              node: value,
+              messageId: 'cssOnTopOfModule'
+            });
+            return;
+          }
+          traverseExpression(context, value.expression);
+        }
+      }
+    };
+  }
+});
+var _default = rule;
+exports.default = _default;

package/dist/cjs/rules/ensure-design-token-usage-spacing/utils.js

@@ -82,7 +82,7 @@ var getValueFromShorthand = function getValueFromShorthand(str) {
 };
 exports.getValueFromShorthand = getValueFromShorthand;
 var isGridSize = function isGridSize(node) {
-  return (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier') && (node.callee.name === 'gridSize' || node.callee.name === 'getGridSize');
+  return (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier') && (node.callee.name === 'gridSize' || node.callee.name === 'getGridSize') && node.arguments.length === 0;
 };
 var isToken = function isToken(node) {
   return (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier') && node.callee.name === 'token';

package/dist/cjs/rules/index.codegen.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _consistentCssPropUsage = _interopRequireDefault(require("./consistent-css-prop-usage"));
 var _ensureDesignTokenUsage = _interopRequireDefault(require("./ensure-design-token-usage"));
 var _ensureDesignTokenUsageSpacing = _interopRequireDefault(require("./ensure-design-token-usage-spacing"));
 var _iconLabel = _interopRequireDefault(require("./icon-label"));
@@ -18,10 +19,11 @@ var _usePrimitives = _interopRequireDefault(require("./use-primitives"));
 var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::474065f3ea733a64f4dd045c8be36c5b>>
+ * @codegen <<SignedSource::a966a7ed0f0346cea4b9a41131e25f2e>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = {
+  'consistent-css-prop-usage': _consistentCssPropUsage.default,
   'ensure-design-token-usage': _ensureDesignTokenUsage.default,
   'ensure-design-token-usage-spacing': _ensureDesignTokenUsageSpacing.default,
   'icon-label': _iconLabel.default,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
-	"version": "5.5.0",
+	"version": "6.0.1",
 	"sideEffects": false
 }

package/dist/es2019/presets/all.codegen.js

@@ -1,11 +1,12 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::3f9b973d6350522de7bd32f13c58ce56>>
+ * @codegen <<SignedSource::42b6b42f38f30d690b6a38a2b6369b70>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
   plugins: ['@atlaskit/design-system'],
   rules: {
+    '@atlaskit/design-system/consistent-css-prop-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage-spacing': 'error',
     '@atlaskit/design-system/icon-label': 'warn',

package/dist/es2019/presets/recommended.codegen.js

@@ -1,11 +1,12 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b3d2f24d8d37a87fc2bbd964dfdcb87c>>
+ * @codegen <<SignedSource::5b7e085532640c14193d07c63e0f5442>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
   plugins: ['@atlaskit/design-system'],
   rules: {
+    '@atlaskit/design-system/consistent-css-prop-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage': 'error',
     '@atlaskit/design-system/icon-label': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',

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

@@ -0,0 +1,165 @@
+import { getIdentifierInParentScope, isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+const declarationSuffix = 'Styles';
+function isCssCallExpression(node) {
+  return !!(isNodeOfType(node, 'CallExpression') && node.callee && node.callee.type === 'Identifier' && (node.callee.name === 'css' || node.callee.name === 'xcss') && node.arguments.length && node.arguments[0].type === 'ObjectExpression');
+}
+function findSpreadProperties(node) {
+  // @ts-ignore
+  return node.properties.filter(property => property.type === 'SpreadElement' ||
+  // @ts-ignore
+  property.type === 'ExperimentalSpreadProperty');
+}
+function analyzeIdentifier(context, sourceIdentifier) {
+  var _getIdentifierInParen;
+  const scope = context.getScope();
+  const [identifier] = ((_getIdentifierInParen = getIdentifierInParentScope(scope, sourceIdentifier.name)) === null || _getIdentifierInParen === void 0 ? void 0 : _getIdentifierInParen.identifiers) || [];
+  if (!identifier || !identifier.parent) {
+    // Identifier isn't in the module, skip!
+    return;
+  }
+  if (identifier.parent.type !== 'VariableDeclarator') {
+    // When variable is not in the file or coming from import
+    context.report({
+      node: sourceIdentifier,
+      messageId: 'cssInModule'
+    });
+    return;
+  }
+  if (identifier.parent.parent.parent.type !== 'Program') {
+    // When variable is declared inside the component
+    context.report({
+      node: sourceIdentifier,
+      messageId: 'cssOnTopOfModule'
+    });
+    return;
+  }
+  if (identifier.parent && identifier.parent.init && !isCssCallExpression(identifier.parent.init)) {
+    // When variable value is not of type css({})
+    context.report({
+      node: identifier,
+      messageId: 'cssObjectTypeOnly'
+    });
+    return;
+  }
+  const spreadProperties = isNodeOfType(identifier.parent.init, 'CallExpression') && findSpreadProperties(identifier.parent.init.arguments[0]);
+  if (spreadProperties) {
+    // TODO: Recursively handle spread items in children properties.
+    spreadProperties.forEach(prop => {
+      context.report({
+        node: prop,
+        messageId: 'cssArrayStylesOnly'
+      });
+    });
+  }
+}
+function traverseExpression(context, expression) {
+  switch (expression.type) {
+    case 'Identifier':
+      // {styles}
+      // We've found an identifier - time to analyze it!
+      analyzeIdentifier(context, expression);
+      break;
+    case 'ArrayExpression':
+      // {[styles, moreStyles]}
+      // We've found an array expression - let's traverse again over each element individually.
+      expression.elements.forEach(element => traverseExpression(context, element));
+      break;
+    case 'LogicalExpression':
+      // {isEnabled && styles}
+      // We've found a logical expression - we're only interested in the right expression so
+      // let's traverse that and see what it is!
+      traverseExpression(context, expression.right);
+      break;
+    case 'ConditionalExpression':
+      // {isEnabled ? styles : null}
+      // We've found a conditional expression - we're only interested in the consequent and
+      // alternate (styles : null)
+      traverseExpression(context, expression.consequent);
+      traverseExpression(context, expression.alternate);
+      break;
+    case 'CallExpression':
+    case 'ObjectExpression':
+    case 'TaggedTemplateExpression':
+    case 'TemplateLiteral':
+      // We've found elements that shouldn't be here! Report an error.
+      context.report({
+        node: expression,
+        messageId: 'cssOnTopOfModule'
+      });
+      break;
+    default:
+      // Do nothing!
+      break;
+  }
+}
+const rule = createLintRule({
+  meta: {
+    name: 'consistent-css-prop-usage',
+    docs: {
+      description: 'Ensures consistency with CSS and xCSS prop usages',
+      url: 'https://developer.atlassian.com/cloud/framework/atlassian-frontend/development/styling',
+      recommended: true,
+      severity: 'error'
+    },
+    fixable: 'code',
+    messages: {
+      cssOnTopOfModule: `Create styles at the top of the module scope using the 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.`,
+      cssArrayStylesOnly: `Compose styles with an array on the CSS prop instead of using object spread.`,
+      shouldEndInStyles: 'Declared styles should end in "styles".'
+    }
+  },
+  create(context) {
+    return {
+      'CallExpression[callee.name=css], CallExpression[callee.name=xcss]': 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)) {
+          // Already prefixed! Nothing to do.
+          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(node) {
+        const {
+          name,
+          value
+        } = node;
+        if (name.type === 'JSXIdentifier' && (name.name === 'css' || name.name === 'xcss')) {
+          // When not a jsx expression. For eg. css=""
+          if ((value === null || value === void 0 ? void 0 : value.type) !== 'JSXExpressionContainer') {
+            context.report({
+              node: value,
+              messageId: 'cssOnTopOfModule'
+            });
+            return;
+          }
+          traverseExpression(context, value.expression);
+        }
+      }
+    };
+  }
+});
+export default rule;

package/dist/es2019/rules/ensure-design-token-usage-spacing/utils.js

@@ -48,7 +48,7 @@ export const getValueFromShorthand = str => {
   // If we want to filter out NaN just add .filter(Boolean)
   return splitShorthandValues(String(str).trim()).map(removePixelSuffix);
 };
-const isGridSize = node => isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && (node.callee.name === 'gridSize' || node.callee.name === 'getGridSize');
+const isGridSize = node => isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && (node.callee.name === 'gridSize' || node.callee.name === 'getGridSize') && node.arguments.length === 0;
 const isToken = node => isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && node.callee.name === 'token';
 const getRawExpressionForToken = (node, context) => {
   const args = node.arguments;

package/dist/es2019/rules/index.codegen.js

@@ -1,8 +1,9 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::474065f3ea733a64f4dd045c8be36c5b>>
+ * @codegen <<SignedSource::a966a7ed0f0346cea4b9a41131e25f2e>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
+import consistentCssPropUsage from './consistent-css-prop-usage';
 import ensureDesignTokenUsage from './ensure-design-token-usage';
 import ensureDesignTokenUsageSpacing from './ensure-design-token-usage-spacing';
 import iconLabel from './icon-label';
@@ -15,6 +16,7 @@ import noUnsafeDesignTokenUsage from './no-unsafe-design-token-usage';
 import usePrimitives from './use-primitives';
 import useVisuallyHidden from './use-visually-hidden';
 export default {
+  'consistent-css-prop-usage': consistentCssPropUsage,
   'ensure-design-token-usage': ensureDesignTokenUsage,
   'ensure-design-token-usage-spacing': ensureDesignTokenUsageSpacing,
   'icon-label': iconLabel,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
-	"version": "5.5.0",
+	"version": "6.0.1",
 	"sideEffects": false
 }

package/dist/esm/presets/all.codegen.js

@@ -1,11 +1,12 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::3f9b973d6350522de7bd32f13c58ce56>>
+ * @codegen <<SignedSource::42b6b42f38f30d690b6a38a2b6369b70>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
   plugins: ['@atlaskit/design-system'],
   rules: {
+    '@atlaskit/design-system/consistent-css-prop-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage-spacing': 'error',
     '@atlaskit/design-system/icon-label': 'warn',

package/dist/esm/presets/recommended.codegen.js

@@ -1,11 +1,12 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b3d2f24d8d37a87fc2bbd964dfdcb87c>>
+ * @codegen <<SignedSource::5b7e085532640c14193d07c63e0f5442>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
   plugins: ['@atlaskit/design-system'],
   rules: {
+    '@atlaskit/design-system/consistent-css-prop-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage': 'error',
     '@atlaskit/design-system/icon-label': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',