theme-check 0.9.0 → 1.0.0

data/docs/checks/{CHECK_DOCS_TEMPLATE.md → TEMPLATE.md.erb}

@@ -1,4 +1,4 @@
-# Check Title (`CheckClassName`)
+# Check Title (`<%= class_name %>`)
 
 A brief paragraph explaining why the check exists.
 
@@ -21,7 +21,7 @@ This check is aimed at eliminating ...
 The default configuration for this check is the following:
 
 ```yaml
-CheckClassName:
+<%= class_name %>:
   enabled: true
   some_option: 10
 ```
@@ -36,12 +36,12 @@ If you don't want to ..., then it's safe to disable this rule.
 
 ## Version
 
-This check has been introduced in Theme Check X.X.X.
+This check has been introduced in Theme Check THEME_CHECK_VERSION.
 
 ## Resources
 
 - [Rule Source][codesource]
 - [Documentation Source][docsource]
 
-[codesource]: /lib/theme_check/checks/check_class_name.rb
-[docsource]: /docs/checks/check_class_name.md
+[codesource]: /<%= code_source %>
+[docsource]: /<%= doc_source %>

data/docs/checks/asset_size_css_stylesheet_tag.md

@@ -0,0 +1,50 @@
+# Check Title (`AssetSizeCSSStylesheetTag`)
+
+The `stylesheet_tag` filter generates a link tag that points to a given stylesheet. This rule exists to prevent large CSS bundles (for speed).
+
+## Check Details
+
+This rule disallows the use of too much CSS in themes, as configured by `threshold_in_bytes`.
+
+:-1: Examples of **incorrect** code for this check:
+```liquid
+<!-- Here, assets/theme.css is **greater** than `threshold_in_bytes` compressed. -->
+{{ 'theme.css' | asset_url | stylesheet_tag }}
+```
+
+:+1: Example of **correct** code for this check:
+```liquid
+<!-- Here, assets/theme.css is **less** than `threshold_in_bytes` compressed. -->
+{{ 'theme.css' | asset_url | stylesheet_tag }}
+```
+
+## Check Options
+
+The default configuration for this check is the following:
+
+```yaml
+AssetSizeCSSStylesheetTag:
+  enabled: false
+  threshold_in_bytes: 100_000
+```
+
+### `threshold_in_bytes`
+
+The `threshold_in_bytes` option (default: `100_000`) determines the maximum allowed compressed size in bytes that a single CSS file can take.
+
+## When Not To Use It
+
+This rule is safe to disable.
+
+## Version
+
+This check has been introduced in Theme Check 1.0.0
+
+## Resources
+
+- [The Performance Inequality Gap](https://infrequently.org/2021/03/the-performance-inequality-gap/)
+- [Rule Source][codesource]
+- [Documentation Source][docsource]
+
+[codesource]: /lib/theme_check/checks/asset_size_css_stylesheet_tag.rb
+[docsource]: /docs/checks/asset_size_css_stylesheet_tag.md

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/docs/checks/deprecate_bgsizes.md

@@ -0,0 +1,66 @@
+# Deprecate Bgsizes (`DeprecateBgsizes`)
+
+The lazySizes bgset extension allows you to define multiple background images with a width descriptor. The extension will then load the best image size for the current viewport and device (https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/bgset)
+
+
+## Check Details
+
+This check is aimed at discouraging the use of the lazySizes bgset plugin 
+
+:-1: Examples of **incorrect** code for this check:
+
+```liquid
+
+<!-- Reports use of "lazyload" class and "data-bgset" attribute -->
+
+<script src="ls.bgset.min.js"></script>
+<script src="lazysizes.min.js"></script>
+<div class="lazyload" data-bgset="image-200.jpg 200w, image-300.jpg 300w, image-400.jpg 400w" data-sizes="auto">
+</div>
+
+```
+
+:+1: Examples of **correct** code for this check:
+
+```liquid
+
+<!-- Uses the CSS image-set() attribute instead of "data-bgset" -->
+<!-- CSS Stylesheet -->
+.box {
+  background-image: -webkit-image-set(
+    url("small-balloons.jpg") 1x,
+    url("large-balloons.jpg") 2x);
+  background-image: image-set(
+    url("small-balloons.jpg") 1x,
+    url("large-balloons.jpg") 2x);
+}
+
+<!-- HTML -->
+<div class="box"></div>
+
+```
+
+## Check Options
+
+The default configuration for this check is the following:
+
+```yaml
+DeprecateBgsizes:
+  enabled: true
+```
+
+## When Not To Use It
+
+You should disable this rule in older browsers that don't support the CSS image-set attribute.
+
+## Version
+
+This check has been introduced in Theme Check 1.0.0.
+
+## Resources
+
+- [Rule Source][codesource]
+- [Documentation Source][docsource]
+
+[codesource]: /lib/theme_check/checks/deprecate_bgsizes.rb
+[docsource]: /docs/checks/deprecate_bgsizes.md

data/docs/checks/deprecate_lazysizes.md

@@ -0,0 +1,61 @@
+# Deprecate lazySizes (`DeprecateLazysizes`)
+
+[lazysizes](https://github.com/aFarkas/lazysizes) is a common JavaScript library used to lazy load images, iframes and scripts.
+
+## Check Details
+
+This check is aimed at discouraging the use of the lazysizes JavaScript library
+
+:-1: Examples of **incorrect** code for this check:
+
+```liquid
+
+<!-- Reports use of "lazyload" class -->
+<img src="a.jpg" class="lazyload">
+
+<!-- Reports use of "data-srcset" and "data-sizes" attribute. Reports data-sizes="auto" -->
+<img
+  alt="House by the lake"
+  data-sizes="auto"
+  data-srcset="small.jpg 500w,
+  medium.jpg 640w,
+  big.jpg 1024w"
+  data-src="medium.jpg"
+  class="lazyload"
+/>
+
+```
+
+:+1: Examples of **correct** code for this check:
+
+```liquid
+
+<!-- Does not use lazySizes library. Instead uses native "loading" attribute -->
+<img src="a.jpg" loading="lazy">
+
+```
+
+## Check Options
+
+The default configuration for this check is the following:
+
+```yaml
+DeprecateLazysizes:
+  enabled: true
+```
+
+## When Not To Use It
+
+You should disable this rule if you want to support lazy loading of images in older browser that don't support the loading="lazy" attribute yet.
+
+## Version
+
+This check has been introduced in Theme Check 1.0.0.
+
+## Resources
+
+- [Rule Source][codesource]
+- [Documentation Source][docsource]
+
+[codesource]: /lib/theme_check/checks/deprecate_lazysizes.rb
+[docsource]: /docs/checks/deprecate_lazysizes.md

data/docs/checks/html_parsing_error.md

@@ -0,0 +1,50 @@
+# Report HTML parsing errors (`HtmlParsingError`)
+
+Report errors preventing the HTML from being parsed and analyzed by Theme Check.
+
+## Check Details
+
+This check is aimed at reporting HTML errors that prevent a file from being analyzed.
+
+The HTML parser limits the number of attributes per element to 400, and the maximum depth of the DOM tree to 400 levels. If any one of those limits is reached, parsing stops, and all HTML offenses on this file are ignored.
+
+:-1: Examples of **incorrect** code for this check:
+
+```liquid
+<img src="muffin.jpeg"
+     data-attrbute-1=""
+     data-attrbute-2=""
+     ... up to
+     data-attrbute-400="">
+```
+
+:+1: Examples of **correct** code for this check:
+
+```liquid
+<img src="muffin.jpeg">
+```
+
+## Check Options
+
+The default configuration for this check is the following:
+
+```yaml
+HtmlParsingError:
+  enabled: true
+```
+
+## When Not To Use It
+
+If you don't care about HTML offenses.
+
+## Version
+
+This check has been introduced in Theme Check 0.10.2.
+
+## Resources
+
+- [Rule Source][codesource]
+- [Documentation Source][docsource]
+
+[codesource]: /lib/theme_check/checks/html_parsing_error.rb
+[docsource]: /docs/checks/html_parsing_error.md

data/docs/checks/img_lazy_loading.md

@@ -0,0 +1,61 @@
+# Lazy loading image tags (`ImgLazyLoading`)
+
+Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical rendering path, which translates into reduced page load times.
+
+Lazy loading can occur on different moments in the application, but it typically happens on some user interactions such as scrolling and navigation.
+
+Very often, webpages contain many images that contribute to data-usage and how fast a page can load. Most of those images are off-screen (non-critical), requiring user interaction (an example being scroll) in order to view them.
+
+_Quoted from [MDN - Lazy loading][mdn]_
+
+## Check Details
+
+This check is aimed at defering loading non-critical images.
+
+:-1: Examples of **incorrect** code for this check:
+
+```liquid
+<img src="a.jpg">
+
+<!-- Replaces lazysize.js -->
+<img src="a.jpg" class="lazyload">
+
+<!-- `auto` is deprecated -->
+<img src="a.jpg" loading="auto">
+```
+
+:+1: Examples of **correct** code for this check:
+
+```liquid
+<img src="a.jpg" loading="lazy">
+
+<!-- `eager` is also accepted, but prefer `lazy` -->
+<img src="a.jpg" loading="eager">
+```
+
+## Check Options
+
+The default configuration for this check is the following:
+
+```yaml
+ImgLazyLoading:
+  enabled: true
+```
+
+## When Not To Use It
+
+If you don't want to defer loading of images, then it's safe to disable this rule.
+
+## Version
+
+This check has been introduced in Theme Check 0.10.0.
+
+## Resources
+
+- [Rule Source][codesource]
+- [Documentation Source][docsource]
+- [MDN - Lazy loading][mdn]
+
+[codesource]: /lib/theme_check/checks/img_lazy_loading.rb
+[docsource]: /docs/checks/img_lazy_loading.md
+[mdn]: https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading

data/docs/checks/liquid_tag.md

@@ -39,12 +39,12 @@ The default configuration for this check is the following:
 ```yaml
 LiquidTag:
   enabled: true
-  min_consecutive_statements: 4
+  min_consecutive_statements: 5
 ```
 
 ### `min_consecutive_statements`
 
-The `min_consecutive_statements` option (Default: `4`) determines the maximum (inclusive) number of consecutive statements before the check recommends a refactor.
+The `min_consecutive_statements` option (Default: `5`) determines the maximum (inclusive) number of consecutive statements before the check recommends a refactor.
 
 ## When Not To Use It
 

data/docs/checks/template_length.md

@@ -21,8 +21,10 @@ The default configuration for this check is the following:
 ```yaml
 TemplateLength:
   enabled: true
-  max_length: 200
+  max_length: 500
   exclude_schema: true
+  exclude_stylesheet: true
+  exclude_javascript: true
 ```
 
 ### `max_length`
@@ -31,7 +33,15 @@ The `max_length` (Default: `200`) option determines the maximum number of lines
 
 ### `exclude_schema`
 
-The `exclude_schema` (Default: `true`) option determines if the schema lines from a template should be excluded from the line count.
+The `exclude_schema` (Default: `true`) option determines if the lines inside `{% schema %}` blocks from a template should be excluded from the line count.
+
+### `exclude_stylesheet`
+
+The `exclude_stylesheet` (Default: `true`) option determines if the lines inside `{% stylesheet %}` blocks from a template should be excluded from the line count.
+
+### `exclude_javascript`
+
+The `exclude_javascript` (Default: `true`) option determines if the lines inside `{% javascript %}` blocks from a template should be excluded from the line count.
 
 ## When Not To Use It
 

data/lib/theme_check/check.rb

@@ -18,7 +18,6 @@ module ThemeCheck
     CATEGORIES = [
       :liquid,
       :translation,
-      :performance,
       :html,
       :json,
       :performance,
@@ -124,6 +123,7 @@ module ThemeCheck
     def ==(other)
       other.is_a?(Check) && code_name == other.code_name
     end
+    alias_method :eql?, :==
 
     def to_s
       s = +"#{code_name}:\n"

data/lib/theme_check/checks/TEMPLATE.rb.erb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+module ThemeCheck
+  # TODO: inherit from HtmlCheck or JsonCheck if working on a non-Liquid check
+  class <%= class_name %> < LiquidCheck
+    severity :suggestion
+    category :liquid
+    doc docs_url(__FILE__)
+
+    # TODO: def on_<NODE_TYPE>
+  end
+end