theme-check 0.9.0 → 0.9.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e5970832846bda5a0e7cb27c99ebef32382050c911350d1d208211849bef7d55
-  data.tar.gz: 89d3bb2d5a261c817dddfbf50ad9ac31a589f88fe4f2a2df23b8c5aaad51c4db
+  metadata.gz: a114e025e51ad2a09395b4ae0dca33e9417942a76ed781fdd639e7d7d1b35928
+  data.tar.gz: ff3c7f9b43f5ccae262cd22c8547d308a71e214cdd7f924208c25122624a48dc
 SHA512:
-  metadata.gz: 2ee4f610dc461c6e70e870723f801ddb0f1e5381eebfc6622030af68486c2c6650c11e530be38456cf0df8666ecc5e78b26d16cf60428142e04f0ebde45edf9f
-  data.tar.gz: 36053d9337a817da4334a5341be1877f04d86b3f4d88606a2acccb2028c0a3a07227086183de5aa06bd44e9beeebd0a4650d08b746fdfbced854e945469d61a3
+  metadata.gz: 3e4ead0f1d63cc68dfbaff6dd5462f08b9008c04dd87fae9499875cf967e501c68327adec0ac3c1f253bbdbf1343d14ddeb63fe58b4c9f4cb24f494315898d70
+  data.tar.gz: 62baa63bcf203d2bd0a7894787011f23d363cb6192920ac67c2ce0dfbe89f382c461a3d5a989c23234e5e1a9db7bfd9d10c4801bca121c1993a082b58887705d

data/CHANGELOG.md

@@ -1,4 +1,10 @@
 
+v0.9.1 / 2021-06-04
+==================
+
+  * Convert `RemoteAsset` into an `HtmlCheck`
+  * Move Liquid logic from `RemoteAsset` to a new `AssetUrlFilters` check
+
 v0.9.0 / 2021-05-28
 ==================
 

data/config/default.yml

@@ -130,6 +130,10 @@ RemoteAsset:
   enabled: true
   ignore: []
 
+AssetUrlFilters:
+  enabled: true
+  ignore: []
+
 ContentForHeaderModification:
   enabled: true
   ignore: []

data/docs/checks/asset_url_filters.md

@@ -0,0 +1,56 @@
+# Ensure `asset_url` filters are used when serving assets (`AssetUrlFilters`)
+
+See the [`RemoteAsset` check documentation][remote_asset] for a detailed explanation on why remote assets are discouraged.
+
+## Check Details
+
+This check is aimed at eliminating unnecessary HTTP connections.
+
+:-1: Examples of **incorrect** code for this check:
+
+```liquid
+<!-- Using multiple CDNs -->
+{{ "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" | stylesheet_tag }}
+
+<!-- Missing img_url filter -->
+{{ url | img_tag }}
+```
+
+:+1: Examples of **correct** code for this check:
+
+```liquid
+{{ 'bootstrap.min.css' | asset_url | stylesheet_tag }}
+
+<!-- Images -->
+{{ url | img_url | img_tag }}
+```
+
+Use the [`assets_url`](asset_url) or [`img_url`](img_url) filter to load the files in your theme's `assets/` folder from the Shopify CDN.
+
+## Check Options
+
+The default configuration for this check is the following:
+
+```yaml
+AssetUrlFilters:
+  enabled: true
+```
+
+## When Not To Use It
+
+When the remote content is highly dynamic.
+
+## Version
+
+This check has been introduced in Theme Check 0.9.1.
+
+## Resources
+
+- [Rule Source][codesource]
+- [Documentation Source][docsource]
+
+[codesource]: /lib/theme_check/checks/remote_asset_filters.rb
+[docsource]: /docs/checks/remote_asset_filters.md
+[remote_asset]: /docs/checks/remote_asset.md
+[asset_url]: https://shopify.dev/docs/themes/liquid/reference/filters/url-filters#assert_url
+[img_url]: https://shopify.dev/docs/themes/liquid/reference/filters/url-filters#img_url

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/remote_asset.rb

@@ -1,99 +1,41 @@
 # 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
 
-    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 =~ 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

data/lib/theme_check/html_node.rb

@@ -17,6 +17,10 @@ module ThemeCheck
       @value.name == "text"
     end
 
+    def element?
+      @value.element?
+    end
+
     def children
       @value.children.map { |child| HtmlNode.new(child, template) }
     end

data/lib/theme_check/html_visitor.rb

@@ -22,10 +22,12 @@ module ThemeCheck
     end
 
     def visit(node)
+      call_checks(:on_element, node) if node.element?
       call_checks(:"on_#{node.name}", node)
       node.children.each { |child| visit(child) }
       unless node.literal?
         call_checks(:"after_#{node.name}", node)
+        call_checks(:after_element, node) if node.element?
       end
     end
 

data/lib/theme_check/liquid_check.rb

@@ -6,6 +6,7 @@ module ThemeCheck
     extend ChecksTracking
     include ParsingHelpers
 
+    # TODO: remove this once all regex checks are migrate to HtmlCheck# TODO: remove this once all regex checks are migrate to HtmlCheck
     TAG = /#{Liquid::TagStart}.*?#{Liquid::TagEnd}/om
     VARIABLE = /#{Liquid::VariableStart}.*?#{Liquid::VariableEnd}/om
     START_OR_END_QUOTE = /(^['"])|(['"]$)/

data/lib/theme_check/version.rb

@@ -1,4 +1,4 @@
 # frozen_string_literal: true
 module ThemeCheck
-  VERSION = "0.9.0"
+  VERSION = "0.9.1"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: theme-check
 version: !ruby/object:Gem::Version
-  version: 0.9.0
+  version: 0.9.1
 platform: ruby
 authors:
 - Marc-André Cournoyer
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2021-05-28 00:00:00.000000000 Z
+date: 2021-06-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: liquid
@@ -72,6 +72,7 @@ files:
 - docs/checks/CHECK_DOCS_TEMPLATE.md
 - docs/checks/asset_size_css.md
 - docs/checks/asset_size_javascript.md
+- docs/checks/asset_url_filters.md
 - docs/checks/content_for_header_modification.md
 - docs/checks/convert_include_to_render.md
 - docs/checks/default_locale.md
@@ -111,6 +112,7 @@ files:
 - lib/theme_check/checks.rb
 - lib/theme_check/checks/asset_size_css.rb
 - lib/theme_check/checks/asset_size_javascript.rb
+- lib/theme_check/checks/asset_url_filters.rb
 - lib/theme_check/checks/content_for_header_modification.rb
 - lib/theme_check/checks/convert_include_to_render.rb
 - lib/theme_check/checks/default_locale.rb