theme-check 0.10.1 → 1.2.0

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: 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.
+
+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/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/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/exe/theme-check-language-server.bat

@@ -0,0 +1,3 @@
+@ECHO OFF
+
+ruby "%~dp0\theme-check-language-server" %*

data/exe/theme-check.bat

@@ -0,0 +1,3 @@
+@ECHO OFF
+
+ruby "%~dp0\theme-check" %*

data/lib/theme_check.rb

@@ -4,6 +4,7 @@ require "liquid"
 require_relative "theme_check/version"
 require_relative "theme_check/bug"
 require_relative "theme_check/exceptions"
+require_relative "theme_check/theme_file"
 require_relative "theme_check/analyzer"
 require_relative "theme_check/check"
 require_relative "theme_check/checks_tracking"
@@ -45,3 +46,17 @@ Dir[__dir__ + "/theme_check/checks/*.rb"].each { |file| require file }
 # UTF-8 is the default internal and external encoding, like in Rails & Shopify.
 Encoding.default_external = Encoding::UTF_8
 Encoding.default_internal = Encoding::UTF_8
+
+module ThemeCheck
+  def self.with_liquid_c_disabled
+    if defined?(Liquid::C)
+      was_enabled = Liquid::C.enabled
+      Liquid::C.enabled = false if was_enabled
+    end
+    yield
+  ensure
+    if defined?(Liquid::C) && was_enabled
+      Liquid::C.enabled = true
+    end
+  end
+end

data/lib/theme_check/analyzer.rb

@@ -34,9 +34,11 @@ module ThemeCheck
 
       liquid_visitor = Visitor.new(@liquid_checks, @disabled_checks)
       html_visitor = HtmlVisitor.new(@html_checks)
-      @theme.liquid.each do |template|
-        liquid_visitor.visit_template(template)
-        html_visitor.visit_template(template)
+      ThemeCheck.with_liquid_c_disabled do
+        @theme.liquid.each do |template|
+          liquid_visitor.visit_template(template)
+          html_visitor.visit_template(template)
+        end
       end
 
       @theme.json.each { |json_file| @json_checks.call(:on_file, json_file) }
@@ -47,24 +49,26 @@ module ThemeCheck
     def analyze_files(files)
       reset
 
-      # Call all checks that run on the whole theme
-      liquid_visitor = Visitor.new(@liquid_checks.whole_theme, @disabled_checks)
-      html_visitor = HtmlVisitor.new(@html_checks.whole_theme)
-      @theme.liquid.each do |template|
-        liquid_visitor.visit_template(template)
-        html_visitor.visit_template(template)
-      end
-      @theme.json.each { |json_file| @json_checks.whole_theme.call(:on_file, json_file) }
-
-      # Call checks that run on a single files, only on specified file
-      liquid_visitor = Visitor.new(@liquid_checks.single_file, @disabled_checks)
-      html_visitor = HtmlVisitor.new(@html_checks.single_file)
-      files.each do |file|
-        if file.liquid?
-          liquid_visitor.visit_template(file)
-          html_visitor.visit_template(file)
-        elsif file.json?
-          @json_checks.single_file.call(:on_file, file)
+      ThemeCheck.with_liquid_c_disabled do
+        # Call all checks that run on the whole theme
+        liquid_visitor = Visitor.new(@liquid_checks.whole_theme, @disabled_checks)
+        html_visitor = HtmlVisitor.new(@html_checks.whole_theme)
+        @theme.liquid.each do |template|
+          liquid_visitor.visit_template(template)
+          html_visitor.visit_template(template)
+        end
+        @theme.json.each { |json_file| @json_checks.whole_theme.call(:on_file, json_file) }
+
+        # Call checks that run on a single files, only on specified file
+        liquid_visitor = Visitor.new(@liquid_checks.single_file, @disabled_checks)
+        html_visitor = HtmlVisitor.new(@html_checks.single_file)
+        files.each do |file|
+          if file.liquid?
+            liquid_visitor.visit_template(file)
+            html_visitor.visit_template(file)
+          elsif file.json?
+            @json_checks.single_file.call(:on_file, file)
+          end
         end
       end