theme-check 0.9.0 → 1.0.0

data/lib/theme_check/checks/asset_size_css.rb

@@ -1,89 +1,26 @@
 # frozen_string_literal: true
 module ThemeCheck
-  class AssetSizeCSS < LiquidCheck
+  class AssetSizeCSS < HtmlCheck
     include RegexHelpers
     severity :error
-    category :performance
+    category :html, :performance
     doc docs_url(__FILE__)
 
-    Link = Struct.new(:href, :index)
-
-    LINK_TAG_HREF = %r{
-      <link
-        (?=[^>]+?rel=['"]?stylesheet['"]?)    # Make sure rel=stylesheet is in the link with lookahead
-        [^>]+                                 # any non closing tag character
-        href=                                 # href attribute start
-        (?<href>#{QUOTED_LIQUID_ATTRIBUTE})   # href attribute value (may contain liquid)
-        [^>]*                                 # any non closing character till the end
-      >
-    }omix
-    STYLESHEET_TAG = %r{
-      #{Liquid::VariableStart}          # VariableStart
-      (?:(?!#{Liquid::VariableEnd}).)*? # anything that isn't followed by a VariableEnd
-      \|\s*asset_url\s*                 # | asset_url
-      \|\s*stylesheet_tag\s*            # | stylesheet_tag
-      #{Liquid::VariableEnd}            # VariableEnd
-    }omix
-
     attr_reader :threshold_in_bytes
 
     def initialize(threshold_in_bytes: 100_000)
       @threshold_in_bytes = threshold_in_bytes
     end
 
-    def on_document(node)
-      @node = node
-      @source = node.template.source
-      record_offenses
-    end
-
-    def record_offenses
-      stylesheets(@source).each do |stylesheet|
-        file_size = href_to_file_size(stylesheet.href)
-        next if file_size.nil?
-        next if file_size <= threshold_in_bytes
-        add_offense(
-          "CSS on every page load exceding compressed size threshold (#{threshold_in_bytes} Bytes).",
-          node: @node,
-          markup: stylesheet.href,
-          line_number: @source[0...stylesheet.index].count("\n") + 1
-        )
-      end
-    end
-
-    def stylesheets(source)
-      stylesheet_links = matches(source, LINK_TAG_HREF)
-        .map do |m|
-          Link.new(
-            m[:href].gsub(START_OR_END_QUOTE, ""),
-            m.begin(:href),
-          )
-        end
-
-      stylesheet_tags = matches(source, STYLESHEET_TAG)
-        .map do |m|
-          Link.new(
-            m[0],
-            m.begin(0),
-          )
-        end
-
-      stylesheet_links + stylesheet_tags
-    end
-
-    def href_to_file_size(href)
-      # asset_url (+ optional stylesheet_tag) variables
-      if href =~ /^#{VARIABLE}$/o && href =~ /asset_url/ && href =~ 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
-
-      # remote URLs
-      elsif href =~ %r{^(https?:)?//}
-        asset = RemoteAssetFile.from_src(href)
-        asset.gzipped_size
-      end
+    def on_link(node)
+      return if node.attributes['rel']&.value != "stylesheet"
+      file_size = href_to_file_size(node.attributes['href']&.value)
+      return if file_size.nil?
+      return if file_size <= threshold_in_bytes
+      add_offense(
+        "CSS on every page load exceeding compressed size threshold (#{threshold_in_bytes} Bytes).",
+        node: node
+      )
     end
   end
 end

data/lib/theme_check/checks/asset_size_css_stylesheet_tag.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+module ThemeCheck
+  class AssetSizeCSSStylesheetTag < LiquidCheck
+    include RegexHelpers
+    severity :error
+    category :liquid, :performance
+    doc docs_url(__FILE__)
+
+    def initialize(threshold_in_bytes: 100_000)
+      @threshold_in_bytes = threshold_in_bytes
+    end
+
+    def on_variable(node)
+      used_filters = node.value.filters.map { |name, *_rest| name }
+      return unless used_filters.include?("stylesheet_tag")
+      file_size = href_to_file_size('{{' + node.markup + '}}')
+      return if file_size <= @threshold_in_bytes
+      add_offense(
+        "CSS on every page load exceeding compressed size threshold (#{@threshold_in_bytes} Bytes).",
+        node: node
+      )
+    end
+  end
+end

data/lib/theme_check/checks/asset_size_javascript.rb

@@ -3,52 +3,26 @@ 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
+  class AssetSizeJavaScript < HtmlCheck
     include RegexHelpers
     severity :error
-    category :performance
+    category :html, :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) }
+    def on_script(node)
+      file_size = src_to_file_size(node.attributes['src']&.value)
+      return if file_size.nil?
+      return if file_size <= threshold_in_bytes
+      add_offense(
+        "JavaScript on every page load exceeds compressed size threshold (#{threshold_in_bytes} Bytes), consider using the import on interaction pattern.",
+        node: node
+      )
     end
 
     def src_to_file_size(src)

data/lib/theme_check/checks/asset_url_filters.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+module ThemeCheck
+  class AssetUrlFilters < LiquidCheck
+    severity :suggestion
+    categories :liquid, :performance
+    doc docs_url(__FILE__)
+
+    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',
+    ]
+
+    def on_variable(node)
+      record_variable_offense(node)
+    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("Use one of the asset_url filters to serve assets", 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
+  end
+end

data/lib/theme_check/checks/deprecate_bgsizes.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+module ThemeCheck
+  class DeprecateBgsizes < HtmlCheck
+    severity :suggestion
+    category :html, :performance
+    doc docs_url(__FILE__)
+
+    def on_div(node)
+      class_list = node.attributes["class"]&.value&.split(" ")
+      add_offense("Use the native loading=\"lazy\" attribute instead of lazysizes", node: node) if class_list&.include?("lazyload")
+      add_offense("Use the CSS imageset attribute instead of data-bgset", node: node) if node.attributes["data-bgset"]
+    end
+  end
+end

data/lib/theme_check/checks/deprecate_lazysizes.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+module ThemeCheck
+  class DeprecateLazysizes < HtmlCheck
+    severity :suggestion
+    category :html, :performance
+    doc docs_url(__FILE__)
+
+    def on_img(node)
+      class_list = node.attributes["class"]&.value&.split(" ")
+      add_offense("Use the native loading=\"lazy\" attribute instead of lazysizes", node: node) if class_list&.include?("lazyload")
+      add_offense("Use the native srcset attribute instead of data-srcset", node: node) if node.attributes["data-srcset"]
+      add_offense("Use the native sizes attribute instead of data-sizes", node: node) if node.attributes["data-sizes"]
+      add_offense("Do not set the data-sizes attribute to auto", node: node) if node.attributes["data-sizes"]&.value == "auto"
+    end
+  end
+end

data/lib/theme_check/checks/html_parsing_error.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+module ThemeCheck
+  class HtmlParsingError < HtmlCheck
+    severity :error
+    category :html
+    doc docs_url(__FILE__)
+
+    def on_parse_error(exception, template)
+      add_offense("HTML in this template can not be parsed: #{exception.message}", template: template)
+    end
+  end
+end

data/lib/theme_check/checks/img_lazy_loading.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+module ThemeCheck
+  class ImgLazyLoading < HtmlCheck
+    severity :suggestion
+    categories :html, :performance
+    doc docs_url(__FILE__)
+
+    ACCEPTED_LOADING_VALUES = %w[lazy eager]
+
+    def on_img(node)
+      loading = node.attributes["loading"]&.value&.downcase
+      return if ACCEPTED_LOADING_VALUES.include?(loading)
+      if loading == "auto"
+        add_offense("Prefer loading=\"lazy\" to defer loading of images", node: node)
+      else
+        add_offense("Add a loading=\"lazy\" attribute to defer loading of images", node: node)
+      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 4 or more consecutive {% ... %} are found.
+  # Recommends using {% liquid ... %} if 5 or more consecutive {% ... %} are found.
   class LiquidTag < LiquidCheck
     severity :suggestion
     category :liquid
     doc docs_url(__FILE__)
 
-    def initialize(min_consecutive_statements: 4)
+    def initialize(min_consecutive_statements: 5)
       @first_statement = nil
       @consecutive_statements = 0
       @min_consecutive_statements = min_consecutive_statements

data/lib/theme_check/checks/remote_asset.rb

@@ -1,99 +1,43 @@
 # frozen_string_literal: true
 module ThemeCheck
-  class RemoteAsset < LiquidCheck
-    include RegexHelpers
+  class RemoteAsset < HtmlCheck
     severity :suggestion
-    categories :liquid, :performance
+    categories :html, :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 = %r{<(?<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
+    TAGS = %w[img script link source]
     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
+    CDN_ROOT = "https://cdn.shopify.com/"
 
-    def on_document(node)
-      source = node.template.source
-      record_html_offenses(node, source)
-    end
+    def on_element(node)
+      return unless TAGS.include?(node.name)
 
-    private
+      resource_url = node.attributes["src"]&.value || node.attributes["href"]&.value
+      return if resource_url.nil? || resource_url.empty?
 
-    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
+      # Ignore if URL is Liquid, taken care of by AssetUrlFilters check
+      return if resource_url.start_with?(CDN_ROOT)
+      return if resource_url =~ ABSOLUTE_PATH
+      return if resource_url =~ RELATIVE_PATH
+      return if url_hosted_by_shopify?(resource_url)
 
-    def html_resource_drop?(variable_node)
-      variable_node.value.filters
-        .any? { |(filter_name, *_filter_args)| HTML_FILTERS.include?(filter_name) }
-    end
+      # Ignore non-stylesheet rel tags
+      rel = node.attributes["rel"]
+      return if rel && rel.value != "stylesheet"
 
-    def variable_hosted_by_shopify?(variable_node)
-      variable_node.value.filters
-        .any? { |(filter_name, *_filter_args)| ASSET_URL_FILTERS.include?(filter_name) }
+      add_offense(
+        "Asset should be served by the Shopify CDN for better performance.",
+        node: node,
+      )
     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
-        next if resource_url.empty?
-
-        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
+    private
 
     def url_hosted_by_shopify?(url)
-      url =~ /\A#{VARIABLE}\Z/oim && url =~ ASSET_URL_FILTER
+      url.start_with?(Liquid::VariableStart) &&
+        AssetUrlFilters::ASSET_URL_FILTERS.any? { |filter| url.include?(filter) }
     end
   end
 end