theme-check 0.10.1 → 1.2.0

data/lib/theme_check/asset_file.rb

@@ -1,27 +1,15 @@
 # frozen_string_literal: true
-require "pathname"
 require "zlib"
 
 module ThemeCheck
-  class AssetFile
+  class AssetFile < ThemeFile
     def initialize(relative_path, storage)
-      @relative_path = relative_path
-      @storage = storage
+      super
       @loaded = false
       @content = nil
     end
 
-    def path
-      @storage.path(@relative_path)
-    end
-
-    def relative_path
-      @relative_pathname ||= Pathname.new(@relative_path)
-    end
-
-    def content
-      @content ||= @storage.read(@relative_path)
-    end
+    alias_method :content, :source
 
     def gzipped_size
       @gzipped_size ||= Zlib.gzip(content).bytesize

data/lib/theme_check/bug.rb

@@ -2,6 +2,8 @@
 require 'theme_check/version'
 
 module ThemeCheck
+  class ThemeCheckError < StandardError; end
+
   BUG_POSTAMBLE = <<~EOS
     Theme Check Version: #{VERSION}
     Ruby Version: #{RUBY_VERSION}
@@ -15,6 +17,6 @@ module ThemeCheck
   EOS
 
   def self.bug(message)
-    abort(message + BUG_POSTAMBLE)
+    raise ThemeCheckError, message + BUG_POSTAMBLE
   end
 end

data/lib/theme_check/check.rb

@@ -9,12 +9,19 @@ module ThemeCheck
     attr_accessor :options, :ignored_patterns
     attr_writer :offenses
 
+    # The order matters.
     SEVERITIES = [
       :error,
       :suggestion,
       :style,
     ]
 
+    # [severity: sym] => number
+    SEVERITY_VALUES = SEVERITIES
+      .map
+      .with_index { |sev, i| [sev, i] }
+      .to_h
+
     CATEGORIES = [
       :liquid,
       :translation,
@@ -38,6 +45,10 @@ module ThemeCheck
         @severity if defined?(@severity)
       end
 
+      def severity_value(severity)
+        SEVERITY_VALUES[severity]
+      end
+
       def categories(*categories)
         @categories ||= []
         if categories.any?
@@ -58,7 +69,7 @@ module ThemeCheck
       end
 
       def docs_url(path)
-        "https://github.com/Shopify/theme-check/blob/master/docs/checks/#{File.basename(path, '.rb')}.md"
+        "https://github.com/Shopify/theme-check/blob/main/docs/checks/#{File.basename(path, '.rb')}.md"
       end
 
       def can_disable(disableable = nil)
@@ -85,7 +96,18 @@ module ThemeCheck
     end
 
     def severity
-      self.class.severity
+      @severity ||= self.class.severity
+    end
+
+    def severity=(severity)
+      unless SEVERITIES.include?(severity)
+        raise ArgumentError, "unknown severity. Use: #{SEVERITIES.join(', ')}"
+      end
+      @severity = severity
+    end
+
+    def severity_value
+      SEVERITY_VALUES[severity]
     end
 
     def categories

data/lib/theme_check/checks/asset_size_app_block_css.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+module ThemeCheck
+  # Reports errors when too much CSS is being referenced from a Theme App
+  # Extension block
+  class AssetSizeAppBlockCSS < LiquidCheck
+    severity :error
+    category :performance
+    doc docs_url(__FILE__)
+
+    # Don't allow this check to be disabled with a comment,
+    # since we need to be able to enforce this server-side
+    can_disable false
+
+    attr_reader :threshold_in_bytes
+
+    def initialize(threshold_in_bytes: 100_000)
+      @threshold_in_bytes = threshold_in_bytes
+    end
+
+    def on_schema(node)
+      schema = JSON.parse(node.value.nodelist.join)
+
+      if (stylesheet = schema["stylesheet"])
+        size = asset_size(stylesheet)
+        if size && size > threshold_in_bytes
+          add_offense(
+            "CSS in Theme App Extension blocks exceeds compressed size threshold (#{threshold_in_bytes} Bytes)",
+            node: node
+          )
+        end
+      end
+    rescue JSON::ParserError
+      # Ignored, handled in ValidSchema.
+    end
+
+    private
+
+    def asset_size(name)
+      asset = @theme["assets/#{name}"]
+      return if asset.nil?
+      asset.gzipped_size
+    end
+  end
+end

data/lib/theme_check/checks/asset_size_app_block_javascript.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+module ThemeCheck
+  # Reports errors when too much JS is being referenced from a Theme App
+  # Extension block
+  class AssetSizeAppBlockJavaScript < LiquidCheck
+    severity :error
+    category :performance
+    doc docs_url(__FILE__)
+
+    # Don't allow this check to be disabled with a comment,
+    # since we need to be able to enforce this server-side
+    can_disable false
+
+    attr_reader :threshold_in_bytes
+
+    def initialize(threshold_in_bytes: 10_000)
+      @threshold_in_bytes = threshold_in_bytes
+    end
+
+    def on_schema(node)
+      schema = JSON.parse(node.value.nodelist.join)
+
+      if (javascript = schema["javascript"])
+        size = asset_size(javascript)
+        if size && size > threshold_in_bytes
+          add_offense(
+            "JavaScript in Theme App Extension blocks exceeds compressed size threshold (#{threshold_in_bytes} Bytes)",
+            node: node
+          )
+        end
+      end
+    rescue JSON::ParserError
+      # Ignored, handled in ValidSchema.
+    end
+
+    private
+
+    def asset_size(name)
+      asset = @theme["assets/#{name}"]
+      return if asset.nil?
+      asset.gzipped_size
+    end
+  end
+end

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/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

@@ -10,12 +10,7 @@ module ThemeCheck
     def on_img(node)
       loading = node.attributes["loading"]&.value&.downcase
       return if ACCEPTED_LOADING_VALUES.include?(loading)
-
-      class_list = node.attributes["class"]&.value&.split(" ")
-
-      if class_list&.include?("lazyload")
-        add_offense("Use the native loading=\"lazy\" attribute instead of lazysizes", node: node)
-      elsif loading == "auto"
+      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)