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.
- checksums.yaml +4 -4
- data/.github/workflows/theme-check.yml +2 -6
- data/CHANGELOG.md +51 -0
- data/CONTRIBUTING.md +1 -1
- data/README.md +39 -0
- data/RELEASING.md +34 -2
- data/bin/theme-check +29 -0
- data/bin/theme-check-language-server +29 -0
- data/config/default.yml +46 -3
- data/config/nothing.yml +11 -0
- data/config/theme_app_extension.yml +168 -0
- data/data/shopify_liquid/objects.yml +2 -0
- data/docs/checks/app_block_valid_tags.md +40 -0
- data/docs/checks/asset_size_app_block_css.md +52 -0
- data/docs/checks/asset_size_app_block_javascript.md +57 -0
- data/docs/checks/asset_size_css_stylesheet_tag.md +50 -0
- data/docs/checks/deprecate_bgsizes.md +66 -0
- data/docs/checks/deprecate_lazysizes.md +61 -0
- data/docs/checks/liquid_tag.md +2 -2
- data/docs/checks/missing_template.md +25 -0
- data/docs/checks/pagination_size.md +44 -0
- data/docs/checks/template_length.md +12 -2
- data/docs/checks/undefined_object.md +5 -0
- data/lib/theme_check/analyzer.rb +25 -21
- data/lib/theme_check/asset_file.rb +3 -15
- data/lib/theme_check/bug.rb +3 -1
- data/lib/theme_check/check.rb +26 -4
- data/lib/theme_check/checks/app_block_valid_tags.rb +36 -0
- data/lib/theme_check/checks/asset_size_app_block_css.rb +44 -0
- data/lib/theme_check/checks/asset_size_app_block_javascript.rb +44 -0
- data/lib/theme_check/checks/asset_size_css.rb +11 -74
- data/lib/theme_check/checks/asset_size_css_stylesheet_tag.rb +24 -0
- data/lib/theme_check/checks/asset_size_javascript.rb +11 -37
- data/lib/theme_check/checks/convert_include_to_render.rb +3 -1
- data/lib/theme_check/checks/deprecate_bgsizes.rb +14 -0
- data/lib/theme_check/checks/deprecate_lazysizes.rb +16 -0
- data/lib/theme_check/checks/img_lazy_loading.rb +2 -7
- data/lib/theme_check/checks/img_width_and_height.rb +3 -3
- data/lib/theme_check/checks/liquid_tag.rb +2 -2
- data/lib/theme_check/checks/missing_template.rb +21 -5
- data/lib/theme_check/checks/pagination_size.rb +65 -0
- data/lib/theme_check/checks/parser_blocking_javascript.rb +1 -1
- data/lib/theme_check/checks/remote_asset.rb +4 -2
- data/lib/theme_check/checks/space_inside_braces.rb +27 -7
- data/lib/theme_check/checks/template_length.rb +18 -4
- data/lib/theme_check/checks/undefined_object.rb +1 -1
- data/lib/theme_check/checks/valid_html_translation.rb +1 -1
- data/lib/theme_check/checks.rb +11 -1
- data/lib/theme_check/cli.rb +52 -15
- data/lib/theme_check/config.rb +56 -10
- data/lib/theme_check/corrector.rb +4 -0
- data/lib/theme_check/exceptions.rb +29 -27
- data/lib/theme_check/file_system_storage.rb +12 -0
- data/lib/theme_check/html_check.rb +1 -0
- data/lib/theme_check/html_node.rb +37 -16
- data/lib/theme_check/html_visitor.rb +17 -3
- data/lib/theme_check/json_check.rb +2 -2
- data/lib/theme_check/json_file.rb +2 -29
- data/lib/theme_check/json_printer.rb +26 -0
- data/lib/theme_check/language_server/constants.rb +8 -0
- data/lib/theme_check/language_server/document_link_engine.rb +40 -4
- data/lib/theme_check/language_server/handler.rb +6 -2
- data/lib/theme_check/language_server/server.rb +13 -2
- data/lib/theme_check/liquid_check.rb +0 -12
- data/lib/theme_check/node.rb +6 -4
- data/lib/theme_check/offense.rb +56 -3
- data/lib/theme_check/parsing_helpers.rb +7 -4
- data/lib/theme_check/position.rb +98 -14
- data/lib/theme_check/regex_helpers.rb +20 -0
- data/lib/theme_check/tags.rb +62 -8
- data/lib/theme_check/template.rb +3 -32
- data/lib/theme_check/theme.rb +2 -0
- data/lib/theme_check/theme_file.rb +40 -0
- data/lib/theme_check/version.rb +1 -1
- data/lib/theme_check.rb +16 -0
- data/theme-check.gemspec +1 -1
- metadata +26 -7
- 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
|
data/docs/checks/liquid_tag.md
CHANGED
@@ -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:
|
42
|
+
min_consecutive_statements: 5
|
43
43
|
```
|
44
44
|
|
45
45
|
### `min_consecutive_statements`
|
46
46
|
|
47
|
-
The `min_consecutive_statements` option (Default: `
|
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
|