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

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

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getVariableUsagesCount = void 0;
+/**
+ * Using Regex here because otherwise we'd need to traverse the entire AST
+ * We should harden this logic as we go.
+ */
+var getVariableUsagesCount = exports.getVariableUsagesCount = function getVariableUsagesCount(variableName, context) {
+  if (!variableName) {
+    return 0;
+  }
+  var source = context.getSourceCode().text;
+  var matches = Array.from(source.matchAll(new RegExp("[^a-z]".concat(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/cjs/rules/use-primitives/utils/index.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "containsOnlySupportedAttrs", {
+  enumerable: true,
+  get: function get() {
+    return _containsOnlySupportedAttrs.containsOnlySupportedAttrs;
+  }
+});
+Object.defineProperty(exports, "convertASTObjectExpressionToJSObject", {
+  enumerable: true,
+  get: function get() {
+    return _convertAstObjectExpressionToJsObject.convertASTObjectExpressionToJSObject;
+  }
+});
+Object.defineProperty(exports, "getAttributeValueIdentifier", {
+  enumerable: true,
+  get: function get() {
+    return _getAttributeValueIdentifier.getAttributeValueIdentifier;
+  }
+});
+Object.defineProperty(exports, "getFunctionArgumentAtPos", {
+  enumerable: true,
+  get: function get() {
+    return _getFunctionArgumentAtPos.getFunctionArgumentAtPos;
+  }
+});
+Object.defineProperty(exports, "getJSXAttributeByName", {
+  enumerable: true,
+  get: function get() {
+    return _getJsxAttributeByName.getJSXAttributeByName;
+  }
+});
+Object.defineProperty(exports, "getVariableDefinitionValue", {
+  enumerable: true,
+  get: function get() {
+    return _getVariableDefinitionValue.getVariableDefinitionValue;
+  }
+});
+Object.defineProperty(exports, "getVariableUsagesCount", {
+  enumerable: true,
+  get: function get() {
+    return _getVariableUsageCount.getVariableUsagesCount;
+  }
+});
+Object.defineProperty(exports, "isFunctionNamed", {
+  enumerable: true,
+  get: function get() {
+    return _isFunctionNamed.isFunctionNamed;
+  }
+});
+Object.defineProperty(exports, "isValidTagName", {
+  enumerable: true,
+  get: function get() {
+    return _isValidTagName.isValidTagName;
+  }
+});
+Object.defineProperty(exports, "updateJSXAttributeByName", {
+  enumerable: true,
+  get: function get() {
+    return _updateJsxAttributeByName.updateJSXAttributeByName;
+  }
+});
+Object.defineProperty(exports, "updateJSXElementName", {
+  enumerable: true,
+  get: function get() {
+    return _updateJsxElementName.updateJSXElementName;
+  }
+});
+Object.defineProperty(exports, "upsertImportDeclaration", {
+  enumerable: true,
+  get: function get() {
+    return _upsertImportDeclaration.upsertImportDeclaration;
+  }
+});
+var _containsOnlySupportedAttrs = require("./contains-only-supported-attrs");
+var _convertAstObjectExpressionToJsObject = require("./convert-ast-object-expression-to-js-object");
+var _getAttributeValueIdentifier = require("./get-attribute-value-identifier");
+var _getFunctionArgumentAtPos = require("./get-function-argument-at-pos");
+var _getJsxAttributeByName = require("./get-jsx-attribute-by-name");
+var _getVariableDefinitionValue = require("./get-variable-definition-value");
+var _getVariableUsageCount = require("./get-variable-usage-count");
+var _isFunctionNamed = require("./is-function-named");
+var _isValidTagName = require("./is-valid-tag-name");
+var _updateJsxAttributeByName = require("./update-jsx-attribute-by-name");
+var _updateJsxElementName = require("./update-jsx-element-name");
+var _upsertImportDeclaration = require("./upsert-import-declaration");

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isFunctionNamed = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var isFunctionNamed = exports.isFunctionNamed = function isFunctionNamed(node, name) {
+  if (!node) {
+    return false;
+  }
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(node.node.init, 'CallExpression')) {
+    return false;
+  }
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(node.node.init.callee, 'Identifier')) {
+    return false;
+  }
+  return node.node.init.callee.name === name;
+};

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isValidTagName = void 0;
+var validPrimitiveElements = new Set(['div']);
+var isValidTagName = exports.isValidTagName = function isValidTagName(node) {
+  if (node.openingElement.name.type !== 'JSXIdentifier') {
+    return false;
+  }
+  return validPrimitiveElements.has(node.openingElement.name.name);
+};

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

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateJSXAttributeByName = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var updateJSXAttributeByName = exports.updateJSXAttributeByName = function updateJSXAttributeByName(oldName, newName, node, fixer) {
+  var openingElement = node.openingElement;
+  var attributes = openingElement.attributes;
+  var existingAttribute = attributes.find(function (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 [];
+  }
+  var newAttribute = (0, _eslintCodemodUtils.jsxAttribute)(_objectSpread(_objectSpread({}, existingAttribute), {}, {
+    name: (0, _eslintCodemodUtils.jsxIdentifier)(newName)
+  }));
+  return fixer.replaceText(existingAttribute, newAttribute.toString());
+};

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateJSXElementName = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var updateJSXElementName = exports.updateJSXElementName = function updateJSXElementName(node, newName, fixer) {
+  var openingElement = node.openingElement,
+    closingElement = node.closingElement;
+  var newOpeningElement = fixer.replaceText(openingElement.name, (0, _eslintCodemodUtils.jsxIdentifier)(newName).toString());
+  var newClosingElement = closingElement &&
+  // Self closing tags, like `<div />` don't need to have the closing tag updated
+  fixer.replaceText(closingElement.name, (0, _eslintCodemodUtils.jsxIdentifier)(newName).toString());
+  return [newOpeningElement, newClosingElement];
+};

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

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.upsertImportDeclaration = void 0;
+var _eslintCodemodUtils = require("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.
+ */
+var upsertImportDeclaration = exports.upsertImportDeclaration = function upsertImportDeclaration(_ref, context, fixer) {
+  var packageName = _ref.packageName,
+    specifiers = _ref.specifiers;
+  // Find any imports that match the packageName
+  var body = context.getSourceCode().ast.body;
+  var existingImports = body.filter(function (node) {
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'ImportDeclaration')) {
+      return false;
+    }
+    if (!(0, _eslintCodemodUtils.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], "".concat((0, _eslintCodemodUtils.insertImportDeclaration)(packageName, specifiers), ";\n"));
+  }
+
+  // The import exists so, modify the existing one
+  var 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.
+   */
+  var uniqueImportSpecifiers = specifiers.filter(function (specifier) {
+    return !existingImport.specifiers.find(function (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, "".concat((0, _eslintCodemodUtils.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/es2019/rules/ensure-design-token-usage/typography.js

@@ -1,5 +1,5 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
-import { typography as typographyTokens } from '@atlaskit/tokens/tokens-raw';
+import { typographyAdg3 as typographyTokens } from '@atlaskit/tokens/tokens-raw';
 const typographyProperties = ['fontSize', 'fontWeight', 'fontFamily', 'lineHeight'];
 export const isTypographyProperty = propertyName => {
   return typographyProperties.includes(propertyName);

package/dist/es2019/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';
 const primitiveDocsUrl = 'https://go.atlassian.com/dst-prefer-primitives';
 const rule = createLintRule({
   meta: {

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

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

package/dist/es2019/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';
-const boxDocsUrl = 'https://staging.atlassian.design/components/primitives/box';
-const inlineDocsUrl = 'https://staging.atlassian.design/components/primitives/inline';
-const 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';
+const boxDocsUrl = 'https://atlassian.design/components/primitives/box';
 const rule = createLintRule({
   meta: {
     name: 'use-primitives',
@@ -18,21 +15,11 @@ const rule = createLintRule({
       severity: 'warn'
     },
     messages: {
-      preferPrimitivesBox: `This "{{element}}" may be able to be replaced with a "Box". See ${boxDocsUrl} for guidance.`,
-      preferPrimitivesInline: `This "{{element}}" may be able to be replaced with an "Inline". See ${inlineDocsUrl} for guidance.`,
-      preferPrimitivesStack: `This "{{element}}" may be able to be replaced with a "Stack". See ${stackDocsUrl} for guidance.`
+      preferPrimitivesBox: `This "{{element}}" may be able to be replaced with a "Box". See ${boxDocsUrl} for guidance.`
     }
   },
   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(node) {
         if (!isNodeOfType(node, 'JSXOpeningElement')) {
           return;
@@ -40,15 +27,10 @@ const rule = createLintRule({
         if (!isNodeOfType(node.name, 'JSXIdentifier')) {
           return;
         }
-        const suggestBox = shouldSuggestBox(node === null || node === void 0 ? void 0 : node.parent);
-        const suggestInline = shouldSuggestInline(node === null || node === void 0 ? void 0 : node.parent, context);
-        const 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;
+        }
+        const suggestBox = shouldSuggestBox(node.parent, context);
         if (suggestBox) {
           context.report({
             node: node,
@@ -58,39 +40,7 @@ const 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 @@ const rule = createLintRule({
     };
   }
 });
+const 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
+  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 (!isFunctionNamed(cssVariableValue, 'css')) {
+    return false;
+  }
+
+  // get the `{}` in `css({})`
+  // Zero indexed
+  const cssObjectExpression = getFunctionArgumentAtPos(cssVariableValue, 0);
+
+  // Bail on empty `css()` calls
+  if (!cssObjectExpression) {
+    return false;
+  }
+  const 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.
+  const containsOnlyValidStyles = Object.keys(cssObject).every(styleProperty => {
+    const 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/es2019/rules/use-primitives/transformers/css-to-xcss.js

@@ -0,0 +1,91 @@
+import { getIdentifierInParentScope, identifier, isNodeOfType, literal } from 'eslint-codemod-utils';
+import { getAttributeValueIdentifier, getFunctionArgumentAtPos, getJSXAttributeByName, getVariableDefinitionValue } from '../utils';
+export const 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.
+   */
+  const cssAttr = getJSXAttributeByName(node.openingElement, 'css');
+  const cssVariableName = getAttributeValueIdentifier(cssAttr);
+  if (!cssVariableName) {
+    return [];
+  }
+  const cssVariableDefinition = getIdentifierInParentScope(context.getScope(), cssVariableName);
+  const cssVariableValue = getVariableDefinitionValue(cssVariableDefinition);
+  if (!cssVariableValue) {
+    return [];
+  }
+  const cssObjectExpression = getFunctionArgumentAtPos(cssVariableValue, 0);
+  return [
+  // Update `css` function name to `xcss`.
+  fixer.replaceText(cssVariableValue.node.init.callee, identifier('xcss').toString()),
+  // Update css object values to xcss values. e.g. `'8px'` -> `'space.100'`
+  // Note: `properties` in this context is a group of AST nodes that make up a key/value pair in an object.
+  // e.g. `padding: '8px'`. For clarity, it's renamed to `entry` inside the `.map()`.
+  ...cssObjectExpression.properties.map(entry => {
+    if (!isNodeOfType(entry, 'Property')) {
+      return;
+    }
+    if (!isNodeOfType(entry.key, 'Identifier')) {
+      return;
+    }
+    if (!isNodeOfType(entry.value, 'Literal')) {
+      return;
+    }
+    const value = entry.value.value;
+    if (typeof value !== 'string') {
+      return;
+    }
+    return fixer.replaceText(entry.value, literal(`'${supportedStylesMap[entry.key.name][value]}'`).toString());
+  })];
+};
+export 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 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/es2019/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/es2019/rules/use-primitives/transformers/jsx-element-to-box.js

@@ -0,0 +1,16 @@
+import { updateJSXAttributeByName, updateJSXElementName, upsertImportDeclaration } from '../utils';
+import { cssToXcssTransformer } from './css-to-xcss';
+export const jsxElementToBoxTransformer = (node, context) => {
+  return fixer => {
+    // Insert `import { Box, xcss } from '@atlaskit/primitives'`
+    // Or, if the import exists already, update it to include `Box`, and `xcss`
+    const importFixes = upsertImportDeclaration({
+      packageName: '@atlaskit/primitives',
+      specifiers: ['Box', 'xcss']
+    }, context, fixer);
+    const elementNameFixes = updateJSXElementName(node, 'Box', fixer);
+    const attributeFix = updateJSXAttributeByName('css', 'xcss', node, fixer);
+    const cssToXcssTransform = cssToXcssTransformer(node, context, fixer);
+    return [importFixes, attributeFix, ...elementNameFixes, ...cssToXcssTransform].filter(fix => Boolean(fix)); // Some of the transformers can return arrays with undefined, so filter them out
+  };
+};

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

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

package/dist/es2019/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 const convertASTObjectExpressionToJSObject = styles => {
+  const styleObj = {};
+  styles.properties.forEach(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;
+};