Parsing errors (scss and js in html)

[morleytatro]

Awesome extension! I'm getting parsing errors in a couple spots:

• When trying to inject structured data into the document head, the parser is looking for a semicolon.

{@html `<script type="application/ld+json">${JSON.stringify(structuredData)}</script>`}

• Setting variables at the top of an inline scss style block triggers a "Selector is expected" error.

<style type="text/scss">
  $dark-gray: #bbb;
</style>

[jamesbirtles]

heh that first one is fun and a little tricky to fix 100% properly but I can fix this case at least

as for the scss block, you'll need to set up a svelte.config.js (relevant svelte issue sveltejs/svelte#1101) to tell the language server how to preprocess it.
e.g.

const sass = require('node-sass');

module.exports = {
    preprocess: {
        style: async ({ content, attributes }) => {
            if (attributes.type !== 'text/scss') {
                return;
            }

            const result = await renderScss({
                data: content,
                sourceMap: 'style.css.map',
                omitSourceMapUrl: true,
            });

            return {
                code: result.css.toString('utf8'),
                map: result.map.toString('utf8'),
            };
        },
    },
};

[morleytatro]

I was actually able to work out the first situation with the following, which doesn't throw any errors:
{@html '<script type="application/ld+json">' + JSON.stringify(structuredData) + '</script>'}

In the second case, I already have preprocessing set up in my Webpack config. I don't believe the error is coming from that since it's triggered irrespective of whether or not the project is running with HMR. Also, I'm not seeing errors with any of my other scss nested blocks. Here's my current preprocess module which is plugged into my Webpack config:

const sass = require('node-sass');

module.exports = {
  style: async({ content, attributes }) => {
    if (attributes.type !== 'text/scss') return;

    return new Promise((resolve, reject) => {
      sass.render({
        data: content,
        includePaths: ['routes'],
        sourceMap: true,
        outFile: 'x' // this is necessary, but is ignored
      }, (err, result) => {
        if (err) return reject(err);

        resolve({
          code: result.css.toString(),
          map: result.map.toString()
        });
      });
    });
  }
}

I ran into a couple issues when I tried your config:

• renderScss is undefined: sass.render should probably be used there.
• A reference error: something along the lines of "can't reference property css of undefined."

[jamesbirtles]

Oops sorry I tweaked the code from my config without testing it.

The language server can't pickup the preprocessor you have set up in webpack, it needs to find in svelte.config.js

Based on yours create a svelte.config.js file with this:

const sass = require('node-sass');

module.exports = {
    preprocess: {
        style: async ({ content, attributes }) => {
            if (attributes.type !== 'text/scss') return;

            return new Promise((resolve, reject) => {
                sass.render(
                    {
                        data: content,
                        sourceMap: true,
                        outFile: 'x', // this is necessary, but is ignored
                    },
                    (err, result) => {
                        if (err) return reject(err);

                        resolve({
                            code: result.css.toString(),
                            map: result.map.toString(),
                        });
                    },
                );
            });
        },
    },
};

[morleytatro]

Hmmm... That didn't work. I tried putting it in the root directory and in some other places. Does it need to go somewhere specific?

[jamesbirtles]

Root of your project should work, although right now it if errors it doesn't handle it very gracefully. If you go to View > Output and then select Svelte in the dropdown is there anything logged?

[jamesbirtles]

Also if you haven't already you'll need to set svelte.language-server.runtime in your vscode preferences to point to your node binary

[morleytatro]

When I go to output, I don't have Svelte in the dropdown at all.

Also if you haven't already you'll need to set svelte.language-server.runtime in your vscode preferences to point to your node binary

Is this required since the syntax highlighting, etc. are already working?

[jamesbirtles]

It's required when using node-sass as its a binary module that needs to match the v8 version of your node install, rather than vscode's

Might look into trying to auto detect this value for reduced friction

[morleytatro]

That worked! Well done on the issues. I'm going to close this one.

[jamesbirtles]

Awesome 😄