theme-check 0.10.2 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (78) hide show
  1. checksums.yaml +4 -4
  2. data/.github/workflows/theme-check.yml +2 -6
  3. data/CHANGELOG.md +51 -0
  4. data/CONTRIBUTING.md +1 -1
  5. data/README.md +39 -0
  6. data/RELEASING.md +34 -2
  7. data/bin/theme-check +29 -0
  8. data/bin/theme-check-language-server +29 -0
  9. data/config/default.yml +46 -3
  10. data/config/nothing.yml +11 -0
  11. data/config/theme_app_extension.yml +168 -0
  12. data/data/shopify_liquid/objects.yml +2 -0
  13. data/docs/checks/app_block_valid_tags.md +40 -0
  14. data/docs/checks/asset_size_app_block_css.md +52 -0
  15. data/docs/checks/asset_size_app_block_javascript.md +57 -0
  16. data/docs/checks/asset_size_css_stylesheet_tag.md +50 -0
  17. data/docs/checks/deprecate_bgsizes.md +66 -0
  18. data/docs/checks/deprecate_lazysizes.md +61 -0
  19. data/docs/checks/liquid_tag.md +2 -2
  20. data/docs/checks/missing_template.md +25 -0
  21. data/docs/checks/pagination_size.md +44 -0
  22. data/docs/checks/template_length.md +12 -2
  23. data/docs/checks/undefined_object.md +5 -0
  24. data/lib/theme_check/analyzer.rb +25 -21
  25. data/lib/theme_check/asset_file.rb +3 -15
  26. data/lib/theme_check/bug.rb +3 -1
  27. data/lib/theme_check/check.rb +26 -4
  28. data/lib/theme_check/checks/app_block_valid_tags.rb +36 -0
  29. data/lib/theme_check/checks/asset_size_app_block_css.rb +44 -0
  30. data/lib/theme_check/checks/asset_size_app_block_javascript.rb +44 -0
  31. data/lib/theme_check/checks/asset_size_css.rb +11 -74
  32. data/lib/theme_check/checks/asset_size_css_stylesheet_tag.rb +24 -0
  33. data/lib/theme_check/checks/asset_size_javascript.rb +11 -37
  34. data/lib/theme_check/checks/convert_include_to_render.rb +3 -1
  35. data/lib/theme_check/checks/deprecate_bgsizes.rb +14 -0
  36. data/lib/theme_check/checks/deprecate_lazysizes.rb +16 -0
  37. data/lib/theme_check/checks/img_lazy_loading.rb +2 -7
  38. data/lib/theme_check/checks/img_width_and_height.rb +3 -3
  39. data/lib/theme_check/checks/liquid_tag.rb +2 -2
  40. data/lib/theme_check/checks/missing_template.rb +21 -5
  41. data/lib/theme_check/checks/pagination_size.rb +65 -0
  42. data/lib/theme_check/checks/parser_blocking_javascript.rb +1 -1
  43. data/lib/theme_check/checks/remote_asset.rb +4 -2
  44. data/lib/theme_check/checks/space_inside_braces.rb +27 -7
  45. data/lib/theme_check/checks/template_length.rb +18 -4
  46. data/lib/theme_check/checks/undefined_object.rb +1 -1
  47. data/lib/theme_check/checks/valid_html_translation.rb +1 -1
  48. data/lib/theme_check/checks.rb +11 -1
  49. data/lib/theme_check/cli.rb +52 -15
  50. data/lib/theme_check/config.rb +56 -10
  51. data/lib/theme_check/corrector.rb +4 -0
  52. data/lib/theme_check/exceptions.rb +29 -27
  53. data/lib/theme_check/file_system_storage.rb +12 -0
  54. data/lib/theme_check/html_check.rb +1 -0
  55. data/lib/theme_check/html_node.rb +37 -16
  56. data/lib/theme_check/html_visitor.rb +17 -3
  57. data/lib/theme_check/json_check.rb +2 -2
  58. data/lib/theme_check/json_file.rb +2 -29
  59. data/lib/theme_check/json_printer.rb +26 -0
  60. data/lib/theme_check/language_server/constants.rb +8 -0
  61. data/lib/theme_check/language_server/document_link_engine.rb +40 -4
  62. data/lib/theme_check/language_server/handler.rb +6 -2
  63. data/lib/theme_check/language_server/server.rb +13 -2
  64. data/lib/theme_check/liquid_check.rb +0 -12
  65. data/lib/theme_check/node.rb +6 -4
  66. data/lib/theme_check/offense.rb +56 -3
  67. data/lib/theme_check/parsing_helpers.rb +7 -4
  68. data/lib/theme_check/position.rb +98 -14
  69. data/lib/theme_check/regex_helpers.rb +20 -0
  70. data/lib/theme_check/tags.rb +62 -8
  71. data/lib/theme_check/template.rb +3 -32
  72. data/lib/theme_check/theme.rb +2 -0
  73. data/lib/theme_check/theme_file.rb +40 -0
  74. data/lib/theme_check/version.rb +1 -1
  75. data/lib/theme_check.rb +16 -0
  76. data/theme-check.gemspec +1 -1
  77. metadata +26 -7
  78. data/bin/liquid-server +0 -4
@@ -40,6 +40,7 @@
40
40
  - linklist
41
41
  - linklists
42
42
  - location
43
+ - localization
43
44
  - metafield
44
45
  - model
45
46
  - model_source
@@ -55,6 +56,7 @@
55
56
  - powered_by_link
56
57
  - product
57
58
  - product_option
59
+ - product_variant
58
60
  - recommendations
59
61
  - request
60
62
  - routes
@@ -0,0 +1,40 @@
1
+ # Reject Forbidden Tags from Theme App Extension Blocks (`AppBlockValidTags`)
2
+
3
+ This rule exists to prevent theme app extension blocks from containing forbidden tags in their liquid code.
4
+
5
+ ## Check Details
6
+
7
+ This rule verifies none of the below tags are used in theme app extension blocks.
8
+
9
+ - `{% javascript %}`
10
+ - `{% stylesheet %}`
11
+ - `{% include 'foo' %}`
12
+ - `{% layout 'foo' %}`
13
+ - `{% section 'foo' %}`
14
+
15
+ :-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.
16
+
17
+ ## Check Options
18
+
19
+ The default configuration for theme app extensions is the following:
20
+
21
+ ```yaml
22
+ AppBlockValidTags:
23
+ enabled: true
24
+ ```
25
+
26
+ ## When Not To Use It
27
+
28
+ This rule should not be disabled locally.
29
+
30
+ ## Version
31
+
32
+ This check has been introduced in 1.3.0
33
+
34
+ ## Resources
35
+
36
+ - [Rule Source][codesource]
37
+ - [Documentation Source][docsource]
38
+
39
+ [codesource]: /lib/theme_check/checks/app_block_valid_tags.rb
40
+ [docsource]: /docs/checks/app_block_valid_tags.md
@@ -0,0 +1,52 @@
1
+ # Prevent Large CSS bundles (`AssetSizeAppBlockCSS`)
2
+
3
+ This rule exists to prevent large CSS bundles from being included via Theme App Extensions (for speed).
4
+
5
+ ## Check Details
6
+
7
+ This rule disallows the use of too much CSS in themes, as configured by `threshold_in_bytes`.
8
+
9
+ :-1: Examples of **incorrect** code for this check:
10
+ ```liquid
11
+ <!-- Here, assets/app.css is **greater** than `threshold_in_bytes` compressed. -->
12
+ {% schema %}
13
+ {
14
+ ...
15
+ "stylesheet": "app.css"
16
+ }
17
+ {% endschema %}
18
+ ```
19
+
20
+ ## Check Options
21
+
22
+ The default configuration is the following:
23
+
24
+ ```yaml
25
+ AssetSizeAppBlockCSS:
26
+ enabled: true
27
+ threshold_in_bytes: 100_000
28
+ ```
29
+
30
+ ### `threshold_in_bytes`
31
+
32
+ The `threshold_in_bytes` option (default: `100_000`) determines the maximum allowed compressed size in bytes that a single CSS file can take.
33
+
34
+ This includes theme and remote stylesheets.
35
+
36
+ ## When Not To Use It
37
+
38
+ This rule should not be disabled locally since the check will be enforced when
39
+ promoting new versions of the extension.
40
+
41
+ ## Version
42
+
43
+ This check has been introduced in 1.1.0
44
+
45
+ ## Resources
46
+
47
+ - [The Performance Inequality Gap](https://infrequently.org/2021/03/the-performance-inequality-gap/)
48
+ - [Rule Source][codesource]
49
+ - [Documentation Source][docsource]
50
+
51
+ [codesource]: /lib/theme_check/checks/asset_size_app_block_css.rb
52
+ [docsource]: /docs/checks/asset_size_app_block_css.md
@@ -0,0 +1,57 @@
1
+ # Prevent Abuse on Server Rendered App Blocks (`AssetSizeAppBlockJavaScript`)
2
+
3
+ For server rendered app blocks, it is an anti-pattern to execute large JavaScript bundles on every page load
4
+
5
+ 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.
6
+
7
+ The natural solution to this problem is to implement the chat widget using the [Import on Interaction Pattern][ioip].
8
+
9
+ ## Check Details
10
+
11
+ This rule disallows the use of block JavaScript files and external scripts to have a compressed size greater than a configured `threshold_in_bytes`.
12
+
13
+ :-1: Examples of **incorrect** code for this check:
14
+ ```liquid
15
+ <!-- Here assets/chat-widget.js is more than 10KB gzipped. -->
16
+ {% schema %}
17
+ {
18
+ ...
19
+ "javascript": "chat-widget.js"
20
+ }
21
+ {% endschema %}
22
+ ```
23
+
24
+ ## Check Options
25
+
26
+ The default configuration is the following:
27
+
28
+ ```yaml
29
+ AssetSizeAppBlockJavaScript:
30
+ enabled: true
31
+ threshold_in_bytes: 10000
32
+ ```
33
+
34
+ ### `threshold_in_bytes`
35
+
36
+ The `threshold_in_bytes` option (default: `10000`) determines the maximum allowed compressed size in bytes that a single JavaScript file can take.
37
+
38
+ This includes theme and remote scripts.
39
+
40
+ ## When Not To Use It
41
+
42
+ This rule should not be disabled locally since the check will be enforced when
43
+ promoting new versions of the extension.
44
+
45
+ ## Version
46
+
47
+ This check has been introduced in 1.1.0
48
+
49
+ ## Resources
50
+
51
+ - [The Import On Interaction Pattern][ioip]
52
+ - [Rule Source][codesource]
53
+ - [Documentation Source][docsource]
54
+
55
+ [ioip]: https://addyosmani.com/blog/import-on-interaction/
56
+ [codesource]: /lib/theme_check/checks/asset_size_app_block_javascript.rb
57
+ [docsource]: /docs/checks/asset_size_app_block_javascript.md
@@ -0,0 +1,50 @@
1
+ # Check Title (`AssetSizeCSSStylesheetTag`)
2
+
3
+ The `stylesheet_tag` filter generates a link tag that points to a given stylesheet. This rule exists to prevent large CSS bundles (for speed).
4
+
5
+ ## Check Details
6
+
7
+ This rule disallows the use of too much CSS in themes, as configured by `threshold_in_bytes`.
8
+
9
+ :-1: Examples of **incorrect** code for this check:
10
+ ```liquid
11
+ <!-- Here, assets/theme.css is **greater** than `threshold_in_bytes` compressed. -->
12
+ {{ 'theme.css' | asset_url | stylesheet_tag }}
13
+ ```
14
+
15
+ :+1: Example of **correct** code for this check:
16
+ ```liquid
17
+ <!-- Here, assets/theme.css is **less** than `threshold_in_bytes` compressed. -->
18
+ {{ 'theme.css' | asset_url | stylesheet_tag }}
19
+ ```
20
+
21
+ ## Check Options
22
+
23
+ The default configuration for this check is the following:
24
+
25
+ ```yaml
26
+ AssetSizeCSSStylesheetTag:
27
+ enabled: false
28
+ threshold_in_bytes: 100_000
29
+ ```
30
+
31
+ ### `threshold_in_bytes`
32
+
33
+ The `threshold_in_bytes` option (default: `100_000`) determines the maximum allowed compressed size in bytes that a single CSS file can take.
34
+
35
+ ## When Not To Use It
36
+
37
+ This rule is safe to disable.
38
+
39
+ ## Version
40
+
41
+ This check has been introduced in Theme Check 1.0.0
42
+
43
+ ## Resources
44
+
45
+ - [The Performance Inequality Gap](https://infrequently.org/2021/03/the-performance-inequality-gap/)
46
+ - [Rule Source][codesource]
47
+ - [Documentation Source][docsource]
48
+
49
+ [codesource]: /lib/theme_check/checks/asset_size_css_stylesheet_tag.rb
50
+ [docsource]: /docs/checks/asset_size_css_stylesheet_tag.md
@@ -0,0 +1,66 @@
1
+ # Deprecate Bgsizes (`DeprecateBgsizes`)
2
+
3
+ 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)
4
+
5
+
6
+ ## Check Details
7
+
8
+ This check is aimed at discouraging the use of the lazySizes bgset plugin
9
+
10
+ :-1: Examples of **incorrect** code for this check:
11
+
12
+ ```liquid
13
+
14
+ <!-- Reports use of "lazyload" class and "data-bgset" attribute -->
15
+
16
+ <script src="ls.bgset.min.js"></script>
17
+ <script src="lazysizes.min.js"></script>
18
+ <div class="lazyload" data-bgset="image-200.jpg 200w, image-300.jpg 300w, image-400.jpg 400w" data-sizes="auto">
19
+ </div>
20
+
21
+ ```
22
+
23
+ :+1: Examples of **correct** code for this check:
24
+
25
+ ```liquid
26
+
27
+ <!-- Uses the CSS image-set() attribute instead of "data-bgset" -->
28
+ <!-- CSS Stylesheet -->
29
+ .box {
30
+ background-image: -webkit-image-set(
31
+ url("small-balloons.jpg") 1x,
32
+ url("large-balloons.jpg") 2x);
33
+ background-image: image-set(
34
+ url("small-balloons.jpg") 1x,
35
+ url("large-balloons.jpg") 2x);
36
+ }
37
+
38
+ <!-- HTML -->
39
+ <div class="box"></div>
40
+
41
+ ```
42
+
43
+ ## Check Options
44
+
45
+ The default configuration for this check is the following:
46
+
47
+ ```yaml
48
+ DeprecateBgsizes:
49
+ enabled: true
50
+ ```
51
+
52
+ ## When Not To Use It
53
+
54
+ You should disable this rule in older browsers that don't support the CSS image-set attribute.
55
+
56
+ ## Version
57
+
58
+ This check has been introduced in Theme Check 1.0.0.
59
+
60
+ ## Resources
61
+
62
+ - [Rule Source][codesource]
63
+ - [Documentation Source][docsource]
64
+
65
+ [codesource]: /lib/theme_check/checks/deprecate_bgsizes.rb
66
+ [docsource]: /docs/checks/deprecate_bgsizes.md
@@ -0,0 +1,61 @@
1
+ # Deprecate lazySizes (`DeprecateLazysizes`)
2
+
3
+ [lazysizes](https://github.com/aFarkas/lazysizes) is a common JavaScript library used to lazy load images, iframes and scripts.
4
+
5
+ ## Check Details
6
+
7
+ This check is aimed at discouraging the use of the lazysizes JavaScript library
8
+
9
+ :-1: Examples of **incorrect** code for this check:
10
+
11
+ ```liquid
12
+
13
+ <!-- Reports use of "lazyload" class -->
14
+ <img src="a.jpg" class="lazyload">
15
+
16
+ <!-- Reports use of "data-srcset" and "data-sizes" attribute. Reports data-sizes="auto" -->
17
+ <img
18
+ alt="House by the lake"
19
+ data-sizes="auto"
20
+ data-srcset="small.jpg 500w,
21
+ medium.jpg 640w,
22
+ big.jpg 1024w"
23
+ data-src="medium.jpg"
24
+ class="lazyload"
25
+ />
26
+
27
+ ```
28
+
29
+ :+1: Examples of **correct** code for this check:
30
+
31
+ ```liquid
32
+
33
+ <!-- Does not use lazySizes library. Instead uses native "loading" attribute -->
34
+ <img src="a.jpg" loading="lazy">
35
+
36
+ ```
37
+
38
+ ## Check Options
39
+
40
+ The default configuration for this check is the following:
41
+
42
+ ```yaml
43
+ DeprecateLazysizes:
44
+ enabled: true
45
+ ```
46
+
47
+ ## When Not To Use It
48
+
49
+ 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.
50
+
51
+ ## Version
52
+
53
+ This check has been introduced in Theme Check 1.0.0.
54
+
55
+ ## Resources
56
+
57
+ - [Rule Source][codesource]
58
+ - [Documentation Source][docsource]
59
+
60
+ [codesource]: /lib/theme_check/checks/deprecate_lazysizes.rb
61
+ [docsource]: /docs/checks/deprecate_lazysizes.md
@@ -39,12 +39,12 @@ The default configuration for this check is the following:
39
39
  ```yaml
40
40
  LiquidTag:
41
41
  enabled: true
42
- min_consecutive_statements: 4
42
+ min_consecutive_statements: 5
43
43
  ```
44
44
 
45
45
  ### `min_consecutive_statements`
46
46
 
47
- The `min_consecutive_statements` option (Default: `4`) determines the maximum (inclusive) number of consecutive statements before the check recommends a refactor.
47
+ The `min_consecutive_statements` option (Default: `5`) determines the maximum (inclusive) number of consecutive statements before the check recommends a refactor.
48
48
 
49
49
  ## When Not To Use It
50
50
 
@@ -25,8 +25,33 @@ The default configuration for this check is the following:
25
25
  ```yaml
26
26
  MissingTemplate:
27
27
  enabled: true
28
+ ignore_missing: []
28
29
  ```
29
30
 
31
+ ### `ignore_missing`
32
+
33
+ Specify a list of patterns of missing template files to ignore.
34
+
35
+ 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.
36
+
37
+ For example:
38
+
39
+ ```yaml
40
+ MissingTemplate:
41
+ ignore_missing:
42
+ - snippets/icon-*
43
+ ```
44
+
45
+ Would ignore offenses on `{% render 'icon-missing' %}` across all theme files.
46
+
47
+ ```yaml
48
+ MissingTemplate:
49
+ ignore:
50
+ - templates/index.liquid
51
+ ```
52
+
53
+ Would ignore all `MissingTemplate` in `templates/index.liquid`, no mater the file being rendered.
54
+
30
55
  ## Version
31
56
 
32
57
  This check has been introduced in Theme Check 0.1.0.
@@ -0,0 +1,44 @@
1
+ # Ensure `paginate` tags are used with performant sizes
2
+
3
+ ## Check Details
4
+
5
+ This check is aimed at keeping response times low.
6
+
7
+ :-1: Examples of **incorrect** code for this check:
8
+
9
+ ```liquid
10
+ <!-- Using too large of page size -->
11
+ {% paginate collection.products by 999 %}
12
+ ```
13
+
14
+ :+1: Examples of **correct** code for this check:
15
+
16
+ ```liquid
17
+ {% paginate collection.products by 12 %}
18
+ ```
19
+
20
+ Use sizes that are integers below the `max_size`, and above the `min_size`.
21
+
22
+ ## Check Options
23
+
24
+ The default configuration for this check is the following:
25
+
26
+ ```yaml
27
+ PaginationSize:
28
+ enabled: true
29
+ ignore: []
30
+ min_size: 1
31
+ max_size: 50
32
+ ```
33
+
34
+ ## When Not To Use It
35
+
36
+ N/A
37
+
38
+ ## Version
39
+
40
+ This check has been introduced in Theme Check 1.3.0.
41
+
42
+ ## Resources
43
+
44
+ [paginate]: https://shopify.dev/api/liquid/objects/paginate