@platformos/platformos-check-common 0.0.7 → 0.0.9

package/src/checks/block-id-usage/index.spec.ts

@@ -1,76 +0,0 @@
-import { expect, describe, it } from 'vitest';
-import { highlightedOffenses, runLiquidCheck } from '../../test';
-import { BlockIdUsage } from './index';
-
-describe('Module: ContentForHeaderModification', () => {
-  it('reports offense with the use of block.id in an if liquid tag', async () => {
-    const sourceCode = `
-      {% if block.id == '123' %}
-        No bueno
-      {% endif %}
-    `;
-
-    const offenses = await runLiquidCheck(BlockIdUsage, sourceCode);
-    expect(offenses).toHaveLength(1);
-    expect(offenses[0].message).toEqual(
-      'The ID is dynamically generated by Shopify and is subject to change. You should avoid relying on a literal value of this ID.',
-    );
-
-    const highlights = highlightedOffenses({ 'file.liquid': sourceCode }, offenses);
-    expect(highlights).toEqual(["block.id == '123'"]);
-  });
-
-  it('reports offense with the use of block.id in an elseif liquid tag', async () => {
-    const sourceCode = `
-      {% if potato == '123' %}
-        No bueno
-      {% elsif block.id == '123' %}
-        No bueno
-      {% endif %}
-    `;
-
-    const offenses = await runLiquidCheck(BlockIdUsage, sourceCode);
-    expect(offenses).toHaveLength(1);
-    expect(offenses[0].message).toEqual(
-      'The ID is dynamically generated by Shopify and is subject to change. You should avoid relying on a literal value of this ID.',
-    );
-
-    const highlights = highlightedOffenses({ 'file.liquid': sourceCode }, offenses);
-    expect(highlights).toEqual(["block.id == '123'"]);
-  });
-
-  it('reports offense with the use of block.id in an unless liquid tag', async () => {
-    const sourceCode = `
-      {% unless block.id == '123' %}
-        No bueno
-      {% endunless %}
-    `;
-
-    const offenses = await runLiquidCheck(BlockIdUsage, sourceCode);
-    expect(offenses).toHaveLength(1);
-    expect(offenses[0].message).toEqual(
-      'The ID is dynamically generated by Shopify and is subject to change. You should avoid relying on a literal value of this ID.',
-    );
-
-    const highlights = highlightedOffenses({ 'file.liquid': sourceCode }, offenses);
-    expect(highlights).toEqual(["block.id == '123'"]);
-  });
-
-  it('reports offense with the use of block.id in a case liquid tag', async () => {
-    const sourceCode = `
-      {% case block.id %}
-        {% when '123' %}
-          No bueno
-      {% endcase %}
-    `;
-
-    const offenses = await runLiquidCheck(BlockIdUsage, sourceCode);
-    expect(offenses).toHaveLength(1);
-    expect(offenses[0].message).toEqual(
-      'The ID is dynamically generated by Shopify and is subject to change. You should avoid relying on a literal value of this ID.',
-    );
-
-    const highlights = highlightedOffenses({ 'file.liquid': sourceCode }, offenses);
-    expect(highlights).toEqual(['block.id']);
-  });
-});

package/src/checks/block-id-usage/index.ts

@@ -1,72 +0,0 @@
-import {
-  Position,
-  LiquidTagNode,
-  NodeTypes,
-  LiquidVariableLookup,
-} from '@platformos/liquid-html-parser';
-import { Context, LiquidCheckDefinition, Severity, SourceCodeType } from '../../types';
-
-export const BlockIdUsage: LiquidCheckDefinition = {
-  meta: {
-    code: 'BlockIdUsage',
-    name: 'Do not rely on `block.id` in if/else/unless/case',
-    docs: {
-      description:
-        'The ID is dynamically generated by Shopify and is subject to change. You should avoid relying on a literal value of this ID.',
-      url: 'https://shopify.dev/docs/storefronts/themes/tools/theme-check/checks/block-id-usage',
-      recommended: true,
-    },
-    type: SourceCodeType.LiquidHtml,
-    severity: Severity.WARNING,
-    schema: {},
-    targets: [],
-  },
-
-  create(context) {
-    return {
-      // BAD: {% if block.id == "123" %}
-      // BAD: {% if block.id == some_variable %}
-      // BAD: {% if block[id] == "id" or block.id %}
-      // FINE: <div data-block-id="{{ block.id }}">
-      // FINE: document.querySelector(`[data-block-id="${block.id}"]`)
-      async Comparison(node, ancesors) {
-        if (
-          node.comparator === '==' &&
-          node.left.type === NodeTypes.VariableLookup &&
-          isUsingBlockId(node.left)
-        ) {
-          reportWarning(context, node.position);
-        }
-      },
-
-      // BAD {% case block.id %}
-      async VariableLookup(node, ancestors) {
-        const parentNode = ancestors.at(-1);
-        if (parentNode?.type === NodeTypes.LiquidTag && parentNode.name === 'case') {
-          if (isUsingBlockId(node)) {
-            reportWarning(context, node.position);
-          }
-        }
-      },
-    };
-  },
-};
-
-function isUsingBlockId(node: LiquidVariableLookup) {
-  return (
-    node.type == NodeTypes.VariableLookup &&
-    node.name === 'block' &&
-    node.lookups[0] &&
-    node.lookups[0].type === NodeTypes.String &&
-    node.lookups[0].value === 'id'
-  );
-}
-
-function reportWarning(context: any, position: Position) {
-  context.report({
-    message:
-      'The ID is dynamically generated by Shopify and is subject to change. You should avoid relying on a literal value of this ID.',
-    startIndex: position.start,
-    endIndex: position.end,
-  });
-}

package/src/checks/cdn-preconnect/index.spec.ts

@@ -1,40 +0,0 @@
-import { expect, describe, it } from 'vitest';
-import { runLiquidCheck } from '../../test';
-import { CdnPreconnect } from './index';
-
-describe('Module: CdnPreconnect', () => {
-  it('should report preconnect to cdn.shopify.com', async () => {
-    const sourceCode = `
-      <link rel="preconnect" href="https://cdn.shopify.com/"/>
-    `;
-
-    const offenses = await runLiquidCheck(CdnPreconnect, sourceCode);
-    expect(offenses).to.have.length(1);
-    expect(offenses[0].message).to.equal(
-      'Preconnecting to cdn.shopify.com is unnecessary and can lead to worse performance',
-    );
-  });
-
-  it('should report crossorigin preconnect to cdn.shopify.com', async () => {
-    const sourceCode = `
-      <link rel="preconnect" href="https://cdn.shopify.com/" crossorigin/>
-    `;
-
-    const offenses = await runLiquidCheck(CdnPreconnect, sourceCode);
-    expect(offenses).to.have.length(1);
-    expect(offenses[0].message).to.equal(
-      'Preconnecting to cdn.shopify.com is unnecessary and can lead to worse performance',
-    );
-  });
-
-  it('should not report other link types', async () => {
-    const sourceCode = `
-      <link rel="preload" href="https://example.com/foo.css" as="style"/>
-      <link rel="stylesheet" href="https://example.com/bar.css"/>
-      <link rel="icon"/>
-    `;
-
-    const offenses = await runLiquidCheck(CdnPreconnect, sourceCode);
-    expect(offenses).to.have.length(0);
-  });
-});

package/src/checks/cdn-preconnect/index.ts

@@ -1,43 +0,0 @@
-import { Severity, SourceCodeType, LiquidCheckDefinition } from '../../types';
-import { isAttr, isValuedHtmlAttribute, valueIncludes } from '../utils';
-
-export const CdnPreconnect: LiquidCheckDefinition = {
-  meta: {
-    code: 'CdnPreconnect',
-    name: 'CDN Preconnect',
-    docs: {
-      description: "This check is aimed at signaling the redundant preconnect to Shopify's CDN",
-      recommended: true,
-      url: 'https://shopify.dev/docs/storefronts/themes/tools/theme-check/checks/cdn-preconnect',
-    },
-    type: SourceCodeType.LiquidHtml,
-    severity: Severity.ERROR,
-    schema: {},
-    targets: [],
-  },
-
-  create(context) {
-    return {
-      async HtmlVoidElement(node) {
-        if (node.name !== 'link') return;
-
-        const isPreconnect = node.attributes
-          .filter(isValuedHtmlAttribute)
-          .some((attr) => isAttr(attr, 'rel') && valueIncludes(attr, 'preconnect'));
-        if (!isPreconnect) return;
-
-        const isShopifyCdn = node.attributes
-          .filter(isValuedHtmlAttribute)
-          .some((attr) => isAttr(attr, 'href') && valueIncludes(attr, '.+cdn.shopify.com.+'));
-        if (!isShopifyCdn) return;
-
-        context.report({
-          message:
-            'Preconnecting to cdn.shopify.com is unnecessary and can lead to worse performance',
-          startIndex: node.position.start,
-          endIndex: node.position.end,
-        });
-      },
-    };
-  },
-};

package/src/checks/content-for-header-modification/index.spec.ts

@@ -1,65 +0,0 @@
-import { expect, describe, it } from 'vitest';
-import { highlightedOffenses, runLiquidCheck } from '../../test';
-import { ContentForHeaderModification } from './index';
-
-describe('Module: ContentForHeaderModification', () => {
-  it('reports a offense with the use of a filter', async () => {
-    const sourceCode = "{{ content_for_header | split: ',' }}";
-
-    const offenses = await runLiquidCheck(ContentForHeaderModification, sourceCode);
-    expect(offenses).toHaveLength(1);
-    expect(offenses[0].message).toEqual('Do not rely on the content of `content_for_header`');
-
-    const highlights = highlightedOffenses({ 'file.liquid': sourceCode }, offenses);
-  });
-
-  it('reports offense with the use of assign', async () => {
-    const sourceCode = '{% assign x = content_for_header %}';
-
-    const offenses = await runLiquidCheck(ContentForHeaderModification, sourceCode);
-    expect(offenses).toHaveLength(1);
-    expect(offenses[0].message).toEqual('Do not rely on the content of `content_for_header`');
-
-    const highlights = highlightedOffenses({ 'file.liquid': sourceCode }, offenses);
-    expect(highlights).toEqual(['{% assign x = content_for_header %}']);
-  });
-
-  it('reports offense with the use of capture', async () => {
-    const sourceCode = `
-      {% capture x %}
-        {{ content_for_header }}
-      {% endcapture %}
-    `;
-
-    const offenses = await runLiquidCheck(ContentForHeaderModification, sourceCode);
-    expect(offenses).toHaveLength(1);
-    expect(offenses[0].message).toEqual('Do not rely on the content of `content_for_header`');
-
-    const highlights = highlightedOffenses({ 'file.liquid': sourceCode }, offenses);
-    expect(highlights).toEqual(['{{ content_for_header }}']);
-  });
-
-  it('reports offense with the use of echo', async () => {
-    const sourceCode = `
-      {% liquid
-        echo content_for_header | split: ','
-      %}
-    `;
-
-    const offenses = await runLiquidCheck(ContentForHeaderModification, sourceCode);
-    expect(offenses).toHaveLength(1);
-    expect(offenses[0].message).toEqual('Do not rely on the content of `content_for_header`');
-
-    const highlights = highlightedOffenses({ 'file.liquid': sourceCode }, offenses);
-    expect(highlights).toEqual(["echo content_for_header | split: ','"]);
-  });
-
-  it('does not report an offense with normal use', async () => {
-    const sourceCode = '{{ content_for_header }}';
-
-    const offenses = await runLiquidCheck(ContentForHeaderModification, sourceCode);
-    expect(offenses).toHaveLength(0);
-    const highlights = highlightedOffenses({ 'file.liquid': sourceCode }, offenses);
-    expect(highlights).toHaveLength(0);
-  });
-});

package/src/checks/content-for-header-modification/index.ts

@@ -1,72 +0,0 @@
-import {
-  LiquidTag,
-  LiquidTagAssign,
-  LiquidTagCapture,
-  LiquidTagEcho,
-  NodeTypes,
-  Position,
-} from '@platformos/liquid-html-parser';
-import { LiquidCheckDefinition, Severity, SourceCodeType } from '../../types';
-import { isNodeOfType } from '../utils';
-
-function isLiquidTagAssign(node: LiquidTag): node is LiquidTagAssign {
-  return node.name === 'assign' && typeof node.markup !== 'string';
-}
-function isLiquidTagCapture(node: LiquidTag): node is LiquidTagCapture {
-  return node.name === 'capture' && typeof node.markup !== 'string';
-}
-function isLiquidTagEcho(node: LiquidTag): node is LiquidTagEcho {
-  return node.name === 'echo' && typeof node.markup !== 'string';
-}
-
-export const ContentForHeaderModification: LiquidCheckDefinition = {
-  meta: {
-    code: 'ContentForHeaderModification',
-    name: 'Do not depend on the content of content_for_header',
-    docs: {
-      description:
-        'Do not rely on the content of content_for_header as it might change in the future, which could cause your Liquid code behavior to change.',
-      url: 'https://shopify.dev/docs/storefronts/themes/tools/theme-check/checks/content-for-header-modification',
-      recommended: true,
-    },
-    type: SourceCodeType.LiquidHtml,
-    severity: Severity.ERROR,
-    schema: {},
-    targets: [],
-  },
-
-  create(context) {
-    function checkContentForHeader(node: any, position: Position) {
-      if (isNodeOfType(NodeTypes.VariableLookup, node) && node.name === 'content_for_header') {
-        context.report({
-          message: 'Do not rely on the content of `content_for_header`',
-          startIndex: position.start,
-          endIndex: position.end,
-        });
-      }
-    }
-
-    return {
-      async LiquidTag(node) {
-        if (isLiquidTagAssign(node)) {
-          checkContentForHeader(node.markup.value.expression, node.position);
-        } else if (isLiquidTagEcho(node)) {
-          checkContentForHeader(node.markup.expression, node.position);
-        } else if (isLiquidTagCapture(node) && node.children) {
-          for (const child of node.children) {
-            if (child.type === NodeTypes.LiquidVariableOutput && typeof child.markup !== 'string') {
-              checkContentForHeader(child.markup.expression, child.position);
-            }
-          }
-        }
-      },
-      async LiquidVariableOutput(node) {
-        if (typeof node.markup === 'string') return;
-
-        if (node.markup.filters.length) {
-          checkContentForHeader(node.markup.expression, node.position);
-        }
-      },
-    };
-  },
-};

package/src/checks/deprecate-bgsizes/index.spec.ts

@@ -1,41 +0,0 @@
-import { expect, describe, it } from 'vitest';
-import { DeprecateBgsizes } from './index';
-import { runLiquidCheck, highlightedOffenses } from '../../test';
-
-describe('Module: DeprecateBgsizes', () => {
-  it('should report offenses for deprecated attributes', async () => {
-    const sourceCode = `
-      <div class="lazyload" data-bgset="image.jpg"></div>
-      <div class="lazyload" data-bgset="image2.jpg"></div>
-    `;
-
-    const offenses = await runLiquidCheck(DeprecateBgsizes, sourceCode);
-    expect(offenses).to.have.length(4);
-
-    const errorMessages = offenses.map((offense) => offense.message);
-    expect(errorMessages).to.deep.equal([
-      'Use the native loading="lazy" attribute instead of lazysizes',
-      'Use the CSS imageset attribute instead of data-bgset',
-      'Use the native loading="lazy" attribute instead of lazysizes',
-      'Use the CSS imageset attribute instead of data-bgset',
-    ]);
-
-    const highlights = highlightedOffenses({ 'file.liquid': sourceCode }, offenses);
-    expect(highlights).to.deep.equal([
-      'lazyload',
-      'data-bgset="image.jpg"',
-      'lazyload',
-      'data-bgset="image2.jpg"',
-    ]);
-  });
-
-  it('should not report offenses for non-deprecated attributes', async () => {
-    const sourceCode = `
-      <div class="non-lazyload" data-non-bgset="image.jpg"></div>
-      <div class="non-lazyload" data-non-bgset="image2.jpg"></div>
-    `;
-
-    const offenses = await runLiquidCheck(DeprecateBgsizes, sourceCode);
-    expect(offenses).to.have.length(0);
-  });
-});

package/src/checks/deprecate-bgsizes/index.ts

@@ -1,49 +0,0 @@
-import { Severity, SourceCodeType, LiquidCheckDefinition } from '../../types';
-import { isAttr, isValuedHtmlAttribute, ValuedHtmlAttribute, valueIncludes } from '../utils';
-
-export const DeprecateBgsizes: LiquidCheckDefinition = {
-  meta: {
-    code: 'DeprecateBgsizes',
-    name: 'Deprecate Bgsizes',
-    docs: {
-      description: 'This check is aimed at discouraging the use of the lazySizes bgset plugin.',
-      recommended: true,
-      url: 'https://shopify.dev/docs/storefronts/themes/tools/theme-check/checks/deprecate-bgsizes',
-    },
-    type: SourceCodeType.LiquidHtml,
-    severity: Severity.WARNING,
-    schema: {},
-    targets: [],
-  },
-
-  create(context) {
-    return {
-      async HtmlElement(node) {
-        const classAttributeWithLazyload: ValuedHtmlAttribute | undefined = node.attributes
-          .filter(isValuedHtmlAttribute)
-          .find((attr) => isAttr(attr, 'class') && valueIncludes(attr, 'lazyload'));
-
-        if (classAttributeWithLazyload) {
-          const attr = classAttributeWithLazyload;
-          context.report({
-            message: 'Use the native loading="lazy" attribute instead of lazysizes',
-            startIndex: attr.attributePosition.start,
-            endIndex: attr.attributePosition.end,
-          });
-        }
-
-        const dataBgsetAttr = node.attributes.find(
-          (attr) => isValuedHtmlAttribute(attr) && isAttr(attr, 'data-bgset'),
-        ) as ValuedHtmlAttribute | undefined;
-
-        if (dataBgsetAttr) {
-          context.report({
-            message: 'Use the CSS imageset attribute instead of data-bgset',
-            startIndex: dataBgsetAttr.position.start,
-            endIndex: dataBgsetAttr.position.end,
-          });
-        }
-      },
-    };
-  },
-};

package/src/checks/deprecate-lazysizes/index.spec.ts

@@ -1,26 +0,0 @@
-import { expect, describe, it } from 'vitest';
-import { runLiquidCheck } from '../../test';
-import { DeprecateLazysizes } from './index';
-
-describe('Module: DeprecateLazysizes', () => {
-  it('should report data-srcset and data-sizes attributes', async () => {
-    const sourceCode = `
-      <img data-srcset="image.jpg" data-sizes="auto" class="lazyload" />
-    `;
-
-    const offenses = await runLiquidCheck(DeprecateLazysizes, sourceCode);
-    expect(offenses).to.have.length(1);
-    expect(offenses[0].message).to.equal(
-      'Use the native loading="lazy" attribute instead of lazysizes',
-    );
-  });
-
-  it('should not report srcset and sizes attributes', async () => {
-    const sourceCode = `
-      <img srcset="image.jpg" sizes="auto" loading="lazy" />
-    `;
-
-    const offenses = await runLiquidCheck(DeprecateLazysizes, sourceCode);
-    expect(offenses).to.have.length(0);
-  });
-});

package/src/checks/deprecate-lazysizes/index.ts

@@ -1,58 +0,0 @@
-import { Severity, SourceCodeType, LiquidCheckDefinition } from '../../types';
-import {
-  ValuedHtmlAttribute,
-  isAttr,
-  isValuedHtmlAttribute,
-  isHtmlAttribute,
-  valueIncludes,
-} from '../utils';
-
-function showsLazysizesUsage(attr: ValuedHtmlAttribute) {
-  return isAttr(attr, 'data-srcset') || isAttr(attr, 'data-sizes');
-}
-
-export const DeprecateLazysizes: LiquidCheckDefinition = {
-  meta: {
-    code: 'DeprecateLazysizes',
-    name: 'Deprecate Lazysizes',
-    docs: {
-      description:
-        'This check is aimed at discouraging the use of the lazysizes JavaScript library',
-      recommended: true,
-      url: 'https://shopify.dev/docs/storefronts/themes/tools/theme-check/checks/deprecate-lazysizes',
-    },
-    type: SourceCodeType.LiquidHtml,
-    severity: Severity.WARNING,
-    schema: {},
-    targets: [],
-  },
-
-  create(context) {
-    return {
-      async HtmlVoidElement(node) {
-        if (node.name !== 'img') return;
-
-        const attributes = node.attributes.filter(isHtmlAttribute);
-        const hasSrc = attributes.some((attr) => isAttr(attr, 'src'));
-        const hasNativeLoading = attributes.some((attr) => isAttr(attr, 'loading'));
-        if (hasSrc && hasNativeLoading) return;
-
-        const hasLazyloadClass = node.attributes
-          .filter(isValuedHtmlAttribute)
-          .some((attr) => isAttr(attr, 'class') && valueIncludes(attr, 'lazyload'));
-        if (!hasLazyloadClass) return;
-
-        const hasLazysizesAttribute = node.attributes
-          .filter(isValuedHtmlAttribute)
-          .some(showsLazysizesUsage);
-        if (!hasLazysizesAttribute) return;
-
-        context.report({
-          message: 'Use the native loading="lazy" attribute instead of lazysizes',
-          startIndex: node.position.start,
-          endIndex: node.position.end,
-        });
-      },
-    };
-  },
-};