InvalidComparisonSyntax

Author: karreiro

packages/theme-check-common/src/checks/invalid-comparison-syntax/index.spec.ts

@@ -3,7 +3,7 @@ import { highlightedOffenses, runLiquidCheck } from '../../test';
 import { InvalidComparisonSyntax } from './index';
 
 describe('Module: InvalidComparisonSyntax', () => {
-  it('should report an offense when include tag is used', async () => {
+  it('should report an offense an invalid token is used', async () => {
     const sourceCode = `
       {% if a > b foobar %}
       {% endif %}
@@ -13,4 +13,20 @@ describe('Module: InvalidComparisonSyntax', () => {
     expect(offenses).toHaveLength(1);
     expect(offenses[0].message).toEqual(`Invalid token 'foobar' after comparison`);
   });
+
+  it('should suggest removing the invalid token', async () => {
+    const sourceCode = `
+      {% if a > b foobar %}
+      {% endif %}
+    `;
+    const offenses = await runLiquidCheck(InvalidComparisonSyntax, sourceCode);
+
+    expect(offenses).toHaveLength(1);
+
+    expect(offenses[0]!.suggest![0]!.message).toEqual(`Remove 'foobar'`);
+
+    const highlights = highlightedOffenses({ 'file.liquid': sourceCode }, offenses);
+    expect(highlights).toHaveLength(1);
+    expect(highlights[0]).toBe('foobar');
+  });
 });

packages/theme-check-common/src/checks/invalid-comparison-syntax/index.ts

@@ -22,27 +22,31 @@ export const InvalidComparisonSyntax: LiquidCheckDefinition = {
           return;
         }
 
-        // We need to examine the markup string directly
         const markup = node.markup.toString();
 
-        // Find the offsets of any invalid tokens after comparisons
-        const positions = findInvalidTokenPositionsAfterComparisons(markup);
+        const regex =
+          /(>=|<=|>|<|==|!=)\s+([^\s]+)\s+([^\s]+)(?!\s+(and|or|%}|contains|startswith|endswith))/g;
 
-        if (positions.length > 0) {
-          // Calculate markup position in the source
-          const markupStart = node.position.start + (node.name.length + 3); // {% + name + space
+        let match;
+        while ((match = regex.exec(markup)) !== null) {
+          const invalidToken = match[3];
+
+          if (!isValidComparisonConnector(invalidToken)) {
+            const invalidTokenOffset = match.index + match[0].lastIndexOf(invalidToken);
+
+            const markupStart = node.position.start + node.name.length + 3;
+            const startIndex = markupStart + invalidTokenOffset + 1;
+            const endIndex = startIndex + invalidToken.length;
 
-          // Report each invalid token
-          for (const pos of positions) {
             context.report({
-              message: `Invalid token '${pos.token}' after comparison`,
-              startIndex: markupStart + pos.start,
-              endIndex: markupStart + pos.end,
+              message: `Invalid token '${invalidToken}' after comparison`,
+              startIndex,
+              endIndex,
               suggest: [
                 {
-                  message: `Remove '${pos.token}'`,
+                  message: `Remove '${invalidToken}'`,
                   fix: (corrector) => {
-                    corrector.remove(markupStart + pos.start, markupStart + pos.end);
+                    corrector.remove(startIndex, endIndex + 1);
                   },
                 },
               ],
@@ -54,37 +58,7 @@ export const InvalidComparisonSyntax: LiquidCheckDefinition = {
   },
 };
 
-// Helper function to find all invalid tokens after comparisons in the markup
-function findInvalidTokenPositionsAfterComparisons(markup) {
-  const positions = [];
-
-  // Regex to find comparison operations with potentially invalid tokens after them
-  const regex =
-    /(>=|<=|>|<|==|!=)\s+([^\s]+)\s+(\w+)(?!\s+(and|or|%}|contains|startswith|endswith))/g;
-
-  let match;
-  while ((match = regex.exec(markup)) !== null) {
-    const invalidToken = match[3];
-
-    if (!isValidComparisonConnector(invalidToken)) {
-      // Find the position of the token within the match
-      const matchStart = match.index;
-      const beforeInvalidToken = match[0].substring(0, match[0].lastIndexOf(invalidToken));
-      const tokenStart = matchStart + beforeInvalidToken.length;
-      const tokenEnd = tokenStart + invalidToken.length;
-
-      positions.push({
-        token: invalidToken,
-        start: tokenStart,
-        end: tokenEnd,
-      });
-    }
-  }
-
-  return positions;
-}
-
-function isValidComparisonConnector(token) {
+function isValidComparisonConnector(token: string): boolean {
   const validConnectors = ['and', 'or', '%}', 'contains', 'startswith', 'endswith'];
   return validConnectors.some((connector) => token.includes(connector));
 }