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

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

@@ -0,0 +1,42 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import { insertImportSpecifier, isNodeOfType } from 'eslint-codemod-utils';
+export const 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(node, specifiers, fixer) {
+    /**
+     * `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 uniqueSpecifiers = specifiers.filter(specifier => {
+      return !this.containsNamedSpecifier(node, specifier);
+    });
+    if (uniqueSpecifiers.length === 0) {
+      return;
+    }
+    return fixer.replaceText(node, `${insertImportSpecifier(node, uniqueSpecifiers.join(', '))};\n`);
+  },
+  containsNamedSpecifier(node, name) {
+    return node.specifiers.some(specifier => {
+      if (!isNodeOfType(specifier, 'ImportSpecifier')) {
+        return false;
+      }
+      return specifier.imported.name === name;
+    });
+  }
+};

package/dist/es2019/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/es2019/ast-nodes/jsx-attribute.js

@@ -0,0 +1,59 @@
+import { isNodeOfType, literal } from 'eslint-codemod-utils';
+const HelperJSXAttribute = {
+  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(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(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/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/use-primitives/index.js

@@ -1,8 +1,9 @@
-import { getIdentifierInParentScope, isNodeOfType } from 'eslint-codemod-utils';
+import { 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 { styledComponentToPrimitive } from './transformers';
+import { EmotionCSS } from './transformers/emotion-css';
+import { findValidJsxUsageToTransform, findValidStyledComponentCall, isValidCssPropertiesToTransform } from './utils';
 const boxDocsUrl = 'https://atlassian.design/components/primitives/box';
 const rule = createLintRule({
   meta: {
@@ -53,84 +54,13 @@ const rule = createLintRule({
         });
       },
       // 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/emotion-css/index.js

@@ -0,0 +1,159 @@
+/* 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 * as supported from './supported';
+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 (!this._containsOnlySupportedAttributes(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 = this._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
+    };
+  },
+
+  /**
+   * 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`.
+   */
+  _containsOnlySupportedAttributes(node) {
+    const attrs = ast.JSXElement.getAttributes(node);
+    return attrs.every(attr => {
+      if (!isNodeOfType(attr, 'JSXAttribute')) {
+        return false;
+      }
+      if (!isNodeOfType(attr.name, 'JSXIdentifier')) {
+        return false;
+      }
+      return supported.attributes.includes(attr.name.name);
+    });
+  },
+  /**
+   * 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.
+   */
+  _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/supported.js

@@ -0,0 +1,46 @@
+export const elements = ['div'];
+export const attributes = ['css'
+// 'data-testid'
+];
+
+// TODO: https://product-fabric.atlassian.net/browse/DSP-16054
+const 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 const styles = {
+  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/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 };