Space around class_list

.changeset/dirty-birds-warn.md

@@ -0,0 +1,6 @@
+---
+'@shopify/theme-check-common': minor
+'@shopify/theme-check-node': minor
+---
+
+Add SpaceAroundClassList check

docs/contributing.md

@@ -104,7 +104,9 @@ If ever you want to see how the VS Code extension or playground would behave bef
     theme-docs download
     ```
 
-6. Proceed to debug the VS Code extension or playground as usual.
+6. Note that you may have to delete the cached data directory (`~/Library/Caches/theme-liquid-docs-nodejs`) in order to see your changes.
+
+7. Proceed to debug the VS Code extension or playground as usual.
 
 ## Submitting a Pull Request
 

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

@@ -23,6 +23,7 @@ import { PaginationSize } from './pagination-size';
 import { ParserBlockingScript } from './parser-blocking-script';
 import { RemoteAsset } from './remote-asset';
 import { RequiredLayoutThemeObject } from './required-layout-theme-object';
+import { SpaceAroundClassList } from './space-around-class_list';
 import { TranslationKeyExists } from './translation-key-exists';
 import { UnclosedHTMLElement } from './unclosed-html-element';
 import { UndefinedObject } from './undefined-object';
@@ -59,6 +60,7 @@ export const allChecks: (LiquidCheckDefinition | JSONCheckDefinition)[] = [
   ParserBlockingScript,
   RemoteAsset,
   RequiredLayoutThemeObject,
+  SpaceAroundClassList,
   TranslationKeyExists,
   UnclosedHTMLElement,
   UndefinedObject,

packages/theme-check-common/src/checks/space-around-class_list/index.spec.ts

@@ -0,0 +1,162 @@
+import { expect, describe, it } from 'vitest';
+import { SpaceAroundClassList } from '.';
+import { runLiquidCheck, highlightedOffenses } from '../../test';
+
+describe('Module: SpaceAroundClassList', () => {
+  it('allows the happy path', async () => {
+    const file = `<div class="{{ block.settings | class_list }}">
+      content  
+    </div>
+    `;
+
+    const offenses = await runLiquidCheck(SpaceAroundClassList, file);
+
+    expect(offenses).to.have.length(0);
+  });
+
+  describe('before class_list', () => {
+    it('should report an offense when missing a space before class_list', async () => {
+      const file = `<div class="other-class{{ block.settings | class_list }}">
+        content
+      </div>
+      `;
+
+      const offenses = await runLiquidCheck(SpaceAroundClassList, file);
+
+      expect(offenses).to.have.length(1);
+      expect(offenses[0].message).toEqual(
+        `Missing a space before using the class_list filter: 'other-class{{ block.settings | class_list'`,
+      );
+
+      const highlights = highlightedOffenses({ 'file.liquid': file }, offenses);
+      expect(highlights).toEqual(['s']);
+    });
+
+    it('supports classes on new lines', async () => {
+      const file = `<div class="
+      other-class{{ block.settings | class_list }}">
+        content  
+      </div>
+      `;
+
+      const offenses = await runLiquidCheck(SpaceAroundClassList, file);
+
+      expect(offenses).to.have.length(1);
+      expect(offenses[0].message).toEqual(
+        `Missing a space before using the class_list filter: 'other-class{{ block.settings | class_list'`,
+      );
+
+      const highlights = highlightedOffenses({ 'file.liquid': file }, offenses);
+      expect(highlights).toEqual(['s']);
+    });
+
+    it('supports arbitrary whitespace', async () => {
+      const file = `<div class="other-class{{block.settings  |    class_list}}">
+        content
+      </div>
+      `;
+
+      const offenses = await runLiquidCheck(SpaceAroundClassList, file);
+
+      expect(offenses).to.have.length(1);
+      expect(offenses[0].message).toEqual(
+        `Missing a space before using the class_list filter: 'other-class{{block.settings  |    class_list'`,
+      );
+
+      const highlights = highlightedOffenses({ 'file.liquid': file }, offenses);
+      expect(highlights).toEqual(['s']);
+    });
+
+    it('catches between multiple class_list filters', async () => {
+      const file = `<div class="
+      {{ block.settings.spacing | class_list }}
+      oh-snap{{ block.settings.typography | class_list }}">
+        content
+      </div>
+      `;
+
+      const offenses = await runLiquidCheck(SpaceAroundClassList, file);
+      expect(offenses).to.have.length(1);
+
+      expect(offenses[0].message).toEqual(
+        `Missing a space before using the class_list filter: 'oh-snap{{ block.settings.typography | class_list'`,
+      );
+
+      const highlights = highlightedOffenses({ 'file.liquid': file }, offenses);
+      expect(highlights).toEqual(['p']);
+    });
+  });
+
+  describe('after class_list', () => {
+    it('should report an offense when missing a space after class_list', async () => {
+      const file = `<div class="{{ block.settings | class_list }}other-class">
+        content  
+      </div>
+      `;
+
+      const offenses = await runLiquidCheck(SpaceAroundClassList, file);
+
+      expect(offenses).to.have.length(1);
+      expect(offenses[0].message).toEqual(
+        `Missing a space after using the class_list filter: 'block.settings | class_list }}other-class'`,
+      );
+
+      const highlights = highlightedOffenses({ 'file.liquid': file }, offenses);
+      expect(highlights).toEqual(['o']);
+    });
+
+    it('supports classes on new lines', async () => {
+      const file = `<div class="
+      {{ block.settings | class_list }}other-class">
+        content  
+      </div>
+      `;
+
+      const offenses = await runLiquidCheck(SpaceAroundClassList, file);
+
+      expect(offenses).to.have.length(1);
+      expect(offenses[0].message).toEqual(
+        `Missing a space after using the class_list filter: 'block.settings | class_list }}other-class'`,
+      );
+
+      const highlights = highlightedOffenses({ 'file.liquid': file }, offenses);
+      expect(highlights).toEqual(['o']);
+    });
+
+    it('supports arbitrary whitespace', async () => {
+      const file = `<div class="{{block.settings|    class_list}}other-class">
+        content
+      </div>
+      `;
+
+      const offenses = await runLiquidCheck(SpaceAroundClassList, file);
+
+      expect(offenses).to.have.length(1);
+      expect(offenses[0].message).toEqual(
+        `Missing a space after using the class_list filter: 'block.settings|    class_list}}other-class'`,
+      );
+
+      const highlights = highlightedOffenses({ 'file.liquid': file }, offenses);
+      expect(highlights).toEqual(['o']);
+    });
+
+    it('catches between multiple class_list filters', async () => {
+      const file = `<div class="
+      {{ block.settings.spacing | class_list }}oh-snap
+      {{ block.settings.typography | class_list }}">
+        content
+      </div>
+      `;
+
+      const offenses = await runLiquidCheck(SpaceAroundClassList, file);
+      expect(offenses).to.have.length(1);
+
+      expect(offenses[0].message).toEqual(
+        `Missing a space after using the class_list filter: 'block.settings.spacing | class_list }}oh-snap'`,
+      );
+
+      const highlights = highlightedOffenses({ 'file.liquid': file }, offenses);
+      expect(highlights).toEqual(['o']);
+    });
+  });
+});

packages/theme-check-common/src/checks/space-around-class_list/index.ts

@@ -0,0 +1,124 @@
+import { LiquidHtmlNode, NodeTypes } from '@shopify/liquid-html-parser';
+import { LiquidCheckDefinition, Severity, SourceCodeType } from '../../types';
+
+export const SpaceAroundClassList: LiquidCheckDefinition = {
+  meta: {
+    code: 'SpaceAroundClassList',
+    aliases: ['SpaceAroundClassList'],
+    name: 'Space Around Class List',
+    docs: {
+      description: 'Warns you when there is no space before or after using the class_list filter',
+      recommended: true,
+      url: 'https://shopify.dev/docs/themes/tools/theme-check/checks/space-around-class_list',
+    },
+    type: SourceCodeType.LiquidHtml,
+    severity: Severity.ERROR,
+    schema: {},
+    targets: [],
+  },
+
+  create(context) {
+    return {
+      async LiquidFilter(node, ancestors) {
+        if (node.name !== 'class_list') {
+          return;
+        }
+
+        const classAttribute = ancestors.find(
+          (ancestor) =>
+            ancestor.type === NodeTypes.AttrDoubleQuoted ||
+            ancestor.type === NodeTypes.AttrSingleQuoted,
+        );
+
+        if (!classAttribute) {
+          return;
+        }
+
+        const classAttributeContent =
+          classAttribute.source.slice(classAttribute.position.start, classAttribute.position.end) ||
+          '';
+
+        // check for missing space after class_list
+        const afterRegex = /([a-zA-Z0-9._-]+)\s*\|\s*class_list\s*}}([a-zA-Z0-9._-]+)/gm;
+        const afterMatches = [...classAttributeContent.matchAll(afterRegex)];
+
+        for (const match of afterMatches) {
+          if (match.index === undefined) {
+            continue;
+          }
+
+          const styleSetting = getStyleSetting(ancestors);
+
+          if (styleSetting !== match[1]) {
+            continue;
+          }
+
+          const bracketIndex = match[0].indexOf('}}');
+          const errorPosition = classAttribute.position.start + match.index + bracketIndex + 2;
+
+          context.report({
+            message: `Missing a space after using the class_list filter: '${match[0]}'`,
+            startIndex: errorPosition,
+            endIndex: errorPosition + 1,
+            suggest: [
+              {
+                message: 'Add a space after the class_list filter',
+                fix(corrector) {
+                  corrector.insert(errorPosition, ' ');
+                },
+              },
+            ],
+          });
+        }
+
+        // check for missing space before class_list
+        const beforeRegex = /([a-zA-Z0-9._-]+){{\s*([a-zA-Z0-9._-]+)\s*\|\s*class_list/gm;
+        const beforeMatches = [...classAttributeContent.matchAll(beforeRegex)];
+
+        for (const match of beforeMatches) {
+          if (match.index === undefined) {
+            continue;
+          }
+
+          const styleSetting = getStyleSetting(ancestors);
+
+          if (styleSetting !== match[2]) {
+            continue;
+          }
+
+          const liquidVariableOutput = ancestors.find(
+            (ancestor) => ancestor.type === NodeTypes.LiquidVariableOutput,
+          );
+
+          if (!liquidVariableOutput) {
+            continue;
+          }
+
+          const errorPosition = liquidVariableOutput?.position.start - 1;
+
+          context.report({
+            message: `Missing a space before using the class_list filter: '${match[0]}'`,
+            startIndex: errorPosition,
+            endIndex: errorPosition + 1,
+            suggest: [
+              {
+                message: 'Add a space before the class_list filter',
+                fix(corrector) {
+                  corrector.insert(errorPosition + 1, ' ');
+                },
+              },
+            ],
+          });
+        }
+      },
+    };
+  },
+};
+
+function getStyleSetting(ancestors: LiquidHtmlNode[]) {
+  const liquidVariable = ancestors.find((ancestor) => ancestor.type === NodeTypes.LiquidVariable);
+  const liquidVariableContent =
+    liquidVariable?.source.slice(liquidVariable.position.start, liquidVariable.position.end) || '';
+
+  return liquidVariableContent.split('|')[0]?.trim();
+}

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

@@ -79,6 +79,9 @@ RemoteAsset:
 RequiredLayoutThemeObject:
   enabled: true
   severity: 0
+SpaceAroundClassList:
+  enabled: true
+  severity: 0
 TranslationKeyExists:
   enabled: true
   severity: 0

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

@@ -60,6 +60,9 @@ RemoteAsset:
 RequiredLayoutThemeObject:
   enabled: true
   severity: 0
+SpaceAroundClassList:
+  enabled: true
+  severity: 0
 TranslationKeyExists:
   enabled: true
   severity: 0