@atlaskit/eslint-plugin-design-system 8.23.3 → 8.23.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 8.23.4
+
+### Patch Changes
+
+- [#69370](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/69370) [`e14e79732cd4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e14e79732cd4) - Add local-cx-xcss rule, which ensures that the `cx()` function (if imported from `@compiled/react` or `@atlaskit/css`) is only used within the `xcss` prop.
+
+  Internal changes: Also refactored the utility functions used by `no-css-tagged-template-expression`.
+
 ## 8.23.3
 
 ### Patch Changes

package/README.md

@@ -53,6 +53,7 @@ module.exports = {
 | <a href="./src/rules/ensure-design-token-usage/README.md">ensure-design-token-usage</a>                           | Enforces usage of design tokens rather than hard-coded values.                                                                                                                                                                                                                                                      | Yes         | Yes     | Yes         |
 | <a href="./src/rules/ensure-design-token-usage-preview/README.md">ensure-design-token-usage/preview</a>           | Enforces usage of pre-release design tokens rather than hard-coded values.                                                                                                                                                                                                                                          |             | Yes     | 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     |             |
+| <a href="./src/rules/local-cx-xcss/README.md">local-cx-xcss</a>                                                   | Ensures the cx() function, which is part of the XCSS API, is only used within the xcss prop. This aids tracking what styles are applied to a jsx element.                                                                                                                                                           | Yes         |         |             |
 | <a href="./src/rules/no-banned-imports/README.md">no-banned-imports</a>                                           | Disallow importing banned modules.                                                                                                                                                                                                                                                                                  | Yes         |         |             |
 | <a href="./src/rules/no-css-tagged-template-expression/README.md">no-css-tagged-template-expression</a>           | Disallows any `css` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                          |             | Yes     |             |
 | <a href="./src/rules/no-deprecated-apis/README.md">no-deprecated-apis</a>                                         | Disallow using deprecated APIs.                                                                                                                                                                                                                                                                                     | Yes         |         |             |

package/constellation/index/usage.mdx

@@ -17,6 +17,7 @@ This plugin contains rules that should be used when working with the [Atlassian
 | <a href="#ensure-design-token-usage">ensure-design-token-usage</a>                           | Enforces usage of design tokens rather than hard-coded values.                                                                                                                                                                                                                                                      | Yes         | Yes     | Yes         |
 | <a href="#ensure-design-token-usage-preview">ensure-design-token-usage/preview</a>           | Enforces usage of pre-release design tokens rather than hard-coded values.                                                                                                                                                                                                                                          |             | Yes     | Yes         |
 | <a href="#icon-label">icon-label</a>                                                         | Enforces accessible usage of icon labels when composed with Atlassian Design System components.                                                                                                                                                                                                                     | Yes         | Yes     |             |
+| <a href="#local-cx-xcss">local-cx-xcss</a>                                                   | Ensures the cx() function, which is part of the XCSS API, is only used within the xcss prop. This aids tracking what styles are applied to a jsx element.                                                                                                                                                           | Yes         |         |             |
 | <a href="#no-banned-imports">no-banned-imports</a>                                           | Disallow importing banned modules.                                                                                                                                                                                                                                                                                  | Yes         |         |             |
 | <a href="#no-css-tagged-template-expression">no-css-tagged-template-expression</a>           | Disallows any `css` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                          |             | Yes     |             |
 | <a href="#no-deprecated-apis">no-deprecated-apis</a>                                         | Disallow using deprecated APIs.                                                                                                                                                                                                                                                                                     | Yes         |         |             |
@@ -318,6 +319,44 @@ import ActivityIcon from '@atlaskit/icon/glyph/activity'
 </ButtonItem>
 ```
 
+## local-cx-xcss
+
+This rule ensures the `cx()` function is only used within the `xcss` prop. This aids tracking what styles are applied to a jsx element.
+
+The `cx` function is checked only if it is imported from `@compiled/react` or `@atlaskit/css`.
+
+Passing arguments to the `cx()` function is how you compose styles (combine more than one set of styles together) with XCSS. This is a workaround for the more conventional array syntax (e.g. [in Emotion](https://emotion.sh/docs/composition)) `<div xcss={[style1, style2]} />` not giving robust enough type checking.
+
+<h3>Examples</h3>
+
+#### Incorrect
+
+```js
+import { cx, cssMap } from '@compiled/react';
+
+const styles = cssMap({
+  text: { color: 'red' },
+  bg: { background: 'blue' },
+});
+
+const joinedStyles = cx(styles.text, styles.bg);
+
+<Button xcss={joinedStyles} />;
+```
+
+#### Correct
+
+```js
+import { cx, cssMap } from '@compiled/react';
+
+const styles = cssMap({
+  text: { color: 'red' },
+  bg: { background: 'blue' },
+});
+
+<Button xcss={cx(styles.text, styles.bg)} />;
+```
+
 ## no-banned-imports
 
 Using private or experimental packages is dangerous as they are not supported across major versions meaning you will not be able to migrate easily causing friction for yourself and the Atlassian Design System team.

package/dist/cjs/ast-nodes/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "JSXElement", {
     return _jsxElement.JSXElement;
   }
 });
+Object.defineProperty(exports, "Object", {
+  enumerable: true,
+  get: function get() {
+    return _object.Object;
+  }
+});
 Object.defineProperty(exports, "Root", {
   enumerable: true,
   get: function get() {
@@ -37,4 +43,5 @@ var _functionCall = require("./function-call");
 var _import = require("./import");
 var _jsxAttribute = require("./jsx-attribute");
 var _jsxElement = require("./jsx-element");
+var _object = require("./object");
 var _root = require("./root");

package/dist/cjs/ast-nodes/object.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Object = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+var ASTObjectExpression = exports.Object = {
+  /**
+   * Returns `true` if an object contains a property with the specified name, `false` otherwise.
+   */
+  hasProperty: function hasProperty(node, name) {
+    return !!ASTObjectExpression.getProperty(node, name);
+  },
+  /**
+   * Returns a key-value pair like: `padding: '8px'` from: `{ padding: '8px' }`
+   */
+  getEntryByPropertyName: function getEntryByPropertyName(node, name) {
+    return node.properties.find(function (property) {
+      if (!(0, _eslintCodemodUtils.isNodeOfType)(property, 'Property')) {
+        return false;
+      }
+      if (!(0, _eslintCodemodUtils.isNodeOfType)(property.key, 'Identifier')) {
+        return false;
+      }
+      return property.key.name === name;
+    });
+  },
+  deleteEntry: function deleteEntry(node, name, fixer) {
+    var entry = ASTObjectExpression.getEntryByPropertyName(node, name);
+    if (!entry) {
+      return [];
+    }
+    return [fixer.remove(entry)];
+  },
+  /**
+   * Returns a only the property @type {Property['key']} like: `padding` from: `{ padding: '8px' }`
+   */
+  getProperty: function getProperty(node, name) {
+    var _ASTObjectExpression$;
+    return (_ASTObjectExpression$ = ASTObjectExpression.getEntryByPropertyName(node, name)) === null || _ASTObjectExpression$ === void 0 ? void 0 : _ASTObjectExpression$.key;
+  },
+  /**
+   * Returns a only the property @type {Property['value']} like: `'8px` from: `{ padding: '8px' }`
+   *
+   * Values can be basically anything, so be careful with this
+   */
+  getValueByPropertyName: function getValueByPropertyName(node, name) {
+    var _ASTObjectExpression$2;
+    return (_ASTObjectExpression$2 = ASTObjectExpression.getEntryByPropertyName(node, name)) === null || _ASTObjectExpression$2 === void 0 ? void 0 : _ASTObjectExpression$2.value;
+  },
+  containsSpreadProps: function containsSpreadProps(node) {
+    return node.properties.some(function (property) {
+      return (0, _eslintCodemodUtils.isNodeOfType)(property, 'SpreadElement');
+    });
+  },
+  updateValue: function updateValue(node, propertyName, newValue, fixer) {
+    var value = ASTObjectExpression.getValueByPropertyName(node, propertyName);
+    if (value === undefined) {
+      throw new Error("Object.updateValue: Could not get value of property ".concat(propertyName));
+    }
+    return fixer.replaceText(value, newValue);
+  },
+  /**
+   * Appends a key-value pair to the end of an object. For example:
+   * ```
+   * ast.Object.appendEntry(
+   *   node, // { padding: 'space.100' }
+   *   key, // 'margin',
+   *   value, // 'space.200'
+   *   fixer,
+   * )
+   * ```
+   * Will result in `{ padding: 'space.100', margin: 'space.200'}`
+   */
+  appendEntry: function appendEntry(node, key, value, fixer) {
+    return fixer.insertTextAfter(node.properties[node.properties.length - 1], "".concat((0, _eslintCodemodUtils.property)({
+      key: (0, _eslintCodemodUtils.identifier)(key),
+      value: (0, _eslintCodemodUtils.literal)(value)
+    }).toString(), ", "));
+  }
+};

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d1a459e1ea71650f65b2890dc86cc398>>
+ * @codegen <<SignedSource::5026ba2cb55b3c1bcacbfe7fb7728a6c>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -16,6 +16,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/ensure-design-token-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage/preview': 'warn',
     '@atlaskit/design-system/icon-label': 'warn',
+    '@atlaskit/design-system/local-cx-xcss': 'error',
     '@atlaskit/design-system/no-banned-imports': 'error',
     '@atlaskit/design-system/no-css-tagged-template-expression': 'error',
     '@atlaskit/design-system/no-deprecated-apis': 'error',

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::3b93cfbbe0ea14514b9600509632394b>>
+ * @codegen <<SignedSource::839224bfab98c1ddf6018dec5320968e>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -15,6 +15,7 @@ var _default = exports.default = {
     '@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/local-cx-xcss': 'error',
     '@atlaskit/design-system/no-banned-imports': 'error',
     '@atlaskit/design-system/no-deprecated-apis': 'error',
     '@atlaskit/design-system/no-deprecated-design-token-usage': 'warn',

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

@@ -9,6 +9,7 @@ var _consistentCssPropUsage = _interopRequireDefault(require("./consistent-css-p
 var _ensureDesignTokenUsage = _interopRequireDefault(require("./ensure-design-token-usage"));
 var _ensureDesignTokenUsagePreview = _interopRequireDefault(require("./ensure-design-token-usage-preview"));
 var _iconLabel = _interopRequireDefault(require("./icon-label"));
+var _localCxXcss = _interopRequireDefault(require("./local-cx-xcss"));
 var _noBannedImports = _interopRequireDefault(require("./no-banned-imports"));
 var _noCssTaggedTemplateExpression = _interopRequireDefault(require("./no-css-tagged-template-expression"));
 var _noDeprecatedApis = _interopRequireDefault(require("./no-deprecated-apis"));
@@ -29,7 +30,7 @@ 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::14cdfdcbd8b999ee097a1a5b245d7117>>
+ * @codegen <<SignedSource::a67afc33adf50db651edb1cf12e16ef3>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -37,6 +38,7 @@ var _default = exports.default = {
   'ensure-design-token-usage': _ensureDesignTokenUsage.default,
   'ensure-design-token-usage/preview': _ensureDesignTokenUsagePreview.default,
   'icon-label': _iconLabel.default,
+  'local-cx-xcss': _localCxXcss.default,
   'no-banned-imports': _noBannedImports.default,
   'no-css-tagged-template-expression': _noCssTaggedTemplateExpression.default,
   'no-deprecated-apis': _noDeprecatedApis.default,

package/dist/cjs/rules/local-cx-xcss/index.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rule = exports.default = void 0;
+var _createRule = require("../utils/create-rule");
+var _isSupportedImport = require("../utils/is-supported-import");
+var IMPORT_SOURCES = [_isSupportedImport.CSS_IN_JS_IMPORTS.compiled, _isSupportedImport.CSS_IN_JS_IMPORTS.atlaskitCss];
+function getParentJSXAttribute(node) {
+  var parent = node.parent;
+  while (parent && parent.type !== 'JSXAttribute') {
+    parent = parent.parent;
+  }
+  if (parent && parent.type === 'JSXAttribute') {
+    return parent;
+  }
+  return null;
+}
+var rule = exports.rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'local-cx-xcss',
+    docs: {
+      description: 'Ensures the cx() function, which is part of the XCSS API, is only used within the xcss prop. This aids tracking what styles are applied to a jsx element.',
+      recommended: true,
+      severity: 'error'
+    },
+    messages: {
+      'local-cx-xcss': 'The cx function should only be declared inside the xcss prop to simplify tracking styles that are applied to a jsx element.'
+    },
+    type: 'problem'
+  },
+  create: function create(context) {
+    return {
+      'CallExpression[callee.name="cx"]': function CallExpressionCalleeNameCx(node) {
+        if (node.type === 'CallExpression' && (0, _isSupportedImport.isCxFunction)(node.callee, context.getScope().references, IMPORT_SOURCES)) {
+          var parentJSXAttribute = getParentJSXAttribute(node);
+          var propName = parentJSXAttribute === null || parentJSXAttribute === void 0 ? void 0 : parentJSXAttribute.name.name.toString();
+          if (propName && /[xX]css$/.test(propName)) {
+            return;
+          }
+          context.report({
+            node: node,
+            messageId: 'local-cx-xcss'
+          });
+        }
+      }
+    };
+  }
+});
+var _default = exports.default = rule;

package/dist/cjs/rules/no-css-tagged-template-expression/create-no-tagged-template-expression-rule/index.js

@@ -6,19 +6,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createNoTaggedTemplateExpressionRule = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _isSupportedImport = require("../../utils/is-supported-import");
 var _generate = require("./generate");
 var _getTaggedTemplateExpressionOffset = require("./get-tagged-template-expression-offset");
 var _toArguments = require("./to-arguments");
 // Original source from Compiled https://github.com/atlassian-labs/compiled/blob/master/packages/eslint-plugin/src/utils/create-no-tagged-template-expression-rule/index.ts
 // eslint-disable-next-line import/no-extraneous-dependencies
 
+var IMPORT_SOURCES = [_isSupportedImport.CSS_IN_JS_IMPORTS.compiled, _isSupportedImport.CSS_IN_JS_IMPORTS.emotionReact, _isSupportedImport.CSS_IN_JS_IMPORTS.emotionCore, _isSupportedImport.CSS_IN_JS_IMPORTS.styledComponents];
 var createNoTaggedTemplateExpressionRule = exports.createNoTaggedTemplateExpressionRule = function createNoTaggedTemplateExpressionRule(isUsage, messageId) {
   return function (context) {
     return {
       TaggedTemplateExpression: function TaggedTemplateExpression(node) {
         var _context$getScope = context.getScope(),
           references = _context$getScope.references;
-        if (!isUsage(node.tag, references)) {
+        if (!isUsage(node.tag, references, IMPORT_SOURCES)) {
           return;
         }
         context.report({

package/dist/cjs/rules/no-css-tagged-template-expression/index.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _createRule = require("../utils/create-rule");
+var _isSupportedImport = require("../utils/is-supported-import");
 var _createNoTaggedTemplateExpressionRule = require("./create-no-tagged-template-expression-rule");
-var _isSupportedImport = require("./is-supported-import");
 var rule = (0, _createRule.createLintRule)({
   meta: {
     name: 'no-css-tagged-template-expression',
@@ -21,6 +21,6 @@ var rule = (0, _createRule.createLintRule)({
       unexpectedTaggedTemplate: 'Unexpected `css` tagged template expression'
     }
   },
-  create: (0, _createNoTaggedTemplateExpressionRule.createNoTaggedTemplateExpressionRule)((0, _isSupportedImport.isSupportedImport)('css'), 'unexpectedTaggedTemplate')
+  create: (0, _createNoTaggedTemplateExpressionRule.createNoTaggedTemplateExpressionRule)(_isSupportedImport.isCss, 'unexpectedTaggedTemplate')
 });
 var _default = exports.default = rule;

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

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isCxFunction = exports.isCss = exports.CSS_IN_JS_IMPORTS = void 0;
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+var CSS_IN_JS_IMPORTS = exports.CSS_IN_JS_IMPORTS = {
+  compiled: '@compiled/react',
+  emotionReact: '@emotion/react',
+  emotionCore: '@emotion/core',
+  styledComponents: 'styled-components',
+  atlaskitCss: '@atlaskit/css'
+};
+
+// List of CSS-in-JS libraries an import of a valid css, cx, cssMap, etc.
+// function might originate from, e.g. @compiled/react, @emotion/core.
+
+var isSupportedImportWrapper = function isSupportedImportWrapper(functionName) {
+  // This will need to be extended to support default imports once we start
+  // checking cases like `import css from '@emotion/css'`
+  var checkDefinitionHasImport = function checkDefinitionHasImport(def, importSources) {
+    var _def$parent, _def$parent2;
+    return def.node.type === 'ImportSpecifier' && def.node.imported.type === 'Identifier' && def.node.imported.name === functionName && ((_def$parent = def.parent) === null || _def$parent === void 0 ? void 0 : _def$parent.type) === 'ImportDeclaration' && importSources.includes((_def$parent2 = def.parent) === null || _def$parent2 === void 0 ? void 0 : _def$parent2.source.value);
+  };
+
+  /**
+   * Checks whether:
+   *
+   * 1. a function name `nodeToCheck` matches the name of the function we
+   *    want to check for (e.g. `cx`, `css`, `cssMap`, or `keyframes`), and
+   * 2. whether `nodeToCheck` originates from one of the libraries listed
+   *     in `importSources`.
+   *
+   * @param nodeToCheck the function callee we are checking (e.g. the `css` in `css()`)
+   * @param referencesInScope list of references that are in scope. We'll use this
+   *                          to check where the function callee is imported from.
+   * @param importSources list of libraries that we want to ensure `nodeToCheck`
+   *                      comes from
+   *
+   * @returns whether the above conditions are true
+   */
+  var isSupportedImport = function isSupportedImport(nodeToCheck, referencesInScope, importSources) {
+    return nodeToCheck.type === 'Identifier' && referencesInScope.some(function (reference) {
+      var _reference$resolved;
+      return reference.identifier === nodeToCheck && ((_reference$resolved = reference.resolved) === null || _reference$resolved === void 0 ? void 0 : _reference$resolved.defs.some(function (def) {
+        return checkDefinitionHasImport(def, importSources);
+      }));
+    });
+  };
+  return isSupportedImport;
+};
+
+// Unused functions have been commented out until we implement corresponding
+// eslint rules which use them
+//
+var isCss = exports.isCss = isSupportedImportWrapper('css');
+var isCxFunction = exports.isCxFunction = isSupportedImportWrapper('cx');
+// export const isCssMap = isLibraryImportWrapper('cssMap');
+// export const isKeyframes = isLibraryImportWrapper('keyframes');

package/dist/es2019/ast-nodes/index.js

@@ -2,4 +2,5 @@ export { FunctionCall } from './function-call';
 export { Import } from './import';
 export { JSXAttribute } from './jsx-attribute';
 export { JSXElement } from './jsx-element';
+export { Object } from './object';
 export { Root } from './root';

package/dist/es2019/ast-nodes/object.js

@@ -0,0 +1,79 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import { identifier, isNodeOfType, literal, property } from 'eslint-codemod-utils';
+const ASTObjectExpression = {
+  /**
+   * Returns `true` if an object contains a property with the specified name, `false` otherwise.
+   */
+  hasProperty(node, name) {
+    return !!ASTObjectExpression.getProperty(node, name);
+  },
+  /**
+   * Returns a key-value pair like: `padding: '8px'` from: `{ padding: '8px' }`
+   */
+  getEntryByPropertyName(node, name) {
+    return node.properties.find(property => {
+      if (!isNodeOfType(property, 'Property')) {
+        return false;
+      }
+      if (!isNodeOfType(property.key, 'Identifier')) {
+        return false;
+      }
+      return property.key.name === name;
+    });
+  },
+  deleteEntry(node, name, fixer) {
+    const entry = ASTObjectExpression.getEntryByPropertyName(node, name);
+    if (!entry) {
+      return [];
+    }
+    return [fixer.remove(entry)];
+  },
+  /**
+   * Returns a only the property @type {Property['key']} like: `padding` from: `{ padding: '8px' }`
+   */
+  getProperty(node, name) {
+    var _ASTObjectExpression$;
+    return (_ASTObjectExpression$ = ASTObjectExpression.getEntryByPropertyName(node, name)) === null || _ASTObjectExpression$ === void 0 ? void 0 : _ASTObjectExpression$.key;
+  },
+  /**
+   * Returns a only the property @type {Property['value']} like: `'8px` from: `{ padding: '8px' }`
+   *
+   * Values can be basically anything, so be careful with this
+   */
+  getValueByPropertyName(node, name) {
+    var _ASTObjectExpression$2;
+    return (_ASTObjectExpression$2 = ASTObjectExpression.getEntryByPropertyName(node, name)) === null || _ASTObjectExpression$2 === void 0 ? void 0 : _ASTObjectExpression$2.value;
+  },
+  containsSpreadProps(node) {
+    return node.properties.some(property => {
+      return isNodeOfType(property, 'SpreadElement');
+    });
+  },
+  updateValue(node, propertyName, newValue, fixer) {
+    const value = ASTObjectExpression.getValueByPropertyName(node, propertyName);
+    if (value === undefined) {
+      throw new Error(`Object.updateValue: Could not get value of property ${propertyName}`);
+    }
+    return fixer.replaceText(value, newValue);
+  },
+  /**
+   * Appends a key-value pair to the end of an object. For example:
+   * ```
+   * ast.Object.appendEntry(
+   *   node, // { padding: 'space.100' }
+   *   key, // 'margin',
+   *   value, // 'space.200'
+   *   fixer,
+   * )
+   * ```
+   * Will result in `{ padding: 'space.100', margin: 'space.200'}`
+   */
+  appendEntry(node, key, value, fixer) {
+    return fixer.insertTextAfter(node.properties[node.properties.length - 1], `${property({
+      key: identifier(key),
+      value: literal(value)
+    }).toString()}, `);
+  }
+};
+export { ASTObjectExpression as Object };

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d1a459e1ea71650f65b2890dc86cc398>>
+ * @codegen <<SignedSource::5026ba2cb55b3c1bcacbfe7fb7728a6c>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -10,6 +10,7 @@ export default {
     '@atlaskit/design-system/ensure-design-token-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage/preview': 'warn',
     '@atlaskit/design-system/icon-label': 'warn',
+    '@atlaskit/design-system/local-cx-xcss': 'error',
     '@atlaskit/design-system/no-banned-imports': 'error',
     '@atlaskit/design-system/no-css-tagged-template-expression': 'error',
     '@atlaskit/design-system/no-deprecated-apis': 'error',

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::3b93cfbbe0ea14514b9600509632394b>>
+ * @codegen <<SignedSource::839224bfab98c1ddf6018dec5320968e>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -9,6 +9,7 @@ export default {
     '@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/local-cx-xcss': 'error',
     '@atlaskit/design-system/no-banned-imports': 'error',
     '@atlaskit/design-system/no-deprecated-apis': 'error',
     '@atlaskit/design-system/no-deprecated-design-token-usage': 'warn',

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

@@ -1,12 +1,13 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::14cdfdcbd8b999ee097a1a5b245d7117>>
+ * @codegen <<SignedSource::a67afc33adf50db651edb1cf12e16ef3>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
 import ensureDesignTokenUsage from './ensure-design-token-usage';
 import ensureDesignTokenUsagePreview from './ensure-design-token-usage-preview';
 import iconLabel from './icon-label';
+import localCxXcss from './local-cx-xcss';
 import noBannedImports from './no-banned-imports';
 import noCssTaggedTemplateExpression from './no-css-tagged-template-expression';
 import noDeprecatedApis from './no-deprecated-apis';
@@ -30,6 +31,7 @@ export default {
   'ensure-design-token-usage': ensureDesignTokenUsage,
   'ensure-design-token-usage/preview': ensureDesignTokenUsagePreview,
   'icon-label': iconLabel,
+  'local-cx-xcss': localCxXcss,
   'no-banned-imports': noBannedImports,
   'no-css-tagged-template-expression': noCssTaggedTemplateExpression,
   'no-deprecated-apis': noDeprecatedApis,

package/dist/es2019/rules/local-cx-xcss/index.js

@@ -0,0 +1,45 @@
+import { createLintRule } from '../utils/create-rule';
+import { CSS_IN_JS_IMPORTS, isCxFunction } from '../utils/is-supported-import';
+const IMPORT_SOURCES = [CSS_IN_JS_IMPORTS.compiled, CSS_IN_JS_IMPORTS.atlaskitCss];
+function getParentJSXAttribute(node) {
+  let parent = node.parent;
+  while (parent && parent.type !== 'JSXAttribute') {
+    parent = parent.parent;
+  }
+  if (parent && parent.type === 'JSXAttribute') {
+    return parent;
+  }
+  return null;
+}
+export const rule = createLintRule({
+  meta: {
+    name: 'local-cx-xcss',
+    docs: {
+      description: 'Ensures the cx() function, which is part of the XCSS API, is only used within the xcss prop. This aids tracking what styles are applied to a jsx element.',
+      recommended: true,
+      severity: 'error'
+    },
+    messages: {
+      'local-cx-xcss': 'The cx function should only be declared inside the xcss prop to simplify tracking styles that are applied to a jsx element.'
+    },
+    type: 'problem'
+  },
+  create(context) {
+    return {
+      'CallExpression[callee.name="cx"]': node => {
+        if (node.type === 'CallExpression' && isCxFunction(node.callee, context.getScope().references, IMPORT_SOURCES)) {
+          const parentJSXAttribute = getParentJSXAttribute(node);
+          const propName = parentJSXAttribute === null || parentJSXAttribute === void 0 ? void 0 : parentJSXAttribute.name.name.toString();
+          if (propName && /[xX]css$/.test(propName)) {
+            return;
+          }
+          context.report({
+            node,
+            messageId: 'local-cx-xcss'
+          });
+        }
+      }
+    };
+  }
+});
+export default rule;

package/dist/es2019/rules/no-css-tagged-template-expression/create-no-tagged-template-expression-rule/index.js

@@ -1,15 +1,17 @@
 // Original source from Compiled https://github.com/atlassian-labs/compiled/blob/master/packages/eslint-plugin/src/utils/create-no-tagged-template-expression-rule/index.ts
 // eslint-disable-next-line import/no-extraneous-dependencies
 
+import { CSS_IN_JS_IMPORTS } from '../../utils/is-supported-import';
 import { generate } from './generate';
 import { getTaggedTemplateExpressionOffset } from './get-tagged-template-expression-offset';
 import { toArguments } from './to-arguments';
+const IMPORT_SOURCES = [CSS_IN_JS_IMPORTS.compiled, CSS_IN_JS_IMPORTS.emotionReact, CSS_IN_JS_IMPORTS.emotionCore, CSS_IN_JS_IMPORTS.styledComponents];
 export const createNoTaggedTemplateExpressionRule = (isUsage, messageId) => context => ({
   TaggedTemplateExpression(node) {
     const {
       references
     } = context.getScope();
-    if (!isUsage(node.tag, references)) {
+    if (!isUsage(node.tag, references, IMPORT_SOURCES)) {
       return;
     }
     context.report({

package/dist/es2019/rules/no-css-tagged-template-expression/index.js

@@ -1,6 +1,6 @@
 import { createLintRule } from '../utils/create-rule';
+import { isCss } from '../utils/is-supported-import';
 import { createNoTaggedTemplateExpressionRule } from './create-no-tagged-template-expression-rule';
-import { isSupportedImport } from './is-supported-import';
 const rule = createLintRule({
   meta: {
     name: 'no-css-tagged-template-expression',
@@ -15,6 +15,6 @@ const rule = createLintRule({
       unexpectedTaggedTemplate: 'Unexpected `css` tagged template expression'
     }
   },
-  create: createNoTaggedTemplateExpressionRule(isSupportedImport('css'), 'unexpectedTaggedTemplate')
+  create: createNoTaggedTemplateExpressionRule(isCss, 'unexpectedTaggedTemplate')
 });
 export default rule;