@platformos/platformos-check-common 0.0.2

package/src/checks/schema-presets-static-blocks/index.ts

@@ -0,0 +1,126 @@
+import { NamedTags, NodeTypes } from '@platformos/liquid-html-parser';
+import { getLocEnd, getLocStart, nodeAtPath } from '../../json';
+import { getSchema } from '../../to-schema';
+import { ArrayNode, LiquidCheckDefinition, Severity, SourceCodeType } from '../../types';
+import { isContentForBlock } from '../../utils/markup';
+
+export const SchemaPresetsStaticBlocks: LiquidCheckDefinition = {
+  meta: {
+    code: 'SchemaPresetsStaticBlocks',
+    name: 'Ensure the preset static blocks are used in the liquid',
+    docs: {
+      description:
+        'Warns if a preset static block does not have a corresponding content_for "block" tag.',
+      recommended: true,
+      url: 'https://shopify.dev/docs/storefronts/themes/tools/theme-check/checks/schema-presets-static-blocks',
+    },
+    type: SourceCodeType.LiquidHtml,
+    severity: Severity.ERROR,
+    schema: {},
+    targets: [],
+  },
+
+  create(context) {
+    type contentForBlock = {
+      id: string;
+      type: string;
+    };
+    type StaticBlock = {
+      id: string;
+      type: string;
+      startIndex: number;
+      endIndex: number;
+    };
+    let contentForBlockList: contentForBlock[] = [];
+    let staticBlockList: StaticBlock[] = [];
+    let offset: number = 0;
+
+    function checkStaticBlocks() {
+      staticBlockList.forEach((block) => {
+        if (
+          !contentForBlockList.some(
+            (contentBlock) => contentBlock.id === block.id && contentBlock.type === block.type,
+          )
+        ) {
+          context.report({
+            message: `Static block ${block.id} is missing a corresponding content_for "block" tag.`,
+            startIndex: block.startIndex,
+            endIndex: block.endIndex,
+          });
+        }
+      });
+    }
+
+    return {
+      async LiquidTag(node) {
+        // Early return if not a content_for block tag
+        if (node.name !== NamedTags.content_for || !isContentForBlock(node.markup)) return;
+
+        // Extract id and type from markup args
+        const idValue = node.markup.args.find((arg) => arg.name === 'id')?.value;
+        const typeArg = node.markup.args.find((arg) => arg.name === 'type')?.value;
+        if (!typeArg || typeArg.type !== NodeTypes.String) {
+          return; // covered by VariableContentForArguments
+        }
+        const typeValue = typeArg.value;
+
+        // Add to list if valid string id
+        if (idValue?.type === NodeTypes.String) {
+          contentForBlockList.push({ id: idValue.value, type: typeValue });
+        }
+      },
+
+      async LiquidRawTag(node) {
+        // when we get the schema tag, get the list of static blocks from each preset
+        if (node.name === 'schema' && node.body.kind === 'json') {
+          offset = node.blockStartPosition.end;
+          const schema = await getSchema(context);
+          const { validSchema, ast } = schema ?? {};
+          if (!validSchema || validSchema instanceof Error) return;
+          if (!ast || ast instanceof Error) return;
+
+          const presets = validSchema.presets;
+          if (!presets) return;
+
+          presets.forEach((preset, index) => {
+            if ('blocks' in preset && preset.blocks) {
+              let ast_path: any[] = ['presets', index, 'blocks'];
+              // blocks as an array
+              if (Array.isArray(preset.blocks)) {
+                preset.blocks.forEach((block, block_index) => {
+                  if (block.static === true && block.id) {
+                    let node = nodeAtPath(ast, ast_path.concat([block_index]))! as ArrayNode;
+                    staticBlockList.push({
+                      id: block.id,
+                      type: block.type,
+                      startIndex: offset + getLocStart(node),
+                      endIndex: offset + getLocEnd(node),
+                    });
+                  }
+                });
+              }
+              // blocks as an object
+              else if (typeof preset.blocks === 'object') {
+                Object.entries(preset.blocks).forEach(([block_id, block]) => {
+                  if (block.static === true) {
+                    let node = nodeAtPath(ast, ast_path.concat(block_id))! as ArrayNode;
+                    staticBlockList.push({
+                      id: block_id,
+                      type: block.type,
+                      startIndex: offset + getLocStart(node),
+                      endIndex: offset + getLocEnd(node),
+                    });
+                  }
+                });
+              }
+            }
+          });
+        }
+      },
+
+      async onCodePathEnd() {
+        checkStaticBlocks();
+      },
+    };
+  },
+};

package/src/checks/static-stylesheet-and-javascript-tags/index.spec.ts

@@ -0,0 +1,257 @@
+import { check, highlightedOffenses } from '../../test';
+import { expect, describe, it } from 'vitest';
+import { StaticStylesheetAndJavascriptTags } from './index';
+
+describe('Module: StaticStylesheetAndJavascriptTags', () => {
+  it('should not report errors for static CSS content in stylesheet tags', async () => {
+    const theme = {
+      'templates/test.liquid': `
+        {% stylesheet %}
+          .button {
+            background-color: blue;
+            color: white;
+            padding: 10px 20px;
+          }
+        {% endstylesheet %}
+      `,
+    };
+
+    const offenses = await check(theme, [StaticStylesheetAndJavascriptTags]);
+    expect(offenses).to.have.length(0);
+  });
+
+  it('should not report errors for static JavaScript content in javascript tags', async () => {
+    const theme = {
+      'templates/test.liquid': `
+        {% javascript %}
+          function greet(name) {
+            console.log('Hello, ' + name + '!');
+          }
+          greet('World');
+        {% endjavascript %}
+      `,
+    };
+
+    const offenses = await check(theme, [StaticStylesheetAndJavascriptTags]);
+    expect(offenses).to.have.length(0);
+  });
+
+  it('should report error for liquid variable in stylesheet tag', async () => {
+    const theme = {
+      'templates/test.liquid': `
+        {% stylesheet %}
+          .button {
+            background-color: {{ settings.button_color }};
+            color: white;
+          }
+        {% endstylesheet %}
+      `,
+    };
+
+    const offenses = await check(theme, [StaticStylesheetAndJavascriptTags]);
+    expect(offenses).to.have.length(1);
+    expect(offenses[0].message).to.equal(
+      'Liquid variable found in CSS block. {% stylesheet %} tags should only contain static CSS code.',
+    );
+
+    const highlights = highlightedOffenses(theme, offenses);
+    expect(highlights).to.eql(['{{ settings.button_color }}']);
+  });
+
+  it('should report error for liquid variable in javascript tag', async () => {
+    const theme = {
+      'templates/test.liquid': `
+        {% javascript %}
+          const apiUrl = '{{ shop.url }}';
+          fetch(apiUrl);
+        {% endjavascript %}
+      `,
+    };
+
+    const offenses = await check(theme, [StaticStylesheetAndJavascriptTags]);
+    expect(offenses).to.have.length(1);
+    expect(offenses[0].message).to.equal(
+      'Liquid variable found in JavaScript block. {% javascript %} tags should only contain static JavaScript code.',
+    );
+
+    const highlights = highlightedOffenses(theme, offenses);
+    expect(highlights).to.eql(['{{ shop.url }}']);
+  });
+
+  it('should report error for liquid tag in stylesheet tag', async () => {
+    const theme = {
+      'templates/test.liquid': `
+        {% stylesheet %}
+          .button {
+            {% if settings.enable_hover %}
+              background-color: blue;
+            {% endif %}
+          }
+        {% endstylesheet %}
+      `,
+    };
+
+    const offenses = await check(theme, [StaticStylesheetAndJavascriptTags]);
+    expect(offenses).to.have.length(1);
+    expect(offenses[0].message).to.equal(
+      'Liquid tag found in CSS block. {% stylesheet %} tags should only contain static CSS code.',
+    );
+
+    const highlights = highlightedOffenses(theme, offenses);
+    expect(highlights).to.eql([
+      `{% if settings.enable_hover %}
+              background-color: blue;
+            {% endif %}`,
+    ]);
+  });
+
+  it('should report error for liquid tag in javascript tag', async () => {
+    const theme = {
+      'templates/test.liquid': `
+        {% javascript %}
+          {% if settings.enable_analytics %}
+            console.log('Analytics enabled');
+          {% endif %}
+        {% endjavascript %}
+      `,
+    };
+
+    const offenses = await check(theme, [StaticStylesheetAndJavascriptTags]);
+    expect(offenses).to.have.length(1);
+    expect(offenses[0].message).to.equal(
+      'Liquid tag found in JavaScript block. {% javascript %} tags should only contain static JavaScript code.',
+    );
+
+    const highlights = highlightedOffenses(theme, offenses);
+    expect(highlights).to.eql([
+      `{% if settings.enable_analytics %}
+            console.log('Analytics enabled');
+          {% endif %}`,
+    ]);
+  });
+
+  it('should report multiple errors for multiple liquid nodes', async () => {
+    const theme = {
+      'templates/test.liquid': `
+        {% stylesheet %}
+          .button {
+            background-color: {{ settings.button_color }};
+            {% if settings.show_border %}
+              border: 1px solid {{ settings.border_color }};
+            {% endif %}
+          }
+        {% endstylesheet %}
+      `,
+    };
+
+    const offenses = await check(theme, [StaticStylesheetAndJavascriptTags]);
+    expect(offenses).to.have.length(2);
+    expect(offenses[0].message).to.include('Liquid variable found in CSS block');
+    expect(offenses[1].message).to.include('Liquid tag found in CSS block');
+
+    const highlights = highlightedOffenses(theme, offenses);
+    expect(highlights).to.eql([
+      '{{ settings.button_color }}',
+      `{% if settings.show_border %}
+              border: 1px solid {{ settings.border_color }};
+            {% endif %}`,
+    ]);
+  });
+
+  it('should not report errors for other raw tags like schema', async () => {
+    const theme = {
+      'sections/test.liquid': `
+        {% schema %}
+        {
+          "name": "Section",
+          "settings": [
+            {
+              "id": "color",
+              "type": "color",
+              "default": "{{ settings.default_color }}"
+            }
+          ]
+        }
+        {% endschema %}
+      `,
+    };
+
+    const offenses = await check(theme, [StaticStylesheetAndJavascriptTags]);
+    expect(offenses).to.have.length(0);
+  });
+
+  it('should not report errors for liquid in regular content outside raw tags', async () => {
+    const theme = {
+      'templates/test.liquid': `
+        <div style="color: {{ settings.text_color }};">
+          {% if product.available %}
+            <button>Buy now</button>
+          {% endif %}
+        </div>
+
+        {% stylesheet %}
+          .static-style {
+            margin: 10px;
+          }
+        {% endstylesheet %}
+      `,
+    };
+
+    const offenses = await check(theme, [StaticStylesheetAndJavascriptTags]);
+    expect(offenses).to.have.length(0);
+  });
+
+  it('should report nested raw tags inside stylesheet tags', async () => {
+    const theme = {
+      'templates/test.liquid': `
+        {% stylesheet %}
+          /* This should trigger an error */
+          {% raw %}
+            .nested { color: red; }
+          {% endraw %}
+        {% endstylesheet %}
+      `,
+    };
+
+    const offenses = await check(theme, [StaticStylesheetAndJavascriptTags]);
+    expect(offenses).to.have.length(1);
+    expect(offenses[0].message).to.include('Liquid tag found in CSS block');
+
+    const highlights = highlightedOffenses(theme, offenses);
+    expect(highlights).to.eql([
+      `{% raw %}
+            .nested { color: red; }
+          {% endraw %}`,
+    ]);
+  });
+
+  it('should not report offenses for empty stylesheet and javascript blocks', async () => {
+    const theme = {
+      'templates/test.liquid': `
+        {% stylesheet %}
+        {% endstylesheet %}
+
+        {% javascript %}
+        {% endjavascript %}
+      `,
+    };
+
+    const offenses = await check(theme, [StaticStylesheetAndJavascriptTags]);
+    expect(offenses).to.have.length(0);
+  });
+
+  it('should not report errors for liquid in style tags (different from stylesheet)', async () => {
+    const theme = {
+      'templates/test.liquid': `
+        {% style %}
+          .button {
+            color: {{ settings.color }};
+          }
+        {% endstyle %}
+      `,
+    };
+
+    const offenses = await check(theme, [StaticStylesheetAndJavascriptTags]);
+    expect(offenses).to.have.length(0);
+  });
+});

package/src/checks/static-stylesheet-and-javascript-tags/index.ts

@@ -0,0 +1,48 @@
+import { NodeTypes } from '@platformos/liquid-html-parser';
+import { LiquidCheckDefinition, Severity, SourceCodeType } from '../../types';
+
+export const StaticStylesheetAndJavascriptTags: LiquidCheckDefinition = {
+  meta: {
+    code: 'StaticStylesheetAndJavascriptTags',
+    name: 'Reports non static stylesheet and javascript tags',
+    docs: {
+      description:
+        'Reports the usage of Liquid within {% stylesheet %} and {% javascript %} tags, which should only contain static content.',
+      recommended: true,
+      url: 'https://shopify.dev/docs/storefronts/themes/tools/theme-check/checks/static-stylesheet-and-javascript-tags',
+    },
+    type: SourceCodeType.LiquidHtml,
+    severity: Severity.ERROR,
+    schema: {},
+    targets: [],
+  },
+
+  create(context) {
+    return {
+      async LiquidRawTag(node) {
+        if (node.name !== 'stylesheet' && node.name !== 'javascript') {
+          return;
+        }
+
+        const liquidNodes = node.body.nodes.filter(
+          (childNode) =>
+            childNode.type === NodeTypes.LiquidVariableOutput ||
+            childNode.type === NodeTypes.LiquidTag ||
+            childNode.type === NodeTypes.LiquidRawTag,
+        );
+
+        for (const liquidNode of liquidNodes) {
+          const tagType = node.name === 'stylesheet' ? 'CSS' : 'JavaScript';
+          const liquidType =
+            liquidNode.type === NodeTypes.LiquidVariableOutput ? 'variable' : 'tag';
+
+          context.report({
+            message: `Liquid ${liquidType} found in ${tagType} block. {% ${node.name} %} tags should only contain static ${tagType} code.`,
+            startIndex: liquidNode.position.start,
+            endIndex: liquidNode.position.end,
+          });
+        }
+      },
+    };
+  },
+};

package/src/checks/translation-key-exists/index.spec.ts

@@ -0,0 +1,44 @@
+import { TranslationKeyExists } from '.';
+import { check } from '../../test';
+import { expect, describe, it } from 'vitest';
+
+describe('Module: TranslationKeyExists', () => {
+  it('should report all keys if default locale file does not exist', async () => {
+    const offenses = await check(
+      {
+        'code.liquid': `{{"key" | t}}
+{{"nested.key" | t}}`,
+      },
+      [TranslationKeyExists],
+    );
+    expect(offenses).to.have.length(2);
+  });
+
+  it('should handle key conflicts', async () => {
+    const offenses = await check(
+      {
+        'locales/en.default.json': JSON.stringify({
+          product: { quantity: 'TODO' },
+        }),
+        'code.liquid': '{{"product.quantity.decrease" | t}}',
+      },
+      [TranslationKeyExists],
+    );
+
+    expect(offenses).to.have.length(1);
+  });
+
+  it('should report offense when specific locale file does not exist', async () => {
+    const offenses = await check(
+      {
+        'app/translations/en/general.yml': 'en:\n  general:\n    hello: Hello',
+        'code.liquid': '{{"missing.key" | t}}',
+      },
+      [TranslationKeyExists],
+    );
+
+    expect(offenses).to.have.length(1);
+    expect(offenses[0].message).to.include('missing.key');
+    expect(offenses[0].message).to.include('does not have a matching translation entry');
+  });
+});

package/src/checks/translation-key-exists/index.ts

@@ -0,0 +1,78 @@
+import { TranslationProvider } from '@platformos/platformos-common';
+import { LiquidCheckDefinition, Severity, SourceCodeType } from '../../types';
+import { URI } from 'vscode-uri';
+
+function keyExists(key: string, pointer: any) {
+  for (const token of key.split('.')) {
+    if (typeof pointer !== 'object') {
+      return false;
+    }
+
+    if (!pointer.hasOwnProperty(token)) {
+      return false;
+    }
+
+    pointer = pointer[token];
+  }
+
+  return true;
+}
+
+export const TranslationKeyExists: LiquidCheckDefinition = {
+  meta: {
+    code: 'TranslationKeyExists',
+    name: 'Reports missing translation keys',
+    docs: {
+      description: 'Reports missing translation keys',
+      recommended: true,
+      url: 'https://shopify.dev/docs/storefronts/themes/tools/theme-check/checks/translation-key-exists',
+    },
+    type: SourceCodeType.LiquidHtml,
+    severity: Severity.ERROR,
+    schema: {},
+    targets: [],
+  },
+
+  create(context) {
+    const nodes: { translationKey: string; startIndex: number; endIndex: number }[] = [];
+    const translationProvider = new TranslationProvider(context.fs);
+
+    return {
+      async LiquidVariable(node) {
+        if (node.expression.type !== 'String') {
+          return;
+        }
+
+        if (!node.filters.some(({ name }) => ['t', 'translate'].includes(name))) {
+          return;
+        }
+
+        nodes.push({
+          translationKey: node.expression.value,
+          startIndex: node.expression.position.start,
+          endIndex: node.expression.position.end,
+        });
+      },
+
+      async onCodePathEnd() {
+        for (const { translationKey, startIndex, endIndex } of nodes) {
+          const translation = await translationProvider.translate(
+            URI.parse(context.config.rootUri),
+            translationKey,
+          );
+
+          if (!!translation) {
+            return;
+          }
+
+          const message = `'${translationKey}' does not have a matching translation entry`;
+          context.report({
+            message,
+            startIndex,
+            endIndex,
+          });
+        }
+      },
+    };
+  },
+};