theme-check 0.10.2 → 1.3.0

data/data/shopify_liquid/objects.yml

@@ -40,6 +40,7 @@
 - linklist
 - linklists
 - location
+- localization
 - metafield
 - model
 - model_source
@@ -55,6 +56,7 @@
 - powered_by_link
 - product
 - product_option
+- product_variant
 - recommendations
 - request
 - routes

data/docs/checks/app_block_valid_tags.md

@@ -0,0 +1,40 @@
+# Reject Forbidden Tags from Theme App Extension Blocks (`AppBlockValidTags`)
+
+This rule exists to prevent theme app extension blocks from containing forbidden tags in their liquid code.
+
+## Check Details
+
+This rule verifies none of the below tags are used in theme app extension blocks.
+
+- `{% javascript %}`
+- `{% stylesheet %}`
+- `{% include 'foo' %}`
+- `{% layout 'foo' %}`
+- `{% section 'foo' %}`
+
+:-1: **Incorrect** code for this check occurs with the use of any of the above tags in the liquid code of theme app extension blocks.
+
+## Check Options
+
+The default configuration for theme app extensions is the following:
+
+```yaml
+AppBlockValidTags:
+  enabled: true
+```
+
+## When Not To Use It
+
+This rule should not be disabled locally.
+
+## Version
+
+This check has been introduced in 1.3.0
+
+## Resources
+
+- [Rule Source][codesource]
+- [Documentation Source][docsource]
+
+[codesource]: /lib/theme_check/checks/app_block_valid_tags.rb
+[docsource]: /docs/checks/app_block_valid_tags.md

data/docs/checks/asset_size_app_block_css.md

@@ -0,0 +1,52 @@
+# Prevent Large CSS bundles (`AssetSizeAppBlockCSS`)
+
+This rule exists to prevent large CSS bundles from being included via Theme App Extensions (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/app.css is **greater** than `threshold_in_bytes` compressed. -->
+{% schema %}
+{
+  ...
+  "stylesheet": "app.css"
+}
+{% endschema %}
+```
+
+## Check Options
+
+The default configuration is the following:
+
+```yaml
+AssetSizeAppBlockCSS:
+  enabled: true
+  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.
+
+This includes theme and remote stylesheets.
+
+## When Not To Use It
+
+This rule should not be disabled locally since the check will be enforced when
+promoting new versions of the extension.
+
+## Version
+
+This check has been introduced in 1.1.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_app_block_css.rb
+[docsource]: /docs/checks/asset_size_app_block_css.md

data/docs/checks/asset_size_app_block_javascript.md

@@ -0,0 +1,57 @@
+# Prevent Abuse on Server Rendered App Blocks (`AssetSizeAppBlockJavaScript`)
+
+For server rendered app blocks, it is an anti-pattern to execute large JavaScript bundles on every page load
+
+This doesn't mean they don't have a reason to exist. For instance, chat widgets are mini applications embedded inside web pages. Designing such an app with server rendered updates would be absurd. However, if only 10% of the users interact with the chat widget, the other 90% should not have to execute the entire bundle on every page load.
+
+The natural solution to this problem is to implement the chat widget using the [Import on Interaction Pattern][ioip].
+
+## Check Details
+
+This rule disallows the use of block JavaScript files and external scripts to have a compressed size greater than a configured `threshold_in_bytes`.
+
+:-1: Examples of **incorrect** code for this check:
+```liquid
+<!-- Here assets/chat-widget.js is more than 10KB gzipped. -->
+{% schema %}
+{
+  ...
+  "javascript": "chat-widget.js"
+}
+{% endschema %}
+```
+
+## Check Options
+
+The default configuration is the following:
+
+```yaml
+AssetSizeAppBlockJavaScript:
+  enabled: true
+  threshold_in_bytes: 10000
+```
+
+### `threshold_in_bytes`
+
+The `threshold_in_bytes` option (default: `10000`) determines the maximum allowed compressed size in bytes that a single JavaScript file can take.
+
+This includes theme and remote scripts.
+
+## When Not To Use It
+
+This rule should not be disabled locally since the check will be enforced when
+promoting new versions of the extension.
+
+## Version
+
+This check has been introduced in 1.1.0
+
+## Resources
+
+- [The Import On Interaction Pattern][ioip]
+- [Rule Source][codesource]
+- [Documentation Source][docsource]
+
+[ioip]: https://addyosmani.com/blog/import-on-interaction/
+[codesource]: /lib/theme_check/checks/asset_size_app_block_javascript.rb
+[docsource]: /docs/checks/asset_size_app_block_javascript.md

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/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/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/missing_template.md

@@ -25,8 +25,33 @@ The default configuration for this check is the following:
 ```yaml
 MissingTemplate:
   enabled: true
+  ignore_missing: []
 ```
 
+### `ignore_missing`
+
+Specify a list of patterns of missing template files to ignore.
+
+While the `ignore` option will ignore all occurrences of `MissingTemplate` according to the file in which they appear, `ignore_missing` allows ignoring all occurrences of `MissingTemplate` based on the target template, the template being rendered.
+
+For example:
+
+```yaml
+MissingTemplate:
+  ignore_missing:
+  - snippets/icon-*
+```
+
+Would ignore offenses on `{% render 'icon-missing' %}` across all theme files.
+
+```yaml
+MissingTemplate:
+  ignore:
+  - templates/index.liquid
+```
+
+Would ignore all `MissingTemplate` in `templates/index.liquid`, no mater the file being rendered.
+
 ## Version
 
 This check has been introduced in Theme Check 0.1.0.

data/docs/checks/pagination_size.md

@@ -0,0 +1,44 @@
+# Ensure `paginate` tags are used with performant sizes
+
+## Check Details
+
+This check is aimed at keeping response times low.
+
+:-1: Examples of **incorrect** code for this check:
+
+```liquid
+<!-- Using too large of page size -->
+{% paginate collection.products by 999 %}
+```
+
+:+1: Examples of **correct** code for this check:
+
+```liquid
+{% paginate collection.products by 12 %}
+```
+
+Use sizes that are integers below the `max_size`, and above the `min_size`.
+
+## Check Options
+
+The default configuration for this check is the following:
+
+```yaml
+PaginationSize:
+  enabled: true
+  ignore: []
+  min_size: 1
+  max_size: 50
+```
+
+## When Not To Use It
+
+N/A
+
+## Version
+
+This check has been introduced in Theme Check 1.3.0.
+
+## Resources
+
+[paginate]: https://shopify.dev/api/liquid/objects/paginate