InvalidComparisonSyntax

Author: karreiro

packages/theme-check-common/src/checks/index.ts

@@ -57,6 +57,7 @@ import { VariableName } from './variable-name';
 import { AppBlockMissingSchema } from './app-block-missing-schema';
 import { UniqueSettingIds } from './unique-settings-id';
 import { DuplicateRenderSnippetParams } from './duplicate-render-snippet-params';
+import { InvalidComparisonSyntax } from './invalid-comparison-syntax';
 
 export const allChecks: (LiquidCheckDefinition | JSONCheckDefinition)[] = [
   AppBlockValidTags,
@@ -70,12 +71,13 @@ export const allChecks: (LiquidCheckDefinition | JSONCheckDefinition)[] = [
   CdnPreconnect,
   ContentForHeaderModification,
   DeprecateBgsizes,
+  DeprecateLazysizes,
   DeprecatedFilter,
   DeprecatedTag,
-  DeprecateLazysizes,
   DuplicateRenderSnippetParams,
   EmptyBlockContent,
   ImgWidthAndHeight,
+  InvalidComparisonSyntax,
   JSONMissingBlock,
   JSONSyntaxError,
   LiquidFreeSettings,

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

@@ -0,0 +1,32 @@
+import { expect, describe, it } from 'vitest';
+import { highlightedOffenses, runLiquidCheck } from '../../test';
+import { InvalidComparisonSyntax } from './index';
+
+describe('Module: InvalidComparisonSyntax', () => {
+  it('should report an offense an invalid token is used', async () => {
+    const sourceCode = `
+      {% if a > b foobar %}
+      {% endif %}
+    `;
+    const offenses = await runLiquidCheck(InvalidComparisonSyntax, sourceCode);
+
+    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

@@ -0,0 +1,64 @@
+import { LiquidCheckDefinition, Severity, SourceCodeType } from '../../types';
+
+export const InvalidComparisonSyntax: LiquidCheckDefinition = {
+  meta: {
+    code: 'InvalidComparisonSyntax',
+    name: 'Invalid syntax after comparison operator',
+    docs: {
+      description: 'Ensures comparison operators in Liquid if statements follow valid syntax',
+      recommended: true,
+      url: 'https://shopify.dev/docs/storefronts/themes/tools/theme-check/checks/invalid-comparison',
+    },
+    type: SourceCodeType.LiquidHtml,
+    severity: Severity.ERROR,
+    schema: {},
+    targets: [],
+  },
+
+  create(context) {
+    return {
+      async LiquidTag(node) {
+        if (node.name !== 'if' && node.name !== 'elsif' && node.name !== 'unless') {
+          return;
+        }
+
+        const markup = node.markup.toString();
+
+        const regex =
+          /(>=|<=|>|<|==|!=)\s+([^\s]+)\s+([^\s]+)(?!\s+(and|or|%}|contains|startswith|endswith))/g;
+
+        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;
+
+            context.report({
+              message: `Invalid token '${invalidToken}' after comparison`,
+              startIndex,
+              endIndex,
+              suggest: [
+                {
+                  message: `Remove '${invalidToken}'`,
+                  fix: (corrector) => {
+                    corrector.remove(startIndex, endIndex + 1);
+                  },
+                },
+              ],
+            });
+          }
+        }
+      },
+    };
+  },
+};
+
+function isValidComparisonConnector(token: string): boolean {
+  const validConnectors = ['and', 'or', '%}', 'contains', 'startswith', 'endswith'];
+  return validConnectors.some((connector) => token.includes(connector));
+}

packages/theme-check-node/configs/all.yml

@@ -61,6 +61,9 @@ EmptyBlockContent:
 ImgWidthAndHeight:
   enabled: true
   severity: 0
+InvalidComparisonSyntax:
+  enabled: true
+  severity: 0
 JSONMissingBlock:
   enabled: true
   severity: 0

packages/theme-check-node/configs/recommended.yml

@@ -39,6 +39,9 @@ EmptyBlockContent:
 ImgWidthAndHeight:
   enabled: true
   severity: 0
+InvalidComparisonSyntax:
+  enabled: true
+  severity: 0
 JSONMissingBlock:
   enabled: true
   severity: 0