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

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 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
+
+- [#65758](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/65758) [`16e6a0fbe125`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/16e6a0fbe125) - Internal refactor of `use-primitves` rule. There should be no change to consumers of the rule.
+
 ## 8.23.1
 
 ### Patch Changes

package/dist/cjs/ast-nodes/function-call.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FunctionCall = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+var FunctionCall = exports.FunctionCall = {
+  getName: function getName(node) {
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression')) {
+      return undefined;
+    }
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier')) {
+      return undefined;
+    }
+    return node.callee.name;
+  },
+  updateName: function updateName(node, newName, fixer) {
+    return fixer.replaceText(node.callee, newName);
+  },
+  /**
+   * Function arguments can be many things:
+   * `css(myStyles, () => {}, undefined, 'literal', ...rest) // etc`
+   * They all need slightly different treatment.
+   *
+   * Currently 'getArgumentAtPos' only implements strategies for Literals and ObjectExpressions.
+   * If you need to support another type of arg, add it, and update the type.
+   */
+  getArgumentAtPos: function getArgumentAtPos(node, pos) {
+    var argument = node.arguments[pos];
+    if ((0, _eslintCodemodUtils.isNodeOfType)(argument, 'Literal') && argument.value) {
+      var _argument$value;
+      return {
+        type: 'Literal',
+        value: (_argument$value = argument.value) === null || _argument$value === void 0 ? void 0 : _argument$value.toString()
+      };
+    }
+    if ((0, _eslintCodemodUtils.isNodeOfType)(argument, 'ObjectExpression')) {
+      argument;
+      return {
+        type: 'ObjectExpression',
+        value: argument
+      };
+    }
+  }
+};

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

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Import = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+var Import = exports.Import = {
+  /**
+   * Note: fixes can't overlap, which means this will fail:
+   * ```
+   * const importNode = Root.findImportByModule('@atlaskit/primitives')
+   * Import.insertNamedSpecifier(importNode, 'Box')
+   * Import.insertNamedSpecifier(importNode, 'xcss')
+   * ```
+   *
+   * For this reason `insertNamedSpecifiers` accepts a `specifiers` array, so you can group all inserts together.
+   */
+  insertNamedSpecifiers: function insertNamedSpecifiers(node, specifiers, fixer) {
+    var _this = this;
+    /**
+     * `insertImportSpecifier()` has the unfortunate implementation detail of naively adding duplicate specifiers.
+     * e.g. calling
+     *  `insertImportSpecifier(importDecl, 'xcss')`
+     * on
+     * `import { Inline, xcss } from '@atlaskit/primitives'`
+     * will result in:
+     * `import { Inline, xcss, xcss } from '@atlaskit/primitives'`.
+     * So, we need to filter out specifiers that are already imported.
+     */
+    var uniqueSpecifiers = specifiers.filter(function (specifier) {
+      return !_this.containsNamedSpecifier(node, specifier);
+    });
+    if (uniqueSpecifiers.length === 0) {
+      return;
+    }
+    return fixer.replaceText(node, "".concat((0, _eslintCodemodUtils.insertImportSpecifier)(node, uniqueSpecifiers.join(', ')), ";\n"));
+  },
+  containsNamedSpecifier: function containsNamedSpecifier(node, name) {
+    return node.specifiers.some(function (specifier) {
+      if (!(0, _eslintCodemodUtils.isNodeOfType)(specifier, 'ImportSpecifier')) {
+        return false;
+      }
+      return specifier.imported.name === name;
+    });
+  }
+};

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

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FunctionCall", {
+  enumerable: true,
+  get: function get() {
+    return _functionCall.FunctionCall;
+  }
+});
+Object.defineProperty(exports, "Import", {
+  enumerable: true,
+  get: function get() {
+    return _import.Import;
+  }
+});
+Object.defineProperty(exports, "JSXAttribute", {
+  enumerable: true,
+  get: function get() {
+    return _jsxAttribute.JSXAttribute;
+  }
+});
+Object.defineProperty(exports, "JSXElement", {
+  enumerable: true,
+  get: function get() {
+    return _jsxElement.JSXElement;
+  }
+});
+Object.defineProperty(exports, "Root", {
+  enumerable: true,
+  get: function get() {
+    return _root.Root;
+  }
+});
+var _functionCall = require("./function-call");
+var _import = require("./import");
+var _jsxAttribute = require("./jsx-attribute");
+var _jsxElement = require("./jsx-element");
+var _root = require("./root");

package/dist/cjs/ast-nodes/jsx-attribute.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.JSXAttribute = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var HelperJSXAttribute = exports.JSXAttribute = {
+  getName: function getName(node) {
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXAttribute')) {
+      throw new Error('Not a JSXAttribute');
+    }
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(node.name, 'JSXIdentifier')) {
+      throw new Error('name is not a JSXIdentifier');
+    }
+    return node.name.name;
+  },
+  updateName: function updateName(node, name, fixer) {
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXAttribute')) {
+      throw new Error('Not a JSXAttribute');
+    }
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(node.name, 'JSXIdentifier')) {
+      throw new Error('name is not a JSXIdentifier');
+    }
+    return fixer.replaceText(node.name, (0, _eslintCodemodUtils.literal)(name).toString());
+  },
+  /**
+   * A JSXAttribute value can be many things:
+   * - css='myStyles'
+   * - css={myStyles}
+   * - css={[styles1, styles2]}
+   * - header={<></>}
+   * - css={styleMap.header}
+   * - css={...styles}
+   *
+   * Currently, `getValue` has only implemented strategies for when the value is a string, or an ExpressionStatement
+   * If you need additional functionality add it, and set the correct `type` on the returned object
+   */
+  getValue: function getValue(node) {
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXAttribute')) {
+      return;
+    }
+    if (!node.value) {
+      return;
+    }
+
+    // handle `css={myStyles}`
+    if ((0, _eslintCodemodUtils.isNodeOfType)(node.value, 'JSXExpressionContainer') && (0, _eslintCodemodUtils.isNodeOfType)(node.value.expression, 'Identifier')) {
+      return {
+        type: 'ExpressionStatement',
+        value: node.value.expression.name
+      };
+    }
+
+    // handle `css='myStyles'`
+    if ((0, _eslintCodemodUtils.isNodeOfType)(node.value, 'Literal') && node.value.value) {
+      var _node$value$value;
+      return {
+        type: 'Literal',
+        value: (_node$value$value = node.value.value) === null || _node$value$value === void 0 ? void 0 : _node$value$value.toString()
+      };
+    }
+  }
+};

package/dist/cjs/ast-nodes/jsx-element.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.JSXElementHelper = exports.JSXElement = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var JSXElementHelper = exports.JSXElement = exports.JSXElementHelper = {
+  /**
+   * Names of JSXElements can be any of:
+   * `<Component></Component>` - (JSXIdentifier)
+   * `<MyComponents.Component></MyComponents.Component>` - `MyComponents` is a namespace (JSXNamespacedName)
+   * `<MyComponents.Component></MyComponents.Component>` - `MyComponents` is an object (JSXMemberExpression)
+   *
+   * Getting the name of a JSXMemberExpression is difficult, because object can contain objects, which is recursively defined in the AST.
+   * e.g. getting the name of `<MyComponents.PresentationLayer.LeftSideBar.Header />` would require `getName` to recursively resolve all parts of the name.
+   * `getName` does not currently have this functionality. Add it if you need it.
+   */
+  getName: function getName(node) {
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(node.openingElement.name, 'JSXIdentifier')) {
+      // TODO: We may want to log this
+      return '';
+    }
+    return node.openingElement.name.name;
+  },
+  updateName: function updateName(node, newName, fixer) {
+    var isSelfClosing = JSXElementHelper.isSelfClosing(node);
+    var openingElementFix = fixer.replaceText(node.openingElement.name, (0, _eslintCodemodUtils.jsxIdentifier)(newName).toString());
+    if (isSelfClosing || !node.closingElement) {
+      return [openingElementFix];
+    }
+    var closingElementFix = fixer.replaceText(node.closingElement.name, (0, _eslintCodemodUtils.jsxIdentifier)(newName).toString());
+    return [openingElementFix, closingElementFix];
+  },
+  isSelfClosing: function isSelfClosing(node) {
+    return node.openingElement.selfClosing;
+  },
+  getAttributes: function getAttributes(node) {
+    return node.openingElement.attributes;
+  },
+  getAttributeByName: function getAttributeByName(node, name) {
+    return node.openingElement.attributes.find(function (attr) {
+      // Ignore anything other than JSXAttribute
+      if (!(0, _eslintCodemodUtils.isNodeOfType)(attr, 'JSXAttribute')) {
+        return false;
+      }
+      return attr.name.name === name;
+    });
+  },
+  containsSpreadAttributes: function containsSpreadAttributes(node) {
+    return node.openingElement.attributes.some(function (attr) {
+      return (0, _eslintCodemodUtils.isNodeOfType)(attr, 'JSXSpreadAttribute');
+    });
+  }
+};

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

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Root = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+// Little bit unreadable, but better than duplicating the type
+
+var Root = exports.Root = {
+  /**
+   * Note: This can return multiple ImportDeclarations for cases like:
+   * ```
+   * import { Stack } from '@atlaskit/primitives'
+   * import type { StackProps } from '@atlaskit/primitives'
+   * ```
+   */
+  findImportsByModule: function findImportsByModule(root, name) {
+    return root.filter(function (node) {
+      if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'ImportDeclaration')) {
+        return false;
+      }
+      if (!(0, _eslintCodemodUtils.hasImportDeclaration)(node, name)) {
+        return false;
+      }
+      return true;
+    });
+  },
+  insertImport: function insertImport(root, data, fixer) {
+    return fixer.insertTextBefore(root[0], "".concat((0, _eslintCodemodUtils.insertImportDeclaration)(data.module, data.specifiers), ";\n"));
+  }
+};

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

@@ -4,11 +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 _utils = require("./utils");
 var boxDocsUrl = 'https://atlassian.design/components/primitives/box';
 var rule = (0, _createRule.createLintRule)({
   meta: {
@@ -30,113 +28,19 @@ 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
-      JSXOpeningElement: function JSXOpeningElement(node) {
-        if (!config.patterns.includes('compiled-css-function')) {
-          return false;
-        }
-        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXOpeningElement')) {
-          return;
-        }
-        if (!(0, _eslintCodemodUtils.isNodeOfType)(node.name, 'JSXIdentifier')) {
-          return;
-        }
-        if (!(0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'JSXElement')) {
-          return;
-        }
-        var suggestBox = shouldSuggestBox(node.parent, context, config);
-        if (suggestBox) {
-          context.report({
-            node: node,
-            messageId: 'preferPrimitivesBox',
-            data: {
-              element: node.name.name
-            },
-            suggest: [{
-              desc: "Convert to Box",
-              fix: (0, _transformers.jsxElementToBoxTransformer)(node.parent, context)
-            }]
-          });
-        }
+      JSXElement: function JSXElement(node) {
+        _transformers.EmotionCSS.lint(node, {
+          context: context,
+          config: config
+        });
       }
     };
   }
 });
-var shouldSuggestBox = function shouldSuggestBox(node, context, config
-// scope: Scope.Scope,
-) {
-  if (!node) {
-    return false;
-  }
-
-  // Currently we only support `div`, but possibly more in future
-  if (!(0, _utils.isValidTagName)(node)) {
-    return false;
-  }
-
-  // Currently we only support elements that contain only a `css` attr, possibly more in future
-  if (!(0, _utils.containsOnlySupportedAttrs)(node)) {
-    return false;
-  }
-
-  // Get the `css` attr
-  var cssAttr = (0, _utils.getJSXAttributeByName)(node.openingElement, 'css');
-
-  // Get the prop value, e.g. `myStyles` in `css={myStyles}`
-  var cssVariableName = (0, _utils.getAttributeValueIdentifier)(cssAttr);
-
-  // `cssVariableName` could be undefined if the maker has
-  // done something like `css={[styles1, styles2]}`, `css={...styles}`, etc
-  if (!cssVariableName) {
-    return false;
-  }
-
-  /**
-   * Make sure the variable is not used in multiple JSX elements:
-   * ```
-   *    <div css={paddingStyles}></div>
-   *    <input css={paddingStyles}></input>
-   * ```
-   */
-  if ((0, _utils.getVariableUsagesCount)(cssVariableName, context) !== 1) {
-    return false;
-  }
-
-  // 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 (!cssVariableValue || !(0, _utils.isFunctionNamed)(cssVariableValue, 'css')) {
-    return false;
-  }
-  return (0, _utils.isValidCssPropertiesToTransform)(cssVariableValue.node.init, config);
-};
 var _default = exports.default = rule;

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;