@atlaskit/eslint-plugin-design-system 8.18.0 → 8.19.0

package/dist/cjs/rules/use-primitives/utils/is-valid-css-properties-to-transform.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isValidCssPropertiesToTransform = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _cssToXcss = require("../transformers/css-to-xcss");
+var _convertAstObjectExpressionToJsObject = require("./convert-ast-object-expression-to-js-object");
+var isValidCssPropertiesToTransform = exports.isValidCssPropertiesToTransform = function isValidCssPropertiesToTransform(node) {
+  var cssObjectExpression = node.arguments[0];
+  // Bail on empty object calls
+  if (!cssObjectExpression || !(0, _eslintCodemodUtils.isNodeOfType)(cssObjectExpression, 'ObjectExpression')) {
+    return false;
+  }
+  var cssObject = (0, _convertAstObjectExpressionToJsObject.convertASTObjectExpressionToJSObject)(cssObjectExpression);
+  // Bail if there are less or more than 1 styles defined
+  if (!cssObject || 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 _cssToXcss.supportedStylesMap[styleProperty] &&
+    // Is the key something we can map
+    _cssToXcss.supportedStylesMap[styleProperty][styleValue] // Is the value something we can map
+    ;
+  });
+
+  if (!containsOnlyValidStyles) {
+    return false;
+  }
+  return true;
+};

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

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

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

@@ -12,5 +12,5 @@ var updateJSXElementName = exports.updateJSXElementName = function updateJSXElem
   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];
+  return [newOpeningElement, newClosingElement || undefined];
 };

package/dist/cjs/rules/utils/get-import-node-by-source.js

@@ -3,7 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getImportedNodeBySource = void 0;
+exports.getModuleOfIdentifier = exports.getImportedNodeBySource = void 0;
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 /**
@@ -17,4 +20,49 @@ var getImportedNodeBySource = exports.getImportedNodeBySource = function getImpo
   }).find(function (node) {
     return node.source.value === path;
   });
+};
+
+/**
+ * Returns the module name of an identifier, if one exists.
+ *
+ * getModuleOfIdentifier(source, 'Button'); // "@atlaskit/button"
+ */
+var getModuleOfIdentifier = exports.getModuleOfIdentifier = function getModuleOfIdentifier(source, identifierName) {
+  var _iterator = _createForOfIteratorHelper(source.ast.body),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var node = _step.value;
+      if (node.type === 'ImportDeclaration') {
+        var _iterator2 = _createForOfIteratorHelper(node.specifiers),
+          _step2;
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var spec = _step2.value;
+            if (spec.type === 'ImportDefaultSpecifier' && spec.local.name === identifierName) {
+              return {
+                moduleName: node.source.value + '',
+                importName: identifierName
+              };
+            }
+            if (spec.type === 'ImportSpecifier' && spec.local.name === identifierName) {
+              return {
+                moduleName: node.source.value + '',
+                importName: spec.imported.name
+              };
+            }
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return undefined;
 };

package/dist/cjs/rules/utils/jsx.js

@@ -4,9 +4,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.findProp = findProp;
+exports.getJSXElementName = getJSXElementName;
 function findProp(jsx, propName) {
   var labelProp = jsx.openingElement.attributes.find(function (attr) {
     return attr.type === 'JSXAttribute' && attr.name.name === propName;
   });
   return labelProp;
+}
+function unrollMemberExpression(exp) {
+  if (exp.type === 'JSXIdentifier') {
+    return exp.name;
+  }
+  return unrollMemberExpression(exp.object);
+}
+function getJSXElementName(jsx) {
+  switch (jsx.name.type) {
+    case 'JSXIdentifier':
+      return jsx.name.name;
+    case 'JSXMemberExpression':
+      return unrollMemberExpression(jsx.name.object);
+    case 'JSXNamespacedName':
+      return jsx.name.namespace.name;
+  }
 }

package/dist/es2019/presets/all.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::37a857efd0971ab26170d5f1f526279b>>
+ * @codegen <<SignedSource::6efa1e48692b3e287d6dfcd500a5f0ab>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -19,6 +19,7 @@ export default {
     '@atlaskit/design-system/no-nested-styles': 'error',
     '@atlaskit/design-system/no-physical-properties': 'error',
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
+    '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/prefer-primitives': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',

package/dist/es2019/presets/recommended.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b3bce8efb2db1fed84370af608ca0d4c>>
+ * @codegen <<SignedSource::be810d87ec2d253e3b053dc06ff1b99a>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -15,6 +15,7 @@ export default {
     '@atlaskit/design-system/no-deprecated-imports': 'error',
     '@atlaskit/design-system/no-nested-styles': 'error',
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
+    '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',

package/dist/es2019/rules/index.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e2cc357c90120dbbd89b2928dba968c0>>
+ * @codegen <<SignedSource::ab1f5b129d07027c228dbd79da5f3572>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -16,6 +16,7 @@ import noMargin from './no-margin';
 import noNestedStyles from './no-nested-styles';
 import noPhysicalProperties from './no-physical-properties';
 import noUnsafeDesignTokenUsage from './no-unsafe-design-token-usage';
+import noUnsafeStyleOverrides from './no-unsafe-style-overrides';
 import noUnsupportedDragAndDropLibraries from './no-unsupported-drag-and-drop-libraries';
 import preferPrimitives from './prefer-primitives';
 import useDrawerLabel from './use-drawer-label';
@@ -37,6 +38,7 @@ export default {
   'no-nested-styles': noNestedStyles,
   'no-physical-properties': noPhysicalProperties,
   'no-unsafe-design-token-usage': noUnsafeDesignTokenUsage,
+  'no-unsafe-style-overrides': noUnsafeStyleOverrides,
   'no-unsupported-drag-and-drop-libraries': noUnsupportedDragAndDropLibraries,
   'prefer-primitives': preferPrimitives,
   'use-drawer-label': useDrawerLabel,

package/dist/es2019/rules/no-unsafe-style-overrides/index.js

@@ -0,0 +1,68 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+import { getModuleOfIdentifier } from '../utils/get-import-node-by-source';
+import { getJSXElementName } from '../utils/jsx';
+const unsafeOverrides = ['css', 'className', 'theme', 'cssFn', 'styles'];
+const rule = createLintRule({
+  meta: {
+    docs: {
+      recommended: true,
+      // This should be an error but for now we're rolling it out as warn so we can actually get it into codebases.
+      severity: 'warn',
+      description: 'Discourage usage of unsafe style overrides used against the Atlassian Design System.'
+    },
+    name: 'no-unsafe-style-overrides',
+    messages: {
+      noUnsafeStyledOverride: 'Wrapping {{componentName}} in a styled component encourages unsafe style overrides which cause friction and incidents when its internals change.',
+      noUnsafeOverrides: 'The {{propName}} prop encourages unsafe style overrides which cause friction and incidents when {{componentName}} internals change.'
+    }
+  },
+  create(context) {
+    return {
+      CallExpression(node) {
+        if (node.callee.type !== 'Identifier' || !node.callee.name.toLowerCase().includes('styled')) {
+          // Ignore functions that don't look like styled().
+          return;
+        }
+        const firstArgument = node.arguments[0];
+        if (!firstArgument || firstArgument.type !== 'Identifier') {
+          return;
+        }
+        const moduleName = getModuleOfIdentifier(context.getSourceCode(), firstArgument.name);
+        if (!moduleName || !moduleName.moduleName.startsWith('@atlaskit')) {
+          // Ignore styled calls with non-atlaskit components.
+          return;
+        }
+        context.report({
+          node: firstArgument,
+          messageId: 'noUnsafeStyledOverride',
+          data: {
+            componentName: moduleName.importName
+          }
+        });
+      },
+      JSXAttribute(node) {
+        if (!isNodeOfType(node, 'JSXAttribute') || !(node.parent && isNodeOfType(node.parent, 'JSXOpeningElement'))) {
+          return;
+        }
+        const elementName = getJSXElementName(node.parent);
+        const moduleName = getModuleOfIdentifier(context.getSourceCode(), elementName);
+        if (!moduleName || !moduleName.moduleName.startsWith('@atlaskit')) {
+          return;
+        }
+        const propName = typeof node.name.name === 'string' ? node.name.name : node.name.name.name;
+        if (unsafeOverrides.includes(propName)) {
+          context.report({
+            node,
+            messageId: 'noUnsafeOverrides',
+            data: {
+              propName,
+              componentName: moduleName.importName
+            }
+          });
+        }
+      }
+    };
+  }
+});
+export default rule;

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

@@ -1,8 +1,12 @@
 import { getIdentifierInParentScope, isNodeOfType } from 'eslint-codemod-utils';
+import assign from 'lodash/assign';
 import { createLintRule } from '../utils/create-rule';
-import { jsxElementToBoxTransformer, supportedStylesMap } from './transformers';
-import { containsOnlySupportedAttrs, convertASTObjectExpressionToJSObject, getAttributeValueIdentifier, getFunctionArgumentAtPos, getJSXAttributeByName, getVariableDefinitionValue, getVariableUsagesCount, isFunctionNamed, isValidTagName } from './utils';
+import { jsxElementToBoxTransformer, styledComponentToPrimitive } from './transformers';
+import { containsOnlySupportedAttrs, findValidJsxUsageToTransform, findValidStyledComponentCall, getAttributeValueIdentifier, getJSXAttributeByName, getVariableDefinitionValue, getVariableUsagesCount, isFunctionNamed, isValidCssPropertiesToTransform, isValidTagName } from './utils';
 const boxDocsUrl = 'https://atlassian.design/components/primitives/box';
+const defaultConfig = {
+  preview: false
+};
 const rule = createLintRule({
   meta: {
     name: 'use-primitives',
@@ -15,11 +19,43 @@ const rule = createLintRule({
       severity: 'warn'
     },
     messages: {
-      preferPrimitivesBox: `This "{{element}}" may be able to be replaced with a "Box". See ${boxDocsUrl} for guidance.`
+      preferPrimitivesBox: `This element can be replaced with a "Box" primitive. See ${boxDocsUrl} for additional guidance.`
     }
   },
   create(context) {
+    const mergedConfig = assign({}, defaultConfig, context.options[0]);
     return {
+      // transforms styled.<html>(...) usages
+      CallExpression(node) {
+        if (!mergedConfig.preview) {
+          return;
+        }
+        if (!isNodeOfType(node, 'CallExpression')) {
+          return;
+        }
+        const styledComponentVariableRef = findValidStyledComponentCall(node);
+        if (!styledComponentVariableRef || !isNodeOfType(styledComponentVariableRef.id, 'Identifier') || !isValidCssPropertiesToTransform(node)) {
+          return;
+        }
+        const styledComponentJsxRef = findValidJsxUsageToTransform(styledComponentVariableRef.id.name, context.getScope());
+        if (!styledComponentJsxRef) {
+          return;
+        }
+
+        // if we have both references at this point then we can offer a fix \o/
+        context.report({
+          node: styledComponentVariableRef,
+          messageId: 'preferPrimitivesBox',
+          suggest: [{
+            desc: `Convert ${styledComponentVariableRef.id.name} to Box`,
+            fix: styledComponentToPrimitive({
+              stylesRef: styledComponentVariableRef,
+              jsxRef: styledComponentJsxRef
+            }, context)
+          }]
+        });
+      },
+      // transforms <div css={...}> usages
       JSXOpeningElement(node) {
         if (!isNodeOfType(node, 'JSXOpeningElement')) {
           return;
@@ -91,42 +127,10 @@ const shouldSuggestBox = (node, context
   // 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) {
+  if (!cssVariableValue || !isFunctionNamed(cssVariableValue, 'css')) {
     return false;
   }
-  return true;
+  return isValidCssPropertiesToTransform(cssVariableValue.node.init);
 };
 export default rule;

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

@@ -28,11 +28,14 @@ export const cssToXcssTransformer = (node, context, fixer) => {
   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 => {
+  fixer.replaceText(cssVariableValue.node.init.callee, identifier('xcss').toString()), ...styledObjectToXcssTokens(cssObjectExpression, fixer)];
+};
+
+// 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()`.
+export const styledObjectToXcssTokens = (styles, fixer) => {
+  return styles.properties.map(entry => {
     if (!isNodeOfType(entry, 'Property')) {
       return;
     }
@@ -47,7 +50,7 @@ export const cssToXcssTransformer = (node, context, fixer) => {
       return;
     }
     return fixer.replaceText(entry.value, literal(`'${supportedStylesMap[entry.key.name][value]}'`).toString());
-  })];
+  });
 };
 export const spaceTokenMap = {
   '0px': 'space.0',

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

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

package/dist/es2019/rules/use-primitives/transformers/styled-component-to-primitive.js

@@ -0,0 +1,59 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { updateJSXElementName, upsertImportDeclaration } from '../utils';
+import { styledObjectToXcssTokens } from './css-to-xcss';
+/**
+ * All required validation steps have been taken care of before this
+ * transformer is called, so it just goes ahead providing all necessary fixes
+ */
+export const styledComponentToPrimitive = ({
+  stylesRef,
+  jsxRef
+}, context) => {
+  return fixer => {
+    // generates the new variable name: MyComponent -> myComponentStyles
+    const calculatedStylesVariableName = isNodeOfType(stylesRef.id, 'Identifier') && `${stylesRef.id.name.replace(stylesRef.id.name[0], stylesRef.id.name[0].toLowerCase())}Styles`;
+    if (!calculatedStylesVariableName) {
+      return [];
+    }
+    const importFixes = upsertImportDeclaration({
+      packageName: '@atlaskit/primitives',
+      specifiers: ['Box', 'xcss']
+    }, context, fixer);
+    const stylesFixes = convertStyledComponentToXcss(stylesRef, calculatedStylesVariableName, fixer);
+    const jsxFixes = convertJsxCallSite(jsxRef, calculatedStylesVariableName, fixer);
+    return [importFixes, ...stylesFixes, ...jsxFixes].filter(fix => Boolean(fix)); // Some of the transformers can return arrays with undefined, so filter them out
+  };
+};
+
+const convertStyledComponentToXcss = (stylesRef, newStylesVariableName, fixer) => {
+  const fixes = [];
+
+  // renames the variable from MyComponent to myComponentStyles
+  fixes.push(fixer.replaceText(stylesRef.id, newStylesVariableName));
+
+  // renames the function call from styled.<tag> to xcss
+  if (stylesRef.init && isNodeOfType(stylesRef.init, 'CallExpression')) {
+    fixes.push(fixer.replaceText(stylesRef.init.callee, 'xcss'));
+  }
+
+  // converts CSS values to XCSS-compatible tokens
+  if (stylesRef.init && isNodeOfType(stylesRef.init, 'CallExpression')) {
+    const objectExpression = stylesRef.init.arguments[0];
+    if (isNodeOfType(objectExpression, 'ObjectExpression')) {
+      fixes.push(...styledObjectToXcssTokens(objectExpression, fixer));
+    }
+  }
+  return fixes;
+};
+const convertJsxCallSite = (jsxRef, newStylesVariableName, fixer) => {
+  const fixes = [];
+
+  // renames the JSX call site
+  if (isNodeOfType(jsxRef.parent, 'JSXElement')) {
+    fixes.push(...updateJSXElementName(jsxRef.parent, 'Box', fixer));
+  }
+
+  // adds xcss prop
+  fixes.push(fixer.insertTextAfter(jsxRef.name, ` xcss={${newStylesVariableName}}`));
+  return fixes;
+};

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

@@ -7,6 +7,20 @@ import { isNodeOfType } from 'eslint-codemod-utils';
  */
 export const convertASTObjectExpressionToJSObject = styles => {
   const styleObj = {};
+
+  // if we see any spread props we stop and return false to indicate this is unsupported
+  if (!styles.properties.every(prop => isNodeOfType(prop, 'Property'))) {
+    return false;
+  }
+
+  // TODO: We need to harden this logic.
+  // It currently generates a false positive for:
+  // styled.div({
+  //  marginTop: "0px",
+  //  marginBottom: token("space.100", "8px"),
+  // })
+  // as the value for `marginBottom` is not a string, so it is just skipped
+  // from the resulting map and this causes the rule to trigger when it shouldn't
   styles.properties.forEach(prop => {
     if (!isNodeOfType(prop, 'Property')) {
       return;

package/dist/es2019/rules/use-primitives/utils/find-valid-jsx-usage-to-transform.js

@@ -0,0 +1,32 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+
+/**
+ * Given a component name finds its JSX usages and performs some
+ * additional validations to ensure transformation can be done correctly
+ */
+export const findValidJsxUsageToTransform = (componentName, scope) => {
+  const variableDeclaration = scope.variables.find(v => v.name === componentName);
+  if (!variableDeclaration) {
+    return;
+  }
+
+  // length here should be exactly 2 to indicate only two references:
+  // one being the variable declaration itself
+  // second being the JSX call site
+  // we might consider handling multiple local JSX call sites in the future
+  // but "this is good enough for now"™️
+  if (variableDeclaration.references.length !== 2) {
+    return;
+  }
+  const jsxUsage = variableDeclaration.references[1].identifier;
+  if (!isNodeOfType(jsxUsage, 'JSXIdentifier')) {
+    return;
+  }
+  const jsxOpeningElement = jsxUsage.parent;
+  // we could relatively easily support some safe attributes like
+  // "id" or "testId" but support will be expanded as we go
+  if (!isNodeOfType(jsxOpeningElement, 'JSXOpeningElement') || jsxOpeningElement.attributes.length > 0) {
+    return;
+  }
+  return jsxOpeningElement;
+};

package/dist/es2019/rules/use-primitives/utils/find-valid-styled-component-call.js

@@ -0,0 +1,47 @@
+import { closestOfType, isNodeOfType } from 'eslint-codemod-utils';
+import { validPrimitiveElements } from './is-valid-tag-name';
+
+/**
+ * returns a variable reference if preconditions are favourable for
+ * the transformation to proceed, undefined otherwise.
+ */
+
+export const findValidStyledComponentCall = node => {
+  // halts unless we are dealing with a styled component
+  if (!isStyledCallExpression(node)) {
+    return;
+  }
+  // halts if the component is being exported directly
+  if (closestOfType(node, 'ExportNamedDeclaration')) {
+    return;
+  }
+  const styledComponentVariableRef = node.parent;
+  // halts if the styled component is not assigned to a variable immediately
+  if (!isNodeOfType(styledComponentVariableRef, 'VariableDeclarator')) {
+    return;
+  }
+  return styledComponentVariableRef;
+};
+
+/**
+ * Some verbose precondition checks but all it does is check
+ * a call expression is of form `styled.div` or `styled2.div`
+ *
+ * In the future it could be enhanced to double check `styled` and `styled2`
+ * are Compiled imports but as is should work for the majority of use cases
+ */
+const isStyledCallExpression = call => {
+  if (!isNodeOfType(call, 'CallExpression')) {
+    return false;
+  }
+  if (!isNodeOfType(call.callee, 'MemberExpression')) {
+    return false;
+  }
+  if (!isNodeOfType(call.callee.object, 'Identifier') || !isNodeOfType(call.callee.property, 'Identifier')) {
+    return false;
+  }
+  if (/^styled2?$/.test(call.callee.object.name) && validPrimitiveElements.has(call.callee.property.name)) {
+    return true;
+  }
+  return false;
+};

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

@@ -1,11 +1,14 @@
 export { containsOnlySupportedAttrs } from './contains-only-supported-attrs';
 export { convertASTObjectExpressionToJSObject } from './convert-ast-object-expression-to-js-object';
+export { findValidJsxUsageToTransform } from './find-valid-jsx-usage-to-transform';
+export { findValidStyledComponentCall } from './find-valid-styled-component-call';
 export { getAttributeValueIdentifier } from './get-attribute-value-identifier';
 export { getFunctionArgumentAtPos } from './get-function-argument-at-pos';
 export { getJSXAttributeByName } from './get-jsx-attribute-by-name';
 export { getVariableDefinitionValue } from './get-variable-definition-value';
 export { getVariableUsagesCount } from './get-variable-usage-count';
 export { isFunctionNamed } from './is-function-named';
+export { isValidCssPropertiesToTransform } from './is-valid-css-properties-to-transform';
 export { isValidTagName } from './is-valid-tag-name';
 export { updateJSXAttributeByName } from './update-jsx-attribute-by-name';
 export { updateJSXElementName } from './update-jsx-element-name';

package/dist/es2019/rules/use-primitives/utils/is-valid-css-properties-to-transform.js

@@ -0,0 +1,32 @@
+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 => {
+  const cssObjectExpression = node.arguments[0];
+  // Bail on empty object calls
+  if (!cssObjectExpression || !isNodeOfType(cssObjectExpression, 'ObjectExpression')) {
+    return false;
+  }
+  const cssObject = convertASTObjectExpressionToJSObject(cssObjectExpression);
+  // Bail if there are less or more than 1 styles defined
+  if (!cssObject || 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;
+};

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

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

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

@@ -8,5 +8,5 @@ export const updateJSXElementName = (node, newName, fixer) => {
   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];
+  return [newOpeningElement, newClosingElement || undefined];
 };