[PR feedback] lint *all* template literals, not just css``

- since we have several Emotion utilities that pass back raw ``s instead of css``
elastic · Aug 18, 2022 · 172b3b8 · 172b3b8
1 parent a0b5625
commit 172b3b8
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 16 deletions.
diff --git a/scripts/eslint-plugin/css_logical_properties.js b/scripts/eslint-plugin/css_logical_properties.js
@@ -35,20 +35,18 @@ module.exports = {
   },
   create: function (context) {
     return {
-      TaggedTemplateExpression(node) {
-        if (node.tag?.name !== 'css') return; // We only want to check Emotion css`` template literals
-
-        const templateContents = node.quasi?.quasis || [];
-        templateContents.forEach((cssNode) => {
-          const stringLiteral = cssNode?.value?.raw;
+      TemplateLiteral(node) {
+        const templateContents = node.quasis || [];
+        templateContents.forEach((quasi) => {
+          const stringLiteral = quasi?.value?.raw;
           if (!stringLiteral) return;
 
           findOccurrences(regex, stringLiteral).forEach(
             ({ match, lineNumber, column }) => {
               const property = match.groups.property || match.groups.value;
               const whitespace = match.groups.whitespace?.length || 0;
 
-              const lineStart = cssNode.loc.start.line + lineNumber;
+              const lineStart = quasi.loc.start.line + lineNumber;
               const columnStart = column + whitespace;
 
               context.report({
@@ -67,8 +65,8 @@ module.exports = {
                   : 'preferLogicalProperty',
                 data: { property },
                 fix: function (fixer) {
-                  const cssNodeStart = cssNode.range[0] + 1; // Account for "css`"
-                  const indexStart = cssNodeStart + match.index + whitespace;
+                  const literalStart = quasi.range[0] + 1; // Account for backtick
+                  const indexStart = literalStart + match.index + whitespace;
 
                   return fixer.replaceTextRange(
                     [indexStart, indexStart + property.length],

diff --git a/scripts/eslint-plugin/css_logical_properties.test.js b/scripts/eslint-plugin/css_logical_properties.test.js
@@ -10,10 +10,8 @@ const valid = [
     inline-size: 50px;
     inline-start-end: 10px;
   \``,
-  // This is not in css``, so it's fine
-  '`width: 50px; left: 10px;`',
   // Make sure we don't incorrectly catch similar properties that do not have logical equivalents
-  `css\`
+  `\`
     line-height: 20px;
     border-width: 1px;
     scrollbar-width: 30px
@@ -27,8 +25,8 @@ const invalid = [
     errors: [{ messageId: 'preferLogicalProperty' }],
   },
   {
-    code: 'css`max-height: 50px;`',
-    output: 'css`max-block-size: 50px;`',
+    code: '`max-height: 50px;`',
+    output: '`max-block-size: 50px;`',
     errors: [{ messageId: 'preferLogicalProperty' }],
   },
   {
@@ -37,8 +35,8 @@ const invalid = [
     errors: [{ messageId: 'preferLogicalProperty' }],
   },
   {
-    code: 'css`min-width: 50px;`',
-    output: 'css`min-inline-size: 50px;`',
+    code: '`min-width: 50px;`',
+    output: '`min-inline-size: 50px;`',
     errors: [{ messageId: 'preferLogicalProperty' }],
   },
   {