question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Markup incorrectly parsed after <style global> SCSS flag

See original GitHub issue

Describe the bug HTML Svelte interpolated code with comparisons {condition === 2} starts to make the rest of the file to be wrongly parsed after <style> tag if ‘global’ flag is provided at the end of the style tag for SCSS preprocessors. This does not affect builds and the same svelte.config is both used for rollup and for vscode with the preprocessor. To Reproduce

  1. The order of the Svelte file has to be script - style - markup.
  2. Style has to use global preprocessor flag attribute after any other attrib like <style src="./path.scss" global>
  3. In the markup, inside interpolated Svelte code ({expressions}) there should be a boolean comparison (this is the only case I found but there might be more) like {x === 2}.

Minimal reproducible example:

<script>let whatever = 1; /* it does not matter */</script>
<style src="./aFile.scss" global> // <-- 'global' has to be last
{whatever === 1} // <-- last '}' will give you error, then almost any other not native html code

Expected behavior Nothing should be prompted unless it is a real error.

Screenshots Screenshot 2020-05-29 at 13 37 47

System (please complete the following information):

  • OS: Mojave. Mac
  • IDE: VSCode
  • Plugin/Package: only “Svelte Beta” (No “Svelte” or “Svelte Type Check” or similar)

WORKAROUND I found out that if global is set just before the src="" attribute, the compiler will work. This clarifies that this issue is, in fact, from the language-tool, perhaps as a conflict with other built-in plugins from VSCode

<script>let whatever = 1; /* it does not matter */</script>
<style global src="./aFile.scss">
{whatever === 1} // This works

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:12 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
Egnuscommented, Jun 11, 2020

Fixed in the last deployed version 🙇 👍

1reaction
dummdidummcommented, Jun 2, 2020

It is autodeployed nightly, in about 8 hours.

Read more comments on GitHub >

github_iconTop Results From Across the Web

You tried to parse SCSS with the standard CSS parser
The solution is moving your global .scss files out of the assets folder. You can additionally list them in angular.json ( styles property) ......
Read more >
Handling common HTML and CSS problems - MDN Web Docs
Basically, it is a matter of checking whether your HTML and CSS code is well formed and doesn't contain any syntax errors. Note:...
Read more >
Sass Style Guide | CSS-Tricks
Use Your Regular CSS Formatting Rules / Style Guide. This post is about Sass-specific stuff, but as a base to this, you should...
Read more >
The definitive guide to SCSS - LogRocket Blog
In this guide, we'll demonstrate how to use SCSS — think of it as a way to write CSS with superpowers. I've broken...
Read more >
Sass Guidelines
PostCSS is commonly (and incorrectly) referred to as a “postprocessor”. The assumption, combined with the unfortunate name, is that PostCSS parses over CSS...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found