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

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

@@ -1,7 +1,4 @@
-export { containsOnlySupportedAttrs } from './contains-only-supported-attrs';
 export { convertASTObjectExpressionToJSObject } from './convert-ast-object-expression-to-js-object';
-export { findValidJsxUsageToTransform } from './find-valid-jsx-usage-to-transform';
-export { findValidStyledComponentCall } from './find-valid-styled-component-call';
 export { getAttributeValueIdentifier } from './get-attribute-value-identifier';
 export { getFunctionArgumentAtPos } from './get-function-argument-at-pos';
 export { getJSXAttributeByName } from './get-jsx-attribute-by-name';
@@ -9,7 +6,4 @@ export { getVariableDefinitionValue } from './get-variable-definition-value';
 export { getVariableUsagesCount } from './get-variable-usage-count';
 export { isFunctionNamed } from './is-function-named';
 export { isValidCssPropertiesToTransform } from './is-valid-css-properties-to-transform';
-export { isValidTagName } from './is-valid-tag-name';
-export { updateJSXAttributeByName } from './update-jsx-attribute-by-name';
-export { updateJSXElementName } from './update-jsx-element-name';
-export { upsertImportDeclaration } from './upsert-import-declaration';
+export { updateJSXAttributeByName } from './update-jsx-attribute-by-name';

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

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

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

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

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

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

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

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

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

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

package/dist/esm/rules/consistent-css-prop-usage/index.js

@@ -6,6 +6,8 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { getIdentifierInParentScope, isNodeOfType } from 'eslint-codemod-utils';
 import assign from 'lodash/assign';
 import { createLintRule } from '../utils/create-rule';
+// File-level tracking of styles hoisted from the cssOnTopOfModule/cssAtBottomOfModule fixers
+var hoistedCss = [];
 function isCssCallExpression(node, cssFunctions) {
   cssFunctions = [].concat(_toConsumableArray(cssFunctions), ['cssMap']);
   return !!(isNodeOfType(node, 'CallExpression') && node.callee && node.callee.type === 'Identifier' && cssFunctions.includes(node.callee.name) && node.arguments.length && node.arguments[0].type === 'ObjectExpression');
@@ -18,11 +20,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
@@ -41,7 +43,7 @@ var getDeclaratorString = function getDeclaratorString(context) {
   }
   var variables = scope.variables.map(function (variable) {
     return variable.name;
-  });
+  }).concat(hoistedCss);
   var count = 2;
   var declaratorName = 'styles';
 
@@ -54,6 +56,9 @@ var getDeclaratorString = function getDeclaratorString(context) {
       count++;
     }
   }
+
+  // Keep track of it by adding it to the hoistedCss global array
+  hoistedCss = [].concat(_toConsumableArray(hoistedCss), ["".concat(declaratorName).concat(count)]);
   return "".concat(declaratorName).concat(count);
 };
 function analyzeIdentifier(context, sourceIdentifier, configuration) {
@@ -116,7 +121,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') {
@@ -138,7 +155,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')]);
 };
 
 /**
@@ -269,6 +286,9 @@ var rule = createLintRule({
     }), _defineProperty(_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/esm/rules/index.codegen.js

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

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

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

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

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

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

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

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

@@ -1,9 +1,6 @@
-import { isNodeOfType } from 'eslint-codemod-utils';
 import { createLintRule } from '../utils/create-rule';
 import { getConfig } from './config';
-import { styledComponentToPrimitive } from './transformers';
-import { EmotionCSS } from './transformers/emotion-css';
-import { findValidJsxUsageToTransform, findValidStyledComponentCall, isValidCssPropertiesToTransform } from './utils';
+import { CompiledStyled, EmotionCSS } from './transformers';
 var boxDocsUrl = 'https://atlassian.design/components/primitives/box';
 var rule = createLintRule({
   meta: {
@@ -25,32 +22,9 @@ var rule = createLintRule({
     return {
       // transforms styled.<html>(...) usages
       CallExpression: function CallExpression(node) {
-        if (!config.patterns.includes('compiled-styled-object')) {
-          return;
-        }
-        if (!isNodeOfType(node, 'CallExpression')) {
-          return;
-        }
-        var styledComponentVariableRef = findValidStyledComponentCall(node);
-        if (!styledComponentVariableRef || !isNodeOfType(styledComponentVariableRef.id, 'Identifier') || !isValidCssPropertiesToTransform(node, config)) {
-          return;
-        }
-        var styledComponentJsxRef = 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: styledComponentToPrimitive({
-              stylesRef: styledComponentVariableRef,
-              jsxRef: styledComponentJsxRef
-            }, context)
-          }]
+        CompiledStyled.lint(node, {
+          context: context,
+          config: config
         });
       },
       // transforms <div css={...}> usages

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

@@ -0,0 +1,30 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { isNodeOfType } from 'eslint-codemod-utils';
+import * as ast from '../../../../ast-nodes';
+
+/**
+ * Transforms a JSXElement from:
+ * ```
+ *   <div>
+ *     // ...
+ *   </div>
+ * ```
+ * to
+ * ```
+ *   <Box xcss={myStyles}>
+ *     // ...
+ *   </Box>
+ * ```
+ */
+export var convertJsxCallSite = function convertJsxCallSite(jsxElement, newStylesVariableName, fixer) {
+  var fixes = [];
+
+  // renames the JSX call site
+  if (isNodeOfType(jsxElement, 'JSXElement')) {
+    fixes.push.apply(fixes, _toConsumableArray(ast.JSXElement.updateName(jsxElement, 'Box', fixer)));
+  }
+
+  // adds xcss prop
+  fixes.push(fixer.insertTextAfter(jsxElement.openingElement.name, " xcss={".concat(newStylesVariableName, "}")));
+  return fixes;
+};

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

@@ -0,0 +1,38 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { styledObjectToXcssTokens } from '../css-to-xcss';
+
+/**
+ * Transforms a variable like:
+ * ```
+ * const MyComponent = styled.div({
+ *   padding: '8px',
+ * })
+ * ```
+ * to
+ * ```
+ * const myComponentStyles = xcss({
+ *   padding: 'space.100',
+ * })
+ * ```
+ */
+export var 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 && isNodeOfType(styles.init, 'CallExpression')) {
+    fixes.push(fixer.replaceText(styles.init.callee, 'xcss'));
+  }
+
+  // converts CSS values to XCSS-compatible tokens
+  if (styles.init && isNodeOfType(styles.init, 'CallExpression')) {
+    var objectExpression = styles.init.arguments[0];
+    if (isNodeOfType(objectExpression, 'ObjectExpression')) {
+      fixes.push.apply(fixes, _toConsumableArray(styledObjectToXcssTokens(objectExpression, fixer)));
+    }
+  }
+  return fixes;
+};

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

@@ -1,5 +1,5 @@
 import { closestOfType, isNodeOfType } from 'eslint-codemod-utils';
-import { validPrimitiveElements } from './is-valid-tag-name';
+import * as supported from './supported';
 
 /**
  * returns a variable reference if preconditions are favourable for
@@ -41,7 +41,7 @@ var isStyledCallExpression = function isStyledCallExpression(call) {
   if (!isNodeOfType(call.callee.object, 'Identifier') || !isNodeOfType(call.callee.property, 'Identifier')) {
     return false;
   }
-  if (/^styled2?$/.test(call.callee.object.name) && validPrimitiveElements.has(call.callee.property.name)) {
+  if (/^styled2?$/.test(call.callee.object.name) && supported.elements.includes(call.callee.property.name)) {
     return true;
   }
   return false;

package/dist/esm/rules/use-primitives/transformers/compiled-styled/index.js

@@ -0,0 +1,107 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import * as ast from '../../../../ast-nodes';
+import { isValidCssPropertiesToTransform } from '../../utils';
+import { convertJsxCallSite } from './convert-jsx-call-site';
+import { convertStyledComponentToXcss } from './convert-styled-component-call-to-jsx';
+import { findValidJsxUsageToTransform } from './find-valid-jsx-usage-to-transform';
+import { findValidStyledComponentCall } from './find-valid-styled-component-call';
+import { upsertImportDeclaration } from './upsert-import-declaration';
+export var CompiledStyled = {
+  lint: function lint(node, _ref) {
+    var context = _ref.context,
+      config = _ref.config;
+    if (!isNodeOfType(node, 'CallExpression')) {
+      return;
+    }
+
+    // Check whether all criteria needed to make a transformation are met
+    var _CompiledStyled$_chec = CompiledStyled._check(node, {
+        context: context,
+        config: config
+      }),
+      success = _CompiledStyled$_chec.success,
+      refs = _CompiledStyled$_chec.refs;
+    if (!success || !refs) {
+      return;
+    }
+    context.report({
+      node: refs.styles,
+      messageId: 'preferPrimitivesBox',
+      suggest: [{
+        desc: "Convert ".concat(ast.JSXElement.getName(refs.jsxElement), " to Box"),
+        fix: CompiledStyled._fix(refs, context)
+      }]
+    });
+  },
+  _check: function _check(node, _ref2) {
+    var context = _ref2.context,
+      config = _ref2.config;
+    if (!config.patterns.includes('compiled-styled-object')) {
+      return {
+        success: false
+      };
+    }
+    if (!isNodeOfType(node, 'CallExpression')) {
+      return {
+        success: false
+      };
+    }
+    var styledComponentVariableRef = findValidStyledComponentCall(node);
+    if (!styledComponentVariableRef || !isNodeOfType(styledComponentVariableRef.id, 'Identifier') || !isValidCssPropertiesToTransform(node, config)) {
+      return {
+        success: false
+      };
+    }
+    var styledComponentJsxRef = findValidJsxUsageToTransform(styledComponentVariableRef.id.name, context.getScope());
+    if (!styledComponentJsxRef) {
+      return {
+        success: false
+      };
+    }
+    if (!isNodeOfType(styledComponentJsxRef.parent, 'JSXElement')) {
+      return {
+        success: false
+      };
+    }
+    var importDeclaration = ast.Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/primitives');
+
+    // If there is more than one `@atlaskit/primitives` import, then it becomes difficult to determine which import to transform
+    if (importDeclaration.length > 1) {
+      return {
+        success: false
+      };
+    }
+    return {
+      success: true,
+      refs: {
+        styles: styledComponentVariableRef,
+        jsxElement: styledComponentJsxRef.parent
+      }
+    };
+  },
+  /**
+   * All required validation steps have been taken care of before this
+   * transformer is called, so it just goes ahead providing all necessary fixes
+   */
+  _fix: function _fix(refs, context) {
+    return function (fixer) {
+      // generates the new variable name: MyComponent -> myComponentStyles
+      var calculatedStylesVariableName = isNodeOfType(refs.styles.id, 'Identifier') && "".concat(refs.styles.id.name.replace(refs.styles.id.name[0], refs.styles.id.name[0].toLowerCase()), "Styles");
+      if (!calculatedStylesVariableName) {
+        return [];
+      }
+      var importFixes = upsertImportDeclaration({
+        module: '@atlaskit/primitives',
+        specifiers: ['Box', 'xcss']
+      }, context, fixer);
+      var stylesFixes = convertStyledComponentToXcss(refs.styles, calculatedStylesVariableName, fixer);
+      var jsxFixes = convertJsxCallSite(refs.jsxElement, calculatedStylesVariableName, fixer);
+      return [importFixes].concat(_toConsumableArray(stylesFixes), _toConsumableArray(jsxFixes)).filter(function (fix) {
+        return Boolean(fix);
+      }); // Some of the transformers can return arrays with undefined, so filter them out
+    };
+  }
+};

package/dist/esm/rules/use-primitives/transformers/compiled-styled/supported.js

@@ -0,0 +1,4 @@
+export var elements = ['div'];
+export var attributes = ['css'
+// 'data-testid'
+];

package/dist/esm/rules/use-primitives/transformers/compiled-styled/upsert-import-declaration.js

@@ -0,0 +1,29 @@
+import * as ast from '../../../../ast-nodes';
+
+/**
+ * Currently this is defined here because it's not very general purpose.
+ * If we were to move this to `ast-nodes`, half the implementation would be in `Root`,
+ * and the other half would be in `Import`.
+ *
+ * TODO: Refactor and move to `ast-nodes`
+ *
+ * Note: It does not handle default imports, namespace imports, or aliased imports.
+ */
+export var upsertImportDeclaration = function upsertImportDeclaration(_ref, context, fixer) {
+  var module = _ref.module,
+    specifiers = _ref.specifiers;
+  // Find any imports that match the packageName
+  var root = context.getSourceCode().ast.body;
+  var importDeclarations = ast.Root.findImportsByModule(root, module);
+
+  // The import doesn't exist yet, we can just insert a whole new one
+  if (importDeclarations.length === 0) {
+    return ast.Root.insertImport(root, {
+      module: module,
+      specifiers: specifiers
+    }, fixer);
+  }
+
+  // The import exists so, modify the existing one
+  return ast.Import.insertNamedSpecifiers(importDeclarations[0], specifiers, fixer);
+};