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

package/dist/es2019/rules/use-primitives/transformers/emotion-css/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/index.js

@@ -1,3 +1,3 @@
 export { cssToXcssTransformer, supportedStylesMap, spaceTokenMap } from './css-to-xcss';
-export { jsxElementToBoxTransformer } from './jsx-element-to-box';
-export { styledComponentToPrimitive } from './styled-component-to-primitive';
+export { CompiledStyled } from './compiled-styled';
+export { EmotionCSS } from './emotion-css';

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/use-primitives/utils/is-valid-css-properties-to-transform.js

@@ -2,6 +2,9 @@ import { isNodeOfType } from 'eslint-codemod-utils';
 import { supportedStylesMap } from '../transformers/css-to-xcss';
 import { convertASTObjectExpressionToJSObject } from './convert-ast-object-expression-to-js-object';
 export const isValidCssPropertiesToTransform = (node, config) => {
+  if (!node) {
+    return false;
+  }
   const cssObjectExpression = node.arguments[0];
   // Bail on empty object calls
   if (!cssObjectExpression || !isNodeOfType(cssObjectExpression, 'ObjectExpression')) {

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

@@ -0,0 +1,42 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+export var FunctionCall = {
+  getName: function getName(node) {
+    if (!isNodeOfType(node, 'CallExpression')) {
+      return undefined;
+    }
+    if (!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 (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 (isNodeOfType(argument, 'ObjectExpression')) {
+      argument;
+      return {
+        type: 'ObjectExpression',
+        value: argument
+      };
+    }
+  }
+};

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

@@ -0,0 +1,43 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import { insertImportSpecifier, isNodeOfType } from 'eslint-codemod-utils';
+export var 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(insertImportSpecifier(node, uniqueSpecifiers.join(', ')), ";\n"));
+  },
+  containsNamedSpecifier: function containsNamedSpecifier(node, name) {
+    return node.specifiers.some(function (specifier) {
+      if (!isNodeOfType(specifier, 'ImportSpecifier')) {
+        return false;
+      }
+      return specifier.imported.name === name;
+    });
+  }
+};

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

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

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

@@ -0,0 +1,59 @@
+import { isNodeOfType, literal } from 'eslint-codemod-utils';
+var HelperJSXAttribute = {
+  getName: function getName(node) {
+    if (!isNodeOfType(node, 'JSXAttribute')) {
+      throw new Error('Not a JSXAttribute');
+    }
+    if (!isNodeOfType(node.name, 'JSXIdentifier')) {
+      throw new Error('name is not a JSXIdentifier');
+    }
+    return node.name.name;
+  },
+  updateName: function updateName(node, name, fixer) {
+    if (!isNodeOfType(node, 'JSXAttribute')) {
+      throw new Error('Not a JSXAttribute');
+    }
+    if (!isNodeOfType(node.name, 'JSXIdentifier')) {
+      throw new Error('name is not a JSXIdentifier');
+    }
+    return fixer.replaceText(node.name, 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 (!isNodeOfType(node, 'JSXAttribute')) {
+      return;
+    }
+    if (!node.value) {
+      return;
+    }
+
+    // handle `css={myStyles}`
+    if (isNodeOfType(node.value, 'JSXExpressionContainer') && isNodeOfType(node.value.expression, 'Identifier')) {
+      return {
+        type: 'ExpressionStatement',
+        value: node.value.expression.name
+      };
+    }
+
+    // handle `css='myStyles'`
+    if (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()
+      };
+    }
+  }
+};
+export { HelperJSXAttribute as JSXAttribute };

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

@@ -0,0 +1,50 @@
+import { isNodeOfType, jsxIdentifier } from 'eslint-codemod-utils';
+export var 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 (!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, jsxIdentifier(newName).toString());
+    if (isSelfClosing || !node.closingElement) {
+      return [openingElementFix];
+    }
+    var closingElementFix = fixer.replaceText(node.closingElement.name, 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 (!isNodeOfType(attr, 'JSXAttribute')) {
+        return false;
+      }
+      return attr.name.name === name;
+    });
+  },
+  containsSpreadAttributes: function containsSpreadAttributes(node) {
+    return node.openingElement.attributes.some(function (attr) {
+      return isNodeOfType(attr, 'JSXSpreadAttribute');
+    });
+  }
+};
+export { JSXElementHelper as JSXElement };

package/dist/esm/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 var 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 (!isNodeOfType(node, 'ImportDeclaration')) {
+        return false;
+      }
+      if (!hasImportDeclaration(node, name)) {
+        return false;
+      }
+      return true;
+    });
+  },
+  insertImport: function insertImport(root, data, fixer) {
+    return fixer.insertTextBefore(root[0], "".concat(insertImportDeclaration(data.module, data.specifiers), ";\n"));
+  }
+};

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/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';
 var boxDocsUrl = 'https://atlassian.design/components/primitives/box';
 var rule = createLintRule({
   meta: {
@@ -24,113 +22,19 @@ 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
-      JSXOpeningElement: function 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;
-        }
-        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: jsxElementToBoxTransformer(node.parent, context)
-            }]
-          });
-        }
+      JSXElement: function JSXElement(node) {
+        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 (!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
-  var cssAttr = getJSXAttributeByName(node.openingElement, 'css');
-
-  // Get the prop value, e.g. `myStyles` in `css={myStyles}`
-  var 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({...})`
-  var cssVariableDefinition = getIdentifierInParentScope(context.getScope(), cssVariableName);
-  var 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/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;