@atlaskit/eslint-plugin-design-system 8.13.1 → 8.14.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 8.14.0
+
+### Minor Changes
+
+- [#41884](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41884) [`862be3ee13b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/862be3ee13b) - Adds `no-css-tagged-template-expression` rule that disallows any `css` tagged template expressions that originate from `@emotion/react` and automatically converts them to the preferred call expression syntax.
+
 ## 8.13.1
 
 ### Patch Changes

package/README.md

@@ -54,6 +54,7 @@ module.exports = {
 | <a href="./src/rules/ensure-design-token-usage-preview/README.md">ensure-design-token-usage/preview</a>           | Enforces usage of pre-release design tokens rather than hard-coded values.                                                                                                                                                                                                                                          |             | Yes     | Yes         |
 | <a href="./src/rules/icon-label/README.md">icon-label</a>                                                         | Enforces accessible usage of icon labels when composed with Atlassian Design System components.                                                                                                                                                                                                                     | Yes         | Yes     |             |
 | <a href="./src/rules/no-banned-imports/README.md">no-banned-imports</a>                                           | Disallow importing banned modules.                                                                                                                                                                                                                                                                                  | Yes         |         |             |
+| <a href="./src/rules/no-css-tagged-template-expression/README.md">no-css-tagged-template-expression</a>           | Disallows any `css` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                          |             | Yes     |             |
 | <a href="./src/rules/no-deprecated-apis/README.md">no-deprecated-apis</a>                                         | Disallow using deprecated APIs.                                                                                                                                                                                                                                                                                     | Yes         |         |             |
 | <a href="./src/rules/no-deprecated-design-token-usage/README.md">no-deprecated-design-token-usage</a>             | Disallow using deprecated design tokens.                                                                                                                                                                                                                                                                            | Yes         | Yes     |             |
 | <a href="./src/rules/no-deprecated-imports/README.md">no-deprecated-imports</a>                                   | Disallow importing deprecated modules.                                                                                                                                                                                                                                                                              | Yes         |         |             |

package/constellation/index/usage.mdx

@@ -18,6 +18,7 @@ This plugin contains rules that should be used when working with the [Atlassian
 | <a href="#ensure-design-token-usage-preview">ensure-design-token-usage/preview</a>           | Enforces usage of pre-release design tokens rather than hard-coded values.                                                                                                                                                                                                                                          |             | Yes     | Yes         |
 | <a href="#icon-label">icon-label</a>                                                         | Enforces accessible usage of icon labels when composed with Atlassian Design System components.                                                                                                                                                                                                                     | Yes         | Yes     |             |
 | <a href="#no-banned-imports">no-banned-imports</a>                                           | Disallow importing banned modules.                                                                                                                                                                                                                                                                                  | Yes         |         |             |
+| <a href="#no-css-tagged-template-expression">no-css-tagged-template-expression</a>           | Disallows any `css` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                          |             | Yes     |             |
 | <a href="#no-deprecated-apis">no-deprecated-apis</a>                                         | Disallow using deprecated APIs.                                                                                                                                                                                                                                                                                     | Yes         |         |             |
 | <a href="#no-deprecated-design-token-usage">no-deprecated-design-token-usage</a>             | Disallow using deprecated design tokens.                                                                                                                                                                                                                                                                            | Yes         | Yes     |             |
 | <a href="#no-deprecated-imports">no-deprecated-imports</a>                                   | Disallow importing deprecated modules.                                                                                                                                                                                                                                                                              | Yes         |         |             |
@@ -283,6 +284,46 @@ import { Text } from '@atlaskit/ds-explorations';
                       ^^^^^^^^^^^^^^^^^^^^^^^^^
 ```
 
+## no-css-tagged-template-expression
+
+Disallows any `css` tagged template expressions that originate from `@emotion/react`, `@emotion/core`, `compiled/react` or `styled-components`.
+
+Tagged template expressions cannot be type safe and are difficult to parse correctly. Will auto fix ` css`` ` to the preferred `css({})` call expression syntax.
+
+Thank you to the [Compiled team for their rule](https://github.com/atlassian-labs/compiled/tree/master/packages/eslint-plugin/src/rules/no-css-tagged-template-expression) from which this was ported.
+
+<h3>Incorrect</h3>
+
+```js
+import { css } from '@emotion/react';
+
+css`
+  color: blue;
+`;
+
+const styles = css`
+  color: blue;
+  font-weight: 500;
+`;
+```
+
+<h3>Correct</h3>
+
+```js
+import { css } from '@emotion/react';
+
+css({ color: 'blue' });
+
+const styles = css({
+  color: 'blue',
+  fontWeight: 500,
+});
+```
+
+<h3>Limitations</h3>
+
+- Comments are not auto-fixable. You will need to manually convert usages containing functions.
+
 ## no-deprecated-apis
 
 Props across the Atlassian Design System can be deprecated when they are deemed no-longer fit for purporse or dangerous and risk effective use at scale.

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::a4007a35edc1c661f543508c2b005014>>
+ * @codegen <<SignedSource::594898d8c5dc8b9a5610d62e7f300a53>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -17,6 +17,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/ensure-design-token-usage/preview': 'warn',
     '@atlaskit/design-system/icon-label': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',
+    '@atlaskit/design-system/no-css-tagged-template-expression': 'error',
     '@atlaskit/design-system/no-deprecated-apis': 'error',
     '@atlaskit/design-system/no-deprecated-design-token-usage': 'warn',
     '@atlaskit/design-system/no-deprecated-imports': 'error',

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

@@ -10,6 +10,7 @@ var _ensureDesignTokenUsage = _interopRequireDefault(require("./ensure-design-to
 var _ensureDesignTokenUsagePreview = _interopRequireDefault(require("./ensure-design-token-usage-preview"));
 var _iconLabel = _interopRequireDefault(require("./icon-label"));
 var _noBannedImports = _interopRequireDefault(require("./no-banned-imports"));
+var _noCssTaggedTemplateExpression = _interopRequireDefault(require("./no-css-tagged-template-expression"));
 var _noDeprecatedApis = _interopRequireDefault(require("./no-deprecated-apis"));
 var _noDeprecatedDesignTokenUsage = _interopRequireDefault(require("./no-deprecated-design-token-usage"));
 var _noDeprecatedImports = _interopRequireDefault(require("./no-deprecated-imports"));
@@ -25,7 +26,7 @@ var _usePrimitives = _interopRequireDefault(require("./use-primitives"));
 var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c5844c54692156b8d604fd5994082abe>>
+ * @codegen <<SignedSource::8927e5adaec5639c9712dbfb26968de4>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -34,6 +35,7 @@ var _default = exports.default = {
   'ensure-design-token-usage/preview': _ensureDesignTokenUsagePreview.default,
   'icon-label': _iconLabel.default,
   'no-banned-imports': _noBannedImports.default,
+  'no-css-tagged-template-expression': _noCssTaggedTemplateExpression.default,
   'no-deprecated-apis': _noDeprecatedApis.default,
   'no-deprecated-design-token-usage': _noDeprecatedDesignTokenUsage.default,
   'no-deprecated-imports': _noDeprecatedImports.default,

package/dist/cjs/rules/no-css-tagged-template-expression/create-no-tagged-template-expression-rule/generate.js

@@ -0,0 +1,142 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generate = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+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; }
+// Original source from Compiled https://github.com/atlassian-labs/compiled/blob/master/packages/eslint-plugin/src/utils/create-no-tagged-template-expression-rule/generate.ts
+
+var createKey = function createKey(key) {
+  if (/^\w+$/g.test(key)) {
+    return key;
+  }
+
+  // Wrap the key in square brackets if the key includes a binding. i.e.`.foo ${BINDING_NAME} .bar`
+  if (key.charAt(0) === '`' && key.charAt(key.length - 1) === '`') {
+    return "[".concat(key, "]");
+  }
+
+  // Wrap the key in quotes if it uses unsafe characters
+  if (!key.includes('"')) {
+    return "\"".concat(key, "\"");
+  }
+  return "[`".concat(key, "`]");
+};
+var addQuotes = function addQuotes(literal) {
+  return literal[0] === "\"" ? "'".concat(literal, "'") : "\"".concat(literal, "\"");
+};
+var createValue = function createValue(value) {
+  var type = value.type;
+  if (type === 'expression') {
+    return value.expression.trim();
+  }
+  var literal = value.value;
+  return typeof literal === 'string' && literal[0] !== '`' ? addQuotes(literal) : literal;
+};
+var indent = function indent(offset, level) {
+  return ' '.repeat(offset + level * 2);
+};
+var generateBlock = function generateBlock(blocks, offset, level) {
+  var chars = '{' + '\n';
+  var _iterator = _createForOfIteratorHelper(blocks.entries()),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _step$value = (0, _slicedToArray2.default)(_step.value, 2),
+        i = _step$value[0],
+        block = _step$value[1];
+      chars += indent(offset, level + 1);
+      switch (block.type) {
+        case 'declaration':
+          {
+            chars += createKey(block.property) + ': ' + createValue(block.value);
+            break;
+          }
+        case 'rule':
+          {
+            chars += createKey(block.selector) + ': ' + generateArguments(block.declarations, offset, level + 1).trim();
+            break;
+          }
+        default:
+          break;
+      }
+      if (blocks.length > 1 && i < blocks.length - 1) {
+        chars += ',';
+        chars += '\n';
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  chars += '\n' + indent(offset, level) + '}';
+  return chars;
+};
+var generateArguments = function generateArguments(args, offset, level) {
+  var chars = '';
+  if (level > 1 && args.length > 1) {
+    chars += '[';
+  }
+  var _iterator2 = _createForOfIteratorHelper(args.entries()),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var _step2$value = (0, _slicedToArray2.default)(_step2.value, 2),
+        i = _step2$value[0],
+        arg = _step2$value[1];
+      switch (arg.type) {
+        case 'block':
+          {
+            if (args.length === 1) {
+              chars += generateBlock(arg.blocks, offset, level).trim();
+            } else {
+              chars += '\n';
+              chars += indent(offset, level + 1);
+              chars += generateBlock(arg.blocks, offset, level + 1).trim();
+            }
+            break;
+          }
+        case 'expression':
+          {
+            chars += '\n';
+            chars += indent(offset, level + 1);
+            chars += arg.expression;
+            break;
+          }
+        default:
+          break;
+      }
+      if (args.length > 1 && i < args.length - 1) {
+        chars += ',';
+      }
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  if (level > 1 && args.length > 1) {
+    chars += '\n';
+    chars += indent(offset, level);
+    chars += ']';
+  }
+  return chars;
+};
+var generate = exports.generate = function generate(args, offset) {
+  var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  var chars = '';
+  chars += '(';
+  chars += generateArguments(args, offset, level);
+  if (args.length > 1) {
+    chars += '\n';
+    chars += indent(offset, level);
+  }
+  chars += ')';
+  return chars;
+};

package/dist/cjs/rules/no-css-tagged-template-expression/create-no-tagged-template-expression-rule/get-tagged-template-expression-offset.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTaggedTemplateExpressionOffset = void 0;
+// Original source from Compiled https://github.com/atlassian-labs/compiled/blob/master/packages/eslint-plugin/src/utils/create-no-tagged-template-expression-rule/get-tagged-template-expression-offset.ts
+
+var getTaggedTemplateExpressionOffset = exports.getTaggedTemplateExpressionOffset = function getTaggedTemplateExpressionOffset(node) {
+  var parent = node.parent;
+  switch (parent.type || '') {
+    case 'ExportDefaultDeclaration':
+      {
+        return parent.loc.start.column;
+      }
+    case 'VariableDeclarator':
+      {
+        var maybeVariableDeclaration = parent.parent;
+        if (maybeVariableDeclaration.type === 'VariableDeclaration') {
+          var maybeExportNamedDeclaration = maybeVariableDeclaration.parent;
+          if (maybeExportNamedDeclaration.type === 'ExportNamedDeclaration') {
+            return maybeExportNamedDeclaration.loc.start.column;
+          } else {
+            return maybeVariableDeclaration.loc.start.column;
+          }
+        }
+        break;
+      }
+    default:
+      break;
+  }
+  return node.loc.start.column;
+};

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

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createNoTaggedTemplateExpressionRule = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _generate = require("./generate");
+var _getTaggedTemplateExpressionOffset = require("./get-tagged-template-expression-offset");
+var _toArguments = require("./to-arguments");
+// Original source from Compiled https://github.com/atlassian-labs/compiled/blob/master/packages/eslint-plugin/src/utils/create-no-tagged-template-expression-rule/index.ts
+
+var createNoTaggedTemplateExpressionRule = exports.createNoTaggedTemplateExpressionRule = function createNoTaggedTemplateExpressionRule(isUsage, messageId) {
+  return function (context) {
+    return {
+      TaggedTemplateExpression: function TaggedTemplateExpression(node) {
+        var _context$getScope = context.getScope(),
+          references = _context$getScope.references;
+        if (!isUsage(node.tag, references)) {
+          return;
+        }
+        context.report({
+          messageId: messageId,
+          node: node,
+          fix: /*#__PURE__*/_regenerator.default.mark(function fix(fixer) {
+            var quasi, source, args, oldCode, withoutQuasi, newCode;
+            return _regenerator.default.wrap(function fix$(_context) {
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  quasi = node.quasi;
+                  source = context.getSourceCode(); // TODO Eventually handle comments instead of skipping them
+                  // Skip auto-fixing comments
+                  if (!quasi.quasis.map(function (q) {
+                    return q.value.raw;
+                  }).join('').match(/\/\*[\s\S]*\*\//g)) {
+                    _context.next = 4;
+                    break;
+                  }
+                  return _context.abrupt("return");
+                case 4:
+                  if (!(!quasi.expressions.length && quasi.quasis.length === 1 && !quasi.quasis[0].value.raw.trim())) {
+                    _context.next = 8;
+                    break;
+                  }
+                  _context.next = 7;
+                  return fixer.replaceText(quasi, '({})');
+                case 7:
+                  return _context.abrupt("return");
+                case 8:
+                  args = (0, _toArguments.toArguments)(source, quasi); // Skip invalid CSS
+                  if (!(args.length < 1)) {
+                    _context.next = 11;
+                    break;
+                  }
+                  return _context.abrupt("return");
+                case 11:
+                  oldCode = source.getText(node); // Remove quasi:
+                  // styled.div<Props>`
+                  //    color: red;
+                  // `
+                  // becomes
+                  // styled.div<Props>
+                  withoutQuasi = oldCode.replace(source.getText(quasi), '');
+                  newCode = withoutQuasi +
+                  // Indent the arguments after the tagged template expression range
+                  (0, _generate.generate)(args, (0, _getTaggedTemplateExpressionOffset.getTaggedTemplateExpressionOffset)(node));
+                  if (!(oldCode === newCode)) {
+                    _context.next = 16;
+                    break;
+                  }
+                  return _context.abrupt("return");
+                case 16:
+                  _context.next = 18;
+                  return fixer.insertTextBefore(node, newCode);
+                case 18:
+                  _context.next = 20;
+                  return fixer.remove(node);
+                case 20:
+                case "end":
+                  return _context.stop();
+              }
+            }, fix);
+          })
+        });
+      }
+    };
+  };
+};

package/dist/cjs/rules/no-css-tagged-template-expression/create-no-tagged-template-expression-rule/to-arguments.js

@@ -0,0 +1,251 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toArguments = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
+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; }
+// Original source from Compiled https://github.com/atlassian-labs/compiled/blob/master/packages/eslint-plugin/src/utils/create-no-tagged-template-expression-rule/to-arguments.ts
+
+var getArguments = function getArguments(chars) {
+  var expressions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  if (!chars.trim().length && expressions) {
+    return expressions.map(function (_ref) {
+      var expression = _ref.expression;
+      return {
+        type: 'expression',
+        expression: expression
+      };
+    });
+  }
+  var args = [];
+  if (!chars.includes(':')) {
+    return args;
+  }
+
+  // Split the property and value
+  // e.g. `color: red` becomes ['color', 'red']
+  // also consider `background: url("https://some-url-b")`, which has a colon in the value.
+  var _chars$split = chars.split(':'),
+    _chars$split2 = (0, _toArray2.default)(_chars$split),
+    property = _chars$split2[0],
+    v = _chars$split2.slice(1);
+  var value = v.join(':');
+
+  // Extract any expressions listed before the property that were not delimited by a ;
+  if (expressions.length) {
+    var lastPropertyRe = /[\w-]+(?![\s\S]*[\w-]+)/g;
+    var prop = lastPropertyRe.exec(property);
+    if (prop) {
+      var i = 0;
+      while (expressions[i] && expressions[i].pos < prop.index) {
+        args.push({
+          type: 'expression',
+          expression: expressions[i].expression
+        });
+        i++;
+      }
+      // Remove any expressions that have been added as an arg as they are not part of the declaration
+      expressions = expressions.slice(i);
+    }
+  }
+  var getValue = function getValue() {
+    if (!value.trim().length && expressions.length) {
+      return {
+        type: 'expression',
+        expression: expressions.map(function (e) {
+          return e.expression;
+        }).join('')
+      };
+    }
+    if (expressions.length) {
+      // When there are expressions in the value, insert the expressions and wrap the value in a template literal
+      var val = chars;
+      var offset = 1;
+      var _iterator = _createForOfIteratorHelper(expressions),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var _step$value = _step.value,
+            expression = _step$value.expression,
+            pos = _step$value.pos;
+          var interpolation = '${' + expression + '}';
+          val = val.substring(0, pos + offset) + interpolation + val.substring(pos + offset);
+          offset += interpolation.length;
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      return {
+        type: 'literal',
+        value: '`' + val.replace(property + ':', '').trim() + '`'
+      };
+    }
+    return {
+      type: 'literal',
+      value: isNaN(Number(value)) ? value.trim() : parseFloat(value)
+    };
+  };
+  args.push({
+    type: 'declaration',
+    // Make the property camelCase
+    property: property.trim().replace(/-[a-z]/g, function (match) {
+      return match[1].toUpperCase();
+    }),
+    value: getValue()
+  });
+  return args;
+};
+var getSelectorValue = function getSelectorValue(chars, expressions) {
+  // If no variable, returns chars immediately.
+  // i.e. `.foo { color: red }` returns '.foo'
+  if (expressions.length === 0) {
+    return chars.trim();
+  }
+  var val = chars;
+  var offset = 1;
+  var _iterator2 = _createForOfIteratorHelper(expressions),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var _step2$value = _step2.value,
+        expression = _step2$value.expression,
+        pos = _step2$value.pos;
+      var interpolation = '${' + expression + '}';
+      val = val.substring(0, pos + offset) + interpolation + val.substring(pos + offset);
+      offset += interpolation.length;
+    }
+
+    // For simplicity, use template literals even if the whole selector is a variable
+    // i.e. the output of `${VAR} { color: red }` is { [`${VAR}`]: { color: "red" } }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  return '`' + val.trim() + '`';
+};
+var toArguments = exports.toArguments = function toArguments(source, template) {
+  var args = [];
+  var state = {
+    chars: '',
+    current: {
+      parent: undefined,
+      args: args
+    },
+    expressions: []
+  };
+  var addArgument = function addArgument(argument) {
+    var args = state.current.args;
+    if (argument.type === 'expression') {
+      if (argument.expression.length) {
+        args.push(argument);
+      }
+      return;
+    }
+    var lastArg = args[state.current.args.length - 1];
+    if ((lastArg === null || lastArg === void 0 ? void 0 : lastArg.type) === 'block') {
+      lastArg.blocks.push(argument);
+    } else {
+      args.push({
+        type: 'block',
+        blocks: [argument]
+      });
+    }
+  };
+  var addArguments = function addArguments() {
+    var args = getArguments(state.chars, state.expressions);
+    var _iterator3 = _createForOfIteratorHelper(args),
+      _step3;
+    try {
+      for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+        var arg = _step3.value;
+        addArgument(arg);
+      }
+    } catch (err) {
+      _iterator3.e(err);
+    } finally {
+      _iterator3.f();
+    }
+  };
+  var _iterator4 = _createForOfIteratorHelper(template.quasis.entries()),
+    _step4;
+  try {
+    for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+      var _step4$value = (0, _slicedToArray2.default)(_step4.value, 2),
+        i = _step4$value[0],
+        quasi = _step4$value[1];
+      // Deal with selectors across multiple lines
+      var styleTemplateElement = quasi.value.raw.replace(/(\r\n|\n|\r)/gm, ' ').replace(/\s+/g, ' ');
+      var _iterator5 = _createForOfIteratorHelper(styleTemplateElement),
+        _step5;
+      try {
+        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+          var char = _step5.value;
+          switch (char) {
+            case '{':
+              {
+                var declarations = [];
+                addArgument({
+                  type: 'rule',
+                  selector: getSelectorValue(state.chars, state.expressions),
+                  declarations: declarations
+                });
+                state.chars = '';
+                state.current = {
+                  parent: state.current,
+                  args: declarations
+                };
+                state.expressions = [];
+                break;
+              }
+            case '}':
+              {
+                // Add any leftover arguments that were not delimited
+                addArguments();
+                state.chars = '';
+                state.current = state.current.parent;
+                state.expressions = [];
+                break;
+              }
+            case ';':
+              {
+                addArguments();
+                state.chars = '';
+                state.expressions = [];
+                break;
+              }
+            default:
+              state.chars += char;
+              break;
+          }
+        }
+      } catch (err) {
+        _iterator5.e(err);
+      } finally {
+        _iterator5.f();
+      }
+      if (i < template.expressions.length) {
+        state.expressions.push({
+          pos: state.chars.length - 1,
+          expression: source.getText(template.expressions[i])
+        });
+      }
+    }
+
+    // Add any leftover arguments that were not delimited
+  } catch (err) {
+    _iterator4.e(err);
+  } finally {
+    _iterator4.f();
+  }
+  addArguments();
+  return args;
+};

package/dist/cjs/rules/no-css-tagged-template-expression/create-no-tagged-template-expression-rule/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});