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

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @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
+
+- [#69222](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/69222) [`a1c52086fdb9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a1c52086fdb9) - Address issues in consistent-css-prop-usage hoisting and naming fixers
+- Updated dependencies
+
 ## 8.23.2
 
 ### 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/consistent-css-prop-usage/index.js

@@ -13,6 +13,8 @@ var _assign = _interopRequireDefault(require("lodash/assign"));
 var _createRule = require("../utils/create-rule");
 // eslint-disable-next-line import/no-extraneous-dependencies
 
+// File-level tracking of styles hoisted from the cssOnTopOfModule/cssAtBottomOfModule fixers
+var hoistedCss = [];
 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');
@@ -25,11 +27,11 @@ function findSpreadProperties(node) {
     property.type === 'ExperimentalSpreadProperty';
   });
 }
-var getTopLevelNode = function getTopLevelNode(expression) {
+var getProgramNode = function getProgramNode(expression) {
   while (expression.parent.type !== 'Program') {
     expression = expression.parent;
   }
-  return 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
@@ -48,7 +50,7 @@ var getDeclaratorString = function getDeclaratorString(context) {
   }
   var variables = scope.variables.map(function (variable) {
     return variable.name;
-  });
+  }).concat(hoistedCss);
   var count = 2;
   var declaratorName = 'styles';
 
@@ -61,6 +63,9 @@ var getDeclaratorString = function getDeclaratorString(context) {
       count++;
     }
   }
+
+  // Keep track of it by adding it to the hoistedCss global array
+  hoistedCss = [].concat((0, _toConsumableArray2.default)(hoistedCss), ["".concat(declaratorName).concat(count)]);
   return "".concat(declaratorName).concat(count);
 };
 function analyzeIdentifier(context, sourceIdentifier, configuration) {
@@ -123,7 +128,19 @@ function analyzeIdentifier(context, sourceIdentifier, configuration) {
  */
 var fixCssNotInModuleScope = function fixCssNotInModuleScope(fixer, context, configuration, node, cssAttributeName) {
   var sourceCode = context.getSourceCode();
-  var topLevelNode = getTopLevelNode(node);
+
+  // Get the program node in order to properly position the hoisted styles
+  var programNode = getProgramNode(node);
+  var fixerNodePlacement = programNode;
+  if (configuration.stylesPlacement === 'bottom') {
+    // The last value is the bottom of the file
+    fixerNodePlacement = programNode.body[programNode.body.length - 1];
+  } else {
+    // Place after the last ImportDeclaration
+    fixerNodePlacement = programNode.body.length === 1 ? programNode.body[0] : programNode.body.find(function (node) {
+      return node.type !== 'ImportDeclaration';
+    });
+  }
   var moduleString;
   var implementFixer = [];
   if (node.type === 'Identifier') {
@@ -145,7 +162,7 @@ var fixCssNotInModuleScope = function fixCssNotInModuleScope(fixer, context, con
   }
   return [].concat(implementFixer, [
   // Insert the node either before or after
-  configuration.stylesPlacement === 'bottom' ? fixer.insertTextAfter(topLevelNode, '\n' + moduleString) : fixer.insertTextBefore(topLevelNode, moduleString + '\n')]);
+  configuration.stylesPlacement === 'bottom' ? fixer.insertTextAfter(fixerNodePlacement, '\n' + moduleString) : fixer.insertTextBefore(fixerNodePlacement, moduleString + '\n')]);
 };
 
 /**
@@ -276,6 +293,9 @@ var rule = (0, _createRule.createLintRule)({
     }), (0, _defineProperty2.default)(_ref3, "JSXAttribute", function JSXAttribute(node) {
       var name = node.name,
         value = node.value;
+
+      // Always reset to empty array
+      hoistedCss = [];
       if (name.type === 'JSXIdentifier' && mergedConfig.cssFunctions.includes(name.name)) {
         // When not a jsx expression. For eg. css=""
         if ((value === null || value === void 0 ? void 0 : value.type) !== 'JSXExpressionContainer') {

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/use-primitives/index.js

@@ -4,12 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _eslintCodemodUtils = require("eslint-codemod-utils");
 var _createRule = require("../utils/create-rule");
 var _config = require("./config");
 var _transformers = require("./transformers");
-var _emotionCss = require("./transformers/emotion-css");
-var _utils = require("./utils");
 var boxDocsUrl = 'https://atlassian.design/components/primitives/box';
 var rule = (0, _createRule.createLintRule)({
   meta: {
@@ -31,37 +28,14 @@ var rule = (0, _createRule.createLintRule)({
     return {
       // transforms styled.<html>(...) usages
       CallExpression: function CallExpression(node) {
-        if (!config.patterns.includes('compiled-styled-object')) {
-          return;
-        }
-        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression')) {
-          return;
-        }
-        var styledComponentVariableRef = (0, _utils.findValidStyledComponentCall)(node);
-        if (!styledComponentVariableRef || !(0, _eslintCodemodUtils.isNodeOfType)(styledComponentVariableRef.id, 'Identifier') || !(0, _utils.isValidCssPropertiesToTransform)(node, config)) {
-          return;
-        }
-        var styledComponentJsxRef = (0, _utils.findValidJsxUsageToTransform)(styledComponentVariableRef.id.name, context.getScope());
-        if (!styledComponentJsxRef) {
-          return;
-        }
-
-        // if we have both references at this point then we can offer a fix \o/
-        context.report({
-          node: styledComponentVariableRef,
-          messageId: 'preferPrimitivesBox',
-          suggest: [{
-            desc: "Convert ".concat(styledComponentVariableRef.id.name, " to Box"),
-            fix: (0, _transformers.styledComponentToPrimitive)({
-              stylesRef: styledComponentVariableRef,
-              jsxRef: styledComponentJsxRef
-            }, context)
-          }]
+        _transformers.CompiledStyled.lint(node, {
+          context: context,
+          config: config
         });
       },
       // transforms <div css={...}> usages
       JSXElement: function JSXElement(node) {
-        _emotionCss.EmotionCSS.lint(node, {
+        _transformers.EmotionCSS.lint(node, {
           context: context,
           config: config
         });

package/dist/cjs/rules/use-primitives/transformers/compiled-styled/convert-jsx-call-site.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.convertJsxCallSite = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var ast = _interopRequireWildcard(require("../../../../ast-nodes"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/**
+ * Transforms a JSXElement from:
+ * ```
+ *   <div>
+ *     // ...
+ *   </div>
+ * ```
+ * to
+ * ```
+ *   <Box xcss={myStyles}>
+ *     // ...
+ *   </Box>
+ * ```
+ */
+var convertJsxCallSite = exports.convertJsxCallSite = function convertJsxCallSite(jsxElement, newStylesVariableName, fixer) {
+  var fixes = [];
+
+  // renames the JSX call site
+  if ((0, _eslintCodemodUtils.isNodeOfType)(jsxElement, 'JSXElement')) {
+    fixes.push.apply(fixes, (0, _toConsumableArray2.default)(ast.JSXElement.updateName(jsxElement, 'Box', fixer)));
+  }
+
+  // adds xcss prop
+  fixes.push(fixer.insertTextAfter(jsxElement.openingElement.name, " xcss={".concat(newStylesVariableName, "}")));
+  return fixes;
+};

package/dist/cjs/rules/use-primitives/transformers/compiled-styled/convert-styled-component-call-to-jsx.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.convertStyledComponentToXcss = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _cssToXcss = require("../css-to-xcss");
+/**
+ * Transforms a variable like:
+ * ```
+ * const MyComponent = styled.div({
+ *   padding: '8px',
+ * })
+ * ```
+ * to
+ * ```
+ * const myComponentStyles = xcss({
+ *   padding: 'space.100',
+ * })
+ * ```
+ */
+var convertStyledComponentToXcss = exports.convertStyledComponentToXcss = function convertStyledComponentToXcss(styles, newStylesVariableName, fixer) {
+  var fixes = [];
+
+  // renames the variable from MyComponent to myComponentStyles
+  fixes.push(fixer.replaceText(styles.id, newStylesVariableName));
+
+  // renames the function call from styled.<tag> to xcss
+  if (styles.init && (0, _eslintCodemodUtils.isNodeOfType)(styles.init, 'CallExpression')) {
+    fixes.push(fixer.replaceText(styles.init.callee, 'xcss'));
+  }
+
+  // converts CSS values to XCSS-compatible tokens
+  if (styles.init && (0, _eslintCodemodUtils.isNodeOfType)(styles.init, 'CallExpression')) {
+    var objectExpression = styles.init.arguments[0];
+    if ((0, _eslintCodemodUtils.isNodeOfType)(objectExpression, 'ObjectExpression')) {
+      fixes.push.apply(fixes, (0, _toConsumableArray2.default)((0, _cssToXcss.styledObjectToXcssTokens)(objectExpression, fixer)));
+    }
+  }
+  return fixes;
+};

package/dist/cjs/rules/use-primitives/{utils → transformers/compiled-styled}/find-valid-styled-component-call.js

@@ -1,11 +1,14 @@
 "use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.findValidStyledComponentCall = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
-var _isValidTagName = require("./is-valid-tag-name");
+var supported = _interopRequireWildcard(require("./supported"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
  * returns a variable reference if preconditions are favourable for
  * the transformation to proceed, undefined otherwise.
@@ -46,7 +49,7 @@ var isStyledCallExpression = function isStyledCallExpression(call) {
   if (!(0, _eslintCodemodUtils.isNodeOfType)(call.callee.object, 'Identifier') || !(0, _eslintCodemodUtils.isNodeOfType)(call.callee.property, 'Identifier')) {
     return false;
   }
-  if (/^styled2?$/.test(call.callee.object.name) && _isValidTagName.validPrimitiveElements.has(call.callee.property.name)) {
+  if (/^styled2?$/.test(call.callee.object.name) && supported.elements.includes(call.callee.property.name)) {
     return true;
   }
   return false;