HTML/Liquid replacement logic error surfaced in language server. #441
Comments
|
cc @furnaceX. Looks like the following line didn't work: theme-check/lib/theme_check/html_node.rb Lines 71 to 74 in 7f0940a I'd have to look into why we're not replacing it properly. Do you happen to have a theme you could send me? Or know which file is causing the issue? (You can send it privately to [email protected]) |
|
Hi Charles-Philippe!
Thanks for the fix... seems to be working well now!
I have what is perhaps a dumb question...
When I'm looking at Liquid files in VS Code, I see the liquid linting
errors. But I'm not getting the linting of the <script> and <style>
blocks. I can temporarily change the file type to HTML and get better
linting of those sections. I've messed around with my config settings but
can't seem to get the script and style blocks to lint when I have the file
set as liquid type.
Any suggestions on how to do that?
For the Shopify Liquid VS Code plugin:
One minor bug I notice is that when you have the squiggly red error
underline, if you add some lines above, the error location doesn't adjust
with the additional lines:
Here is the original error in the proper place:
[image: image.png]
Then added 2 extra lines (i.e. like if I was adding some code), the error
shifts up. (i.e. is linked to the line #)
[image: image.png]
Thanks,
Scott
…On Tue, Sep 14, 2021 at 1:28 PM Charles-Philippe Clermont < ***@***.***> wrote:
Closed #441 <#441> via #444
<#444>.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#441 (comment)>, or
unsubscribe
<https://github.com/notifications/unsubscribe-auth/ACYZKBQDCTE2YVN2UCYUK4TUB6O65ANCNFSM5DX2VBRA>
.
Triage notifications on the go with GitHub Mobile for iOS
<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675>
or Android
<https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.
--
*Scott Jacobson*
303-947-1561
|
|
Hi Scott,
Do you mean syntax highlighting or linting? How are you linting javascript/styles in liquid files? Wouldn't the liquid tags and variables would break the CSS/JS parsers? Or are you writing them without liquid in them and expect them to lint properly? In that case I would suggest writing your JS/CSS in separate files in the assets folder.
I think that's expected behaviour. The linter reruns on file save. Otherwise we'd be eating your CPU like no there's no tomorrow. |
|
I was assuming that you could both do LIQUID and JS/CSS/HTML linting and
highlighting all in the same file.
If I have a file that is type as "liquid", it looks like this. I only get
the liquid linting and syntax highlighting:
<div id="footer-signup">
{% form 'customer', id: 'newsletter_form' %}
{{ form.errors | default_errors }}
{% if form.posted_successfully? %}
<p class="success">{{ 'password.general.thanks' | t }}</p>
{% else %}
<input type="hidden" name="contact[tags]" value="newsletter">
<input type="email"
name="contact[email]"
id="Email"
value="{% if customer %}{{ customer.email }}{% endif %}"
placeholder="{{ 'general.newsletter_form.newsletter_email' | t }}">
<button type="submit" name="commit" id="Subscribe">
<svg width="27px" height="12px" viewBox="0 0 27 12"
version="1.1" xmlns="
http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="right-arrow" stroke="none" stroke-width="1"
fill="none" fill-rule="evenodd">
<g transform="translate(-1291.000000, -306.000000)"
fill="#353535" fill-rule="nonzero" id="Footer---Light">
<g transform="translate(0.000000, 120.000000)">
<g id="Email-input"
transform="translate(940.000000, 168.000000)">
<path id="Line-2"
d="M368.309343,18.8190816 L377.519864,24 L368.309343,29.1809184
L367.819082,28.3093429 L374.589,24.5 L351.5,24.5 L351.5,23.5
L374.593,23.5 L367.819082,19.6906571 L368.309343,18.8190816 Z"></path>
</g>
</g>
</g>
</g>
</svg>
</button>
{% endif %}
{% endform %}
</div>
<style>
#right-arrow g{
fill: {{ settings.footer_border_color }};
}
form#newsletter_form input#Email {
margin-bottom: 0;
color: #fff;
}
</style>
I was assuming I could get HTML linting and syntax highlighting as liquid
is just a specialized HTML code.
Thanks,
Scott
…On Thu, Sep 16, 2021 at 9:59 AM Charles-Philippe Clermont < ***@***.***> wrote:
Hi Scott,
When I'm looking at Liquid files in VS Code, I see the liquid linting
errors. But I'm not getting the linting of the <script> and <style>
blocks. I can temporarily change the file type to HTML and get better
linting of those sections. I've messed around with my config settings but
can't seem to get the script and style blocks to lint when I have the file
set as liquid type.
Do you mean syntax highlighting or linting? How are you linting
javascript/styles in liquid files? Wouldn't the liquid tags and variables
would break the CSS/JS parsers?
Or are you writing them *without* liquid in them and expect them to lint
properly? In that case I would suggest writing your JS/CSS in separate
files in the assets folder.
One minor bug I notice is that when you have the squiggly red error
underline, if you add some lines above, the error location doesn't adjust
with the additional lines:
I think that's expected behaviour. The linter reruns on file *save*.
Otherwise we'd be eating your CPU like no there's no tomorrow.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#441 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ACYZKBWS5Y4CWAIQD4VLUMTUCIH47ANCNFSM5DX2VBRA>
.
Triage notifications on the go with GitHub Mobile for iOS
<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675>
or Android
<https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.
--
*Scott Jacobson*
303-947-1561
|
|
Unfortunately that doesn't work. Here's an example that would break an HTML parser: This would parse the script tag like this: Another example: The HTML parser would close the tag after the "string" part (because of the greater than sign.) Inside Theme-Check, we go to great lengths just to avoid bugs like these and properly lint HTML errors properly. As for the Syntax Highlighting, that's indeed an area that needs work. But so long as you are using JavaScript or CSS inside liquid files, you'd have similar problems. Since Which is why I suggest moving that content over inside the assets folder and treat them as real JavaScript and CSS files. If you must use liquid for CSS variables and such, I'd leave only the definition of variables inside the liquid files. Here's an example <!doctype html>
<html>
<head>
...
{% comment %}
Here's how you would have liquid settings for CSS,
while still using actual CSS files that you can
lint/syntax highlight properly.
1. We define the CSS variables
{% endcomment %}
<style>
:root {
--footer-border-color: {{ settings.footer_border_color }};
}
</style>
{% comment %}
2. We use those variables in a separate file in assets/theme.css
{% endcomment %}
{{ 'theme.css' | asset_url | stylesheet_tag }}
{% comment %}
Similarly for scripts, we're going to use variables defined on window.
{% endcomment %}
<script src="{{ 'theme.js' | asset_url }}" defer></script>
</head>
<body>
...
{% comment %}
At the end of the body, we'll add our inline script tag with the variables in it.
{% endcomment %}
<script id="my-theme-variables" type="application/json">
window.routes = {
cart_add_url: '{{ routes.cart_add_url }}',
}
</script>
</body>
</html>// theme.css
#right-arrow g {
fill: var(--footer-border-color);
}// theme.js
// Notice how this file is not liquid, therefore you can do everything you want with it:
// * lint (eslint, tslint, etc.)
// * transpile (babel, typescript, webpack, etc.)
// * reformat (prettier)
function init() {
// Do whatever you want with the config.
console.log(window.routes);
}
init();You'll also notice this is exactly how Shopify/dawn does it: |
The text was updated successfully, but these errors were encountered: