@platformos/platformos-check-common 0.0.2

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

@@ -0,0 +1,72 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,58 @@
+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,
+        });
+      },
+    };
+  },
+};

package/src/checks/deprecated-filter/fixes.ts

@@ -0,0 +1,264 @@
+import {
+  LiquidArgument,
+  LiquidExpression,
+  LiquidFilter,
+  LiquidNamedArgument,
+  LiquidNumber,
+  LiquidString,
+  LiquidVariableLookup,
+  NodeTypes,
+} from '@platformos/liquid-html-parser';
+import { Fixer, LiquidHtmlSuggestion, SourceCodeType } from '../../types';
+import { isNodeOfType } from '../utils';
+
+type ImageSize = { width: number; height: number };
+
+type Suggestion = LiquidHtmlSuggestion[] | undefined;
+
+type FitlerParameters = Record<string, number | string | null>;
+
+/**
+ * Width and height values cannot exceed this maximum size.
+ */
+const MAX_SIZE = 5760;
+
+const NAMED_SIZES: Record<string, number> = {
+  pico: 16,
+  icon: 32,
+  thumb: 50,
+  small: 100,
+  compact: 160,
+  medium: 240,
+  large: 480,
+  grande: 600,
+  original: 1024,
+};
+
+export function fixHexToRgba(node: LiquidFilter): Fixer<SourceCodeType.LiquidHtml> | undefined {
+  /**
+   * Cannot fix invalid usage.
+   *
+   * The `hex_to_rgba` filter is only valid with zero or one argument (`alpha`).
+   */
+  if (node.args.length > 1) return;
+
+  const { start, end } = getFilterSourceStartAndEnd(node);
+  const alpha = getExpressionArgumentValue(node, 0);
+
+  let fixedFilter: string;
+
+  if (alpha) {
+    fixedFilter = ` color_to_rgb | color_modify: 'alpha', ${alpha}`;
+  } else {
+    fixedFilter = ' color_to_rgb';
+  }
+
+  return (corrector) => corrector.replace(start, end, fixedFilter);
+}
+
+export function suggestImgTagFix(node: LiquidFilter): Suggestion {
+  const message = "Replace 'img_tag' with 'image_tag'.";
+
+  const alt = getExpressionArgumentValue(node, 0);
+  const cssClass = getExpressionArgumentValue(node, 1);
+  const sizeStr = getExpressionArgumentValue(node, 2);
+
+  const { width, height } = getImageSize(sizeStr, { width: -1, height: -1 });
+  const { start, end } = getFilterSourceStartAndEnd(node);
+
+  const imageUrlParameters: FitlerParameters = ensureImageValue({ width, height });
+  const imageTagParameters: FitlerParameters = {
+    width,
+    height,
+    alt: strValue(alt),
+    class: strValue(cssClass),
+  };
+
+  const imageUrlFilter = buildFilterString('image_url', imageUrlParameters);
+  const imageTagFilter = buildFilterString('image_tag', imageTagParameters);
+
+  return [
+    {
+      message,
+      fix: (corrector) => {
+        const insert = `${imageUrlFilter} |${imageTagFilter}`;
+        corrector.replace(start, end, insert);
+      },
+    },
+  ];
+}
+
+export function suggestImgUrlFix(node: LiquidFilter): Suggestion {
+  const message = "Replace 'img_url' with 'image_url'.";
+
+  const cropNode = getNamedArgumentNode(node, 'crop');
+  const formatNode = getNamedArgumentNode(node, 'format');
+  const scaleNode = getNamedArgumentNode(node, 'scale');
+  const sizeStr = getExpressionArgumentValue(node, 0);
+  const sizeNode = node.args.at(0);
+
+  /**
+   * Cannot fix when 'scale' or 'size' node are variable lookups.
+   */
+  if (isVariableLookup(scaleNode?.value) || isVariableLookup(sizeNode)) {
+    return;
+  }
+
+  const { width, height } = ensureImageValue(scaleImage(node, getImageSize(sizeStr)));
+  const { start, end } = getFilterSourceStartAndEnd(node);
+
+  const parameters: FitlerParameters = { width, height };
+
+  if (isStringLiteral(cropNode?.value)) {
+    parameters['crop'] = strValue(cropNode!.value.value);
+  }
+  if (isStringLiteral(formatNode?.value)) {
+    parameters['format'] = strValue(formatNode!.value.value);
+  }
+  if (isVariableLookup(formatNode?.value)) {
+    parameters['format'] = formatNode!.value.name;
+  }
+
+  return [
+    {
+      message,
+      fix: (corrector) => {
+        const insert = buildFilterString('image_url', parameters);
+        corrector.replace(start, end, insert);
+      },
+    },
+  ];
+}
+
+export function suggestImageUrlFix(filter: string, node: LiquidFilter): Suggestion {
+  const message = `Replace '${filter}' with 'image_url'.`;
+  const sizeStr = getExpressionArgumentValue(node, 0);
+
+  const { width, height } = ensureImageValue(getImageSize(sizeStr));
+  const { start, end } = getFilterSourceStartAndEnd(node);
+
+  return [
+    {
+      message,
+      fix: (corrector) => {
+        const insert = buildFilterString('image_url', { width, height });
+        corrector.replace(start, end, insert);
+      },
+    },
+  ];
+}
+
+function getImageSize(size?: string, imageSize = { width: 100, height: 100 }): ImageSize {
+  if (!size) return { ...imageSize };
+
+  if (size in NAMED_SIZES) {
+    const s = NAMED_SIZES[size];
+    return { width: s, height: s };
+  }
+
+  const [width, height] = size.split('x').map((s) => parseInt(s));
+
+  return ensureImageSizeLimit({ width, height });
+}
+
+function scaleImage(node: LiquidFilter, imageSize: ImageSize): ImageSize {
+  const scale = parseInt(getNamedArgumentValue(node, 'scale') || '0') || 1;
+
+  return ensureImageSizeLimit({
+    width: imageSize.width * scale,
+    height: imageSize.height * scale,
+  });
+}
+
+function ensureImageSizeLimit(imageSize: ImageSize): ImageSize {
+  return {
+    width: Math.min(imageSize.width, MAX_SIZE),
+    height: Math.min(imageSize.height, MAX_SIZE),
+  };
+}
+
+function ensureImageValue(imageSize: ImageSize): ImageSize {
+  let { width, height } = imageSize;
+
+  const isImageSizeUnset = (!height || height === -1) && (!width || width === -1);
+
+  /**
+   * If `image_url` is missing a width or height, we default to width=100, as
+   * the documentation mention an error is returned if neither are specified
+   * (interestingly, `image_url` doesn't actually fail during runtime tests).
+   *
+   * That default value is widely mentioned in the documentation and we've
+   * confirmed that in runtime tests.
+   */
+  if (isImageSizeUnset) {
+    width = 100;
+  }
+
+  return { width, height };
+}
+
+function getExpressionArgumentValue(node: LiquidFilter, index: number): string | undefined {
+  const arg = node.args.at(index);
+
+  if (isNumberLiteral(arg) || isStringLiteral(arg)) {
+    return arg.value;
+  }
+}
+
+function getNamedArgumentValue(node: LiquidFilter, propertyName: string) {
+  const argumentNode = getNamedArgumentNode(node, propertyName);
+
+  const valueNode = argumentNode?.value;
+
+  if (isNumberLiteral(valueNode) || isStringLiteral(valueNode)) {
+    return valueNode.value;
+  }
+}
+
+function getNamedArgumentNode(node: LiquidFilter, argName: string) {
+  const args = node.args;
+
+  return args.find(
+    (arg): arg is LiquidNamedArgument =>
+      isNodeOfType(NodeTypes.NamedArgument, arg) && arg.name === argName,
+  );
+}
+
+function buildFilterString(filter: string, filterParameters: FitlerParameters) {
+  const parameters = Object.entries(filterParameters)
+    .filter(([_key, value]) => value && value !== -1)
+    .map(([key, value]) => `${key}: ${value}`)
+    .join(', ');
+
+  if (!parameters) {
+    return ` ${filter}`;
+  }
+
+  return ` ${filter}: ${parameters}`;
+}
+
+function getFilterSourceStartAndEnd(node: LiquidFilter) {
+  const position = node.position;
+  const pipePosition = node.source.slice(position.start).indexOf('|');
+
+  return {
+    start: position.start + pipePosition + 1,
+    end: position.end,
+  };
+}
+
+function strValue(value?: string) {
+  return value ? `'${value}'` : null;
+}
+
+function isVariableLookup(exp?: LiquidExpression | LiquidArgument): exp is LiquidVariableLookup {
+  return isNodeOfType(NodeTypes.VariableLookup, exp);
+}
+
+function isStringLiteral(exp?: LiquidExpression | LiquidArgument): exp is LiquidString {
+  return isNodeOfType(NodeTypes.String, exp);
+}
+
+function isNumberLiteral(exp?: LiquidExpression | LiquidArgument): exp is LiquidNumber {
+  return isNodeOfType(NodeTypes.Number, exp);
+}