@atlaskit/eslint-plugin-design-system 8.18.0 → 8.19.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 8.19.0
+
+### Minor Changes
+
+- [#64899](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64899) [`442878c001f9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/442878c001f9) - Add `no-unsafe-style-overrides`. This rule marks any usage of unsafe style overrides as violations, such as usage of `css`, `theme`, and `cssFn` props.
+
+## 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

package/README.md

@@ -62,6 +62,7 @@ module.exports = {
 | <a href="./src/rules/no-nested-styles/README.md">no-nested-styles</a>                                             | Disallows use of nested styles in `css` functions.                                                                                                                                                                                                                                                                  | Yes         |         |             |
 | <a href="./src/rules/no-physical-properties/README.md">no-physical-properties</a>                                 | Disallow physical properties and values in `css` function calls.                                                                                                                                                                                                                                                    |             | Yes     |             |
 | <a href="./src/rules/no-unsafe-design-token-usage/README.md">no-unsafe-design-token-usage</a>                     | Enforces design token usage is statically and locally analyzable.                                                                                                                                                                                                                                                   | Yes         | Yes     |             |
+| <a href="./src/rules/no-unsafe-style-overrides/README.md">no-unsafe-style-overrides</a>                           | Discourage usage of unsafe style overrides used against the Atlassian Design System.                                                                                                                                                                                                                                | Yes         |         |             |
 | <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         |

package/constellation/index/usage.mdx

@@ -26,6 +26,7 @@ This plugin contains rules that should be used when working with the [Atlassian
 | <a href="#no-nested-styles">no-nested-styles</a>                                             | Disallows use of nested styles in `css` functions.                                                                                                                                                                                                                                                                  | Yes         |         |             |
 | <a href="#no-physical-properties">no-physical-properties</a>                                 | Disallow physical properties and values in `css` function calls.                                                                                                                                                                                                                                                    |             | Yes     |             |
 | <a href="#no-unsafe-design-token-usage">no-unsafe-design-token-usage</a>                     | Enforces design token usage is statically and locally analyzable.                                                                                                                                                                                                                                                   | Yes         | Yes     |             |
+| <a href="#no-unsafe-style-overrides">no-unsafe-style-overrides</a>                           | Discourage usage of unsafe style overrides used against the Atlassian Design System.                                                                                                                                                                                                                                | Yes         |         |             |
 | <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         |
@@ -666,6 +667,56 @@ This rule comes with options to aid in migrating to design tokens.
 When `true` the rule will mark token function usage as violations when fallbacks aren't defined.
 When `false` the rule will mark token function usage as violations when fallbacks are defined.
 
+## no-unsafe-style-overrides
+
+Unsafe style overrides cause friction and incidents when internals of the component you're overriding change. They're inherently unbounded and everything is API that can change at a moments notice.
+
+Instead, lean on composition, primitive components, and safe style overrides via the `xcss` prop where component authors declare what styles they want to support.
+
+<h3>Examples</h3>
+
+#### Incorrect
+
+```tsx
+import Button from '@atlaskit/button';
+
+<Button css={{ fontWeight: 500 }}>foo</Button>;
+        ^^^
+```
+
+```tsx
+import { LinkItem } from '@atlaskit/menu';
+
+<LinkItem cssFn={() => ({ '> div > div': { padding: 2 } })} />;
+          ^^^^^
+```
+
+```tsx
+import { ButtonItem } from '@atlaskit/side-navigation';
+
+<ButtonItem className="text-neutral-400" />;
+            ^^^^^^^^^
+```
+
+#### Correct
+
+```tsx
+<Button>
+  <strong>foo</strong>
+</Button>
+```
+
+```tsx
+const styles = css({ padding: 'var(--ds-space-100)' });
+
+<Box as="a" xcss={styles}>
+  <Stack>
+    <Inline />
+    <Inline />
+  </Stack>
+</Box>;
+```
+
 ## no-unsupported-drag-and-drop-libraries
 
 We encourage the use of Pragmatic drag and drop to power all drag and drop experiences - from table to external files. Pragmatic drag and drop is a performance optimised drag and drop framework that has been designed to power any drag and drop experience on any tech stack. Please avoid using alternative drag and drop libraries as it will lead to poorer performance, increased maintenance costs, (likely) worse accessibility and fragmented user experiences. See https://staging.atlassian.design/components/pragmatic-drag-and-drop/

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::37a857efd0971ab26170d5f1f526279b>>
+ * @codegen <<SignedSource::6efa1e48692b3e287d6dfcd500a5f0ab>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -25,6 +25,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/no-nested-styles': 'error',
     '@atlaskit/design-system/no-physical-properties': 'error',
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
+    '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/prefer-primitives': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',

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::b3bce8efb2db1fed84370af608ca0d4c>>
+ * @codegen <<SignedSource::be810d87ec2d253e3b053dc06ff1b99a>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -21,6 +21,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/no-deprecated-imports': 'error',
     '@atlaskit/design-system/no-nested-styles': 'error',
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
+    '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@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',

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

@@ -18,6 +18,7 @@ var _noMargin = _interopRequireDefault(require("./no-margin"));
 var _noNestedStyles = _interopRequireDefault(require("./no-nested-styles"));
 var _noPhysicalProperties = _interopRequireDefault(require("./no-physical-properties"));
 var _noUnsafeDesignTokenUsage = _interopRequireDefault(require("./no-unsafe-design-token-usage"));
+var _noUnsafeStyleOverrides = _interopRequireDefault(require("./no-unsafe-style-overrides"));
 var _noUnsupportedDragAndDropLibraries = _interopRequireDefault(require("./no-unsupported-drag-and-drop-libraries"));
 var _preferPrimitives = _interopRequireDefault(require("./prefer-primitives"));
 var _useDrawerLabel = _interopRequireDefault(require("./use-drawer-label"));
@@ -27,7 +28,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::e2cc357c90120dbbd89b2928dba968c0>>
+ * @codegen <<SignedSource::ab1f5b129d07027c228dbd79da5f3572>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -44,6 +45,7 @@ var _default = exports.default = {
   'no-nested-styles': _noNestedStyles.default,
   'no-physical-properties': _noPhysicalProperties.default,
   'no-unsafe-design-token-usage': _noUnsafeDesignTokenUsage.default,
+  'no-unsafe-style-overrides': _noUnsafeStyleOverrides.default,
   'no-unsupported-drag-and-drop-libraries': _noUnsupportedDragAndDropLibraries.default,
   'prefer-primitives': _preferPrimitives.default,
   'use-drawer-label': _useDrawerLabel.default,

package/dist/cjs/rules/no-unsafe-style-overrides/index.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _createRule = require("../utils/create-rule");
+var _getImportNodeBySource = require("../utils/get-import-node-by-source");
+var _jsx = require("../utils/jsx");
+var unsafeOverrides = ['css', 'className', 'theme', 'cssFn', 'styles'];
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    docs: {
+      recommended: true,
+      // This should be an error but for now we're rolling it out as warn so we can actually get it into codebases.
+      severity: 'warn',
+      description: 'Discourage usage of unsafe style overrides used against the Atlassian Design System.'
+    },
+    name: 'no-unsafe-style-overrides',
+    messages: {
+      noUnsafeStyledOverride: 'Wrapping {{componentName}} in a styled component encourages unsafe style overrides which cause friction and incidents when its internals change.',
+      noUnsafeOverrides: 'The {{propName}} prop encourages unsafe style overrides which cause friction and incidents when {{componentName}} internals change.'
+    }
+  },
+  create: function create(context) {
+    return {
+      CallExpression: function CallExpression(node) {
+        if (node.callee.type !== 'Identifier' || !node.callee.name.toLowerCase().includes('styled')) {
+          // Ignore functions that don't look like styled().
+          return;
+        }
+        var firstArgument = node.arguments[0];
+        if (!firstArgument || firstArgument.type !== 'Identifier') {
+          return;
+        }
+        var moduleName = (0, _getImportNodeBySource.getModuleOfIdentifier)(context.getSourceCode(), firstArgument.name);
+        if (!moduleName || !moduleName.moduleName.startsWith('@atlaskit')) {
+          // Ignore styled calls with non-atlaskit components.
+          return;
+        }
+        context.report({
+          node: firstArgument,
+          messageId: 'noUnsafeStyledOverride',
+          data: {
+            componentName: moduleName.importName
+          }
+        });
+      },
+      JSXAttribute: function JSXAttribute(node) {
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXAttribute') || !(node.parent && (0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'JSXOpeningElement'))) {
+          return;
+        }
+        var elementName = (0, _jsx.getJSXElementName)(node.parent);
+        var moduleName = (0, _getImportNodeBySource.getModuleOfIdentifier)(context.getSourceCode(), elementName);
+        if (!moduleName || !moduleName.moduleName.startsWith('@atlaskit')) {
+          return;
+        }
+        var propName = typeof node.name.name === 'string' ? node.name.name : node.name.name.name;
+        if (unsafeOverrides.includes(propName)) {
+          context.report({
+            node: node,
+            messageId: 'noUnsafeOverrides',
+            data: {
+              propName: propName,
+              componentName: moduleName.importName
+            }
+          });
+        }
+      }
+    };
+  }
+});
+var _default = exports.default = rule;

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");