theme-check 0.3.2 → 0.7.0

data/lib/theme_check/checks/asset_size_javascript.rb

@@ -0,0 +1,68 @@
+# frozen_string_literal: true
+module ThemeCheck
+  # Reports errors when trying to use too much JavaScript on page load
+  # Encourages the use of the Import on Interaction pattern [1].
+  # [1]: https://addyosmani.com/blog/import-on-interaction/
+  class AssetSizeJavaScript < LiquidCheck
+    include RegexHelpers
+    severity :error
+    category :performance
+    doc docs_url(__FILE__)
+
+    Script = Struct.new(:src, :match)
+
+    SCRIPT_TAG_SRC = %r{
+      <script
+        [^>]+                              # any non closing tag character
+        src=                               # src attribute start
+        (?<src>#{QUOTED_LIQUID_ATTRIBUTE}) # src attribute value (may contain liquid)
+        [^>]*                              # any non closing character till the end
+      >
+    }omix
+
+    attr_reader :threshold_in_bytes
+
+    def initialize(threshold_in_bytes: 10000)
+      @threshold_in_bytes = threshold_in_bytes
+    end
+
+    def on_document(node)
+      @node = node
+      @source = node.template.source
+      record_offenses
+    end
+
+    def record_offenses
+      scripts(@source).each do |script|
+        file_size = src_to_file_size(script.src)
+        next if file_size.nil?
+        next if file_size <= threshold_in_bytes
+        add_offense(
+          "JavaScript on every page load exceding compressed size threshold (#{threshold_in_bytes} Bytes), consider using the import on interaction pattern.",
+          node: @node,
+          markup: script.src,
+          line_number: @source[0...script.match.begin(:src)].count("\n") + 1
+        )
+      end
+    end
+
+    def scripts(source)
+      matches(source, SCRIPT_TAG_SRC)
+        .map { |m| Script.new(m[:src].gsub(START_OR_END_QUOTE, ""), m) }
+    end
+
+    def src_to_file_size(src)
+      # We're kind of intentionally only looking at {{ 'asset' | asset_url }} or full urls in here.
+      # More complicated liquid statements are not in scope.
+      if src =~ /^#{VARIABLE}$/o && src =~ /asset_url/ && src =~ Liquid::QuotedString
+        asset_id = Regexp.last_match(0).gsub(START_OR_END_QUOTE, "")
+        asset = @theme.assets.find { |a| a.name.end_with?("/" + asset_id) }
+        return if asset.nil?
+        asset.gzipped_size
+      elsif src =~ %r{^(https?:)?//}
+        asset = RemoteAssetFile.from_src(src)
+        asset.gzipped_size
+      end
+    end
+  end
+end

data/lib/theme_check/checks/convert_include_to_render.rb

@@ -4,7 +4,7 @@ module ThemeCheck
   class ConvertIncludeToRender < LiquidCheck
     severity :suggestion
     category :liquid
-    doc "https://shopify.dev/docs/themes/liquid/reference/tags/deprecated-tags#include"
+    doc docs_url(__FILE__)
 
     def on_include(node)
       add_offense("`include` is deprecated - convert it to `render`", node: node)

data/lib/theme_check/checks/default_locale.rb

@@ -3,6 +3,7 @@ module ThemeCheck
   class DefaultLocale < JsonCheck
     severity :suggestion
     category :translation
+    doc docs_url(__FILE__)
 
     def on_end
       return if @theme.default_locale_json

data/lib/theme_check/checks/deprecated_filter.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 module ThemeCheck
   class DeprecatedFilter < LiquidCheck
-    doc "https://shopify.dev/docs/themes/liquid/reference/filters/deprecated-filters"
+    doc docs_url(__FILE__)
     category :liquid
     severity :suggestion
 

data/lib/theme_check/checks/img_width_and_height.rb

@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+module ThemeCheck
+  # Reports errors when trying to use parser-blocking script tags
+  class ImgWidthAndHeight < LiquidCheck
+    include RegexHelpers
+    severity :error
+    categories :liquid, :performance
+    doc docs_url(__FILE__)
+
+    # Not implemented with lookbehinds and lookaheads because performance was shit!
+    IMG_TAG = %r{<img#{HTML_ATTRIBUTES}/?>}oxim
+    SRC_ATTRIBUTE = /\s(src)=(#{QUOTED_LIQUID_ATTRIBUTE})/oxim
+    WIDTH_ATTRIBUTE = /\s(width)=(#{QUOTED_LIQUID_ATTRIBUTE})/oxim
+    HEIGHT_ATTRIBUTE = /\s(height)=(#{QUOTED_LIQUID_ATTRIBUTE})/oxim
+
+    FIELDS = [WIDTH_ATTRIBUTE, HEIGHT_ATTRIBUTE]
+    ENDS_IN_CSS_UNIT = /(cm|mm|in|px|pt|pc|em|ex|ch|rem|vw|vh|vmin|vmax|%)$/i
+
+    def on_document(node)
+      @source = node.template.source
+      @node = node
+      record_offenses
+    end
+
+    private
+
+    def record_offenses
+      matches(@source, IMG_TAG).each do |img_match|
+        next unless img_match[0] =~ SRC_ATTRIBUTE
+        record_missing_field_offenses(img_match)
+        record_units_in_field_offenses(img_match)
+      end
+    end
+
+    def record_missing_field_offenses(img_match)
+      width = WIDTH_ATTRIBUTE.match(img_match[0])
+      height = HEIGHT_ATTRIBUTE.match(img_match[0])
+      return if width && height
+      missing_width = width.nil?
+      missing_height = height.nil?
+      error_message = if missing_width && missing_height
+        "Missing width and height attributes"
+      elsif missing_width
+        "Missing width attribute"
+      elsif missing_height
+        "Missing height attribute"
+      end
+
+      add_offense(
+        error_message,
+        node: @node,
+        markup: img_match[0],
+        line_number: @source[0...img_match.begin(0)].count("\n") + 1
+      )
+    end
+
+    def record_units_in_field_offenses(img_match)
+      FIELDS.each do |field|
+        field_match = field.match(img_match[0])
+        next if field_match.nil?
+        value = field_match[2].gsub(START_OR_END_QUOTE, '')
+        next unless value =~ ENDS_IN_CSS_UNIT
+        value_without_units = value.gsub(ENDS_IN_CSS_UNIT, '')
+        start = img_match.begin(0) + field_match.begin(2)
+        add_offense(
+          "The #{field_match[1]} attribute does not take units. Replace with \"#{value_without_units}\".",
+          node: @node,
+          markup: value,
+          line_number: @source[0...start].count("\n") + 1
+        )
+      end
+    end
+  end
+end

data/lib/theme_check/checks/liquid_tag.rb

@@ -1,12 +1,12 @@
 # frozen_string_literal: true
 module ThemeCheck
-  # Recommends using {% liquid ... %} if 3 or more consecutive {% ... %} are found.
+  # Recommends using {% liquid ... %} if 4 or more consecutive {% ... %} are found.
   class LiquidTag < LiquidCheck
     severity :suggestion
     category :liquid
-    doc "https://shopify.dev/docs/themes/liquid/reference/tags/theme-tags#liquid"
+    doc docs_url(__FILE__)
 
-    def initialize(min_consecutive_statements: 10)
+    def initialize(min_consecutive_statements: 4)
       @first_statement = nil
       @consecutive_statements = 0
       @min_consecutive_statements = min_consecutive_statements

data/lib/theme_check/checks/matching_schema_translations.rb

@@ -3,6 +3,7 @@ module ThemeCheck
   class MatchingSchemaTranslations < LiquidCheck
     severity :suggestion
     category :translation
+    doc docs_url(__FILE__)
 
     def on_schema(node)
       schema = JSON.parse(node.value.nodelist.join)

data/lib/theme_check/checks/matching_translations.rb

@@ -4,13 +4,14 @@ module ThemeCheck
   class MatchingTranslations < JsonCheck
     severity :suggestion
     category :translation
+    doc docs_url(__FILE__)
 
     def initialize
       @files = []
     end
 
     def on_file(file)
-      return unless file.name.starts_with?("locales/")
+      return unless file.name.start_with?("locales/")
       return unless file.content.is_a?(Hash)
       return if file.name == @theme.default_locale_json&.name
 

data/lib/theme_check/checks/missing_enable_comment.rb

@@ -2,6 +2,7 @@
 module ThemeCheck
   class MissingEnableComment < LiquidCheck
     severity :error
+    doc docs_url(__FILE__)
 
     # Don't allow this check to be disabled with a comment,
     # as we need to be able to check for disabled checks.

data/lib/theme_check/checks/missing_required_template_files.rb

@@ -3,11 +3,10 @@
 module ThemeCheck
   # Reports missing shopify required theme files
   # required templates: https://shopify.dev/tutorials/review-theme-store-requirements-files
-
   class MissingRequiredTemplateFiles < LiquidCheck
     severity :error
     category :liquid
-    doc "https://shopify.dev/docs/themes/theme-templates"
+    doc docs_url(__FILE__)
 
     REQUIRED_LIQUID_FILES = %w(layout/theme)
     REQUIRED_TEMPLATE_FILES = %w(

data/lib/theme_check/checks/missing_template.rb

@@ -4,6 +4,7 @@ module ThemeCheck
   class MissingTemplate < LiquidCheck
     severity :suggestion
     category :liquid
+    doc docs_url(__FILE__)
 
     def on_include(node)
       template = node.value.template_name_expr

data/lib/theme_check/checks/nested_snippet.rb

@@ -4,6 +4,7 @@ module ThemeCheck
   class NestedSnippet < LiquidCheck
     severity :suggestion
     category :liquid
+    doc docs_url(__FILE__)
 
     class TemplateInfo < Struct.new(:includes)
       def with_deep_nested(templates, max, current_level = 0)

data/lib/theme_check/checks/parser_blocking_javascript.rb

@@ -2,14 +2,16 @@
 module ThemeCheck
   # Reports errors when trying to use parser-blocking script tags
   class ParserBlockingJavaScript < LiquidCheck
+    include RegexHelpers
     severity :error
-    category :liquid
+    categories :liquid, :performance
+    doc docs_url(__FILE__)
 
     PARSER_BLOCKING_SCRIPT_TAG = %r{
       <script                                    # Find the start of a script tag
-      (?=(?:[^>]|\n|\r)+?src=)+?                 # Make sure src= is in the script with a lookahead
+      (?=[^>]+?src=)                             # Make sure src= is in the script with a lookahead
       (?:(?!defer|async|type=["']module['"]).)*? # Find tags that don't have defer|async|type="module"
-      >
+      /?>
     }xim
     SCRIPT_TAG_FILTER = /\{\{[^}]+script_tag\s+\}\}/
 
@@ -32,23 +34,14 @@ module ThemeCheck
       )
     end
 
-    # The trickiness here is matching on scripts that are defined on
-    # multiple lines (or repeat matches). This makes the line_number
-    # calculation a bit weird. So instead, we traverse the string in
-    # a very imperative way.
     def record_offenses_from_regex(regex: nil, message: nil)
-      i = 0
-      while (i = @source.index(regex, i))
-        script = @source.match(regex, i)[0]
-
+      matches(@source, regex).each do |match|
         add_offense(
           message,
           node: @node,
-          markup: script,
-          line_number: @source[0...i].count("\n") + 1
+          markup: match[0],
+          line_number: @source[0...match.begin(0)].count("\n") + 1
         )
-
-        i += script.size
       end
     end
   end

data/lib/theme_check/checks/remote_asset.rb

@@ -0,0 +1,98 @@
+# frozen_string_literal: true
+module ThemeCheck
+  class RemoteAsset < LiquidCheck
+    include RegexHelpers
+    severity :suggestion
+    categories :liquid, :performance
+    doc docs_url(__FILE__)
+
+    OFFENSE_MESSAGE = "Asset should be served by the Shopify CDN for better performance."
+
+    HTML_FILTERS = [
+      'stylesheet_tag',
+      'script_tag',
+      'img_tag',
+    ]
+    ASSET_URL_FILTERS = [
+      'asset_url',
+      'asset_img_url',
+      'file_img_url',
+      'file_url',
+      'global_asset_url',
+      'img_url',
+      'payment_type_img_url',
+      'shopify_asset_url',
+    ]
+
+    RESOURCE_TAG = /<(?<tag_name>img|script|link|source)#{HTML_ATTRIBUTES}>/oim
+    RESOURCE_URL = /\s(?:src|href)=(?<resource_url>#{QUOTED_LIQUID_ATTRIBUTE})/oim
+    ASSET_URL_FILTER = /[\|\s]*(#{ASSET_URL_FILTERS.join('|')})/omi
+    PROTOCOL = %r{(https?:)?//}
+    ABSOLUTE_PATH = %r{\A/[^/]}im
+    RELATIVE_PATH = %r{\A(?!#{PROTOCOL})[^/\{]}oim
+    REL = /\srel=(?<rel>#{QUOTED_LIQUID_ATTRIBUTE})/oim
+
+    def on_variable(node)
+      record_variable_offense(node)
+    end
+
+    def on_document(node)
+      source = node.template.source
+      record_html_offenses(node, source)
+    end
+
+    private
+
+    def record_variable_offense(variable_node)
+      # We flag HTML tags with URLs not hosted by Shopify
+      return if !html_resource_drop?(variable_node) || variable_hosted_by_shopify?(variable_node)
+      add_offense(OFFENSE_MESSAGE, node: variable_node)
+    end
+
+    def html_resource_drop?(variable_node)
+      variable_node.value.filters
+        .any? { |(filter_name, *_filter_args)| HTML_FILTERS.include?(filter_name) }
+    end
+
+    def variable_hosted_by_shopify?(variable_node)
+      variable_node.value.filters
+        .any? { |(filter_name, *_filter_args)| ASSET_URL_FILTERS.include?(filter_name) }
+    end
+
+    # This part is slightly more complicated because we don't have an
+    # HTML AST. We have to resort to looking at the HTML with regexes
+    # to figure out if we have a resource (stylesheet, script, or media)
+    # that points to a remote domain.
+    def record_html_offenses(node, source)
+      matches(source, RESOURCE_TAG).each do |match|
+        tag = match[0]
+
+        # We don't flag stuff without URLs
+        next unless tag =~ RESOURCE_URL
+        resource_match = Regexp.last_match
+        resource_url = resource_match[:resource_url].gsub(START_OR_END_QUOTE, '')
+
+        next if non_stylesheet_link?(tag)
+        next if url_hosted_by_shopify?(resource_url)
+        next if resource_url =~ ABSOLUTE_PATH
+        next if resource_url =~ RELATIVE_PATH
+
+        start = match.begin(0) + resource_match.begin(:resource_url)
+        add_offense(
+          OFFENSE_MESSAGE,
+          node: node,
+          markup: resource_url,
+          line_number: source[0...start].count("\n") + 1,
+        )
+      end
+    end
+
+    def non_stylesheet_link?(tag)
+      tag =~ REL && !(Regexp.last_match[:rel] =~ /\A['"]stylesheet['"]\Z/)
+    end
+
+    def url_hosted_by_shopify?(url)
+      url =~ /\A#{VARIABLE}\Z/oim && url =~ ASSET_URL_FILTER
+    end
+  end
+end

data/lib/theme_check/checks/required_directories.rb

@@ -5,7 +5,7 @@ module ThemeCheck
   class RequiredDirectories < LiquidCheck
     severity :error
     category :liquid
-    doc "https://shopify.dev/tutorials/develop-theme-files"
+    doc docs_url(__FILE__)
 
     REQUIRED_DIRECTORIES = %w(assets config layout locales sections snippets templates)
 

data/lib/theme_check/checks/required_layout_theme_object.rb

@@ -4,7 +4,7 @@ module ThemeCheck
   class RequiredLayoutThemeObject < LiquidCheck
     severity :error
     category :liquid
-    doc "https://shopify.dev/docs/themes/theme-templates/theme-liquid"
+    doc docs_url(__FILE__)
 
     LAYOUT_FILENAME = "layout/theme"
 

data/lib/theme_check/checks/space_inside_braces.rb

@@ -4,6 +4,7 @@ module ThemeCheck
   class SpaceInsideBraces < LiquidCheck
     severity :style
     category :liquid
+    doc docs_url(__FILE__)
 
     def initialize
       @ignore = false

data/lib/theme_check/checks/syntax_error.rb

@@ -4,6 +4,7 @@ module ThemeCheck
   class SyntaxError < LiquidCheck
     severity :error
     category :liquid
+    doc docs_url(__FILE__)
 
     def on_document(node)
       node.template.warnings.each do |warning|

data/lib/theme_check/checks/template_length.rb

@@ -3,6 +3,7 @@ module ThemeCheck
   class TemplateLength < LiquidCheck
     severity :suggestion
     category :liquid
+    doc docs_url(__FILE__)
 
     def initialize(max_length: 200, exclude_schema: true)
       @max_length = max_length