theme-check 0.6.0 → 0.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 93631c68de37297060f57799731a0ef4adae05aa9d89f8a019d28b0afe65533a
-  data.tar.gz: 86efb9c580a6206974bec0c876fc1feca80c5dad3c7d500e4528a537f01c9613
+  metadata.gz: 299afef3e63667dca21495d3a3e6246d378b4be98c6b26a7a5f46405e6db80b8
+  data.tar.gz: b4d57dd51b0bd8960fcd42314fea731c1ae0aaac1ca29bbd2c591b3a6a9f4781
 SHA512:
-  metadata.gz: 712d137ecb52bc6af0b83db9ed391252f78d5a0ad2a3b4c3d82d6b1a59e927da167b2bdea40a7f07f45d77cb16c72ca2e49243b78bb6c52296ed84a30c5cd83f
-  data.tar.gz: 3e6505817fc868979c2ead8f99133d9c24754b905b3211774c74e9a1261a9f962fd9660c94aed70838a2c0dcb086e353a7ce5a739d9ada8456f7ba0ff61ee077
+  metadata.gz: ea83f67457a564676ca6e32f7b6f601f54c2d6c259cc1a8af705d673640bb9a3e11881f54ca9cc571faf75cb36af93b51c5f03c96547d2cb24eb19ff69d59795
+  data.tar.gz: 2694a73abcb292ebcc6d1f142a9255f9b5126d4748c64ece82c0081acb65d12c194acbd6232f24b50d0ddf982d076f49b342ef833883a09ab9a287712b631af5

data/.github/workflows/theme-check.yml

@@ -8,15 +8,23 @@ on:
 
 jobs:
   test:
+    runs-on: macos-latest
 
-    runs-on: ubuntu-20.04
+    strategy:
+      matrix:
+        version:
+          - 3.0.0
+          - 2.7.1
+          - 2.6.6
+
+    name: Ruby ${{ matrix.version }}
 
     steps:
     - uses: actions/checkout@v2
-    - name: Set up Ruby
+    - name: Set up Ruby ${{ matrix.version }}
       uses: ruby/setup-ruby@v1
       with:
-        ruby-version: 2.7
+        ruby-version: ${{ matrix.version }}
     - uses: actions/cache@v1
       with:
         path: vendor/bundle

data/.rubocop.yml

@@ -7,7 +7,7 @@ require:
   - rubocop-rake
 
 AllCops:
-  TargetRubyVersion: 2.7
+  TargetRubyVersion: 2.6
   Exclude:
     - 'vendor/bundle/**/*'
     - 'packaging/builds/**/*'

data/CHANGELOG.md

@@ -1,4 +1,33 @@
 
+0.8.0 / 2021-04-13
+==================
+
+ * Set minimal Ruby version to 2.6
+
+0.7.3 / 2021-04-13
+==================
+
+  * Refactor CLI option parsing
+
+0.7.2 / 2021-04-12
+==================
+
+  * Fixup bug in RemoteAsset causing Language Server to break
+
+0.7.1 / 2021-04-12
+==================
+
+  * Fix High CPU Bug in RemoteAsset check
+  * Fix document link for render tags that trim whitespace.
+
+0.7.0 / 2021-04-08
+==================
+
+  * Add [RemoteAsset Check](/docs/checks/remote_asset.md)
+  * Fixes:
+    * Don't hang on self closing img tags ([#247](https://github.com/shopify/theme-check/issues/247))
+    * Fix document links from different root
+
 0.6.0 / 2021-03-23
 ==================
 

data/Gemfile

@@ -21,8 +21,8 @@ group :development do
   gem 'guard-minitest'
 end
 
-gem 'rubocop', require: false
-gem 'rubocop-performance', require: false
-gem 'rubocop-shopify', require: false
-gem 'rubocop-minitest', require: false
-gem 'rubocop-rake', require: false
+gem 'rubocop', '~> 1.12.0', require: false
+gem 'rubocop-performance', '~> 1.10.2', require: false
+gem 'rubocop-shopify', '~> 1.0.7', require: false
+gem 'rubocop-minitest', '~> 0.11.0', require: false
+gem 'rubocop-rake', '~> 0.5.1', require: false

data/LICENSE.md

@@ -1,6 +1,8 @@
 
 Copyright 2020-present, Shopify Inc.
 
+Contains code from activesupport Copyright (c) 2005-2019 David Heinemeier Hansson
+
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 
 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

data/README.md

@@ -35,6 +35,7 @@ Theme Check currently checks for the following:
 As well as checks that prevent easy to spot performance problems:
 
 ✅ Use of [parser-blocking](/docs/checks/parser_blocking_javascript.md) JavaScript  
+✅ [Use of non-Shopify domains for assets](/docs/checks/remote_asset.md)  
 ✅ [Missing width and height attributes on `img` tags](/docs/checks/img_width_and_height.md)  
 ✅ [Too much JavaScript](/docs/checks/asset_size_javascript.md)  
 ✅ [Too much CSS](/docs/checks/asset_size_css.md)  

data/RELEASING.md

@@ -2,11 +2,18 @@
 
 1. Check the Semantic Versioning page for info on how to version the new release: http://semver.org
 
-2. Create a PR to update the version in `lib/theme_check/version.rb` and replace the `THEME_CHECK_VERSION` placeholder in the documentation for new rules.
+2. Run the following command to update the version in `lib/theme_check/version.rb` and replace the `THEME_CHECK_VERSION` placeholder in the documentation for new rules:
 
-3. Merge your PR to master
+   ```bash
+   VERSION="X.X.X"
+   rake prerelease[$VERSION]
+   ```
+
+3. Commit your changes and make a PR.
+
+4. Merge your PR to master.
 
-4. On [Shipit](https://shipit.shopify.io/shopify/theme-check/rubygems), deploy your commit.
+5. On [Shipit](https://shipit.shopify.io/shopify/theme-check/rubygems), deploy your commit.
 
 ## Homebrew Release Process
 

data/Rakefile

@@ -46,3 +46,9 @@ end
 
 desc("Builds all distribution packages of the CLI")
 task(package: 'package:all')
+
+desc("Update files in the repo to match new version")
+task :prerelease, [:version] do |_t, args|
+  require 'theme_check/releaser'
+  ThemeCheck::Releaser.new.release(args.version)
+end

data/config/default.yml

@@ -93,3 +93,6 @@ AssetSizeCSS:
 
 ImgWidthAndHeight:
   enabled: true
+
+RemoteAsset:
+  enabled: true

data/dev.yml

@@ -3,7 +3,7 @@ name: theme-check
 type: ruby
 
 up:
-  - ruby: 2.7.1
+  - ruby: 2.6.6
   - bundler
 
 commands:

data/docs/checks/remote_asset.md

@@ -0,0 +1,82 @@
+# Discourage use of third party domains for hosting assets (`RemoteAsset`)
+
+Years ago, loading jQuery from a common CDN was good for performance because the browser cache could be reused across website. This is no longer true because browsers now include the domain from which the request was made in the cache key.
+
+Therefore, this technique now makes things worse. Here's why:
+
+* **The benefits of HTTP/2 prioritization are lost.** HTTP/2 prioritization is a mechanism used by servers. If different servers are used to deliver assets, there's no way to prioritize.
+* **A new connection dance (DNS, TCP, TLS) must be done to start downloading the resource.** With HTTPS, this takes 5 round trips to achieve. The farther away the buyer is from that domain, the longer it takes.
+* **The [slow start][slowstart] part of the Internet's TCP congestion control strategy must happen on every connection.** This means that the download "acceleration" we commonly observe must be repeated many times over.
+
+The fix? Deliver as much as you can from a small number of connections. In a Shopify context, this is done by leveraging the `assets/` folder and the [URL filters][url_filters].
+
+## Check Details
+
+This check is aimed at eliminating unnecessary HTTP connections.
+
+:-1: Examples of **incorrect** code for this check:
+
+```liquid
+<!-- Using multiple CDNs -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" defer></script>
+{{ "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" | stylesheet_tag }}
+<img src="https://example.com/heart.png" ...>
+
+<!-- Missing img_url filter -->
+<img src="{{ image }}" ...>
+```
+
+In the examples above, multiple connections are competing for resources, are accelerating download independently and are improperly prioritized.
+
+:+1: Examples of **correct** code for this check:
+
+```liquid
+<!-- Good -->
+<script src="{{ 'jquery.min.js' | asset_url }}" defer></script>
+{{ 'bootstrap.min.css' | asset_url | stylesheet_tag }}
+
+<!-- Better -->
+<script src="{{ 'theme.js' | asset_url }}" defer></script>
+{{ 'theme.css' | asset_url | stylesheet_tag }}
+
+<!-- Images -->
+<img src="{{ image | img_url }}" ...>
+```
+
+In the above, the JavaScript, CSS and images are all loading from the same connection. Making it so the browser and CDN can properly prioritize which assets are downloaded first while maintaining a "hot" connection that downloads fast.
+
+This can be done by downloading the files from those CDNs directly into your theme's `assets/` folder.
+
+Use the [`img_url` filter][img_url] for images.
+
+## Check Options
+
+The default configuration for this check is the following:
+
+```yaml
+RemoteAsset:
+  enabled: true
+```
+
+## When Not To Use It
+
+When the remote content is highly dynamic.
+
+## Version
+
+This check has been introduced in Theme Check 0.7.0.
+
+## Resources
+
+- [Announcement by Google][googleprivacy]
+- [HTTP Cache Partioning Explainer](https://github.com/shivanigithub/http-cache-partitioning)
+- [Slow Start][slowstart]
+- [Rule Source][codesource]
+- [Documentation Source][docsource]
+
+[googleprivacy]: https://developers.google.com/web/updates/2020/10/http-cache-partitioning#resources
+[codesource]: /lib/theme_check/checks/remote_asset.rb
+[docsource]: /docs/checks/remote_asset.md
+[slowstart]: https://en.wikipedia.org/wiki/TCP_congestion_control#Slow_start
+[url_filters]: https://shopify.dev/docs/themes/liquid/reference/filters/url-filters
+[img_url]: https://shopify.dev/docs/themes/liquid/reference/filters/url-filters#img_url

data/exe/theme-check

@@ -3,4 +3,4 @@
 
 require "theme_check"
 
-ThemeCheck::Cli.new.run!(ARGV)
+ThemeCheck::Cli.parse_and_run(ARGV)

data/lib/theme_check.rb

@@ -22,6 +22,7 @@ require_relative "theme_check/offense"
 require_relative "theme_check/printer"
 require_relative "theme_check/shopify_liquid"
 require_relative "theme_check/storage"
+require_relative "theme_check/string_helpers"
 require_relative "theme_check/file_system_storage"
 require_relative "theme_check/in_memory_storage"
 require_relative "theme_check/tags"

data/lib/theme_check/check.rb

@@ -82,7 +82,7 @@ module ThemeCheck
     end
 
     def code_name
-      self.class.name.demodulize
+      StringHelpers.demodulize(self.class.name)
     end
 
     def ignore!

data/lib/theme_check/checks/asset_size_css.rb

@@ -75,7 +75,7 @@ module ThemeCheck
       # 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) }
+        asset = @theme.assets.find { |a| a.name.end_with?("/" + asset_id) }
         return if asset.nil?
         asset.gzipped_size
 

data/lib/theme_check/checks/asset_size_javascript.rb

@@ -56,7 +56,7 @@ module ThemeCheck
       # 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) }
+        asset = @theme.assets.find { |a| a.name.end_with?("/" + asset_id) }
         return if asset.nil?
         asset.gzipped_size
       elsif src =~ %r{^(https?:)?//}

data/lib/theme_check/checks/img_width_and_height.rb

@@ -8,7 +8,7 @@ module ThemeCheck
     doc docs_url(__FILE__)
 
     # Not implemented with lookbehinds and lookaheads because performance was shit!
-    IMG_TAG = /<img#{HTML_ATTRIBUTES}>/oxim
+    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
@@ -35,7 +35,7 @@ module ThemeCheck
     def record_missing_field_offenses(img_match)
       width = WIDTH_ATTRIBUTE.match(img_match[0])
       height = HEIGHT_ATTRIBUTE.match(img_match[0])
-      return if width.present? && height.present?
+      return if width && height
       missing_width = width.nil?
       missing_height = height.nil?
       error_message = if missing_width && missing_height

data/lib/theme_check/checks/matching_translations.rb

@@ -11,7 +11,7 @@ module ThemeCheck
     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/parser_blocking_javascript.rb

@@ -11,7 +11,7 @@ module ThemeCheck
       <script                                    # Find the start of a script tag
       (?=[^>]+?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+\}\}/
 

data/lib/theme_check/checks/remote_asset.rb

@@ -0,0 +1,99 @@
+# 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 = %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
+    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
+        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
+
+    def url_hosted_by_shopify?(url)
+      url =~ /\A#{VARIABLE}\Z/oim && url =~ ASSET_URL_FILTER
+    end
+  end
+end

data/lib/theme_check/checks/translation_key_exists.rb

@@ -4,10 +4,7 @@ module ThemeCheck
     extend self
 
     def translations
-      @translations ||= begin
-        # loaded as a Set because the include? lookup will be much faster.
-        YAML.load(File.read("#{__dir__}/../../../data/shopify_translation_keys.yml")).to_set
-      end
+      @translations ||= YAML.load(File.read("#{__dir__}/../../../data/shopify_translation_keys.yml")).to_set
     end
 
     def include?(key)