@atlaskit/eslint-plugin-design-system 8.32.0 → 8.32.2

package/dist/cjs/rules/no-styled-tagged-template-expression/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _createNoTaggedTemplateExpressionRule = require("../utils/create-no-tagged-template-expression-rule");
 var _createRule = require("../utils/create-rule");
-var _isStyled = require("./is-styled");
+var _isSupportedImport = require("../utils/is-supported-import");
 var rule = (0, _createRule.createLintRule)({
   meta: {
     name: 'no-styled-tagged-template-expression',
@@ -22,6 +22,6 @@ var rule = (0, _createRule.createLintRule)({
     },
     schema: _createNoTaggedTemplateExpressionRule.noTaggedTemplateExpressionRuleSchema
   },
-  create: (0, _createNoTaggedTemplateExpressionRule.createNoTaggedTemplateExpressionRule)(_isStyled.isStyled, 'unexpectedTaggedTemplate')
+  create: (0, _createNoTaggedTemplateExpressionRule.createNoTaggedTemplateExpressionRule)(_isSupportedImport.isStyled, 'unexpectedTaggedTemplate')
 });
 var _default = exports.default = rule;

package/dist/cjs/rules/utils/create-no-tagged-template-expression-rule/index.js

@@ -43,6 +43,7 @@ var createNoTaggedTemplateExpressionRule = exports.createNoTaggedTemplateExpress
         if (!isUsage(node.tag, references, importSources)) {
           return;
         }
+        var isSC = (0, _isSupportedImport.isStyledComponents)(node.tag, references, importSources);
         context.report({
           messageId: messageId,
           node: node,
@@ -94,12 +95,18 @@ var createNoTaggedTemplateExpressionRule = exports.createNoTaggedTemplateExpress
                   }
                   return _context.abrupt("return");
                 case 16:
-                  _context.next = 18;
-                  return fixer.insertTextBefore(node, newCode);
+                  if (!(isSC && /\$\{.*:[\s]*\{/.test(newCode))) {
+                    _context.next = 18;
+                    break;
+                  }
+                  return _context.abrupt("return");
                 case 18:
                   _context.next = 20;
-                  return fixer.remove(node);
+                  return fixer.insertTextBefore(node, newCode);
                 case 20:
+                  _context.next = 22;
+                  return fixer.remove(node);
+                case 22:
                 case "end":
                   return _context.stop();
               }

package/dist/cjs/rules/utils/is-supported-import.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isStyled = exports.isKeyframes = exports.isCxFunction = exports.isCssMap = exports.isCss = exports.getImportSources = exports.DEFAULT_IMPORT_SOURCES = exports.CSS_IN_JS_IMPORTS = void 0;
+exports.isStyledComponents = exports.isStyled = exports.isKeyframes = exports.isImportedFrom = exports.isEmotion = exports.isCxFunction = exports.isCssMap = exports.isCss = exports.isCompiled = exports.getImportSources = exports.DEFAULT_IMPORT_SOURCES = exports.CSS_IN_JS_IMPORTS = void 0;
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 var CSS_IN_JS_IMPORTS = exports.CSS_IN_JS_IMPORTS = {
@@ -23,6 +23,21 @@ var CSS_IN_JS_IMPORTS = exports.CSS_IN_JS_IMPORTS = {
  * By default all known import sources are checked against.
  */
 var DEFAULT_IMPORT_SOURCES = exports.DEFAULT_IMPORT_SOURCES = Object.values(CSS_IN_JS_IMPORTS);
+var getIdentifierNode = function getIdentifierNode(node) {
+  var identifierNode = node.type === 'Identifier' ? node : undefined;
+  if (!identifierNode) {
+    // Handles styled.div`` case
+    if (node.type === 'MemberExpression' && node.object.type === 'Identifier') {
+      identifierNode = node.object;
+    }
+
+    // Handles styled(Component)`` case
+    if (node.type === 'CallExpression' && node.callee.type === 'Identifier') {
+      identifierNode = node.callee;
+    }
+  }
+  return identifierNode;
+};
 
 /**
  * Given the ESLint rule context, extract and parse the value of the importSources rule option.
@@ -43,6 +58,7 @@ var getImportSources = exports.getImportSources = function getImportSources(cont
   return DEFAULT_IMPORT_SOURCES;
 };
 var isSupportedImportWrapper = function isSupportedImportWrapper(functionName) {
+  var defaultFromImportSources = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var checkDefinitionHasImport = function checkDefinitionHasImport(def, importSources) {
     if (def.type !== 'ImportBinding') {
       return false;
@@ -50,12 +66,19 @@ var isSupportedImportWrapper = function isSupportedImportWrapper(functionName) {
     if (!def.parent || !importSources.includes(def.parent.source.value)) {
       return false;
     }
-    return (
-      // import { functionName } from 'import-source';
-      def.node.type === 'ImportSpecifier' && def.node.imported.name === functionName ||
-      // import functionName from 'import-source';
-      def.node.type === 'ImportDefaultSpecifier' && def.node.local.name === functionName
-    );
+
+    // Matches the imported name from a named import
+    // import { functionName, functioName as otherName } from 'import-source';
+    var isNamedImport = def.node.type === 'ImportSpecifier' && def.node.imported.name === functionName;
+
+    // Must explicitly match the local name from a default import
+    // import functionName from 'import-source';
+    var isDefaultImportMatchingLocal = def.node.type === 'ImportDefaultSpecifier' && def.node.local.name === functionName;
+
+    // Can match any local name from a default import
+    // import anything from 'import-source'
+    var isKnownDefaultImport = def.node.type === 'ImportDefaultSpecifier' && defaultFromImportSources.includes(def.parent.source.value);
+    return isNamedImport || isDefaultImportMatchingLocal || isKnownDefaultImport;
   };
 
   /**
@@ -75,9 +98,10 @@ var isSupportedImportWrapper = function isSupportedImportWrapper(functionName) {
    * @returns Whether the above conditions are true.
    */
   var isSupportedImport = function isSupportedImport(nodeToCheck, referencesInScope, importSources) {
-    return nodeToCheck.type === 'Identifier' && referencesInScope.some(function (reference) {
+    var identifierNode = getIdentifierNode(nodeToCheck);
+    return (identifierNode === null || identifierNode === void 0 ? void 0 : identifierNode.type) === 'Identifier' && referencesInScope.some(function (reference) {
       var _reference$resolved;
-      return reference.identifier === nodeToCheck && ((_reference$resolved = reference.resolved) === null || _reference$resolved === void 0 ? void 0 : _reference$resolved.defs.some(function (def) {
+      return reference.identifier === identifierNode && ((_reference$resolved = reference.resolved) === null || _reference$resolved === void 0 ? void 0 : _reference$resolved.defs.some(function (def) {
         return checkDefinitionHasImport(def, importSources);
       }));
     });
@@ -92,4 +116,34 @@ var isCss = exports.isCss = isSupportedImportWrapper('css');
 var isCxFunction = exports.isCxFunction = isSupportedImportWrapper('cx');
 var isCssMap = exports.isCssMap = isSupportedImportWrapper('cssMap');
 var isKeyframes = exports.isKeyframes = isSupportedImportWrapper('keyframes');
-var isStyled = exports.isStyled = isSupportedImportWrapper('styled');
+// `styled` is also the explicit default of `styled-components` and `@emotion/styled`, so we also match on default imports generally
+var isStyled = exports.isStyled = isSupportedImportWrapper('styled', ['styled-components', '@emotion/styled']);
+var isImportedFrom = exports.isImportedFrom = function isImportedFrom(moduleName) {
+  var exactMatch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  return function (nodeToCheck, referencesInScope, importSources) {
+    if (!importSources.includes(moduleName)) {
+      // Don't go through the trouble of checking the import sources does not include this
+      // We'll assume this is skipped elsewhere.
+      return false;
+    }
+    var identifierNode = getIdentifierNode(nodeToCheck);
+    return (identifierNode === null || identifierNode === void 0 ? void 0 : identifierNode.type) === 'Identifier' && referencesInScope.some(function (reference) {
+      var _reference$resolved2;
+      return reference.identifier === identifierNode && ((_reference$resolved2 = reference.resolved) === null || _reference$resolved2 === void 0 ? void 0 : _reference$resolved2.defs.some(function (def) {
+        var _def$parent, _String, _def$parent2;
+        return def.type === 'ImportBinding' && (((_def$parent = def.parent) === null || _def$parent === void 0 ? void 0 : _def$parent.source.value) === moduleName || !exactMatch && ((_String = String((_def$parent2 = def.parent) === null || _def$parent2 === void 0 ? void 0 : _def$parent2.source.value)) === null || _String === void 0 ? void 0 : _String.startsWith(moduleName)));
+      }));
+    });
+  };
+};
+
+/**
+ * Determine if this node is specifically from a `'styled-components'` import.
+ * This is because `styled-components@3.4` APIs are not consistent with Emotion and Compiled,
+ * we need to handle them differently in a few scenarios.
+ *
+ * This can be cleaned up when `'styled-components'` is no longer a valid ImportSource.
+ */
+var isStyledComponents = exports.isStyledComponents = isImportedFrom('styled-components');
+var isCompiled = exports.isCompiled = isImportedFrom('@compiled/', false);
+var isEmotion = exports.isEmotion = isImportedFrom('@emotion/', false);