@atlaskit/eslint-plugin-design-system 8.15.5 → 8.17.0

package/dist/es2019/rules/use-primitives/utils/get-jsx-attribute-by-name.js

@@ -0,0 +1,10 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+export const getJSXAttributeByName = (node, attrName) => {
+  return node.attributes.find(attr => {
+    // Ignore anything other than JSXAttribute
+    if (!isNodeOfType(attr, 'JSXAttribute')) {
+      return false;
+    }
+    return attr.name.name === attrName;
+  });
+};

package/dist/es2019/rules/use-primitives/utils/get-variable-definition-value.js

@@ -0,0 +1,23 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+export const getVariableDefinitionValue = variableDefinition => {
+  if (!variableDefinition) {
+    return undefined;
+  }
+  if (variableDefinition.defs.length !== 1) {
+    return undefined;
+  }
+  const variableValue = variableDefinition.defs[0];
+
+  // Note: unable to use `isNodeOfType` here
+  // because `variableDefinition` is necessarily of type `Scope.Variable`,
+  // which doesn't overlap properly with the `eslint-codemod-utils` types
+  if (variableValue.type !== 'Variable') {
+    return undefined;
+  }
+
+  // TODO: is this necessary?
+  if (!isNodeOfType(variableValue.node, 'VariableDeclarator')) {
+    return undefined;
+  }
+  return variableValue;
+};

package/dist/es2019/rules/use-primitives/utils/get-variable-usage-count.js

@@ -0,0 +1,15 @@
+/**
+ * Using Regex here because otherwise we'd need to traverse the entire AST
+ * We should harden this logic as we go.
+ */
+export const getVariableUsagesCount = (variableName, context) => {
+  if (!variableName) {
+    return 0;
+  }
+  const source = context.getSourceCode().text;
+  const matches = Array.from(source.matchAll(new RegExp(`[^a-z]${variableName}[^a-z]`, 'g')));
+
+  // subtract 1 because one of the matches is the variable definition:
+  // e.g. a regex will find two `beep`s in this: `const beep = 'hello'; console.log(beep)`
+  return matches.length - 1;
+};

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

@@ -0,0 +1,12 @@
+export { containsOnlySupportedAttrs } from './contains-only-supported-attrs';
+export { convertASTObjectExpressionToJSObject } from './convert-ast-object-expression-to-js-object';
+export { getAttributeValueIdentifier } from './get-attribute-value-identifier';
+export { getFunctionArgumentAtPos } from './get-function-argument-at-pos';
+export { getJSXAttributeByName } from './get-jsx-attribute-by-name';
+export { getVariableDefinitionValue } from './get-variable-definition-value';
+export { getVariableUsagesCount } from './get-variable-usage-count';
+export { isFunctionNamed } from './is-function-named';
+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';

package/dist/es2019/rules/use-primitives/utils/is-function-named.js

@@ -0,0 +1,13 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+export const isFunctionNamed = (node, name) => {
+  if (!node) {
+    return false;
+  }
+  if (!isNodeOfType(node.node.init, 'CallExpression')) {
+    return false;
+  }
+  if (!isNodeOfType(node.node.init.callee, 'Identifier')) {
+    return false;
+  }
+  return node.node.init.callee.name === name;
+};

package/dist/es2019/rules/use-primitives/utils/is-valid-tag-name.js

@@ -0,0 +1,7 @@
+const validPrimitiveElements = new Set(['div']);
+export const isValidTagName = node => {
+  if (node.openingElement.name.type !== 'JSXIdentifier') {
+    return false;
+  }
+  return validPrimitiveElements.has(node.openingElement.name.name);
+};

package/dist/es2019/rules/use-primitives/utils/update-jsx-attribute-by-name.js

@@ -0,0 +1,26 @@
+import { jsxAttribute, jsxIdentifier } from 'eslint-codemod-utils';
+export const updateJSXAttributeByName = (oldName, newName, node, fixer) => {
+  const {
+    openingElement
+  } = node;
+  const {
+    attributes
+  } = openingElement;
+  const existingAttribute = attributes.find(attr => {
+    if (attr.type !== 'JSXAttribute') {
+      return false;
+    }
+    if (attr.name.type !== 'JSXIdentifier') {
+      return false;
+    }
+    return attr.name.name === oldName;
+  });
+  if (!existingAttribute || existingAttribute.type !== 'JSXAttribute') {
+    return [];
+  }
+  const newAttribute = jsxAttribute({
+    ...existingAttribute,
+    name: jsxIdentifier(newName)
+  });
+  return fixer.replaceText(existingAttribute, newAttribute.toString());
+};

package/dist/es2019/rules/use-primitives/utils/update-jsx-element-name.js

@@ -0,0 +1,12 @@
+import { jsxIdentifier } from 'eslint-codemod-utils';
+export const updateJSXElementName = (node, newName, fixer) => {
+  const {
+    openingElement,
+    closingElement
+  } = node;
+  const newOpeningElement = fixer.replaceText(openingElement.name, jsxIdentifier(newName).toString());
+  const newClosingElement = closingElement &&
+  // Self closing tags, like `<div />` don't need to have the closing tag updated
+  fixer.replaceText(closingElement.name, jsxIdentifier(newName).toString());
+  return [newOpeningElement, newClosingElement];
+};

package/dist/es2019/rules/use-primitives/utils/upsert-import-declaration.js

@@ -0,0 +1,76 @@
+import { hasImportDeclaration, insertImportDeclaration, insertImportSpecifier, isNodeOfType } from 'eslint-codemod-utils';
+
+/**
+ * Note: Very naive implementation. Does not handle default imports, namespace imports, or aliased imports.
+ * Add that functionality when needed.
+ *
+ * However, does handle duplicate identifiers.
+ */
+export const upsertImportDeclaration = ({
+  packageName,
+  specifiers
+}, context, fixer) => {
+  // Find any imports that match the packageName
+  const body = context.getSourceCode().ast.body;
+  const existingImports = body.filter(node => {
+    if (!isNodeOfType(node, 'ImportDeclaration')) {
+      return false;
+    }
+    if (!hasImportDeclaration(node, packageName)) {
+      return false;
+    }
+    return true;
+  });
+
+  /**
+   * This can happen for cases like:
+   * ```
+   * import { Stack } from '@atlaskit/primitives'
+   * import type { StackProps } from '@atlaskit/primitives'
+   * ```
+   *
+   * Ignore these cases for now to reduce scope creep
+   *
+   * TODO: Support multiple imports
+   */
+  if (existingImports.length > 1) {
+    return;
+  }
+
+  // The import doesn't exist yet, we can just insert a whole new one
+  if (existingImports.length === 0) {
+    return fixer.insertTextBefore(body[0], `${insertImportDeclaration(packageName, specifiers)};\n`);
+  }
+
+  // The import exists so, modify the existing one
+  const existingImport = existingImports[0]; // We have already validated that only one exists
+
+  /**
+   * `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.
+   */
+  const uniqueImportSpecifiers = specifiers.filter(specifier => {
+    return !existingImport.specifiers.find(existingSpecifier => {
+      if (existingSpecifier.type !== 'ImportSpecifier') {
+        return false;
+      }
+      return existingSpecifier.imported.name === specifier;
+    });
+  });
+
+  // Ensures the import doesn't end up like: `import { Box, xcss,  } from '@atlaskit/primitives';`
+  // which can happen if the import decl already contains all import specifiers
+  if (uniqueImportSpecifiers.length === 0) {
+    return;
+  }
+  return fixer.replaceText(existingImport, `${insertImportSpecifier(existingImport,
+  // `insertImportSpecifier` only accepts one specifier, and we can't call it multiple times on the same import, because fixes can't overlap
+  // So, join the array into a string literal, and hope for the best 🤞
+  uniqueImportSpecifiers.join(', '))};\n`);
+};

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

@@ -1,9 +1,8 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 import { isNodeOfType } from 'eslint-codemod-utils';
-import { validPrimitiveElements } from '../use-primitives/utils';
 import { createLintRule } from '../utils/create-rule';
-import { shouldSuggest } from './utils';
+import { shouldSuggest, validPrimitiveElements } from './utils';
 var primitiveDocsUrl = 'https://go.atlassian.com/dst-prefer-primitives';
 var rule = createLintRule({
   meta: {

package/dist/esm/rules/prefer-primitives/utils.js

@@ -1,4 +1,15 @@
-import { getChildrenByType, isValidPrimitiveElement, isWhiteSpace } from '../use-primitives/utils';
+import { isNodeOfType } from 'eslint-codemod-utils';
+export var validPrimitiveElements = new Set(['div', 'span', 'article', 'aside', 'dialog', 'footer', 'header', 'li', 'main', 'nav', 'ol', 'section', 'ul']);
+var getChildrenByType = function getChildrenByType(node, types) {
+  return node.children.filter(function (child) {
+    return types.find(function (type) {
+      return isNodeOfType(child, type);
+    });
+  });
+};
+var isValidPrimitiveElement = function isValidPrimitiveElement(node) {
+  return validPrimitiveElements.has(node.openingElement.name.name);
+};
 export var shouldSuggest = function shouldSuggest(node) {
   if (!node) {
     return false;
@@ -17,7 +28,7 @@ export var shouldSuggest = function shouldSuggest(node) {
    * ```
    */
   var nonWhiteSpaceTextChildren = getChildrenByType(node, ['JSXText']).filter(function (child) {
-    return !isWhiteSpace(child.value);
+    return child.value.trim() !== '';
   });
   if (nonWhiteSpaceTextChildren.length > 0) {
     return false;

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

@@ -1,11 +1,8 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-
-import { isNodeOfType } from 'eslint-codemod-utils';
+import { getIdentifierInParentScope, isNodeOfType } from 'eslint-codemod-utils';
 import { createLintRule } from '../utils/create-rule';
-import { primitiveFixer, shouldSuggestBox, shouldSuggestInline, shouldSuggestStack } from './utils';
-var boxDocsUrl = 'https://staging.atlassian.design/components/primitives/box';
-var inlineDocsUrl = 'https://staging.atlassian.design/components/primitives/inline';
-var stackDocsUrl = 'https://staging.atlassian.design/components/primitives/stack';
+import { jsxElementToBoxTransformer, supportedStylesMap } from './transformers';
+import { containsOnlySupportedAttrs, convertASTObjectExpressionToJSObject, getAttributeValueIdentifier, getFunctionArgumentAtPos, getJSXAttributeByName, getVariableDefinitionValue, getVariableUsagesCount, isFunctionNamed, isValidTagName } from './utils';
+var boxDocsUrl = 'https://atlassian.design/components/primitives/box';
 var rule = createLintRule({
   meta: {
     name: 'use-primitives',
@@ -18,21 +15,11 @@ var rule = createLintRule({
       severity: 'warn'
     },
     messages: {
-      preferPrimitivesBox: "This \"{{element}}\" may be able to be replaced with a \"Box\". See ".concat(boxDocsUrl, " for guidance."),
-      preferPrimitivesInline: "This \"{{element}}\" may be able to be replaced with an \"Inline\". See ".concat(inlineDocsUrl, " for guidance."),
-      preferPrimitivesStack: "This \"{{element}}\" may be able to be replaced with a \"Stack\". See ".concat(stackDocsUrl, " for guidance.")
+      preferPrimitivesBox: "This \"{{element}}\" may be able to be replaced with a \"Box\". See ".concat(boxDocsUrl, " for guidance.")
     }
   },
   create: function create(context) {
     return {
-      /**
-       * Traverse file
-       * Look for any JSX opening element and check what it is
-       * a) it's already a component
-       * b) it's native HTML
-       *
-       * if b) suggest alternative use of primitives
-       */
       JSXOpeningElement: function JSXOpeningElement(node) {
         if (!isNodeOfType(node, 'JSXOpeningElement')) {
           return;
@@ -40,15 +27,10 @@ var rule = createLintRule({
         if (!isNodeOfType(node.name, 'JSXIdentifier')) {
           return;
         }
-        var suggestBox = shouldSuggestBox(node === null || node === void 0 ? void 0 : node.parent);
-        var suggestInline = shouldSuggestInline(node === null || node === void 0 ? void 0 : node.parent, context);
-        var suggestStack = shouldSuggestStack(node === null || node === void 0 ? void 0 : node.parent, context);
-
-        // const suggestText = shouldSuggestText(
-        //   node?.parent as any,
-        //   // context.getScope(),
-        // );
-
+        if (!isNodeOfType(node.parent, 'JSXElement')) {
+          return;
+        }
+        var suggestBox = shouldSuggestBox(node.parent, context);
         if (suggestBox) {
           context.report({
             node: node,
@@ -58,39 +40,7 @@ var rule = createLintRule({
             },
             suggest: [{
               desc: "Convert to Box",
-              fix: primitiveFixer(node, 'Box', context)
-            }]
-          });
-        }
-        if (suggestInline) {
-          context.report({
-            node: node,
-            messageId: 'preferPrimitivesInline',
-            data: {
-              element: node.name.name
-            },
-            suggest: [{
-              desc: "Convert to Inline",
-              fix: primitiveFixer(node, 'Inline', context)
-            }, {
-              desc: "Convert to Flex",
-              fix: primitiveFixer(node, 'Flex', context)
-            }]
-          });
-        }
-        if (suggestStack) {
-          context.report({
-            node: node,
-            messageId: 'preferPrimitivesStack',
-            data: {
-              element: node.name.name
-            },
-            suggest: [{
-              desc: "Convert to Stack",
-              fix: primitiveFixer(node, 'Stack', context)
-            }, {
-              desc: "Convert to Flex",
-              fix: primitiveFixer(node, 'Flex', context)
+              fix: jsxElementToBoxTransformer(node.parent, context)
             }]
           });
         }
@@ -98,4 +48,85 @@ var rule = createLintRule({
     };
   }
 });
+var shouldSuggestBox = function shouldSuggestBox(node, context
+// 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 (!isFunctionNamed(cssVariableValue, 'css')) {
+    return false;
+  }
+
+  // get the `{}` in `css({})`
+  // Zero indexed
+  var cssObjectExpression = getFunctionArgumentAtPos(cssVariableValue, 0);
+
+  // Bail on empty `css()` calls
+  if (!cssObjectExpression) {
+    return false;
+  }
+  var cssObject = convertASTObjectExpressionToJSObject(cssObjectExpression);
+
+  // Bail if there are less or more than 1 styles defined
+  if (Object.keys(cssObject).length !== 1) {
+    return false;
+  }
+
+  // NOTE: Our approach with this lint rule is to strictly whitelist css properties we can map.
+  // It means we have to provide mappings for everything (e.g. `display: block`).
+  // However, from a maker's experience, it's much better that the rule doesn't report (if we miss a mapping)
+  // than the rule reporting on things that can't be mapped.
+  var containsOnlyValidStyles = Object.keys(cssObject).every(function (styleProperty) {
+    var styleValue = cssObject[styleProperty];
+    return supportedStylesMap[styleProperty] &&
+    // Is the key something we can map
+    supportedStylesMap[styleProperty][styleValue] // Is the value something we can map
+    ;
+  });
+
+  if (!containsOnlyValidStyles) {
+    return false;
+  }
+  return true;
+};
 export default rule;

package/dist/esm/rules/use-primitives/transformers/css-to-xcss.js

@@ -0,0 +1,88 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { getIdentifierInParentScope, identifier, isNodeOfType, literal } from 'eslint-codemod-utils';
+import { getAttributeValueIdentifier, getFunctionArgumentAtPos, getJSXAttributeByName, getVariableDefinitionValue } from '../utils';
+export var cssToXcssTransformer = function cssToXcssTransformer(node, context, fixer) {
+  /**
+   * Note: The logic here is very similar to the logic in `shouldSuggestBox`. i.e.
+   * 1. Find the `css` attr
+   * 2. Find the variableName (`myStyles` in `css={myStyles}`)
+   * 3. Find the `const myStyles = css({ padding: '8px' })`
+   * 4. Find the style object `{ padding: '8px' }`
+   *
+   * The only difference is, we've already performed very defensive checks for these steps in `shouldSuggestBox`,
+   * so there's no need to do those checks here.
+   *
+   * The repetition could be avoided by combining the 'shouldSuggest' and 'fixCode' steps. However, there are tradeoffs
+   * to that approach (mainly poor separation of concerns). I'm un-opinionated about which strategy we use. I just opted
+   * for this because the original `use-primitives` rule did this.
+   */
+  var cssAttr = getJSXAttributeByName(node.openingElement, 'css');
+  var cssVariableName = getAttributeValueIdentifier(cssAttr);
+  if (!cssVariableName) {
+    return [];
+  }
+  var cssVariableDefinition = getIdentifierInParentScope(context.getScope(), cssVariableName);
+  var cssVariableValue = getVariableDefinitionValue(cssVariableDefinition);
+  if (!cssVariableValue) {
+    return [];
+  }
+  var cssObjectExpression = getFunctionArgumentAtPos(cssVariableValue, 0);
+  return [
+  // Update `css` function name to `xcss`.
+  fixer.replaceText(cssVariableValue.node.init.callee, identifier('xcss').toString())].concat(_toConsumableArray(cssObjectExpression.properties.map(function (entry) {
+    if (!isNodeOfType(entry, 'Property')) {
+      return;
+    }
+    if (!isNodeOfType(entry.key, 'Identifier')) {
+      return;
+    }
+    if (!isNodeOfType(entry.value, 'Literal')) {
+      return;
+    }
+    var value = entry.value.value;
+    if (typeof value !== 'string') {
+      return;
+    }
+    return fixer.replaceText(entry.value, literal("'".concat(supportedStylesMap[entry.key.name][value], "'")).toString());
+  })));
+};
+export var spaceTokenMap = {
+  '0px': 'space.0',
+  '2px': 'space.025',
+  '4px': 'space.050',
+  '6px': 'space.075',
+  '8px': 'space.100',
+  '12px': 'space.150',
+  '16px': 'space.200',
+  '20px': 'space.250',
+  '24px': 'space.300',
+  '32px': 'space.400',
+  '40px': 'space.500',
+  '48px': 'space.600',
+  '64px': 'space.800',
+  '80px': 'space.1000'
+};
+export var supportedStylesMap = {
+  padding: spaceTokenMap,
+  paddingBlock: spaceTokenMap,
+  paddingBlockEnd: spaceTokenMap,
+  paddingBlockStart: spaceTokenMap,
+  paddingBottom: spaceTokenMap,
+  paddingInline: spaceTokenMap,
+  paddingInlineEnd: spaceTokenMap,
+  paddingInlineStart: spaceTokenMap,
+  paddingLeft: spaceTokenMap,
+  paddingRight: spaceTokenMap,
+  paddingTop: spaceTokenMap,
+  margin: spaceTokenMap,
+  marginBlock: spaceTokenMap,
+  marginBlockEnd: spaceTokenMap,
+  marginBlockStart: spaceTokenMap,
+  marginBottom: spaceTokenMap,
+  marginInline: spaceTokenMap,
+  marginInlineEnd: spaceTokenMap,
+  marginInlineStart: spaceTokenMap,
+  marginLeft: spaceTokenMap,
+  marginRight: spaceTokenMap,
+  marginTop: spaceTokenMap
+};

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

@@ -0,0 +1,2 @@
+export { cssToXcssTransformer, supportedStylesMap, spaceTokenMap } from './css-to-xcss';
+export { jsxElementToBoxTransformer } from './jsx-element-to-box';

package/dist/esm/rules/use-primitives/transformers/jsx-element-to-box.js

@@ -0,0 +1,19 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { updateJSXAttributeByName, updateJSXElementName, upsertImportDeclaration } from '../utils';
+import { cssToXcssTransformer } from './css-to-xcss';
+export var jsxElementToBoxTransformer = function jsxElementToBoxTransformer(node, context) {
+  return function (fixer) {
+    // Insert `import { Box, xcss } from '@atlaskit/primitives'`
+    // Or, if the import exists already, update it to include `Box`, and `xcss`
+    var importFixes = upsertImportDeclaration({
+      packageName: '@atlaskit/primitives',
+      specifiers: ['Box', 'xcss']
+    }, context, fixer);
+    var elementNameFixes = updateJSXElementName(node, 'Box', fixer);
+    var attributeFix = updateJSXAttributeByName('css', 'xcss', node, fixer);
+    var cssToXcssTransform = cssToXcssTransformer(node, context, fixer);
+    return [importFixes, attributeFix].concat(_toConsumableArray(elementNameFixes), _toConsumableArray(cssToXcssTransform)).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/utils/contains-only-supported-attrs.js

@@ -0,0 +1,13 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+var supportedAttributes = ['css'];
+export var containsOnlySupportedAttrs = function containsOnlySupportedAttrs(node) {
+  return node.openingElement.attributes.every(function (attr) {
+    if (!isNodeOfType(attr, 'JSXAttribute')) {
+      return false;
+    }
+    if (!isNodeOfType(attr.name, 'JSXIdentifier')) {
+      return false;
+    }
+    return supportedAttributes.includes(attr.name.name);
+  });
+};

package/dist/esm/rules/use-primitives/utils/convert-ast-object-expression-to-js-object.js

@@ -0,0 +1,26 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+
+// FIXME: This is only loosely typed
+
+/**
+ * Note: Not recursive. Only handles top level key/value pairs
+ */
+export var convertASTObjectExpressionToJSObject = function convertASTObjectExpressionToJSObject(styles) {
+  var styleObj = {};
+  styles.properties.forEach(function (prop) {
+    if (!isNodeOfType(prop, 'Property')) {
+      return;
+    }
+    if (!isNodeOfType(prop.key, 'Identifier')) {
+      return;
+    }
+    if (!isNodeOfType(prop.value, 'Literal')) {
+      return;
+    }
+    if (typeof prop.value.value !== 'string') {
+      return;
+    }
+    styleObj[prop.key.name] = prop.value.value;
+  });
+  return styleObj;
+};

package/dist/esm/rules/use-primitives/utils/get-attribute-value-identifier.js

@@ -0,0 +1,32 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+
+/**
+ * Bit of a weird name, but the functionality is quite specific, so this is the best I could do.
+ * This function looks at a JSXAttribute, and returns the string representation
+ * of the value if it's an identifier, e.g. `css={someStyles}` would return `'someStyles'`
+ *
+ * It returns undefined if it finds anything else, like:
+ * - `css={[styles1, styles2]}`
+ * - `css={...styles}`
+ * - `css={styleMap[key]}`
+ * - `css='what even is this'`
+ * - etc
+ */
+export var getAttributeValueIdentifier = function getAttributeValueIdentifier(attr) {
+  if (!attr) {
+    return undefined;
+  }
+  if (!isNodeOfType(attr, 'JSXAttribute')) {
+    return undefined;
+  }
+  if (!attr.value) {
+    return undefined;
+  }
+  if (!isNodeOfType(attr.value, 'JSXExpressionContainer')) {
+    return undefined;
+  }
+  if (!isNodeOfType(attr.value.expression, 'Identifier')) {
+    return undefined;
+  }
+  return attr.value.expression.name;
+};

package/dist/esm/rules/use-primitives/utils/get-function-argument-at-pos.js

@@ -0,0 +1,4 @@
+export var getFunctionArgumentAtPos = function getFunctionArgumentAtPos(node, pos) {
+  var _node$node;
+  return node === null || node === void 0 || (_node$node = node.node) === null || _node$node === void 0 || (_node$node = _node$node.init) === null || _node$node === void 0 || (_node$node = _node$node.arguments) === null || _node$node === void 0 ? void 0 : _node$node[pos];
+};

package/dist/esm/rules/use-primitives/utils/get-jsx-attribute-by-name.js

@@ -0,0 +1,10 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+export var getJSXAttributeByName = function getJSXAttributeByName(node, attrName) {
+  return node.attributes.find(function (attr) {
+    // Ignore anything other than JSXAttribute
+    if (!isNodeOfType(attr, 'JSXAttribute')) {
+      return false;
+    }
+    return attr.name.name === attrName;
+  });
+};

package/dist/esm/rules/use-primitives/utils/get-variable-definition-value.js

@@ -0,0 +1,23 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+export var getVariableDefinitionValue = function getVariableDefinitionValue(variableDefinition) {
+  if (!variableDefinition) {
+    return undefined;
+  }
+  if (variableDefinition.defs.length !== 1) {
+    return undefined;
+  }
+  var variableValue = variableDefinition.defs[0];
+
+  // Note: unable to use `isNodeOfType` here
+  // because `variableDefinition` is necessarily of type `Scope.Variable`,
+  // which doesn't overlap properly with the `eslint-codemod-utils` types
+  if (variableValue.type !== 'Variable') {
+    return undefined;
+  }
+
+  // TODO: is this necessary?
+  if (!isNodeOfType(variableValue.node, 'VariableDeclarator')) {
+    return undefined;
+  }
+  return variableValue;
+};