Skip to content

Comments

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

Merged
bluwy merged 59 commits intovitejs:mainfrom
hi-ogawa:feat-sass-compiler
Jul 31, 2024
Merged

feat(css): support sass compiler api and sass-embedded package#17754
bluwy merged 59 commits intovitejs:mainfrom
hi-ogawa:feat-sass-compiler

Conversation

@hi-ogawa
Copy link
Contributor

@hi-ogawa hi-ogawa commented Jul 24, 2024

Description

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

@bolt-new-by-stackblitz
Copy link

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@hi-ogawa hi-ogawa marked this pull request as ready for review July 30, 2024 07:48
Comment on lines 2313 to 2314
// workaround for windows since import("D:...") fails
const sass: typeof Sass = createRequire(import.meta.url)(sassPath)
Copy link
Contributor Author

@hi-ogawa hi-ogawa Jul 30, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

btw, there is also createRequire for sugarss dependency

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

@bluwy bluwy merged commit 1025bb6 into vitejs:main Jul 31, 2024
@hi-ogawa hi-ogawa deleted the feat-sass-compiler branch August 1, 2024 00:06
@tomleo tomleo mentioned this pull request Aug 12, 2024
8 tasks
@Mister-Hope
Copy link

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

image

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
Copy link
Member

@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
Copy link
Contributor Author

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

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Use the Sass Compiler API Allow usage of sass-embedded instead of sass package

5 participants