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

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

@@ -0,0 +1,50 @@
+import { isNodeOfType, jsxIdentifier } from 'eslint-codemod-utils';
+export const 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(node) {
+    if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
+      // TODO: We may want to log this
+      return '';
+    }
+    return node.openingElement.name.name;
+  },
+  updateName(node, newName, fixer) {
+    const isSelfClosing = JSXElementHelper.isSelfClosing(node);
+    const openingElementFix = fixer.replaceText(node.openingElement.name, jsxIdentifier(newName).toString());
+    if (isSelfClosing || !node.closingElement) {
+      return [openingElementFix];
+    }
+    const closingElementFix = fixer.replaceText(node.closingElement.name, jsxIdentifier(newName).toString());
+    return [openingElementFix, closingElementFix];
+  },
+  isSelfClosing(node) {
+    return node.openingElement.selfClosing;
+  },
+  getAttributes(node) {
+    return node.openingElement.attributes;
+  },
+  getAttributeByName(node, name) {
+    return node.openingElement.attributes.find(attr => {
+      // Ignore anything other than JSXAttribute
+      if (!isNodeOfType(attr, 'JSXAttribute')) {
+        return false;
+      }
+      return attr.name.name === name;
+    });
+  },
+  containsSpreadAttributes(node) {
+    return node.openingElement.attributes.some(attr => {
+      return isNodeOfType(attr, 'JSXSpreadAttribute');
+    });
+  }
+};
+export { JSXElementHelper as JSXElement };

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

@@ -0,0 +1,28 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import { hasImportDeclaration, insertImportDeclaration, isNodeOfType } from 'eslint-codemod-utils';
+// Little bit unreadable, but better than duplicating the type
+
+export const Root = {
+  /**
+   * Note: This can return multiple ImportDeclarations for cases like:
+   * ```
+   * import { Stack } from '@atlaskit/primitives'
+   * import type { StackProps } from '@atlaskit/primitives'
+   * ```
+   */
+  findImportsByModule(root, name) {
+    return root.filter(node => {
+      if (!isNodeOfType(node, 'ImportDeclaration')) {
+        return false;
+      }
+      if (!hasImportDeclaration(node, name)) {
+        return false;
+      }
+      return true;
+    });
+  },
+  insertImport(root, data, fixer) {
+    return fixer.insertTextBefore(root[0], `${insertImportDeclaration(data.module, data.specifiers)};\n`);
+  }
+};

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

@@ -3,6 +3,8 @@
 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
+let hoistedCss = [];
 function isCssCallExpression(node, cssFunctions) {
   cssFunctions = [...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');
@@ -13,11 +15,11 @@ function findSpreadProperties(node) {
   // @ts-ignore
   property.type === 'ExperimentalSpreadProperty');
 }
-const getTopLevelNode = expression => {
+const 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
@@ -34,7 +36,7 @@ const getDeclaratorString = context => {
     var _scope;
     scope = (_scope = scope) === null || _scope === void 0 ? void 0 : _scope.upper;
   }
-  const variables = scope.variables.map(variable => variable.name);
+  const variables = scope.variables.map(variable => variable.name).concat(hoistedCss);
   let count = 2;
   let declaratorName = 'styles';
 
@@ -47,6 +49,9 @@ const getDeclaratorString = context => {
       count++;
     }
   }
+
+  // Keep track of it by adding it to the hoistedCss global array
+  hoistedCss = [...hoistedCss, `${declaratorName}${count}`];
   return `${declaratorName}${count}`;
 };
 function analyzeIdentifier(context, sourceIdentifier, configuration) {
@@ -107,7 +112,17 @@ function analyzeIdentifier(context, sourceIdentifier, configuration) {
  */
 const fixCssNotInModuleScope = (fixer, context, configuration, node, cssAttributeName) => {
   const sourceCode = context.getSourceCode();
-  const topLevelNode = getTopLevelNode(node);
+
+  // Get the program node in order to properly position the hoisted styles
+  const programNode = getProgramNode(node);
+  let 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(node => node.type !== 'ImportDeclaration');
+  }
   let moduleString;
   let implementFixer = [];
   if (node.type === 'Identifier') {
@@ -129,7 +144,7 @@ const fixCssNotInModuleScope = (fixer, context, configuration, node, cssAttribut
   }
   return [...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')];
 };
 
 /**
@@ -255,6 +270,9 @@ const rule = createLintRule({
           name,
           value
         } = node;
+
+        // 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/es2019/rules/use-primitives/index.js

@@ -1,8 +1,6 @@
-import { getIdentifierInParentScope, isNodeOfType } from 'eslint-codemod-utils';
 import { createLintRule } from '../utils/create-rule';
 import { getConfig } from './config';
-import { jsxElementToBoxTransformer, styledComponentToPrimitive } from './transformers';
-import { containsOnlySupportedAttrs, findValidJsxUsageToTransform, findValidStyledComponentCall, getAttributeValueIdentifier, getJSXAttributeByName, getVariableDefinitionValue, getVariableUsagesCount, isFunctionNamed, isValidCssPropertiesToTransform, isValidTagName } from './utils';
+import { CompiledStyled, EmotionCSS } from './transformers';
 const boxDocsUrl = 'https://atlassian.design/components/primitives/box';
 const rule = createLintRule({
   meta: {
@@ -24,113 +22,19 @@ const rule = createLintRule({
     return {
       // transforms styled.<html>(...) usages
       CallExpression(node) {
-        if (!config.patterns.includes('compiled-styled-object')) {
-          return;
-        }
-        if (!isNodeOfType(node, 'CallExpression')) {
-          return;
-        }
-        const styledComponentVariableRef = findValidStyledComponentCall(node);
-        if (!styledComponentVariableRef || !isNodeOfType(styledComponentVariableRef.id, 'Identifier') || !isValidCssPropertiesToTransform(node, config)) {
-          return;
-        }
-        const 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 ${styledComponentVariableRef.id.name} to Box`,
-            fix: styledComponentToPrimitive({
-              stylesRef: styledComponentVariableRef,
-              jsxRef: styledComponentJsxRef
-            }, context)
-          }]
+        CompiledStyled.lint(node, {
+          context,
+          config
         });
       },
       // transforms <div css={...}> usages
-      JSXOpeningElement(node) {
-        if (!config.patterns.includes('compiled-css-function')) {
-          return false;
-        }
-        if (!isNodeOfType(node, 'JSXOpeningElement')) {
-          return;
-        }
-        if (!isNodeOfType(node.name, 'JSXIdentifier')) {
-          return;
-        }
-        if (!isNodeOfType(node.parent, 'JSXElement')) {
-          return;
-        }
-        const 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: jsxElementToBoxTransformer(node.parent, context)
-            }]
-          });
-        }
+      JSXElement(node) {
+        EmotionCSS.lint(node, {
+          context,
+          config
+        });
       }
     };
   }
 });
-const shouldSuggestBox = (node, context, config
-// scope: Scope.Scope,
-) => {
-  if (!node) {
-    return false;
-  }
-
-  // Currently we only support `div`, but possibly more in future
-  if (!isValidTagName(node)) {
-    return false;
-  }
-
-  // Currently we only support elements that contain only a `css` attr, possibly more in future
-  if (!containsOnlySupportedAttrs(node)) {
-    return false;
-  }
-
-  // Get the `css` attr
-  const cssAttr = getJSXAttributeByName(node.openingElement, 'css');
-
-  // Get the prop value, e.g. `myStyles` in `css={myStyles}`
-  const cssVariableName = 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 (getVariableUsagesCount(cssVariableName, context) !== 1) {
-    return false;
-  }
-
-  // Find where `cssVariableName` is defined. We're looking for `const myStyles = css({...})`
-  const cssVariableDefinition = getIdentifierInParentScope(context.getScope(), cssVariableName);
-  const cssVariableValue = getVariableDefinitionValue(cssVariableDefinition);
-  // Check if `cssVariableValue` is a function called `css()`
-  if (!cssVariableValue || !isFunctionNamed(cssVariableValue, 'css')) {
-    return false;
-  }
-  return isValidCssPropertiesToTransform(cssVariableValue.node.init, config);
-};
 export default rule;

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

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

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

@@ -0,0 +1,37 @@
+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 const convertStyledComponentToXcss = (styles, newStylesVariableName, fixer) => {
+  const 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')) {
+    const objectExpression = styles.init.arguments[0];
+    if (isNodeOfType(objectExpression, 'ObjectExpression')) {
+      fixes.push(...styledObjectToXcssTokens(objectExpression, fixer));
+    }
+  }
+  return fixes;
+};

package/dist/es2019/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 @@ const 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/es2019/rules/use-primitives/transformers/compiled-styled/index.js

@@ -0,0 +1,107 @@
+/* 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 const CompiledStyled = {
+  lint(node, {
+    context,
+    config
+  }) {
+    if (!isNodeOfType(node, 'CallExpression')) {
+      return;
+    }
+
+    // Check whether all criteria needed to make a transformation are met
+    const {
+      success,
+      refs
+    } = CompiledStyled._check(node, {
+      context,
+      config
+    });
+    if (!success || !refs) {
+      return;
+    }
+    context.report({
+      node: refs.styles,
+      messageId: 'preferPrimitivesBox',
+      suggest: [{
+        desc: `Convert ${ast.JSXElement.getName(refs.jsxElement)} to Box`,
+        fix: CompiledStyled._fix(refs, context)
+      }]
+    });
+  },
+  _check(node, {
+    context,
+    config
+  }) {
+    if (!config.patterns.includes('compiled-styled-object')) {
+      return {
+        success: false
+      };
+    }
+    if (!isNodeOfType(node, 'CallExpression')) {
+      return {
+        success: false
+      };
+    }
+    const styledComponentVariableRef = findValidStyledComponentCall(node);
+    if (!styledComponentVariableRef || !isNodeOfType(styledComponentVariableRef.id, 'Identifier') || !isValidCssPropertiesToTransform(node, config)) {
+      return {
+        success: false
+      };
+    }
+    const styledComponentJsxRef = findValidJsxUsageToTransform(styledComponentVariableRef.id.name, context.getScope());
+    if (!styledComponentJsxRef) {
+      return {
+        success: false
+      };
+    }
+    if (!isNodeOfType(styledComponentJsxRef.parent, 'JSXElement')) {
+      return {
+        success: false
+      };
+    }
+    const 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(refs, context) {
+    return fixer => {
+      // generates the new variable name: MyComponent -> myComponentStyles
+      const calculatedStylesVariableName = isNodeOfType(refs.styles.id, 'Identifier') && `${refs.styles.id.name.replace(refs.styles.id.name[0], refs.styles.id.name[0].toLowerCase())}Styles`;
+      if (!calculatedStylesVariableName) {
+        return [];
+      }
+      const importFixes = upsertImportDeclaration({
+        module: '@atlaskit/primitives',
+        specifiers: ['Box', 'xcss']
+      }, context, fixer);
+      const stylesFixes = convertStyledComponentToXcss(refs.styles, calculatedStylesVariableName, fixer);
+      const jsxFixes = convertJsxCallSite(refs.jsxElement, calculatedStylesVariableName, fixer);
+      return [importFixes, ...stylesFixes, ...jsxFixes].filter(fix => Boolean(fix)); // Some of the transformers can return arrays with undefined, so filter them out
+    };
+  }
+};

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

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

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

@@ -0,0 +1,30 @@
+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 const upsertImportDeclaration = ({
+  module,
+  specifiers
+}, context, fixer) => {
+  // Find any imports that match the packageName
+  const root = context.getSourceCode().ast.body;
+  const 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,
+      specifiers
+    }, fixer);
+  }
+
+  // The import exists so, modify the existing one
+  return ast.Import.insertNamedSpecifiers(importDeclarations[0], specifiers, fixer);
+};

package/dist/es2019/rules/use-primitives/transformers/emotion-css/contains-only-supported-attrs.js

@@ -0,0 +1,19 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import * as ast from '../../../../ast-nodes';
+import * as supported from './supported';
+
+/**
+ * Check that every attribute in the JSXElement is something we support.
+ * We do this via a whitelist in `this.attributes`. The result is we exclude
+ * dangerous attrs like `id` and `style`.
+ */
+export const containsOnlySupportedAttrs = node => {
+  const attrs = ast.JSXElement.getAttributes(node);
+  return attrs.every(attr => {
+    if (!isNodeOfType(attr, 'JSXAttribute')) {
+      return false;
+    }
+    const name = ast.JSXAttribute.getName(attr);
+    return supported.attributes.includes(name);
+  });
+};

package/dist/es2019/rules/use-primitives/transformers/emotion-css/index.js

@@ -0,0 +1,115 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import { getIdentifierInParentScope, isNodeOfType } from 'eslint-codemod-utils';
+import * as ast from '../../../../ast-nodes';
+import { getVariableDefinitionValue, getVariableUsagesCount, isValidCssPropertiesToTransform } from '../../utils';
+import { cssToXcssTransformer } from '../css-to-xcss';
+import { containsOnlySupportedAttrs } from './contains-only-supported-attrs';
+import * as supported from './supported';
+import { upsertImportDeclaration } from './upsert-import-declaration';
+export const EmotionCSS = {
+  lint(node, {
+    context,
+    config
+  }) {
+    if (!isNodeOfType(node, 'JSXElement')) {
+      return;
+    }
+
+    // Check whether all criteria needed to make a transformation are met
+    if (!EmotionCSS._check(node, {
+      context,
+      config
+    })) {
+      return;
+    }
+    context.report({
+      node: node.openingElement,
+      messageId: 'preferPrimitivesBox',
+      suggest: [{
+        desc: `Convert to Box`,
+        fix: EmotionCSS._fix(node, {
+          context
+        })
+      }]
+    });
+  },
+  _check(node, {
+    context,
+    config
+  }) {
+    var _cssVariableValue$nod, _cssVariableValue$nod2;
+    if (!config.patterns.includes('compiled-css-function')) {
+      return false;
+    }
+    if (!isNodeOfType(node, 'JSXElement')) {
+      return false;
+    }
+    const elementName = ast.JSXElement.getName(node);
+    if (!elementName) {
+      return false;
+    }
+
+    // Currently we only support `div`. This may change in future.
+    if (!supported.elements.includes(elementName)) {
+      return false;
+    }
+
+    // Ignore elements that contain dangerous attributes like `id`.
+    if (!containsOnlySupportedAttrs(node)) {
+      return false;
+    }
+
+    // Currently we don't transform anything to `Box` unless it defines styles
+    const cssAttr = ast.JSXElement.getAttributeByName(node, 'css');
+    if (!cssAttr) {
+      return false;
+    }
+
+    // Get `myStyles` in `css={myStyles}` as a string so we can search for the `const myStyles` VariableDefinition
+    const cssAttrValue = ast.JSXAttribute.getValue(cssAttr);
+    if ((cssAttrValue === null || cssAttrValue === void 0 ? void 0 : cssAttrValue.type) !== 'ExpressionStatement') {
+      return false;
+    }
+
+    // TODO: Everything below this line could be refactored to use `ast-nodes`.
+
+    // Bail if the styles are used on multiple JSXElements
+    if (getVariableUsagesCount(cssAttrValue.value, context) !== 1) {
+      return false;
+    }
+
+    // Find where `myStyles` is defined. We're looking for `const myStyles = css({...})`
+    const cssVariableDefinition = getIdentifierInParentScope(context.getScope(), cssAttrValue.value);
+    const cssVariableValue = getVariableDefinitionValue(cssVariableDefinition);
+    // Check if `cssVariableValue` is a function called `css()`
+    if (ast.FunctionCall.getName(cssVariableValue === null || cssVariableValue === void 0 ? void 0 : (_cssVariableValue$nod = cssVariableValue.node) === null || _cssVariableValue$nod === void 0 ? void 0 : _cssVariableValue$nod.init) !== 'css') {
+      return false;
+    }
+    if (!isValidCssPropertiesToTransform(cssVariableValue === null || cssVariableValue === void 0 ? void 0 : (_cssVariableValue$nod2 = cssVariableValue.node) === null || _cssVariableValue$nod2 === void 0 ? void 0 : _cssVariableValue$nod2.init, config)) {
+      return false;
+    }
+    const 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 false;
+    }
+    return true;
+  },
+  _fix(node, {
+    context
+  }) {
+    return fixer => {
+      const importFix = upsertImportDeclaration({
+        module: '@atlaskit/primitives',
+        specifiers: ['Box', 'xcss']
+      }, context, fixer);
+      const cssAttr = ast.JSXElement.getAttributeByName(node, 'css'); // Can strongly assert the type here, because we validated it exists in `check()`.
+      const attributeFix = ast.JSXAttribute.updateName(cssAttr, 'xcss', fixer);
+      const elementNameFixes = ast.JSXElement.updateName(node, 'Box', fixer);
+      const cssToXcssTransform = cssToXcssTransformer(node, context, fixer);
+      return [importFix, attributeFix, ...elementNameFixes, ...cssToXcssTransform].filter(fix => Boolean(fix)); // Some of the transformers can return arrays with undefined, so filter them out
+    };
+  }
+};

package/dist/es2019/rules/use-primitives/transformers/emotion-css/supported.js

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