@platformos/platformos-check-common 0.0.2

package/src/checks/remote-asset/index.spec.ts

@@ -0,0 +1,280 @@
+import { describe, it, expect } from 'vitest';
+import { runLiquidCheck, highlightedOffenses, check, MockTheme } from '../../test';
+import { RemoteAsset } from './index';
+
+describe('Module: RemoteAsset', () => {
+  it('should report an offense when asset_url or img_url filters are not used', async () => {
+    const sourceCode = `
+      <img src="{{ 'image.png' }}" />
+      <link href="{{ 'style.css' }}" />
+      <script src="{{ 'script.js' }}" defer="defer"></script>
+      {{ url | img_tag }}
+      `;
+
+    const offenses = await runLiquidCheck(RemoteAsset, sourceCode);
+    expect(offenses).to.have.length(4);
+
+    const highlights = highlightedOffenses({ 'file.liquid': sourceCode }, offenses);
+    expect(highlights).to.eql([
+      'src="{{ \'image.png\' }}"',
+      'href="{{ \'style.css\' }}"',
+      'src="{{ \'script.js\' }}"',
+      'url | img_tag',
+    ]);
+  });
+
+  it('should not report an offense when asset_url or img_url filters are used', async () => {
+    const sourceCode = `
+      <img src="{{ 'image.png' | asset_url }}" />
+      <link href="{{ 'style.css' | img_url }}" />
+      <script src="{{ 'script.js' | img_url }}" defer="defer"></script>
+      {{ url | img_tag | asset_url }},
+      {{ 'bootstrap.min.css' | asset_url | stylesheet_tag }}
+      {{ product | image_url: width: 450 | img_tag }}
+    `;
+
+    const offenses = await runLiquidCheck(RemoteAsset, sourceCode);
+    expect(offenses).to.be.empty;
+    const highlights = highlightedOffenses({ 'file.liquid': sourceCode }, offenses);
+    expect(highlights).to.be.empty;
+  });
+
+  it('should not report an offense for links, videos, iframes', async () => {
+    const sourceCode = `
+      <iframe
+        id="inlineFrameExample"
+        title="Inline Frame Example"
+        width="300"
+        height="200"
+        src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik"
+      >
+      </iframe>
+      <a href="https://google.com"></a>
+      <embed type="video/webm" src="https://google.com/..." width="250" height="200">
+    `;
+
+    const offenses = await runLiquidCheck(RemoteAsset, sourceCode);
+    expect(offenses).to.be.empty;
+  });
+
+  it('should not report an offense when asset_url or img_url filters are used with other filters', async () => {
+    const sourceCode = `
+      <img src="{{ 'image.png' | asset_url | img_url }}" />
+      <link href="{{ 'style.css' | img_url | asset_url }}" />
+      <script src="{{ 'script.js' | img_url | asset_url}}" defer="defer"></script>
+    `;
+
+    const offenses = await runLiquidCheck(RemoteAsset, sourceCode);
+    expect(offenses).to.be.empty;
+    const highlights = highlightedOffenses({ 'file.liquid': sourceCode }, offenses);
+    expect(highlights).to.be.empty;
+  });
+
+  it('should not report an offense for non-asset elements', async () => {
+    const sourceCode = `
+      <div class="{{ 'my-class' }}"></div>
+      <a href="{{ 'page.html' }}">Link</a>
+    `;
+
+    const offenses = await runLiquidCheck(RemoteAsset, sourceCode);
+    expect(offenses).to.be.empty;
+    const highlights = highlightedOffenses({ 'file.liquid': sourceCode }, offenses);
+    expect(highlights).to.be.empty;
+  });
+
+  it('should not report an offense when asset_url filters are used with deprecated assets', async () => {
+    const sourceCode = `
+    {{ product.featured_image | product_img_url }}
+    {{ article.image | article_img_url }}
+    {{ collection.image | collection_img_url }}
+    {{ 'image.png' | img_url }}
+    `;
+
+    const offenses = await runLiquidCheck(RemoteAsset, sourceCode);
+    expect(offenses).to.be.empty;
+    const highlights = highlightedOffenses({ 'file.liquid': sourceCode }, offenses);
+    expect(highlights).to.be.empty;
+  });
+
+  it('should not report an offense when asset_url filters are used with non deprecated assets', async () => {
+    const sourceCode = `
+    {{ 'option_selection.js' | shopify_asset_url }}
+    {{ 'lightbox.js' | global_asset_url | script_tag }}
+    {{ 'disclaimer.pdf' | file_url }}
+    {{ 'potions-header.png' | file_img_url: 'large' }}
+    {{ 'cart.js' | asset_url }}
+    {{ 'red-and-black-bramble-berries.jpg' | asset_img_url }}
+    `;
+
+    const offenses = await runLiquidCheck(RemoteAsset, sourceCode);
+    expect(offenses).to.be.empty;
+    const highlights = highlightedOffenses({ 'file.liquid': sourceCode }, offenses);
+    expect(highlights).to.be.empty;
+  });
+
+  it('should report the correct message and index for a single offense', async () => {
+    const sourceCode = `<img src="{{ 'image.png' }}" />`;
+
+    const offenses = await runLiquidCheck(RemoteAsset, sourceCode);
+    expect(offenses).to.have.length(1);
+
+    const offense = offenses[0];
+    expect(offense.message).to.equal(
+      'Use one of the asset_url filters to serve assets for better performance.',
+    );
+    expect(offense.start.index).to.equal(5);
+    expect(offense.end.index).to.equal(28);
+
+    const highlights = highlightedOffenses({ 'file.liquid': sourceCode }, offenses);
+    expect(highlights).to.eql(['src="{{ \'image.png\' }}"']);
+  });
+
+  it('should not report an offense when asset_url filters are used with known assets', async () => {
+    const sourceCode = `<link rel="canonical" href="{{ canonical_url }}">
+    <link href={{ canonical_url }}
+    {{ 'example.js' | canonical_url }}`;
+
+    const offenses = await runLiquidCheck(RemoteAsset, sourceCode);
+    expect(offenses).to.be.empty;
+    const highlights = highlightedOffenses({ 'file.liquid': sourceCode }, offenses);
+    expect(highlights).to.be.empty;
+  });
+
+  it('should report an offense for scripts from remote domains', async () => {
+    const sourceCode = `<script src="https://example.com/jquery.js" defer></script>`;
+
+    const offenses = await runLiquidCheck(RemoteAsset, sourceCode);
+    expect(offenses).to.have.length(1);
+    expect(offenses[0].message).to.equal(
+      'Asset should be served by the Shopify CDN for better performance.',
+    );
+  });
+
+  it('should report an offense for remote stylesheets', async () => {
+    const sourceCode = `
+      <link href="https://example.com/bootstrap.css" rel="stylesheet">
+      <link href="{{ "https://example.com/bootstrap.css" | replace: 'bootstrap', 'tailwind' }}" rel="stylesheet">
+      <link href=“https://thisisbad.com/styles.css“>
+      `;
+
+    const offenses = await runLiquidCheck(RemoteAsset, sourceCode);
+
+    expect(offenses).to.have.length(3);
+    offenses.forEach((offense) => {
+      expect(offense.message).to.equal(
+        'Asset should be served by the Shopify CDN for better performance.',
+      );
+    });
+  });
+
+  it('should report an offense when a non shopify cdn is used as a liquid filter and when a asset_url filter is not used.', async () => {
+    const sourceCode = `
+    {{ "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" | stylesheet_tag }}
+    `;
+    const offenses = await runLiquidCheck(RemoteAsset, sourceCode);
+    expect(offenses).to.have.length(2);
+
+    expect(offenses[0].message).to.equal(
+      'Asset should be served by the Shopify CDN for better performance.',
+    );
+
+    expect(offenses[1].message).to.equal(
+      'Use one of the asset_url filters to serve assets for better performance.',
+    );
+  });
+
+  it('should report an offense for image drops without img_url filter', async () => {
+    const sourceCode = `
+      <img src="{{ image }}">
+      <img src="{{ image.src }}">
+    `;
+
+    const offenses = await runLiquidCheck(RemoteAsset, sourceCode);
+    expect(offenses).to.have.length(2);
+    offenses.forEach((offense) => {
+      expect(offense.message).to.equal(
+        'Use one of the asset_url filters to serve assets for better performance.',
+      );
+    });
+  });
+
+  it('should not report an offence if url is a shopify CDN', async () => {
+    const sourceCode = `
+    <link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
+    <link id="ModelViewerStyle" rel="stylesheet" href="https://cdn.shopify.com/shopifycloud/model-viewer-ui/assets/v1.0/model-viewer-ui.css" media="print" onload="this.media='all'">
+    <script id="hot-reload-client" src="/cdn/shopifycloud/theme-hot-reload/theme-hot-reload.js" defer></script>
+    `;
+
+    const offenses = await runLiquidCheck(RemoteAsset, sourceCode);
+    expect(offenses).to.be.empty;
+    const highlights = highlightedOffenses({ 'file.liquid': sourceCode }, offenses);
+    expect(highlights).to.be.empty;
+  });
+
+  it('should report an offense if url is not listed in allowedDomains', async () => {
+    const themeFiles: MockTheme = {
+      'layout/theme.liquid': `
+        <script src="https://domain.com" defer></script>
+      `,
+    };
+
+    const offenses = await check(
+      themeFiles,
+      [RemoteAsset],
+      {},
+      {
+        RemoteAsset: {
+          enabled: true,
+          allowedDomains: ['someotherdomain.com'],
+        },
+      },
+    );
+
+    expect(offenses).to.have.length(1);
+  });
+
+  it('should report an offense if the url in the config is malformed/missing protocol', async () => {
+    const themeFiles: MockTheme = {
+      'layout/theme.liquid': `
+        <script src="https://domain.com" defer></script>
+        <script src="https://www.domain.com" defer></script>
+      `,
+    };
+
+    const offenses = await check(
+      themeFiles,
+      [RemoteAsset],
+      {},
+      {
+        RemoteAsset: {
+          enabled: true,
+          allowedDomains: ['www.domain.com', 'domain.com'],
+        },
+      },
+    );
+
+    expect(offenses).to.have.length(2);
+  });
+
+  it('should not report an offense if url is listed in allowedDomains', async () => {
+    const themeFiles: MockTheme = {
+      'layout/theme.liquid': `
+        <script src="https://domain.com" defer></script>
+      `,
+    };
+
+    const offenses = await check(
+      themeFiles,
+      [RemoteAsset],
+      {},
+      {
+        RemoteAsset: {
+          enabled: true,
+          allowedDomains: ['https://domain.com', 'http://domain.com', 'https://www.domain.com'],
+        },
+      },
+    );
+
+    expect(offenses).to.be.empty;
+  });
+});

package/src/checks/remote-asset/index.ts

@@ -0,0 +1,238 @@
+import {
+  HtmlRawNode,
+  HtmlVoidElement,
+  TextNode,
+  LiquidVariable,
+  LiquidVariableOutput,
+} from '@platformos/liquid-html-parser';
+import {
+  LiquidHtmlNodeTypes as NodeTypes,
+  LiquidHtmlNodeOfType as NodeOfType,
+  Severity,
+  SourceCodeType,
+  LiquidCheckDefinition,
+  LiquidHtmlNode,
+  SchemaProp,
+} from '../../types';
+import { isAttr, isValuedHtmlAttribute, isNodeOfType, ValuedHtmlAttribute } from '../utils';
+import { last } from '../../utils';
+
+const RESOURCE_TAGS = ['img', 'link', 'source', 'script'];
+const SHOPIFY_CDN_DOMAINS = ['fonts.shopifycdn.com', 'cdn.shopify.com'];
+const TAGNAMES = ['stylesheet_tag', 'script_tag', 'image_tag', 'img_tag'];
+const DEPRECATED = ['product_img_url', 'article_img_url', 'collection_img_url', 'img_url'];
+
+const NON_DEPRECATED = [
+  'asset_url',
+  'image_url',
+  'asset_img_url',
+  'file_img_url',
+  'file_url',
+  'global_asset_url',
+  'shopify_asset_url',
+  'external_video_url',
+  'font_url',
+];
+const LIQUID_OBJECT = 'canonical_url';
+
+function isLiquidVariableOutput(node: LiquidHtmlNode): node is LiquidVariableOutput {
+  return node.type === NodeTypes.LiquidVariableOutput;
+}
+
+function isLiquidVariable(node: LiquidHtmlNode | string): node is LiquidVariable {
+  return typeof node !== 'string' && node.type === NodeTypes.LiquidVariable;
+}
+
+function isUrlHostedbyShopify(url: string, allowedDomains: string[] = []): boolean {
+  if (/^\/cdn\//.test(url)) {
+    return true;
+  }
+  try {
+    const urlObj = new URL(url);
+    return [...SHOPIFY_CDN_DOMAINS, ...allowedDomains].includes(urlObj.hostname);
+  } catch (_error) {
+    // Return false for any invalid URLs (missing protocol, malformed URLs, invalid characters etc.)
+    // Since we're validating if URLs are Shopify-hosted, any invalid URL should return false
+    return false;
+  }
+}
+
+function valueIsDefinitelyNotShopifyHosted(
+  attr: ValuedHtmlAttribute,
+  allowedDomains: string[] = [],
+): boolean {
+  return attr.value.some((node) => {
+    if (node.type === NodeTypes.TextNode && /^(https?:)?\/\//.test(node.value)) {
+      if (!isUrlHostedbyShopify(node.value, allowedDomains)) {
+        return true;
+      }
+    }
+
+    if (isLiquidVariableOutput(node)) {
+      const variable = node.markup;
+      if (isLiquidVariable(variable)) {
+        const expression = variable.expression;
+        if (expression.type === NodeTypes.String && /^https?:\/\//.test(expression.value)) {
+          if (!isUrlHostedbyShopify(expression.value, allowedDomains)) {
+            return true;
+          }
+        }
+      }
+    }
+    return false;
+  });
+}
+
+function valueIsShopifyHosted(attr: ValuedHtmlAttribute): boolean {
+  const ASSET_URL_FILTER_NAMES = [...DEPRECATED, ...NON_DEPRECATED];
+  const ASSET_URL_OBJECT_NAMES = [LIQUID_OBJECT];
+
+  return attr.value.some((node) => {
+    if (!isLiquidVariableOutput(node)) return false;
+    if (!isLiquidVariable(node.markup)) return false;
+
+    const includesFilter = node.markup.filters.some((filter) =>
+      ASSET_URL_FILTER_NAMES.includes(filter.name),
+    );
+    if (includesFilter) return true;
+
+    if (isNodeOfType(NodeTypes.VariableLookup, node.markup.expression)) {
+      if (
+        node.markup.expression.name
+          ? ASSET_URL_OBJECT_NAMES.includes(node.markup.expression.name)
+          : false
+      )
+        return true;
+    }
+
+    return false;
+  });
+}
+
+// Takes a list of allowed domains, and normalises them into an expected domain: www.domain.com -> domain.com for equality checks.
+function normaliseAllowedDomains(allowedDomains: string[]): string[] {
+  return allowedDomains
+    .map((domain) => {
+      try {
+        const url = new URL(domain);
+        // Hostname can still return www. from https://www.domain.com we want it to be  https://www.domain.com -> domain.com
+        return url.hostname.replace(/^www\./, '');
+      } catch (_error) {
+        // we shouldn't return the malformed domain - should be strict and stick to web standards (new URL validation).
+        return undefined;
+      }
+    })
+    .filter((domain): domain is string => domain !== undefined);
+}
+
+const schema = {
+  allowedDomains: SchemaProp.array(SchemaProp.string()).optional(),
+};
+
+export const RemoteAsset: LiquidCheckDefinition<typeof schema> = {
+  meta: {
+    code: 'RemoteAsset',
+    aliases: ['AssetUrlFilters'],
+    name: 'Remote Asset',
+    docs: {
+      description: 'This check is aimed at eliminating unnecessary HTTP connections.',
+      url: 'https://shopify.dev/docs/storefronts/themes/tools/theme-check/checks/remote-asset',
+      recommended: true,
+    },
+    type: SourceCodeType.LiquidHtml,
+    severity: Severity.WARNING,
+    schema,
+    targets: [],
+  },
+
+  create(context) {
+    const allowedDomains = normaliseAllowedDomains(context.settings.allowedDomains || []);
+
+    function checkHtmlNode(node: HtmlVoidElement | HtmlRawNode) {
+      if (!RESOURCE_TAGS.includes(node.name)) return;
+
+      const urlAttribute: ValuedHtmlAttribute | undefined = node.attributes
+        .filter(isValuedHtmlAttribute)
+        .find((attr: ValuedHtmlAttribute) => isAttr(attr, 'src') || isAttr(attr, 'href'));
+
+      if (!urlAttribute) return;
+
+      const isShopifyUrl = urlAttribute.value
+        .filter((node): node is TextNode => node.type === NodeTypes.TextNode)
+        .some((textNode) => isUrlHostedbyShopify(textNode.value, allowedDomains));
+
+      if (isShopifyUrl) return;
+
+      const hasDefinitelyARemoteAssetUrl = valueIsDefinitelyNotShopifyHosted(
+        urlAttribute,
+        allowedDomains,
+      );
+      if (hasDefinitelyARemoteAssetUrl) {
+        context.report({
+          message: 'Asset should be served by the Shopify CDN for better performance.',
+          startIndex: urlAttribute.position.start,
+          endIndex: urlAttribute.position.end,
+        });
+        return;
+      }
+
+      const hasShopifyHostedValue = valueIsShopifyHosted(urlAttribute);
+      if (hasShopifyHostedValue) return;
+
+      context.report({
+        message: 'Use one of the asset_url filters to serve assets for better performance.',
+        startIndex: urlAttribute.position.start,
+        endIndex: urlAttribute.position.end,
+      });
+    }
+
+    function checkLiquidFilter(
+      node: NodeOfType<NodeTypes.LiquidFilter>,
+      ancestors: LiquidHtmlNode[],
+    ) {
+      const tagName = node.name;
+
+      if (!TAGNAMES.includes(tagName)) return;
+
+      const parentNode = last(ancestors);
+      if (!parentNode || !isNodeOfType(NodeTypes.LiquidVariable, parentNode)) return;
+
+      const hasAsset = parentNode.filters.some(
+        (filter: { name: string }) =>
+          DEPRECATED.includes(filter.name) || NON_DEPRECATED.includes(filter.name),
+      );
+
+      if (hasAsset) return;
+
+      const urlNode = parentNode.expression;
+      if (
+        urlNode.type === NodeTypes.String &&
+        !isUrlHostedbyShopify(urlNode.value, allowedDomains)
+      ) {
+        context.report({
+          message: 'Asset should be served by the Shopify CDN for better performance.',
+          startIndex: urlNode.position.start,
+          endIndex: urlNode.position.end,
+        });
+      }
+
+      context.report({
+        message: `Use one of the asset_url filters to serve assets for better performance.`,
+        startIndex: parentNode.expression.position.start,
+        endIndex: node.position.end,
+      });
+    }
+
+    return {
+      async HtmlVoidElement(node) {
+        checkHtmlNode(node);
+      },
+      async HtmlRawNode(node) {
+        checkHtmlNode(node);
+      },
+      async LiquidFilter(node, ancestors) {
+        checkLiquidFilter(node, ancestors);
+      },
+    };
+  },
+};

package/src/checks/reserved-doc-param-names/index.spec.ts

@@ -0,0 +1,62 @@
+import { expect, describe, it } from 'vitest';
+import { ReservedDocParamNames } from './index';
+import { runLiquidCheck } from '../../test';
+
+describe('Module: ReservedDocParamNames', () => {
+  describe('block file', () => {
+    it(`should not report an error when no doc params share names with reserved content_for tag params`, async () => {
+      const sourceCode = `
+        {% doc %}
+          @param param1 - Example param
+        {% enddoc %}
+      `;
+
+      const offenses = await runLiquidCheck(
+        ReservedDocParamNames,
+        sourceCode,
+        'blocks/file.liquid',
+      );
+
+      expect(offenses).to.be.empty;
+    });
+
+    it('should report an error when a doc param shares names with reserved content_for tag params', async () => {
+      const sourceCode = `
+        {% doc %}
+          @param param1 - Example param
+          @param id - Example param
+        {% enddoc %}
+      `;
+
+      const offenses = await runLiquidCheck(
+        ReservedDocParamNames,
+        sourceCode,
+        'blocks/file.liquid',
+      );
+
+      expect(offenses).to.have.length(1);
+      expect(offenses[0].message).to.contain(
+        `The parameter name is not supported because it's a reserved argument for 'content_for' tags.`,
+      );
+    });
+  });
+
+  describe('partial file', () => {
+    it('should not report an error when a doc param shares names with reserved content_for tag params', async () => {
+      const sourceCode = `
+        {% doc %}
+          @param param1 - Example param
+          @param id - Example param
+        {% enddoc %}
+      `;
+
+      const offenses = await runLiquidCheck(
+        ReservedDocParamNames,
+        sourceCode,
+        'app/views/partials/file.liquid',
+      );
+
+      expect(offenses).to.have.length(0);
+    });
+  });
+});

package/src/checks/reserved-doc-param-names/index.ts

@@ -0,0 +1,57 @@
+import { TextNode } from '@platformos/liquid-html-parser';
+import { LiquidCheckDefinition, Severity, SourceCodeType } from '../../types';
+import { isBlock } from '../../to-schema';
+import {
+  REQUIRED_CONTENT_FOR_ARGUMENTS,
+  RESERVED_CONTENT_FOR_ARGUMENTS,
+} from '../../tags/content-for';
+
+export const ReservedDocParamNames: LiquidCheckDefinition = {
+  meta: {
+    code: 'ReservedDocParamNames',
+    name: 'Valid doc parameter names',
+    docs: {
+      description:
+        'This check exists to ensure any parameter names defined in LiquidDoc do not collide with reserved words.',
+      recommended: true,
+      url: 'https://shopify.dev/docs/storefronts/themes/tools/theme-check/checks/reserved-doc-param-names',
+    },
+    type: SourceCodeType.LiquidHtml,
+    severity: Severity.ERROR,
+    schema: {},
+    targets: [],
+  },
+
+  create(context) {
+    if (!isBlock(context.file.uri)) {
+      return {};
+    }
+
+    const defaultParameterNames = [
+      ...REQUIRED_CONTENT_FOR_ARGUMENTS,
+      ...RESERVED_CONTENT_FOR_ARGUMENTS,
+    ];
+
+    return {
+      async LiquidDocParamNode(node) {
+        const paramName = node.paramName.value;
+
+        if (defaultParameterNames.includes(paramName)) {
+          reportWarning(
+            context,
+            `The parameter name is not supported because it's a reserved argument for 'content_for' tags.`,
+            node.paramName,
+          );
+        }
+      },
+    };
+  },
+};
+
+function reportWarning(context: any, message: string, node: TextNode) {
+  context.report({
+    message,
+    startIndex: node.position.start,
+    endIndex: node.position.end,
+  });
+}