@platformos/platformos-check-common 0.0.6 → 0.0.8

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,
-        });
-      },
-    };
-  },
-};

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

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