npm - @atlaskit/eslint-plugin-design-system - Versions diffs - 8.18.0 → 8.18.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (55) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,11 @@
 # @atlaskit/eslint-plugin-design-system
+## 8.18.1
+### Patch Changes
+- [#64857](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64857) [`1be24644c029`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1be24644c029) - `use-primitives` is now capable of converting styled components. This is guarded by a config flag so this release is only a patch.
 ## 8.18.0
 ### Minor Changes

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

@@ -1,14 +1,19 @@
 "use strict";
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _assign = _interopRequireDefault(require("lodash/assign"));
 var _createRule = require("../utils/create-rule");
 var _transformers = require("./transformers");
 var _utils = require("./utils");
 var boxDocsUrl = 'https://atlassian.design/components/primitives/box';
+var defaultConfig = {
+  preview: false
+};
 var rule = (0, _createRule.createLintRule)({
   meta: {
     name: 'use-primitives',
@@ -21,11 +26,43 @@ 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.")
+      preferPrimitivesBox: "This element can be replaced with a \"Box\" primitive. See ".concat(boxDocsUrl, " for additional guidance.")
     }
   },
   create: function create(context) {
+    var mergedConfig = (0, _assign.default)({}, defaultConfig, context.options[0]);
     return {
+      // transforms styled.<html>(...) usages
+      CallExpression: function CallExpression(node) {
+        if (!mergedConfig.preview) {
+          return;
+        }
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression')) {
+          return;
+        }
+        var styledComponentVariableRef = (0, _utils.findValidStyledComponentCall)(node);
+        if (!styledComponentVariableRef || !(0, _eslintCodemodUtils.isNodeOfType)(styledComponentVariableRef.id, 'Identifier') || !(0, _utils.isValidCssPropertiesToTransform)(node)) {
+          return;
+        }
+        var styledComponentJsxRef = (0, _utils.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 ".concat(styledComponentVariableRef.id.name, " to Box"),
+            fix: (0, _transformers.styledComponentToPrimitive)({
+              stylesRef: styledComponentVariableRef,
+              jsxRef: styledComponentJsxRef
+            }, context)
+          }]
+        });
+      },
+      // transforms <div css={...}> usages
       JSXOpeningElement: function JSXOpeningElement(node) {
         if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXOpeningElement')) {
           return;
@@ -97,42 +134,10 @@ var shouldSuggestBox = function shouldSuggestBox(node, context
   // 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) {
+  if (!cssVariableValue || !(0, _utils.isFunctionNamed)(cssVariableValue, 'css')) {
     return false;
   }
-  return true;
+  return (0, _utils.isValidCssPropertiesToTransform)(cssVariableValue.node.init);
 };
 var _default = exports.default = rule;

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.supportedStylesMap = exports.spaceTokenMap = exports.cssToXcssTransformer = void 0;
+exports.supportedStylesMap = exports.styledObjectToXcssTokens = exports.spaceTokenMap = exports.cssToXcssTransformer = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var _utils = require("../utils");
@@ -36,7 +36,14 @@ var cssToXcssTransformer = exports.cssToXcssTransformer = function cssToXcssTran
   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) {
+  fixer.replaceText(cssVariableValue.node.init.callee, (0, _eslintCodemodUtils.identifier)('xcss').toString())].concat((0, _toConsumableArray2.default)(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()`.
+var styledObjectToXcssTokens = exports.styledObjectToXcssTokens = function styledObjectToXcssTokens(styles, fixer) {
+  return styles.properties.map(function (entry) {
     if (!(0, _eslintCodemodUtils.isNodeOfType)(entry, 'Property')) {
       return;
     }
@@ -51,7 +58,7 @@ var cssToXcssTransformer = exports.cssToXcssTransformer = function cssToXcssTran
       return;
     }
     return fixer.replaceText(entry.value, (0, _eslintCodemodUtils.literal)("'".concat(supportedStylesMap[entry.key.name][value], "'")).toString());
-  })));
+  });
 };
 var spaceTokenMap = exports.spaceTokenMap = {
   '0px': 'space.0',

package/dist/cjs/rules/use-primitives/transformers/index.js CHANGED Viewed

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "spaceTokenMap", {
     return _cssToXcss.spaceTokenMap;
   }
 });
+Object.defineProperty(exports, "styledComponentToPrimitive", {
+  enumerable: true,
+  get: function get() {
+    return _styledComponentToPrimitive.styledComponentToPrimitive;
+  }
+});
 Object.defineProperty(exports, "supportedStylesMap", {
   enumerable: true,
   get: function get() {
@@ -28,4 +34,5 @@ Object.defineProperty(exports, "supportedStylesMap", {
   }
 });
 var _cssToXcss = require("./css-to-xcss");
-var _jsxElementToBox = require("./jsx-element-to-box");
+var _jsxElementToBox = require("./jsx-element-to-box");
+var _styledComponentToPrimitive = require("./styled-component-to-primitive");

package/dist/cjs/rules/use-primitives/transformers/styled-component-to-primitive.js ADDED Viewed

@@ -0,0 +1,68 @@
+"use strict";
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styledComponentToPrimitive = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _utils = require("../utils");
+var _cssToXcss = require("./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
+ */
+var styledComponentToPrimitive = exports.styledComponentToPrimitive = function styledComponentToPrimitive(_ref, context) {
+  var stylesRef = _ref.stylesRef,
+    jsxRef = _ref.jsxRef;
+  return function (fixer) {
+    // generates the new variable name: MyComponent -> myComponentStyles
+    var calculatedStylesVariableName = (0, _eslintCodemodUtils.isNodeOfType)(stylesRef.id, 'Identifier') && "".concat(stylesRef.id.name.replace(stylesRef.id.name[0], stylesRef.id.name[0].toLowerCase()), "Styles");
+    if (!calculatedStylesVariableName) {
+      return [];
+    }
+    var importFixes = (0, _utils.upsertImportDeclaration)({
+      packageName: '@atlaskit/primitives',
+      specifiers: ['Box', 'xcss']
+    }, context, fixer);
+    var stylesFixes = convertStyledComponentToXcss(stylesRef, calculatedStylesVariableName, fixer);
+    var jsxFixes = convertJsxCallSite(jsxRef, calculatedStylesVariableName, fixer);
+    return [importFixes].concat(stylesFixes, jsxFixes).filter(function (fix) {
+      return Boolean(fix);
+    }); // Some of the transformers can return arrays with undefined, so filter them out
+  };
+};
+var convertStyledComponentToXcss = function convertStyledComponentToXcss(stylesRef, newStylesVariableName, fixer) {
+  var 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 && (0, _eslintCodemodUtils.isNodeOfType)(stylesRef.init, 'CallExpression')) {
+    fixes.push(fixer.replaceText(stylesRef.init.callee, 'xcss'));
+  }
+  // converts CSS values to XCSS-compatible tokens
+  if (stylesRef.init && (0, _eslintCodemodUtils.isNodeOfType)(stylesRef.init, 'CallExpression')) {
+    var objectExpression = stylesRef.init.arguments[0];
+    if ((0, _eslintCodemodUtils.isNodeOfType)(objectExpression, 'ObjectExpression')) {
+      fixes.push.apply(fixes, (0, _toConsumableArray2.default)((0, _cssToXcss.styledObjectToXcssTokens)(objectExpression, fixer)));
+    }
+  }
+  return fixes;
+};
+var convertJsxCallSite = function convertJsxCallSite(jsxRef, newStylesVariableName, fixer) {
+  var fixes = [];
+  // renames the JSX call site
+  if ((0, _eslintCodemodUtils.isNodeOfType)(jsxRef.parent, 'JSXElement')) {
+    fixes.push.apply(fixes, (0, _toConsumableArray2.default)((0, _utils.updateJSXElementName)(jsxRef.parent, 'Box', fixer)));
+  }
+  // adds xcss prop
+  fixes.push(fixer.insertTextAfter(jsxRef.name, " xcss={".concat(newStylesVariableName, "}")));
+  return fixes;
+};

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

@@ -12,6 +12,22 @@ var _eslintCodemodUtils = require("eslint-codemod-utils");
  */
 var convertASTObjectExpressionToJSObject = exports.convertASTObjectExpressionToJSObject = function convertASTObjectExpressionToJSObject(styles) {
   var styleObj = {};
+  // if we see any spread props we stop and return false to indicate this is unsupported
+  if (!styles.properties.every(function (prop) {
+    return (0, _eslintCodemodUtils.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(function (prop) {
     if (!(0, _eslintCodemodUtils.isNodeOfType)(prop, 'Property')) {
       return;

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

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findValidJsxUsageToTransform = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+/**
+ * Given a component name finds its JSX usages and performs some
+ * additional validations to ensure transformation can be done correctly
+ */
+var findValidJsxUsageToTransform = exports.findValidJsxUsageToTransform = function findValidJsxUsageToTransform(componentName, scope) {
+  var variableDeclaration = scope.variables.find(function (v) {
+    return 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;
+  }
+  var jsxUsage = variableDeclaration.references[1].identifier;
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(jsxUsage, 'JSXIdentifier')) {
+    return;
+  }
+  var jsxOpeningElement = jsxUsage.parent;
+  // we could relatively easily support some safe attributes like
+  // "id" or "testId" but support will be expanded as we go
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(jsxOpeningElement, 'JSXOpeningElement') || jsxOpeningElement.attributes.length > 0) {
+    return;
+  }
+  return jsxOpeningElement;
+};

package/dist/cjs/rules/use-primitives/utils/find-valid-styled-component-call.js ADDED Viewed

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findValidStyledComponentCall = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _isValidTagName = require("./is-valid-tag-name");
+/**
+ * returns a variable reference if preconditions are favourable for
+ * the transformation to proceed, undefined otherwise.
+ */
+var findValidStyledComponentCall = exports.findValidStyledComponentCall = function findValidStyledComponentCall(node) {
+  // halts unless we are dealing with a styled component
+  if (!isStyledCallExpression(node)) {
+    return;
+  }
+  // halts if the component is being exported directly
+  if ((0, _eslintCodemodUtils.closestOfType)(node, 'ExportNamedDeclaration')) {
+    return;
+  }
+  var styledComponentVariableRef = node.parent;
+  // halts if the styled component is not assigned to a variable immediately
+  if (!(0, _eslintCodemodUtils.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
+ */
+var isStyledCallExpression = function isStyledCallExpression(call) {
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(call, 'CallExpression')) {
+    return false;
+  }
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(call.callee, 'MemberExpression')) {
+    return false;
+  }
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(call.callee.object, 'Identifier') || !(0, _eslintCodemodUtils.isNodeOfType)(call.callee.property, 'Identifier')) {
+    return false;
+  }
+  if (/^styled2?$/.test(call.callee.object.name) && _isValidTagName.validPrimitiveElements.has(call.callee.property.name)) {
+    return true;
+  }
+  return false;
+};

package/dist/cjs/rules/use-primitives/utils/index.js CHANGED Viewed

@@ -15,6 +15,18 @@ Object.defineProperty(exports, "convertASTObjectExpressionToJSObject", {
     return _convertAstObjectExpressionToJsObject.convertASTObjectExpressionToJSObject;
   }
 });
+Object.defineProperty(exports, "findValidJsxUsageToTransform", {
+  enumerable: true,
+  get: function get() {
+    return _findValidJsxUsageToTransform.findValidJsxUsageToTransform;
+  }
+});
+Object.defineProperty(exports, "findValidStyledComponentCall", {
+  enumerable: true,
+  get: function get() {
+    return _findValidStyledComponentCall.findValidStyledComponentCall;
+  }
+});
 Object.defineProperty(exports, "getAttributeValueIdentifier", {
   enumerable: true,
   get: function get() {
@@ -51,6 +63,12 @@ Object.defineProperty(exports, "isFunctionNamed", {
     return _isFunctionNamed.isFunctionNamed;
   }
 });
+Object.defineProperty(exports, "isValidCssPropertiesToTransform", {
+  enumerable: true,
+  get: function get() {
+    return _isValidCssPropertiesToTransform.isValidCssPropertiesToTransform;
+  }
+});
 Object.defineProperty(exports, "isValidTagName", {
   enumerable: true,
   get: function get() {
@@ -77,12 +95,15 @@ Object.defineProperty(exports, "upsertImportDeclaration", {
 });
 var _containsOnlySupportedAttrs = require("./contains-only-supported-attrs");
 var _convertAstObjectExpressionToJsObject = require("./convert-ast-object-expression-to-js-object");
+var _findValidJsxUsageToTransform = require("./find-valid-jsx-usage-to-transform");
+var _findValidStyledComponentCall = require("./find-valid-styled-component-call");
 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 _isValidCssPropertiesToTransform = require("./is-valid-css-properties-to-transform");
 var _isValidTagName = require("./is-valid-tag-name");
 var _updateJsxAttributeByName = require("./update-jsx-attribute-by-name");
 var _updateJsxElementName = require("./update-jsx-element-name");

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/es2019/rules/use-primitives/index.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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';