feat(css): support sass compiler api and sass-embedded package

[hi-ogawa]

Description

• closes Use the Sass Compiler API #14689
• closes Allow usage of sass-embedded instead of sass package #6734

Added sass compiler api integration (see makeModernCompilerScssWorker). Difference from other mode is that I didn't use Vite's own worker abstraction WorkerWithFallback since I assumed Sass compiler API (at least on sass-embedded?) already off-loads work from main process.

todo

• sass-embedded optional peer dep + auto api selection
• check performance
  • see feat(css): support sass modern api #17728 (comment)
• docs
• fix windows

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[hi-ogawa]

I had import(sassPath) but it was failing on Windows due to drive D: prefix. Using require to just workaround this seems pretty odd. Does anyone know a safe way to normalize path into file:... for node esm?

btw, there is also createRequire for sugarss dependency

vite/packages/vite/src/node/plugins/css.ts

Lines 2048 to 2049 in 57f48f7

	const sssPath = loadPreprocessorPath(PostCssDialectLang.sss, root)
	cachedSss = createRequire(import.meta.url)(sssPath)

[userquin]

Maybe using pathToFileURL from node:url:
cachedSss = await import(sssPath.match(/^[a-z]:/i) ? pathToFileURL(sssPath).href : sssPath)

[hi-ogawa]

That might be it. I remembered Vitest had similar Windows hack somewhere and probably this one https://github.com/vitest-dev/vitest/blob/5d6d8013371b46522ff55cb64015d29e617994f2/packages/vite-node/src/client.ts#L368-L369
Linked issue on Node nodejs/node#31710 seems to suggest pathToFileURL(sssPath).href.

[bluwy]

btw, there is also createRequire for sugarss dependency

We should definitely use import() there, maybe in a separate PR. Good catch 👍

[Mister-Hope]

Hi, after switching to the modern api, I am meeting issue with file:// imports with our vuepress project:

It's reporting can not find a file, but it exisited.

Since we both support webpack and vite, and webpack is working fine (also I am sure native sass is working fine), so I doubt the internalImporter in vite is working as expected? Could some related test about file:// imports being added about the new api?

[patak-dev]

@Mister-Hope would you create a new issue with a minimal reproduction? Your comment here may quickly get lost and will not be properly tracked.

[hi-ogawa]

@Mister-Hope It looks like file: not being supported out-of-the-box is a known breaking change in modern api

• Don't try to load absolute URLs from the base importer sass/dart-sass#2077
• update flag doesn't work with absolute source paths sass/dart-sass#2199 (comment)

I have a reproduction using sass directly https://github.com/hi-ogawa/reproductions/tree/main/vite-17754-sass-absolute-file-reference Probably file: resolution needs to be handled by integration side now. I'll look into it.