@atlaskit/eslint-plugin-design-system 8.15.4 → 8.16.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 8.16.0
+
+### Minor Changes
+
+- [#58402](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58402) [`2b1a12e5936f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2b1a12e5936f) - Re-work `use-primitives` lint rule to only suggest `Box`, and only trigger a violation styles contain one style property and the style value can be mapped to a token.
+
+## 8.15.5
+
+### Patch Changes
+
+- [#63526](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63526) [`cae958047771`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cae958047771) - Internal change to how typography tokens are imported. There is no expected behaviour change.
+- Updated dependencies
+
 ## 8.15.4
 
 ### Patch Changes

package/constellation/index/usage.mdx

@@ -798,27 +798,73 @@ This rule marks code as violations when it can be replaced 1:1 with a primitive
 
 #### Incorrect
 
-```js
-<div />
-^^^^^^^
+```jsx
+const someStyles = css({
+  padding: '8px';
+})
 
-<Component>
-  <div css={someStyles}></div>
-  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-</Component>
+<div css={someStyles}>
+^^^^^^^^^^^^^^^^^^^^^^
+  // ...
+</div>
 ```
 
 #### Correct
 
-```js
-<Box />
-```
-
-```js
-<Component>
-  <Box xcss={someStyles}></Box>
-</Component>
-```
+```jsx
+const someStyles = xcss({
+  padding: 'space.100';
+})
+
+<Box xcss={someStyles}>
+  // ...
+</Box>
+```
+
+Currently, the rule is extremely defensive, only reporting on `css` styles that contain:
+
+- one, and only one, style property from this list:
+
+  - padding
+  - paddingBlock
+  - paddingBlockEnd
+  - paddingBlockStart
+  - paddingBottom
+  - paddingInline
+  - paddingInlineEnd
+  - paddingInlineStart
+  - paddingLeft
+  - paddingRight
+  - paddingTop
+  - margin
+  - marginBlock
+  - marginBlockEnd
+  - marginBlockStart
+  - marginBottom
+  - marginInline
+  - marginInlineEnd
+  - marginInlineStart
+  - marginLeft
+  - marginRight
+  - marginTop
+
+- and where the style value is one of:
+  - 0px
+  - 2px
+  - 4px
+  - 6px
+  - 8px
+  - 12px
+  - 16px
+  - 20px
+  - 24px
+  - 32px
+  - 40px
+  - 48px
+  - 64px
+  - 80px
+
+If these conditions are not met, then no violation will be reported.
 
 ## use-visually-hidden
 

package/dist/cjs/rules/ensure-design-token-usage/typography.js

@@ -22,7 +22,7 @@ var isFontFamily = exports.isFontFamily = function isFontFamily(node) {
 var isCodeFontFamily = exports.isCodeFontFamily = function isCodeFontFamily(node) {
   return (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier') && (node.callee.name === 'codeFontFamily' || node.callee.name === 'getCodeFontFamily');
 };
-var typographyValueToToken = exports.typographyValueToToken = Object.fromEntries(_tokensRaw.typography
+var typographyValueToToken = exports.typographyValueToToken = Object.fromEntries(_tokensRaw.typographyAdg3
 // we're filtering here to remove the `font` tokens.
 .filter(function (t) {
   return t.attributes.group !== 'typography';
@@ -31,7 +31,7 @@ var typographyValueToToken = exports.typographyValueToToken = Object.fromEntries
   // This allows us to look up values specific to a property
   // (so as not to mix tokens with overlapping values e.g. font size and line height both have tokens for 16px)
   var tokenGroup = currentToken.attributes.group;
-  return [tokenGroup, Object.fromEntries(_tokensRaw.typography.map(function (token) {
+  return [tokenGroup, Object.fromEntries(_tokensRaw.typographyAdg3.map(function (token) {
     return token.attributes.group === tokenGroup ? [token.value.replaceAll("\"", "'"), token.name] : [];
   }).filter(function (token) {
     return token.length;

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

@@ -5,9 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
-var _utils = require("../use-primitives/utils");
 var _createRule = require("../utils/create-rule");
-var _utils2 = require("./utils");
+var _utils = require("./utils");
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 var primitiveDocsUrl = 'https://go.atlassian.com/dst-prefer-primitives';
@@ -36,7 +35,7 @@ var rule = (0, _createRule.createLintRule)({
         if (!(0, _eslintCodemodUtils.isNodeOfType)(node.name, 'JSXIdentifier')) {
           return;
         }
-        var suggest = (0, _utils2.shouldSuggest)(node === null || node === void 0 ? void 0 : node.parent);
+        var suggest = (0, _utils.shouldSuggest)(node === null || node === void 0 ? void 0 : node.parent);
         if (suggest) {
           context.report({
             node: node,

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

@@ -3,13 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.shouldSuggest = void 0;
-var _utils = require("../use-primitives/utils");
+exports.validPrimitiveElements = exports.shouldSuggest = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var validPrimitiveElements = exports.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 (0, _eslintCodemodUtils.isNodeOfType)(child, type);
+    });
+  });
+};
+var isValidPrimitiveElement = function isValidPrimitiveElement(node) {
+  return validPrimitiveElements.has(node.openingElement.name.name);
+};
 var shouldSuggest = exports.shouldSuggest = function shouldSuggest(node) {
   if (!node) {
     return false;
   }
-  if (!(0, _utils.isValidPrimitiveElement)(node)) {
+  if (!isValidPrimitiveElement(node)) {
     return false;
   }
 
@@ -22,8 +33,8 @@ var shouldSuggest = exports.shouldSuggest = function shouldSuggest(node) {
    * </div>
    * ```
    */
-  var nonWhiteSpaceTextChildren = (0, _utils.getChildrenByType)(node, ['JSXText']).filter(function (child) {
-    return !(0, _utils.isWhiteSpace)(child.value);
+  var nonWhiteSpaceTextChildren = getChildrenByType(node, ['JSXText']).filter(function (child) {
+    return child.value.trim() !== '';
   });
   if (nonWhiteSpaceTextChildren.length > 0) {
     return false;

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

@@ -6,12 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var _createRule = require("../utils/create-rule");
+var _transformers = require("./transformers");
 var _utils = require("./utils");
-// eslint-disable-next-line import/no-extraneous-dependencies
-
-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';
+var boxDocsUrl = 'https://atlassian.design/components/primitives/box';
 var rule = (0, _createRule.createLintRule)({
   meta: {
     name: 'use-primitives',
@@ -24,21 +21,11 @@ var rule = (0, _createRule.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 (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXOpeningElement')) {
           return;
@@ -46,15 +33,10 @@ var rule = (0, _createRule.createLintRule)({
         if (!(0, _eslintCodemodUtils.isNodeOfType)(node.name, 'JSXIdentifier')) {
           return;
         }
-        var suggestBox = (0, _utils.shouldSuggestBox)(node === null || node === void 0 ? void 0 : node.parent);
-        var suggestInline = (0, _utils.shouldSuggestInline)(node === null || node === void 0 ? void 0 : node.parent, context);
-        var suggestStack = (0, _utils.shouldSuggestStack)(node === null || node === void 0 ? void 0 : node.parent, context);
-
-        // const suggestText = shouldSuggestText(
-        //   node?.parent as any,
-        //   // context.getScope(),
-        // );
-
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'JSXElement')) {
+          return;
+        }
+        var suggestBox = shouldSuggestBox(node.parent, context);
         if (suggestBox) {
           context.report({
             node: node,
@@ -64,39 +46,7 @@ var rule = (0, _createRule.createLintRule)({
             },
             suggest: [{
               desc: "Convert to Box",
-              fix: (0, _utils.primitiveFixer)(node, 'Box', context)
-            }]
-          });
-        }
-        if (suggestInline) {
-          context.report({
-            node: node,
-            messageId: 'preferPrimitivesInline',
-            data: {
-              element: node.name.name
-            },
-            suggest: [{
-              desc: "Convert to Inline",
-              fix: (0, _utils.primitiveFixer)(node, 'Inline', context)
-            }, {
-              desc: "Convert to Flex",
-              fix: (0, _utils.primitiveFixer)(node, 'Flex', context)
-            }]
-          });
-        }
-        if (suggestStack) {
-          context.report({
-            node: node,
-            messageId: 'preferPrimitivesStack',
-            data: {
-              element: node.name.name
-            },
-            suggest: [{
-              desc: "Convert to Stack",
-              fix: (0, _utils.primitiveFixer)(node, 'Stack', context)
-            }, {
-              desc: "Convert to Flex",
-              fix: (0, _utils.primitiveFixer)(node, 'Flex', context)
+              fix: (0, _transformers.jsxElementToBoxTransformer)(node.parent, context)
             }]
           });
         }
@@ -104,4 +54,85 @@ var rule = (0, _createRule.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 (!(0, _utils.isValidTagName)(node)) {
+    return false;
+  }
+
+  // Currently we only support elements that contain only a `css` attr, possibly more in future
+  if (!(0, _utils.containsOnlySupportedAttrs)(node)) {
+    return false;
+  }
+
+  // Get the `css` attr
+  var cssAttr = (0, _utils.getJSXAttributeByName)(node.openingElement, 'css');
+
+  // Get the prop value, e.g. `myStyles` in `css={myStyles}`
+  var cssVariableName = (0, _utils.getAttributeValueIdentifier)(cssAttr);
+
+  // `cssVariableName` could be undefined if the maker has
+  // done something like `css={[styles1, styles2]}`, `css={...styles}`, etc
+  if (!cssVariableName) {
+    return false;
+  }
+
+  /**
+   * Make sure the variable is not used in multiple JSX elements:
+   * ```
+   *    <div css={paddingStyles}></div>
+   *    <input css={paddingStyles}></input>
+   * ```
+   */
+  if ((0, _utils.getVariableUsagesCount)(cssVariableName, context) !== 1) {
+    return false;
+  }
+
+  // Find where `cssVariableName` is defined. We're looking for `const myStyles = css({...})`
+  var cssVariableDefinition = (0, _eslintCodemodUtils.getIdentifierInParentScope)(context.getScope(), cssVariableName);
+  var cssVariableValue = (0, _utils.getVariableDefinitionValue)(cssVariableDefinition);
+
+  // Check if `cssVariableValue` is a function called `css()`
+  if (!(0, _utils.isFunctionNamed)(cssVariableValue, 'css')) {
+    return false;
+  }
+
+  // get the `{}` in `css({})`
+  // Zero indexed
+  var cssObjectExpression = (0, _utils.getFunctionArgumentAtPos)(cssVariableValue, 0);
+
+  // Bail on empty `css()` calls
+  if (!cssObjectExpression) {
+    return false;
+  }
+  var cssObject = (0, _utils.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 _transformers.supportedStylesMap[styleProperty] &&
+    // Is the key something we can map
+    _transformers.supportedStylesMap[styleProperty][styleValue] // Is the value something we can map
+    ;
+  });
+
+  if (!containsOnlyValidStyles) {
+    return false;
+  }
+  return true;
+};
 var _default = exports.default = rule;

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

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.supportedStylesMap = exports.spaceTokenMap = exports.cssToXcssTransformer = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _utils = require("../utils");
+var cssToXcssTransformer = exports.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 = (0, _utils.getJSXAttributeByName)(node.openingElement, 'css');
+  var cssVariableName = (0, _utils.getAttributeValueIdentifier)(cssAttr);
+  if (!cssVariableName) {
+    return [];
+  }
+  var cssVariableDefinition = (0, _eslintCodemodUtils.getIdentifierInParentScope)(context.getScope(), cssVariableName);
+  var cssVariableValue = (0, _utils.getVariableDefinitionValue)(cssVariableDefinition);
+  if (!cssVariableValue) {
+    return [];
+  }
+  var cssObjectExpression = (0, _utils.getFunctionArgumentAtPos)(cssVariableValue, 0);
+  return [
+  // Update `css` function name to `xcss`.
+  fixer.replaceText(cssVariableValue.node.init.callee, (0, _eslintCodemodUtils.identifier)('xcss').toString())].concat((0, _toConsumableArray2.default)(cssObjectExpression.properties.map(function (entry) {
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(entry, 'Property')) {
+      return;
+    }
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(entry.key, 'Identifier')) {
+      return;
+    }
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(entry.value, 'Literal')) {
+      return;
+    }
+    var value = entry.value.value;
+    if (typeof value !== 'string') {
+      return;
+    }
+    return fixer.replaceText(entry.value, (0, _eslintCodemodUtils.literal)("'".concat(supportedStylesMap[entry.key.name][value], "'")).toString());
+  })));
+};
+var spaceTokenMap = exports.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'
+};
+var supportedStylesMap = exports.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/cjs/rules/use-primitives/transformers/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "cssToXcssTransformer", {
+  enumerable: true,
+  get: function get() {
+    return _cssToXcss.cssToXcssTransformer;
+  }
+});
+Object.defineProperty(exports, "jsxElementToBoxTransformer", {
+  enumerable: true,
+  get: function get() {
+    return _jsxElementToBox.jsxElementToBoxTransformer;
+  }
+});
+Object.defineProperty(exports, "spaceTokenMap", {
+  enumerable: true,
+  get: function get() {
+    return _cssToXcss.spaceTokenMap;
+  }
+});
+Object.defineProperty(exports, "supportedStylesMap", {
+  enumerable: true,
+  get: function get() {
+    return _cssToXcss.supportedStylesMap;
+  }
+});
+var _cssToXcss = require("./css-to-xcss");
+var _jsxElementToBox = require("./jsx-element-to-box");

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

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.jsxElementToBoxTransformer = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _utils = require("../utils");
+var _cssToXcss = require("./css-to-xcss");
+var jsxElementToBoxTransformer = exports.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 = (0, _utils.upsertImportDeclaration)({
+      packageName: '@atlaskit/primitives',
+      specifiers: ['Box', 'xcss']
+    }, context, fixer);
+    var elementNameFixes = (0, _utils.updateJSXElementName)(node, 'Box', fixer);
+    var attributeFix = (0, _utils.updateJSXAttributeByName)('css', 'xcss', node, fixer);
+    var cssToXcssTransform = (0, _cssToXcss.cssToXcssTransformer)(node, context, fixer);
+    return [importFixes, attributeFix].concat((0, _toConsumableArray2.default)(elementNameFixes), (0, _toConsumableArray2.default)(cssToXcssTransform)).filter(function (fix) {
+      return Boolean(fix);
+    }); // Some of the transformers can return arrays with undefined, so filter them out
+  };
+};

package/dist/cjs/rules/use-primitives/utils/contains-only-supported-attrs.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.containsOnlySupportedAttrs = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var supportedAttributes = ['css'];
+var containsOnlySupportedAttrs = exports.containsOnlySupportedAttrs = function containsOnlySupportedAttrs(node) {
+  return node.openingElement.attributes.every(function (attr) {
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(attr, 'JSXAttribute')) {
+      return false;
+    }
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(attr.name, 'JSXIdentifier')) {
+      return false;
+    }
+    return supportedAttributes.includes(attr.name.name);
+  });
+};

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.convertASTObjectExpressionToJSObject = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+// FIXME: This is only loosely typed
+
+/**
+ * Note: Not recursive. Only handles top level key/value pairs
+ */
+var convertASTObjectExpressionToJSObject = exports.convertASTObjectExpressionToJSObject = function convertASTObjectExpressionToJSObject(styles) {
+  var styleObj = {};
+  styles.properties.forEach(function (prop) {
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(prop, 'Property')) {
+      return;
+    }
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(prop.key, 'Identifier')) {
+      return;
+    }
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(prop.value, 'Literal')) {
+      return;
+    }
+    if (typeof prop.value.value !== 'string') {
+      return;
+    }
+    styleObj[prop.key.name] = prop.value.value;
+  });
+  return styleObj;
+};

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAttributeValueIdentifier = void 0;
+var _eslintCodemodUtils = require("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
+ */
+var getAttributeValueIdentifier = exports.getAttributeValueIdentifier = function getAttributeValueIdentifier(attr) {
+  if (!attr) {
+    return undefined;
+  }
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(attr, 'JSXAttribute')) {
+    return undefined;
+  }
+  if (!attr.value) {
+    return undefined;
+  }
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(attr.value, 'JSXExpressionContainer')) {
+    return undefined;
+  }
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(attr.value.expression, 'Identifier')) {
+    return undefined;
+  }
+  return attr.value.expression.name;
+};

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

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getFunctionArgumentAtPos = void 0;
+var getFunctionArgumentAtPos = exports.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/cjs/rules/use-primitives/utils/get-jsx-attribute-by-name.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getJSXAttributeByName = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var getJSXAttributeByName = exports.getJSXAttributeByName = function getJSXAttributeByName(node, attrName) {
+  return node.attributes.find(function (attr) {
+    // Ignore anything other than JSXAttribute
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(attr, 'JSXAttribute')) {
+      return false;
+    }
+    return attr.name.name === attrName;
+  });
+};

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

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getVariableDefinitionValue = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var getVariableDefinitionValue = exports.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 (!(0, _eslintCodemodUtils.isNodeOfType)(variableValue.node, 'VariableDeclarator')) {
+    return undefined;
+  }
+  return variableValue;
+};