theme-check 0.3.1 → 0.6.0

data/docs/checks/valid_html_translation.md

@@ -0,0 +1,53 @@
+# Prevent invalid HTML inside translations (`ValidHTMLTranslation`)
+
+This check exists to prevent invalid HTML inside translations.
+
+## Check Details
+
+This check is aimed at eliminating invalid HTML in translations.
+
+:-1: Examples of **incorrect** code for this check:
+
+```liquid
+{
+  "hello_html": "<h2>Hello, world</h1>",
+  "image_html": "<a href='/spongebob'>Unclosed"
+}
+```
+
+:+1: Examples of **correct** code for this check:
+
+```liquid
+{% comment %}locales/en.default.json{% endcomment %}
+{
+  "hello_html": "<h1>Hello, world</h1>",
+  "image_html": "<img src='spongebob.png'>",
+  "line_break_html": "<br>",
+  "self_closing_svg_html": "<svg />"
+}
+```
+
+## Check Options
+
+The default configuration for this check is the following:
+
+```yaml
+ValidHTMLTranslation:
+  enabled: true
+```
+
+## When Not To Use It
+
+It is discouraged to to disable this rule.
+
+## Version
+
+This check has been introduced in Theme Check 0.1.0.
+
+## Resources
+
+- [Rule Source][codesource]
+- [Documentation Source][docsource]
+
+[codesource]: /lib/theme_check/checks/valid_html_translation.rb
+[docsource]: /docs/checks/valid_html_translation.md

data/docs/checks/valid_json.md

@@ -0,0 +1,60 @@
+# Enforce valid JSON (`ValidJson`)
+
+This check exists to prevent invalid JSON files in themes.
+
+## Check Details
+
+This check is aimed at eliminating errors in JSON files.
+
+:-1: Examples of **incorrect** code for this check:
+
+```json
+{
+  "comma": "trailing",
+}
+```
+
+```json
+{
+  "quotes": 'Oops, those are single quotes'
+}
+```
+
+:+1: Examples of **correct** code for this check:
+
+```json
+{
+  "comma": "not trailing"
+}
+```
+
+```json
+{
+  "quotes": "Yes. Double quotes."
+}
+```
+
+## Check Options
+
+The default configuration for this check is the following:
+
+```yaml
+ValidJson:
+  enabled: true
+```
+
+## When Not To Use It
+
+It is not safe to disable this rule.
+
+## Version
+
+This check has been introduced in Theme Check 0.1.0.
+
+## Resources
+
+- [Rule Source][codesource]
+- [Documentation Source][docsource]
+
+[codesource]: /lib/theme_check/checks/valid_json.rb
+[docsource]: /docs/checks/valid_json.md

data/docs/checks/valid_schema.md

@@ -0,0 +1,50 @@
+# Enforce valid JSON in schema tags (`ValidSchema`)
+
+This check exists to prevent invalid JSON in `{% schema %}` tags.
+
+## Check Details
+
+This check is aimed at eliminating JSON errors in schema tags.
+
+:-1: Examples of **incorrect** code for this check:
+
+```liquid
+{% schema %}
+{
+  "comma": "trailing",
+}
+{% endschema %}
+```
+
+:+1: Examples of **correct** code for this check:
+
+```liquid
+{
+  "comma": "not trailing"
+}
+```
+
+## Check Options
+
+The default configuration for this check is the following:
+
+```yaml
+ValidSchema:
+  enabled: true
+```
+
+## When Not To Use It
+
+It is not safe to disable this check.
+
+## Version
+
+This check has been introduced in Theme Check 0.1.0.
+
+## Resources
+
+- [Rule Source][codesource]
+- [Documentation Source][docsource]
+
+[codesource]: /lib/theme_check/checks/valid_schema.rb
+[docsource]: /docs/checks/valid_schema.md

data/lib/theme_check.rb

@@ -8,6 +8,9 @@ require_relative "theme_check/cli"
 require_relative "theme_check/disabled_checks"
 require_relative "theme_check/liquid_check"
 require_relative "theme_check/locale_diff"
+require_relative "theme_check/asset_file"
+require_relative "theme_check/remote_asset_file"
+require_relative "theme_check/regex_helpers"
 require_relative "theme_check/json_check"
 require_relative "theme_check/json_file"
 require_relative "theme_check/json_helpers"

data/lib/theme_check/asset_file.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+require "pathname"
+require "zlib"
+
+module ThemeCheck
+  class AssetFile
+    def initialize(relative_path, storage)
+      @relative_path = relative_path
+      @storage = storage
+      @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
+
+    def gzipped_size
+      @gzipped_size ||= Zlib.gzip(content).bytesize
+    end
+
+    def name
+      relative_path.to_s
+    end
+  end
+end

data/lib/theme_check/check.rb

@@ -18,7 +18,9 @@ module ThemeCheck
     CATEGORIES = [
       :liquid,
       :translation,
+      :performance,
       :json,
+      :performance,
     ]
 
     class << self
@@ -36,21 +38,29 @@ module ThemeCheck
         @severity if defined?(@severity)
       end
 
-      def category(category = nil)
-        if category
-          unless CATEGORIES.include?(category)
-            raise ArgumentError, "unknown category. Use: #{CATEGORIES.join(', ')}"
+      def categories(*categories)
+        @categories ||= []
+        if categories.any?
+          unknown_categories = categories.select { |category| !CATEGORIES.include?(category) }
+          if unknown_categories.any?
+            raise ArgumentError,
+              "unknown categories: #{unknown_categories.join(', ')}. Use: #{CATEGORIES.join(', ')}"
           end
-          @category = category
+          @categories = categories
         end
-        @category if defined?(@category)
+        @categories
       end
+      alias_method :category, :categories
 
       def doc(doc = nil)
         @doc = doc if doc
         @doc if defined?(@doc)
       end
 
+      def docs_url(path)
+        "https://github.com/Shopify/theme-check/blob/master/docs/checks/#{File.basename(path, '.rb')}.md"
+      end
+
       def can_disable(disableable = nil)
         unless disableable.nil?
           @can_disable = disableable
@@ -63,8 +73,8 @@ module ThemeCheck
       self.class.severity
     end
 
-    def category
-      self.class.category
+    def categories
+      self.class.categories
     end
 
     def doc
@@ -93,7 +103,7 @@ module ThemeCheck
 
     def to_s
       s = +"#{code_name}:\n"
-      properties = { severity: severity, category: category, doc: doc }.merge(options)
+      properties = { severity: severity, categories: categories, doc: doc }.merge(options)
       properties.each_pair do |name, value|
         s << "  #{name}: #{value}\n" if value
       end

data/lib/theme_check/checks/asset_size_css.rb

@@ -0,0 +1,89 @@
+# frozen_string_literal: true
+module ThemeCheck
+  class AssetSizeCSS < LiquidCheck
+    include RegexHelpers
+    severity :error
+    category :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.ends_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
+    end
+  end
+end

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.ends_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)