@atlaskit/eslint-plugin-design-system 8.17.0 → 8.18.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 8.18.1
+
+### Patch Changes
+
+- [#64857](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64857) [`1be24644c029`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1be24644c029) - `use-primitives` is now capable of converting styled components. This is guarded by a config flag so this release is only a patch.
+
+## 8.18.0
+
+### Minor Changes
+
+- [#65123](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/65123) [`f3b62a2c6bdd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f3b62a2c6bdd) - Add new rule to warn of rollout of required `headingLevel` prop in the `SpotlightCard` component of the onboarding package.
+
 ## 8.17.0
 
 ### Minor Changes

package/README.md

@@ -65,6 +65,7 @@ module.exports = {
 | <a href="./src/rules/no-unsupported-drag-and-drop-libraries/README.md">no-unsupported-drag-and-drop-libraries</a> | Disallow importing unsupported drag and drop modules.                                                                                                                                                                                                                                                               | Yes         |         |             |
 | <a href="./src/rules/prefer-primitives/README.md">prefer-primitives</a>                                           | Increase awareness of primitive components via code hints. Strictly used for education purposes and discoverability. To enforce usage please refer to the `use-primitives` rule.                                                                                                                                    |             |         |             |
 | <a href="./src/rules/use-drawer-label/README.md">use-drawer-label</a>                                             | Encourages to provide accessible name for Atlassian Design System Drawer component.                                                                                                                                                                                                                                 | Yes         |         | Yes         |
+| <a href="./src/rules/use-heading-level-in-spotlight-card/README.md">use-heading-level-in-spotlight-card</a>       | Inform developers of eventual requirement of `headingLevel` prop in `SpotlightCard` component. The heading level should be the appropriate level according to the surrounding context.                                                                                                                              | Yes         | Yes     |             |
 | <a href="./src/rules/use-href-in-link-item/README.md">use-href-in-link-item</a>                                   | Inform developers of eventual requirement of `href` prop in `LinkItem` component. Elements with a `link` role require an `href` attribute for users to properly navigate, particularly those using assistive technologies. If no valid `href` is required for your use case, consider using a `ButtonItem` instead. | Yes         | Yes     | Yes         |
 | <a href="./src/rules/use-primitives/README.md">use-primitives</a>                                                 | Encourage the usage of primitives components.                                                                                                                                                                                                                                                                       |             | Yes     | Yes         |
 | <a href="./src/rules/use-visually-hidden/README.md">use-visually-hidden</a>                                       | Enforce usage of the visually hidden component.                                                                                                                                                                                                                                                                     | Yes         | Yes     |             |

package/constellation/index/usage.mdx

@@ -29,6 +29,7 @@ This plugin contains rules that should be used when working with the [Atlassian
 | <a href="#no-unsupported-drag-and-drop-libraries">no-unsupported-drag-and-drop-libraries</a> | Disallow importing unsupported drag and drop modules.                                                                                                                                                                                                                                                               | Yes         |         |             |
 | <a href="#prefer-primitives">prefer-primitives</a>                                           | Increase awareness of primitive components via code hints. Strictly used for education purposes and discoverability. To enforce usage please refer to the `use-primitives` rule.                                                                                                                                    |             |         |             |
 | <a href="#use-drawer-label">use-drawer-label</a>                                             | Encourages to provide accessible name for Atlassian Design System Drawer component.                                                                                                                                                                                                                                 | Yes         |         | Yes         |
+| <a href="#use-heading-level-in-spotlight-card">use-heading-level-in-spotlight-card</a>       | Inform developers of eventual requirement of `headingLevel` prop in `SpotlightCard` component. The heading level should be the appropriate level according to the surrounding context.                                                                                                                              | Yes         | Yes     |             |
 | <a href="#use-href-in-link-item">use-href-in-link-item</a>                                   | Inform developers of eventual requirement of `href` prop in `LinkItem` component. Elements with a `link` role require an `href` attribute for users to properly navigate, particularly those using assistive technologies. If no valid `href` is required for your use case, consider using a `ButtonItem` instead. | Yes         | Yes     | Yes         |
 | <a href="#use-primitives">use-primitives</a>                                                 | Encourage the usage of primitives components.                                                                                                                                                                                                                                                                       |             | Yes     | Yes         |
 | <a href="#use-visually-hidden">use-visually-hidden</a>                                       | Enforce usage of the visually hidden component.                                                                                                                                                                                                                                                                     | Yes         | Yes     |             |
@@ -769,6 +770,27 @@ This rule will indicate user with warning to strongly recommend usage of either
 </Drawer>
 ```
 
+## use-heading-level-in-spotlight-card
+
+The `SpotlightCard` component in `@atlaskit/onboarding` will be requiring the `headingLevel` prop in future releases.
+
+<h3>Examples</h3>
+
+#### Incorrect
+
+```tsx
+<SpotlightCard heading="Heading">Spotlight card contents</SpotlightCard>
+ ^^^^^^^^^^^^^
+```
+
+#### Correct
+
+```tsx
+<SpotlightCard heading="Heading" headingLevel={2}>
+  Spotlight card contents
+</SpotlightCard>
+```
+
 ## use-href-in-link-item
 
 The `LinkItem` component in `@atlaskit/menu` will be requiring the `href` prop in future releases. If no valid `href` prop is required, consider using the `ButtonItem` component.

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::594898d8c5dc8b9a5610d62e7f300a53>>
+ * @codegen <<SignedSource::37a857efd0971ab26170d5f1f526279b>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -28,6 +28,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/prefer-primitives': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
+    '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',
     '@atlaskit/design-system/use-visually-hidden': '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::240c678d4f10d97618541f35d79e1c71>>
+ * @codegen <<SignedSource::b3bce8efb2db1fed84370af608ca0d4c>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -23,6 +23,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/use-drawer-label': 'warn',
+    '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'
   }

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

@@ -21,12 +21,13 @@ var _noUnsafeDesignTokenUsage = _interopRequireDefault(require("./no-unsafe-desi
 var _noUnsupportedDragAndDropLibraries = _interopRequireDefault(require("./no-unsupported-drag-and-drop-libraries"));
 var _preferPrimitives = _interopRequireDefault(require("./prefer-primitives"));
 var _useDrawerLabel = _interopRequireDefault(require("./use-drawer-label"));
+var _useHeadingLevelInSpotlightCard = _interopRequireDefault(require("./use-heading-level-in-spotlight-card"));
 var _useHrefInLinkItem = _interopRequireDefault(require("./use-href-in-link-item"));
 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::8927e5adaec5639c9712dbfb26968de4>>
+ * @codegen <<SignedSource::e2cc357c90120dbbd89b2928dba968c0>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -46,6 +47,7 @@ var _default = exports.default = {
   'no-unsupported-drag-and-drop-libraries': _noUnsupportedDragAndDropLibraries.default,
   'prefer-primitives': _preferPrimitives.default,
   'use-drawer-label': _useDrawerLabel.default,
+  'use-heading-level-in-spotlight-card': _useHeadingLevelInSpotlightCard.default,
   'use-href-in-link-item': _useHrefInLinkItem.default,
   'use-primitives': _usePrimitives.default,
   'use-visually-hidden': _useVisuallyHidden.default

package/dist/cjs/rules/use-heading-level-in-spotlight-card/index.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.headingLevelRequiredSuggestionText = exports.default = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _createRule = require("../utils/create-rule");
+var _getImportName = require("../utils/get-import-name");
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+var headingLevelRequiredSuggestionText = exports.headingLevelRequiredSuggestionText = 'Add a `headingLevel` that is of a contextually relevant level.';
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'use-heading-level-in-spotlight-card',
+    type: 'suggestion',
+    fixable: 'code',
+    docs: {
+      description: 'Inform developers of eventual requirement of `headingLevel` prop in `SpotlightCard` component. The heading level should be the appropriate level according to the surrounding context.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      headingLevelRequired: headingLevelRequiredSuggestionText
+    }
+  },
+  create: function create(context) {
+    return {
+      JSXElement: function JSXElement(node) {
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXElement')) {
+          return;
+        }
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+
+        // Get the name of the SpotlightCard import
+        var spotlightCardImportName = (0, _getImportName.getImportName)(context.getScope(), '@atlaskit/onboarding', 'SpotlightCard');
+        if (node.openingElement.name.name === spotlightCardImportName) {
+          // and if `heading` exists and `headingLevel` prop does not exist
+          var spotlightCardProps = node.openingElement.attributes.filter(function (attr) {
+            return (0, _eslintCodemodUtils.isNodeOfType)(attr, 'JSXAttribute');
+          }).filter(function (attr) {
+            return attr.name.type === 'JSXIdentifier';
+          });
+          var heading = spotlightCardProps.find(function (attr) {
+            return attr.name.name === 'heading';
+          });
+          var headingLevel = spotlightCardProps.find(function (attr) {
+            return attr.name.name === 'headingLevel';
+          });
+          if (heading && !headingLevel) {
+            context.report({
+              node: node,
+              messageId: 'headingLevelRequired'
+            });
+          }
+        }
+      }
+    };
+  }
+});
+var _default = exports.default = rule;

package/dist/cjs/rules/use-href-in-link-item/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.hrefRequiredSuggestionText = exports.default = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var _createRule = require("../utils/create-rule");
+var _getImportName = require("../utils/get-import-name");
 var _utils = require("./utils");
 // eslint-disable-next-line import/no-extraneous-dependencies
 
@@ -52,7 +53,7 @@ var rule = (0, _createRule.createLintRule)({
         }
 
         // Get the name of the LinkItem import
-        var linkItemImportName = customDefaultLinkItemSpecifier || (0, _utils.getLinkItemImportName)(context.getScope());
+        var linkItemImportName = customDefaultLinkItemSpecifier || (0, _getImportName.getImportName)(context.getScope(), '@atlaskit/menu', 'LinkItem');
         if (node.openingElement.name.name === linkItemImportName) {
           // and if href prop does not exist
           var linkProps = node.openingElement.attributes.filter(function (attr) {

package/dist/cjs/rules/use-href-in-link-item/utils.js

@@ -3,35 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.insertButtonItemImport = exports.insertButtonItemDefaultImport = exports.hrefHasInvalidValue = exports.hasImportOfName = exports.getUniqueButtonItemName = exports.getLinkItemImportName = void 0;
+exports.insertButtonItemImport = exports.insertButtonItemDefaultImport = exports.hrefHasInvalidValue = exports.hasImportOfName = exports.getUniqueButtonItemName = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var _findInParent = require("../utils/find-in-parent");
 // eslint-disable-next-line import/no-extraneous-dependencies
 
-var getLinkItemImportName = exports.getLinkItemImportName = function getLinkItemImportName(scope) {
-  var traversingScope = scope;
-  var matchedVariable;
-  while (traversingScope && traversingScope.type !== 'global') {
-    matchedVariable = traversingScope.variables.find(function (variable) {
-      var _variable$defs;
-      var def = (_variable$defs = variable.defs) === null || _variable$defs === void 0 ? void 0 : _variable$defs[0];
-      if (!def || !(def !== null && def !== void 0 && def.node) || !(0, _eslintCodemodUtils.isNodeOfType)(def.node, 'ImportSpecifier') || !def.parent || !(0, _eslintCodemodUtils.isNodeOfType)(def.parent, 'ImportDeclaration')) {
-        return;
-      }
-      return def.parent.source.value === '@atlaskit/menu' && def.node.imported.name === 'LinkItem';
-    });
-    if (matchedVariable) {
-      break;
-    }
-    traversingScope = traversingScope.upper;
-  }
-  if (!matchedVariable) {
-    return null;
-  } else {
-    var _matchedVariable$defs;
-    return (_matchedVariable$defs = matchedVariable.defs) === null || _matchedVariable$defs === void 0 ? void 0 : _matchedVariable$defs[0].node.local.name;
-  }
-};
 var invalidHrefValues = ['', '#', null, undefined];
 var hrefHasInvalidValue = exports.hrefHasInvalidValue = function hrefHasInvalidValue(scope, href) {
   // If doesn't exist,

package/dist/cjs/rules/use-primitives/index.js

@@ -1,14 +1,19 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _assign = _interopRequireDefault(require("lodash/assign"));
 var _createRule = require("../utils/create-rule");
 var _transformers = require("./transformers");
 var _utils = require("./utils");
 var boxDocsUrl = 'https://atlassian.design/components/primitives/box';
+var defaultConfig = {
+  preview: false
+};
 var rule = (0, _createRule.createLintRule)({
   meta: {
     name: 'use-primitives',
@@ -21,11 +26,43 @@ var rule = (0, _createRule.createLintRule)({
       severity: 'warn'
     },
     messages: {
-      preferPrimitivesBox: "This \"{{element}}\" may be able to be replaced with a \"Box\". See ".concat(boxDocsUrl, " for guidance.")
+      preferPrimitivesBox: "This element can be replaced with a \"Box\" primitive. See ".concat(boxDocsUrl, " for additional guidance.")
     }
   },
   create: function create(context) {
+    var mergedConfig = (0, _assign.default)({}, defaultConfig, context.options[0]);
     return {
+      // transforms styled.<html>(...) usages
+      CallExpression: function CallExpression(node) {
+        if (!mergedConfig.preview) {
+          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)) {
+          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)
+          }]
+        });
+      },
+      // transforms <div css={...}> usages
       JSXOpeningElement: function JSXOpeningElement(node) {
         if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXOpeningElement')) {
           return;
@@ -97,42 +134,10 @@ var shouldSuggestBox = function shouldSuggestBox(node, context
   // Find where `cssVariableName` is defined. We're looking for `const myStyles = css({...})`
   var cssVariableDefinition = (0, _eslintCodemodUtils.getIdentifierInParentScope)(context.getScope(), cssVariableName);
   var cssVariableValue = (0, _utils.getVariableDefinitionValue)(cssVariableDefinition);
-
   // Check if `cssVariableValue` is a function called `css()`
-  if (!(0, _utils.isFunctionNamed)(cssVariableValue, 'css')) {
-    return false;
-  }
-
-  // get the `{}` in `css({})`
-  // Zero indexed
-  var cssObjectExpression = (0, _utils.getFunctionArgumentAtPos)(cssVariableValue, 0);
-
-  // Bail on empty `css()` calls
-  if (!cssObjectExpression) {
-    return false;
-  }
-  var cssObject = (0, _utils.convertASTObjectExpressionToJSObject)(cssObjectExpression);
-
-  // Bail if there are less or more than 1 styles defined
-  if (Object.keys(cssObject).length !== 1) {
-    return false;
-  }
-
-  // NOTE: Our approach with this lint rule is to strictly whitelist css properties we can map.
-  // It means we have to provide mappings for everything (e.g. `display: block`).
-  // However, from a maker's experience, it's much better that the rule doesn't report (if we miss a mapping)
-  // than the rule reporting on things that can't be mapped.
-  var containsOnlyValidStyles = Object.keys(cssObject).every(function (styleProperty) {
-    var styleValue = cssObject[styleProperty];
-    return _transformers.supportedStylesMap[styleProperty] &&
-    // Is the key something we can map
-    _transformers.supportedStylesMap[styleProperty][styleValue] // Is the value something we can map
-    ;
-  });
-
-  if (!containsOnlyValidStyles) {
+  if (!cssVariableValue || !(0, _utils.isFunctionNamed)(cssVariableValue, 'css')) {
     return false;
   }
-  return true;
+  return (0, _utils.isValidCssPropertiesToTransform)(cssVariableValue.node.init);
 };
 var _default = exports.default = rule;

package/dist/cjs/rules/use-primitives/transformers/css-to-xcss.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.supportedStylesMap = exports.spaceTokenMap = exports.cssToXcssTransformer = void 0;
+exports.supportedStylesMap = exports.styledObjectToXcssTokens = exports.spaceTokenMap = exports.cssToXcssTransformer = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var _utils = require("../utils");
@@ -36,7 +36,14 @@ var cssToXcssTransformer = exports.cssToXcssTransformer = function cssToXcssTran
   var cssObjectExpression = (0, _utils.getFunctionArgumentAtPos)(cssVariableValue, 0);
   return [
   // Update `css` function name to `xcss`.
-  fixer.replaceText(cssVariableValue.node.init.callee, (0, _eslintCodemodUtils.identifier)('xcss').toString())].concat((0, _toConsumableArray2.default)(cssObjectExpression.properties.map(function (entry) {
+  fixer.replaceText(cssVariableValue.node.init.callee, (0, _eslintCodemodUtils.identifier)('xcss').toString())].concat((0, _toConsumableArray2.default)(styledObjectToXcssTokens(cssObjectExpression, fixer)));
+};
+
+// Update css object values to xcss values. e.g. `'8px'` -> `'space.100'`
+// Note: `properties` in this context is a group of AST nodes that make up a key/value pair in an object.
+// e.g. `padding: '8px'`. For clarity, it's renamed to `entry` inside the `.map()`.
+var styledObjectToXcssTokens = exports.styledObjectToXcssTokens = function styledObjectToXcssTokens(styles, fixer) {
+  return styles.properties.map(function (entry) {
     if (!(0, _eslintCodemodUtils.isNodeOfType)(entry, 'Property')) {
       return;
     }
@@ -51,7 +58,7 @@ var cssToXcssTransformer = exports.cssToXcssTransformer = function cssToXcssTran
       return;
     }
     return fixer.replaceText(entry.value, (0, _eslintCodemodUtils.literal)("'".concat(supportedStylesMap[entry.key.name][value], "'")).toString());
-  })));
+  });
 };
 var spaceTokenMap = exports.spaceTokenMap = {
   '0px': 'space.0',

package/dist/cjs/rules/use-primitives/transformers/index.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "spaceTokenMap", {
     return _cssToXcss.spaceTokenMap;
   }
 });
+Object.defineProperty(exports, "styledComponentToPrimitive", {
+  enumerable: true,
+  get: function get() {
+    return _styledComponentToPrimitive.styledComponentToPrimitive;
+  }
+});
 Object.defineProperty(exports, "supportedStylesMap", {
   enumerable: true,
   get: function get() {
@@ -28,4 +34,5 @@ Object.defineProperty(exports, "supportedStylesMap", {
   }
 });
 var _cssToXcss = require("./css-to-xcss");
-var _jsxElementToBox = require("./jsx-element-to-box");
+var _jsxElementToBox = require("./jsx-element-to-box");
+var _styledComponentToPrimitive = require("./styled-component-to-primitive");

package/dist/cjs/rules/use-primitives/transformers/styled-component-to-primitive.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styledComponentToPrimitive = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _utils = require("../utils");
+var _cssToXcss = require("./css-to-xcss");
+/**
+ * All required validation steps have been taken care of before this
+ * transformer is called, so it just goes ahead providing all necessary fixes
+ */
+var styledComponentToPrimitive = exports.styledComponentToPrimitive = function styledComponentToPrimitive(_ref, context) {
+  var stylesRef = _ref.stylesRef,
+    jsxRef = _ref.jsxRef;
+  return function (fixer) {
+    // generates the new variable name: MyComponent -> myComponentStyles
+    var calculatedStylesVariableName = (0, _eslintCodemodUtils.isNodeOfType)(stylesRef.id, 'Identifier') && "".concat(stylesRef.id.name.replace(stylesRef.id.name[0], stylesRef.id.name[0].toLowerCase()), "Styles");
+    if (!calculatedStylesVariableName) {
+      return [];
+    }
+    var importFixes = (0, _utils.upsertImportDeclaration)({
+      packageName: '@atlaskit/primitives',
+      specifiers: ['Box', 'xcss']
+    }, context, fixer);
+    var stylesFixes = convertStyledComponentToXcss(stylesRef, calculatedStylesVariableName, fixer);
+    var jsxFixes = convertJsxCallSite(jsxRef, calculatedStylesVariableName, fixer);
+    return [importFixes].concat(stylesFixes, jsxFixes).filter(function (fix) {
+      return Boolean(fix);
+    }); // Some of the transformers can return arrays with undefined, so filter them out
+  };
+};
+
+var convertStyledComponentToXcss = function convertStyledComponentToXcss(stylesRef, newStylesVariableName, fixer) {
+  var fixes = [];
+
+  // renames the variable from MyComponent to myComponentStyles
+  fixes.push(fixer.replaceText(stylesRef.id, newStylesVariableName));
+
+  // renames the function call from styled.<tag> to xcss
+  if (stylesRef.init && (0, _eslintCodemodUtils.isNodeOfType)(stylesRef.init, 'CallExpression')) {
+    fixes.push(fixer.replaceText(stylesRef.init.callee, 'xcss'));
+  }
+
+  // converts CSS values to XCSS-compatible tokens
+  if (stylesRef.init && (0, _eslintCodemodUtils.isNodeOfType)(stylesRef.init, 'CallExpression')) {
+    var objectExpression = stylesRef.init.arguments[0];
+    if ((0, _eslintCodemodUtils.isNodeOfType)(objectExpression, 'ObjectExpression')) {
+      fixes.push.apply(fixes, (0, _toConsumableArray2.default)((0, _cssToXcss.styledObjectToXcssTokens)(objectExpression, fixer)));
+    }
+  }
+  return fixes;
+};
+var convertJsxCallSite = function convertJsxCallSite(jsxRef, newStylesVariableName, fixer) {
+  var fixes = [];
+
+  // renames the JSX call site
+  if ((0, _eslintCodemodUtils.isNodeOfType)(jsxRef.parent, 'JSXElement')) {
+    fixes.push.apply(fixes, (0, _toConsumableArray2.default)((0, _utils.updateJSXElementName)(jsxRef.parent, 'Box', fixer)));
+  }
+
+  // adds xcss prop
+  fixes.push(fixer.insertTextAfter(jsxRef.name, " xcss={".concat(newStylesVariableName, "}")));
+  return fixes;
+};

package/dist/cjs/rules/use-primitives/utils/convert-ast-object-expression-to-js-object.js

@@ -12,6 +12,22 @@ var _eslintCodemodUtils = require("eslint-codemod-utils");
  */
 var convertASTObjectExpressionToJSObject = exports.convertASTObjectExpressionToJSObject = function convertASTObjectExpressionToJSObject(styles) {
   var styleObj = {};
+
+  // if we see any spread props we stop and return false to indicate this is unsupported
+  if (!styles.properties.every(function (prop) {
+    return (0, _eslintCodemodUtils.isNodeOfType)(prop, 'Property');
+  })) {
+    return false;
+  }
+
+  // TODO: We need to harden this logic.
+  // It currently generates a false positive for:
+  // styled.div({
+  //  marginTop: "0px",
+  //  marginBottom: token("space.100", "8px"),
+  // })
+  // as the value for `marginBottom` is not a string, so it is just skipped
+  // from the resulting map and this causes the rule to trigger when it shouldn't
   styles.properties.forEach(function (prop) {
     if (!(0, _eslintCodemodUtils.isNodeOfType)(prop, 'Property')) {
       return;

package/dist/cjs/rules/use-primitives/utils/find-valid-jsx-usage-to-transform.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findValidJsxUsageToTransform = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+/**
+ * Given a component name finds its JSX usages and performs some
+ * additional validations to ensure transformation can be done correctly
+ */
+var findValidJsxUsageToTransform = exports.findValidJsxUsageToTransform = function findValidJsxUsageToTransform(componentName, scope) {
+  var variableDeclaration = scope.variables.find(function (v) {
+    return v.name === componentName;
+  });
+  if (!variableDeclaration) {
+    return;
+  }
+
+  // length here should be exactly 2 to indicate only two references:
+  // one being the variable declaration itself
+  // second being the JSX call site
+  // we might consider handling multiple local JSX call sites in the future
+  // but "this is good enough for now"™️
+  if (variableDeclaration.references.length !== 2) {
+    return;
+  }
+  var jsxUsage = variableDeclaration.references[1].identifier;
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(jsxUsage, 'JSXIdentifier')) {
+    return;
+  }
+  var jsxOpeningElement = jsxUsage.parent;
+  // we could relatively easily support some safe attributes like
+  // "id" or "testId" but support will be expanded as we go
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(jsxOpeningElement, 'JSXOpeningElement') || jsxOpeningElement.attributes.length > 0) {
+    return;
+  }
+  return jsxOpeningElement;
+};

package/dist/cjs/rules/use-primitives/utils/find-valid-styled-component-call.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findValidStyledComponentCall = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _isValidTagName = require("./is-valid-tag-name");
+/**
+ * returns a variable reference if preconditions are favourable for
+ * the transformation to proceed, undefined otherwise.
+ */
+
+var findValidStyledComponentCall = exports.findValidStyledComponentCall = function findValidStyledComponentCall(node) {
+  // halts unless we are dealing with a styled component
+  if (!isStyledCallExpression(node)) {
+    return;
+  }
+  // halts if the component is being exported directly
+  if ((0, _eslintCodemodUtils.closestOfType)(node, 'ExportNamedDeclaration')) {
+    return;
+  }
+  var styledComponentVariableRef = node.parent;
+  // halts if the styled component is not assigned to a variable immediately
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(styledComponentVariableRef, 'VariableDeclarator')) {
+    return;
+  }
+  return styledComponentVariableRef;
+};
+
+/**
+ * Some verbose precondition checks but all it does is check
+ * a call expression is of form `styled.div` or `styled2.div`
+ *
+ * In the future it could be enhanced to double check `styled` and `styled2`
+ * are Compiled imports but as is should work for the majority of use cases
+ */
+var isStyledCallExpression = function isStyledCallExpression(call) {
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(call, 'CallExpression')) {
+    return false;
+  }
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(call.callee, 'MemberExpression')) {
+    return false;
+  }
+  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)) {
+    return true;
+  }
+  return false;
+};

package/dist/cjs/rules/use-primitives/utils/index.js

@@ -15,6 +15,18 @@ Object.defineProperty(exports, "convertASTObjectExpressionToJSObject", {
     return _convertAstObjectExpressionToJsObject.convertASTObjectExpressionToJSObject;
   }
 });
+Object.defineProperty(exports, "findValidJsxUsageToTransform", {
+  enumerable: true,
+  get: function get() {
+    return _findValidJsxUsageToTransform.findValidJsxUsageToTransform;
+  }
+});
+Object.defineProperty(exports, "findValidStyledComponentCall", {
+  enumerable: true,
+  get: function get() {
+    return _findValidStyledComponentCall.findValidStyledComponentCall;
+  }
+});
 Object.defineProperty(exports, "getAttributeValueIdentifier", {
   enumerable: true,
   get: function get() {
@@ -51,6 +63,12 @@ Object.defineProperty(exports, "isFunctionNamed", {
     return _isFunctionNamed.isFunctionNamed;
   }
 });
+Object.defineProperty(exports, "isValidCssPropertiesToTransform", {
+  enumerable: true,
+  get: function get() {
+    return _isValidCssPropertiesToTransform.isValidCssPropertiesToTransform;
+  }
+});
 Object.defineProperty(exports, "isValidTagName", {
   enumerable: true,
   get: function get() {
@@ -77,12 +95,15 @@ Object.defineProperty(exports, "upsertImportDeclaration", {
 });
 var _containsOnlySupportedAttrs = require("./contains-only-supported-attrs");
 var _convertAstObjectExpressionToJsObject = require("./convert-ast-object-expression-to-js-object");
+var _findValidJsxUsageToTransform = require("./find-valid-jsx-usage-to-transform");
+var _findValidStyledComponentCall = require("./find-valid-styled-component-call");
 var _getAttributeValueIdentifier = require("./get-attribute-value-identifier");
 var _getFunctionArgumentAtPos = require("./get-function-argument-at-pos");
 var _getJsxAttributeByName = require("./get-jsx-attribute-by-name");
 var _getVariableDefinitionValue = require("./get-variable-definition-value");
 var _getVariableUsageCount = require("./get-variable-usage-count");
 var _isFunctionNamed = require("./is-function-named");
+var _isValidCssPropertiesToTransform = require("./is-valid-css-properties-to-transform");
 var _isValidTagName = require("./is-valid-tag-name");
 var _updateJsxAttributeByName = require("./update-jsx-attribute-by-name");
 var _updateJsxElementName = require("./update-jsx-element-name");