@atlaskit/eslint-plugin-design-system 4.1.0 → 4.2.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 4.2.1
+
+### Patch Changes
+
+- [`63a22b17621`](https://bitbucket.org/atlassian/atlassian-frontend/commits/63a22b17621) - Fixes a bug where use of qualified type annotations would throw an error.
+
+## 4.2.0
+
+### Minor Changes
+
+- [`afc248d2ded`](https://bitbucket.org/atlassian/atlassian-frontend/commits/afc248d2ded) - Adds a new rule, `use-visually-hidden` to complement the `@atlaskit/visually-hidden` component.
+- [`0c0a8b5dff4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0c0a8b5dff4) - Adds an additional rule 'no-deprecated-api-usage'. This rule targets APIs/props in the Design System that we intend to remove completely. This rule should be used by all product repos as it will provide an early warning of expected deprecations.
+- [`93d6f8856f2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/93d6f8856f2) - @atlaskit/icon-priority has been deprecated due to low usage. It will be deleted after 21 April 2022. If you rely on these icons, @atlaskit/icon-priority will still be available as a deprecated package on NPM, but we recommend self-hosting and managing.
+
+## 4.1.1
+
+### Patch Changes
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
+- Updated dependencies
+
 ## 4.1.0
 
 ### Minor Changes

package/dist/cjs/index.js

@@ -9,24 +9,32 @@ exports.rules = exports.configs = void 0;
 
 var _ensureDesignTokenUsage = _interopRequireDefault(require("./rules/ensure-design-token-usage"));
 
+var _noDeprecatedApis = _interopRequireDefault(require("./rules/no-deprecated-apis"));
+
 var _noDeprecatedDesignTokenUsage = _interopRequireDefault(require("./rules/no-deprecated-design-token-usage"));
 
 var _noDeprecatedImports = _interopRequireDefault(require("./rules/no-deprecated-imports"));
 
 var _noUnsafeDesignTokenUsage = _interopRequireDefault(require("./rules/no-unsafe-design-token-usage"));
 
+var _useVisuallyHidden = _interopRequireDefault(require("./rules/use-visually-hidden"));
+
 var rules = {
   'ensure-design-token-usage': _ensureDesignTokenUsage.default,
   'no-unsafe-design-token-usage': _noUnsafeDesignTokenUsage.default,
   'no-deprecated-design-token-usage': _noDeprecatedDesignTokenUsage.default,
-  'no-deprecated-imports': _noDeprecatedImports.default
+  'no-deprecated-imports': _noDeprecatedImports.default,
+  'no-deprecated-apis': _noDeprecatedApis.default,
+  'use-visually-hidden': _useVisuallyHidden.default
 };
 exports.rules = rules;
 var configs = {
   recommended: {
     plugins: ['@atlaskit/design-system'],
     rules: {
-      '@atlaskit/design-system/no-deprecated-imports': 'error'
+      '@atlaskit/design-system/no-deprecated-imports': 'error',
+      '@atlaskit/design-system/use-visually-hidden': 'error',
+      '@atlaskit/design-system/no-deprecated-apis': 'warn'
     }
   }
 };

package/dist/cjs/rules/no-deprecated-apis/index.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _getImportNodeBySource = require("../utils/get-import-node-by-source");
+
+var _isNode = require("../utils/is-node");
+
+// eslint-disable-next-line import/no-unresolved
+var unsafeOverridesConfig = {
+  cssFn: ['@atlaskit/menu', '@atlaskit/side-navigation'],
+  overrides: ['@atlaskit/drawer', '@atlaskit/menu', '@atlaskit/side-navigation']
+};
+var unsafeOverrides = ['cssFn', 'overrides'];
+var rule = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Disallow specified APIs that have been marked as deprecated and/or discouraged.',
+      recommended: true
+    },
+    messages: {
+      noDeprecatedApis: "The prop \"{{propName}}\" has been deprecated. It will be removed in the next major release."
+    }
+  },
+  create: function create(context) {
+    return {
+      // find JSX atribute - find name of attribute - get source and find relevant identifiers.
+      JSXAttribute: function (_JSXAttribute) {
+        function JSXAttribute(_x) {
+          return _JSXAttribute.apply(this, arguments);
+        }
+
+        JSXAttribute.toString = function () {
+          return _JSXAttribute.toString();
+        };
+
+        return JSXAttribute;
+      }(function (node) {
+        var _node$name, _closesetJSXElement$n;
+
+        if (!unsafeOverrides.includes(node === null || node === void 0 ? void 0 : (_node$name = node.name) === null || _node$name === void 0 ? void 0 : _node$name.name)) {
+          return;
+        }
+
+        var source = context.getSourceCode();
+        var bannedApi = node.name.name; // traverse the tree to the nearest JSX Element and get its name
+
+        var closesetJSXElement = (0, _isNode.getClosestNodeOfType)(node, 'JSXOpeningElement'); // @ts-ignore
+
+        var jsxElementName = closesetJSXElement === null || closesetJSXElement === void 0 ? void 0 : (_closesetJSXElement$n = closesetJSXElement.name) === null || _closesetJSXElement$n === void 0 ? void 0 : _closesetJSXElement$n.name;
+
+        if (!jsxElementName) {
+          return;
+        } // find an import for the path of the banned api
+
+
+        unsafeOverridesConfig[bannedApi].forEach(function (path) {
+          var importNode = (0, _getImportNodeBySource.getImportedNodeBySource)(source, path);
+
+          if (!importNode) {
+            return;
+          } // find an import that matches our JSX element
+
+
+          var hasTargetNode = importNode.specifiers.some(function (node) {
+            return node.local.name === jsxElementName;
+          });
+
+          if (!hasTargetNode) {
+            return;
+          } // if we're here the import exists and there is a valid lint error.
+
+
+          context.report({
+            node: node,
+            messageId: 'noDeprecatedApis',
+            data: {
+              propName: bannedApi
+            }
+          });
+        });
+      })
+    };
+  }
+};
+var _default = rule;
+exports.default = _default;

package/dist/cjs/rules/no-deprecated-imports/index.js

@@ -31,18 +31,24 @@ var rule = {
     }
   },
   create: function create(context) {
-    var sourceCode = context.getSourceCode();
-
     var restrictedPathMessages = _paths.restrictedPaths.reduce(function (memo, importSource) {
       if (typeof importSource === 'string') {
         memo[importSource] = {
           message: ''
         };
       } else {
-        memo[importSource.name] = {
-          message: importSource.message // importNames: importSource.importNames
+        if ('message' in importSource) {
+          memo[importSource.path] = {
+            message: importSource.message
+          };
+        }
 
-        };
+        if ('imports' in importSource) {
+          memo[importSource.path] = {
+            // @ts-ignore
+            imports: importSource.imports
+          };
+        }
       }
 
       return memo;
@@ -50,27 +56,46 @@ var rule = {
     /**
      * Report a restricted path.
      * @param {string} importSource path of the import
-     * @param {Map<string,Object[]>} importNames Map of import names that are being imported
      * @param {node} node representing the restricted path reference
+     * @param {Map<string,Rule.Node>} importNames Map of import names that are being imported
      * @returns {void}
      * @private
      */
 
 
-    function checkRestrictedPathAndReport(importSource, importNames, node) {
+    function checkRestrictedPathAndReport(importSource, node, importNames) {
       if (!Object.prototype.hasOwnProperty.call(restrictedPathMessages, importSource)) {
         return;
       }
 
-      var customMessage = restrictedPathMessages[importSource].message;
-      context.report({
-        node: node,
-        messageId: customMessage ? 'pathWithCustomMessage' : 'path',
-        data: {
-          importSource: importSource,
-          customMessage: customMessage
-        }
-      });
+      var config = restrictedPathMessages[importSource]; // The message will only exist if the import is completely banned,
+      // eg a deprecated package
+
+      if ('message' in config) {
+        context.report({
+          node: node,
+          messageId: config.message ? 'pathWithCustomMessage' : 'path',
+          data: {
+            importSource: importSource,
+            customMessage: config.message
+          }
+        });
+      } // if there are specific named exports that are banned,
+      // iterate through and check if they're being imported
+
+
+      if ('imports' in config) {
+        var _config$imports;
+
+        (_config$imports = config.imports) === null || _config$imports === void 0 ? void 0 : _config$imports.forEach(function (restrictedImport) {
+          if (importNames.has(restrictedImport.importName)) {
+            context.report({
+              node: importNames.get(restrictedImport.importName),
+              message: restrictedImport.message
+            });
+          }
+        });
+      }
     }
     /**
      * Checks a node to see if any problems should be reported.
@@ -84,12 +109,7 @@ var rule = {
       var importSource = node.source.value.trim();
       var importNames = new Map();
 
-      if (node.type === 'ExportAllDeclaration') {
-        var starToken = sourceCode.getFirstToken(node, 1);
-        importNames.set('*', [{
-          loc: starToken === null || starToken === void 0 ? void 0 : starToken.loc
-        }]);
-      } else if ('specifiers' in node) {
+      if ('specifiers' in node) {
         // @ts-ignore
         var _iterator = _createForOfIteratorHelper(node.specifiers),
             _step;
@@ -98,9 +118,6 @@ var rule = {
           for (_iterator.s(); !(_step = _iterator.n()).done;) {
             var specifier = _step.value;
             var name = void 0;
-            var specifierData = {
-              loc: specifier.loc
-            };
 
             if (specifier.type === 'ImportDefaultSpecifier') {
               name = 'default';
@@ -113,11 +130,7 @@ var rule = {
             }
 
             if (name) {
-              if (importNames.has(name)) {
-                importNames.get(name).push(specifierData);
-              } else {
-                importNames.set(name, [specifierData]);
-              }
+              importNames.set(name, specifier);
             }
           }
         } catch (err) {
@@ -127,7 +140,7 @@ var rule = {
         }
       }
 
-      checkRestrictedPathAndReport(importSource, importNames, node);
+      checkRestrictedPathAndReport(importSource, node, importNames);
     };
 
     return {
@@ -136,8 +149,7 @@ var rule = {
         if (node.source) {
           checkNode(node);
         }
-      },
-      ExportAllDeclaration: checkNode
+      }
     };
   }
 };

package/dist/cjs/rules/no-deprecated-imports/paths.js

@@ -3,48 +3,76 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.restrictedPaths = void 0;
+exports.restrictedPaths = exports.namedThemeExports = void 0;
+var namedThemeExports = [{
+  importName: 'assistive',
+  message: 'The assistive mixin is deprecated. Please use `@atlaskit/visually-hidden` instead.'
+}, {
+  importName: 'visuallyHidden',
+  message: 'The visuallyHidden mixin is deprecated. Please use `@atlaskit/visually-hidden` instead.'
+}, {
+  importName: 'focusRing',
+  message: 'The focusRing mixin is deprecated. Please use `@atlaskit/visually-hidden` instead.'
+}];
+exports.namedThemeExports = namedThemeExports;
 var restrictedPaths = [{
-  name: '@atlaskit/navigation-next',
+  path: '@atlaskit/navigation-next',
   message: "navigation-next is deprecated. Please use '@atlaskit/atlassian-navigation' instead."
 }, {
-  name: '@atlaskit/field-base',
+  path: '@atlaskit/field-base',
   message: "field-base is deprecated. Please use the '@atlaskit/form' package instead."
 }, {
-  name: '@atlaskit/field-radio-group',
+  path: '@atlaskit/field-radio-group',
   message: "field-radio-group is deprecated. Please use '@atlaskit/radio' instead, and check the migration guide."
 }, {
-  name: '@atlaskit/field-range',
+  path: '@atlaskit/field-range',
   message: "field-range is deprecated. Please use '@atlaskit/range' instead."
 }, {
-  name: '@atlaskit/field-text',
+  path: '@atlaskit/field-text',
   message: "field-text is deprecated. Please use '@atlaskit/textfield' instead."
 }, {
-  name: '@atlaskit/field-text-area',
+  path: '@atlaskit/field-text-area',
   message: "field-text-area is deprecated. Please use '@atlaskit/textarea' instead."
 }, {
-  name: '@atlaskit/navigation',
+  path: '@atlaskit/navigation',
   message: "navigation is deprecated. Please use '@atlaskit/atlassian-navigation' instead."
 }, {
-  name: '@atlaskit/global-navigation',
+  path: '@atlaskit/global-navigation',
   message: "global-navigation is deprecated. Please use '@atlaskit/atlassian-navigation' for the horizontal nav bar, '@atlaskit/side-navigation' for the side nav, and '@atlaskit/page-layout' to layout your application."
 }, {
-  name: '@atlaskit/input',
+  path: '@atlaskit/input',
   message: 'input is deprecated. This was an internal component and should not be used directly.'
 }, {
-  name: '@atlaskit/layer',
+  path: '@atlaskit/layer',
   message: 'layer is deprecated. This was an internal component and should not be used directly.'
 }, {
-  name: '@atlaskit/single-select',
+  path: '@atlaskit/single-select',
   message: "single-select is deprecated. Please use '@atlaskit/select' instead."
 }, {
-  name: '@atlaskit/multi-select',
+  path: '@atlaskit/multi-select',
   message: "multi-select is deprecated. Please use '@atlaskit/select' instead."
 }, {
-  name: '@atlaskit/droplist',
+  path: '@atlaskit/droplist',
   message: "droplist is deprecated. For the pop-up behaviour please use '@atlaskit/popup' and for common menu components please use '@atlaskit/menu'."
 }, {
-  name: '@atlaskit/item',
+  path: '@atlaskit/item',
   message: "item is deprecated. Please use '@atlaskit/menu' instead."
+}, // TODO uncomment me when we formally deprecate typography
+// {
+//   path: '@atlaskit/theme/typography',
+//   message: 'The typography mixins are deprecated. Please use `@atlaskit/heading` instead.',
+// },
+{
+  path: '@atlaskit/theme/constants',
+  imports: namedThemeExports
+}, {
+  path: '@atlaskit/theme',
+  imports: namedThemeExports // .concat(
+  //   { importName: 'typography', message: 'The typography mixins are deprecated. Please use `@atlaskit/heading` instead.',}
+  // )
+
+}, {
+  path: '@atlaskit/icon-priority',
+  message: "icon-priority is deprecated due to limited usage in Cloud products. It will be deleted after 21 April 2022."
 }];
 exports.restrictedPaths = restrictedPaths;

package/dist/cjs/rules/use-visually-hidden/constants.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VISUALLY_HIDDEN_SOURCE = exports.VISUALLY_HIDDEN_IMPORT = exports.IMPORT_NAME = void 0;
+var IMPORT_NAME = 'AKVisuallyHidden';
+exports.IMPORT_NAME = IMPORT_NAME;
+var VISUALLY_HIDDEN_SOURCE = '@atlaskit/visually-hidden';
+exports.VISUALLY_HIDDEN_SOURCE = VISUALLY_HIDDEN_SOURCE;
+var VISUALLY_HIDDEN_IMPORT = "import ".concat(IMPORT_NAME, " from '").concat(VISUALLY_HIDDEN_SOURCE, "';\n");
+exports.VISUALLY_HIDDEN_IMPORT = VISUALLY_HIDDEN_IMPORT;

package/dist/cjs/rules/use-visually-hidden/fix-jsx.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _getImportNodeBySource = require("../utils/get-import-node-by-source");
+
+var _isNode = require("../utils/is-node");
+
+var _constants = require("./constants");
+
+var _utils = require("./utils");
+
+var _default = function _default(source, node) {
+  return function (fixer) {
+    var fixes = [];
+    var importedNode = (0, _utils.getFirstImport)(source);
+    var visuallyHiddenNode = (0, _getImportNodeBySource.getImportedNodeBySource)(source, _constants.VISUALLY_HIDDEN_SOURCE);
+
+    if (!importedNode) {
+      return [];
+    }
+
+    var jsxOpeningElement = (0, _isNode.getClosestNodeOfType)(node, 'JSXOpeningElement');
+
+    if (visuallyHiddenNode) {
+      fixes.push(fixer.replaceText(jsxOpeningElement, visuallyHiddenNode.specifiers[0].local.name));
+    } else {
+      fixes.push(fixer.insertTextBefore(importedNode, _constants.VISUALLY_HIDDEN_IMPORT));
+      fixes.push(fixer.replaceText(jsxOpeningElement, "<".concat(_constants.IMPORT_NAME, " />")));
+    }
+
+    return fixes;
+  };
+};
+
+exports.default = _default;

package/dist/cjs/rules/use-visually-hidden/fix-vanilla.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _getImportNodeBySource = require("../utils/get-import-node-by-source");
+
+var _constants = require("./constants");
+
+var _utils = require("./utils");
+
+var _default = function _default(source, node) {
+  return function (fixer) {
+    var fixes = [];
+    var importedNode = (0, _utils.getFirstImport)(source);
+    var visuallyHiddenNode = (0, _getImportNodeBySource.getImportedNodeBySource)(source, _constants.VISUALLY_HIDDEN_SOURCE);
+
+    if (!importedNode) {
+      return [];
+    }
+
+    if (visuallyHiddenNode) {
+      fixes.push(fixer.replaceText(node, visuallyHiddenNode.specifiers[0].local.name));
+    } else {
+      fixes.push(fixer.insertTextBefore(importedNode, _constants.VISUALLY_HIDDEN_IMPORT));
+      fixes.push(fixer.replaceText(node, _constants.IMPORT_NAME));
+    }
+
+    return fixes;
+  };
+};
+
+exports.default = _default;

package/dist/cjs/rules/use-visually-hidden/index.js

@@ -0,0 +1,194 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _isNode = require("../utils/is-node");
+
+var _fixJsx = _interopRequireDefault(require("./fix-jsx"));
+
+var _fixVanilla = _interopRequireDefault(require("./fix-vanilla"));
+
+var _utils = require("./utils");
+
+/* eslint-disable @atlaskit/design-system/use-visually-hidden */
+var THEME_IMPORT_NAMES = ['visuallyHidden', 'assistive'];
+var rule = {
+  meta: {
+    type: 'suggestion',
+    fixable: 'code',
+    docs: {
+      description: 'Suggest usage of the `@atlaskit/visually-hidden` component instead of either the `@atlaskit/theme` mixins or just something the user has rolled themselves.',
+      recommended: true
+    },
+    messages: {
+      noDeprecatedUsage: 'Using the export `{{local}}` from `{{import}}` as a mixin is discouraged. Please use `@atlaskit/visually-hidden` instead.',
+      noDeprecated: 'The export `{{local}}` from `{{import}}` is deprecated. Please use `@atlaskit/visually-hidden` instead.',
+      suggestion: 'This CSS closely matches the implementation of a visually hidden element. You should consider using the `@atlaskit/visually-hidden` component instead.'
+    }
+  },
+  create: function create(context) {
+    var source = context.getSourceCode();
+    return {
+      ImportDeclaration: function ImportDeclaration(node) {
+        var isThemeNode = node.source.value === '@atlaskit/theme' || node.source.value === '@atlaskit/theme/constants';
+
+        if (!isThemeNode) {
+          return;
+        }
+
+        var visuallyHiddenOrAssistive = node.specifiers.filter(function (specifier) {
+          return specifier.type === 'ImportSpecifier';
+        }).find(function (specifier) {
+          return THEME_IMPORT_NAMES.includes(specifier.imported.name);
+        });
+
+        if (!visuallyHiddenOrAssistive) {
+          return;
+        }
+
+        context.getDeclaredVariables(visuallyHiddenOrAssistive).forEach(function (someNode) {
+          someNode.references.map(function (innerNode) {
+            return innerNode.identifier;
+          }).forEach(function (idNode) {
+            // @ts-ignore JSX is not typed correctly in eslint
+            if ((idNode === null || idNode === void 0 ? void 0 : idNode.parent.type) === 'JSXExpressionContainer') {
+              context.report({
+                node: idNode.parent,
+                messageId: 'noDeprecatedUsage',
+                data: {
+                  import: "".concat(node.source.value),
+                  local: visuallyHiddenOrAssistive.local.name
+                },
+                fix: (0, _fixJsx.default)(source, idNode)
+              }); // this is either a styled usage OR mixin usage in a styled usage
+            } else if (idNode.parent.type === 'CallExpression') {
+              if ((0, _isNode.isStyledObjectNode)(idNode.parent) || (0, _isNode.isStyledTemplateNode)(idNode.parent)) {
+                context.report({
+                  node: idNode.parent,
+                  messageId: 'noDeprecatedUsage',
+                  data: {
+                    import: "".concat(node.source.value),
+                    local: visuallyHiddenOrAssistive.local.name
+                  },
+                  fix: (0, _fixVanilla.default)(source, idNode.parent)
+                });
+              }
+
+              if (idNode.parent.callee === idNode) {
+                context.report({
+                  node: idNode.parent,
+                  messageId: 'noDeprecatedUsage',
+                  data: {
+                    import: "".concat(node.source.value),
+                    local: visuallyHiddenOrAssistive.local.name
+                  },
+                  fix: (0, _fixVanilla.default)(source, (0, _isNode.getClosestNodeOfType)(idNode.parent, 'TaggedTemplateExpression'))
+                });
+              }
+            }
+          });
+        });
+        return context.report({
+          node: visuallyHiddenOrAssistive,
+          messageId: 'noDeprecated',
+          data: {
+            import: "".concat(node.source.value),
+            local: visuallyHiddenOrAssistive.local.name
+          }
+        });
+      },
+      CallExpression: function CallExpression(node) {
+        var _node$arguments$;
+
+        if (node.type !== 'CallExpression') {
+          return;
+        }
+
+        if (!(node.callee.type === 'MemberExpression' || node.callee.type === 'Identifier')) {
+          return;
+        }
+
+        var isStyled = (0, _isNode.isStyledObjectNode)(node);
+
+        if (node.callee.type === 'MemberExpression' && node.callee.object.type === 'Identifier' && node.callee.object.name !== 'styled') {
+          return;
+        }
+
+        if (node.callee.type === 'Identifier' && node.callee.name !== 'css') {
+          return;
+        } // This is an object style (probably)
+
+
+        if (node.arguments && ((_node$arguments$ = node.arguments[0]) === null || _node$arguments$ === void 0 ? void 0 : _node$arguments$.type) === 'ObjectExpression') {
+          var matchingScore = (0, _utils.getObjectLikeness)(node.arguments[0]);
+
+          if (matchingScore > 0.8) {
+            return context.report({
+              node: node.parent,
+              messageId: 'suggestion',
+              fix: isStyled ? (0, _fixVanilla.default)(source, node) : undefined
+            });
+          }
+        }
+
+        return null;
+      },
+      ObjectExpression: function ObjectExpression(node) {
+        if (node.parent.type === 'CallExpression') {
+          return;
+        }
+
+        var matchingScore = (0, _utils.getObjectLikeness)(node);
+
+        if (matchingScore > 0.8) {
+          return context.report({
+            node: node,
+            messageId: 'suggestion'
+          });
+        }
+      },
+      'TaggedTemplateExpression[tag.name="css"],TaggedTemplateExpression[tag.object.name="styled"]': function TaggedTemplateExpressionTagNameCssTaggedTemplateExpressionTagObjectNameStyled(node) {
+        if (node.type !== 'TaggedTemplateExpression') {
+          return;
+        }
+
+        var templateString = node.quasi.quasis.map(function (q) {
+          return q.value.raw;
+        }).join('');
+        var styleEntries = (0, _utils.makeTemplateLiteralIntoEntries)(templateString);
+
+        if (!styleEntries) {
+          return;
+        }
+
+        var count = (0, _utils.countMatchingKeyValues)(styleEntries.map(function (_ref) {
+          var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+              key = _ref2[0],
+              value = _ref2[1];
+
+          return {
+            key: key,
+            value: value
+          };
+        }));
+
+        if (count > 0.8) {
+          return context.report({
+            node: node,
+            messageId: 'suggestion',
+            fix: node.tag.type !== 'Identifier' ? (0, _fixVanilla.default)(source, node) : undefined
+          });
+        }
+      }
+    };
+  }
+};
+var _default = rule;
+exports.default = _default;