undesired behaviour when `.svelte.config.js` is not at the root of the opened VS Code workspace

[ivanhofer]

Describe the bug

When working in a monorepo setup and having a Svelte application in a subdirectory, some relative paths won't always match.

In this case I'm using the prependData functionality of svelte-preprocess. To add a scss file, I have to use a relative path to svelte.config.js, then I can use the variables defined there in all Svelte components. But the VS Code Svelte extension shows an error because it is looking for the relative path from the root of the VS Code workspace and not relative from the path where svelte.config.js is located.

I would expect there are potential other bugs that could resolve from this behaviour.

Reproduction

repo: https://github.com/ivanhofer/issue-svelte-vscode-cwd

1. cd ./app
2. run npm install
3. npm run build // works
4. open src/routes/+page.svelte // you'll se an error

Expected behaviour

I would expect the VS Code extenstion and running npm run build to both work the same way. Probably by running the VS Code extensions process in the same path where the svelte.config.js file is located.

A question remains: how would this look like when multiple Svelte projects are localted in the same monorepo?

System Info

• OS: Ubuntu (WSL Windows)
• IDE: VSCode

Which package is the issue about?

Svelte for VS Code extension

Additional Information, eg. Screenshots

Current workaround:

import preprocess from 'svelte-preprocess'

const isRunningAsVsCodeExtension = !process.env.NODE_ENV // not sure if there is a better way to detect this

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: preprocess({
		scss: {
			prependData: isRunningAsVsCodeExtension
				? `@import './app/src/imports.scss';`
				: `@import './src/imports.scss';`,
		},
	})
}

export default config

[jasonlyu123]

This is expected behaviour, unfortunately. And there is a workaround in the doc.

The extension process and the language server process both started where you opened the editor. Theoretically, we could use process.chdir during preprocess. But since preprocess is asynchronous I am not sure if that would cause even more unexpected behaviour.

[ivanhofer]

Thanks for sharing the link to the docs. I haven't found that section before.

I'm using this thread to ask another related question: Having multiple instances of a Svelte project openend in a monorepo setup would probably cause some problems with those settings: svelte.plugin.css.globals and svelte-autoimport.filesToScan? I haven't tested it yet, but I would assume svelte.plugin.css.globals then shows variables from multiple projects instead of the project you are currently in.

[jasonlyu123]

svelte-autoimport.filesToScan isn't config for svelte for vscode so I don't know. svelte.plugin.css.globals, yes. It would apply to all the files in the workspace. Although it just simply doesn't account for monorepo. On some occasions, this behaviour might be more desirable since you might have a UI package to be reused on multiple sites. But maybe we could allow some object style config to restrict it to some directory.

[jtlapp]

(Deleted post. My situation isn't relevant here due to not using prependData.)

[jasonlyu123]

You can see https://github.com/sveltejs/language-tools/issues/1880 for the solution for vitePreprocess.

[jtlapp]

You can see #1880 for the solution for vitePreprocess.

Thank you, I found that, but so far I'm not having success with it. I get the error "[postcss] Cannot read properties of undefined (reading 'config')" on the closing > of <style lang="postcss">.

[jtlapp]

This new error goes away when I open the app folder directly, so it's essentially the same problem as before.

[jtlapp]

I resolved the problem by also doing this:

// postcss.config.js

import path from 'path';

import { dirname } from 'path';
import { fileURLToPath } from 'url';

const __dirname = dirname(fileURLToPath(import.meta.url));

export default {
	plugins: {
		tailwindcss: {
			config: path.resolve(__dirname, './tailwind.config.js')
		},
		autoprefixer: {}
	}
};