Shopify / theme-check

The Ultimate Shopify Theme Linter
Other
340 stars 96 forks source link

ImgLazyLoading requires space around `loading` attribute #647

Closed ConduciveMammal closed 4 months ago

ConduciveMammal commented 2 years ago

Describe the bug I have this snippet that theme-check is falsely reporting about missing loading="lazy" attribute:

<img {% if selected_media.id == media.id and settings.reveal_product_media %}reveal{% endif %} {% if selected_media.id != media.id or request.page_type != 'product' %}loading="lazy"{% endif %} sizes="(max-width: 999px) calc(100vw - 48px), 640px" {% render 'image-attributes', image: media, alt: alt, sizes: '400,500,600,700,800,900,1000,1100,1200,1300,1400,1500,1600,1700,1800' %}>

As can be seen, the attribute is indeed there, however, because there's no space between the if statement, theme-check reports it as missing.

If I replace it with the below, the error goes away:

<img {% if selected_media.id == media.id and settings.reveal_product_media %}reveal{% endif %} {% if selected_media.id != media.id or request.page_type != 'product' %} loading="lazy"{% endif %} sizes="(max-width: 999px) calc(100vw - 48px), 640px" {% render 'image-attributes', image: media, alt: alt, sizes: '400,500,600,700,800,900,1000,1100,1200,1300,1400,1500,1600,1700,1800' %}>
lukeh-shopify commented 4 months ago

👋🏻 Hi @ConduciveMammal! Thanks for reporting this. Unfortunately the Ruby version of theme check has been deprecated for some time. Would you be able to confirm you are still having issues when using our maintained version of theme check? This is done using either the latest version of the Shopify CLI, or via the Shopify Liquid Visual Studio Code extension.

If you are still having issues, please raise an issue over in the CLI or theme tools repositories. Thanks!