refactor(compiler-sfc): support sass modern api

[KazariEX]

https://sass-lang.com/documentation/breaking-changes/legacy-js-api

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	101 kB	38 kB	34.2 kB
vue.global.prod.js	160 kB	58 kB	51.5 kB

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	49 kB	18.9 kB	17.2 kB
createApp	55.6 kB	21.4 kB	19.6 kB
createSSRApp	59.6 kB	23.1 kB	21 kB
defineCustomElement	60.4 kB	22.9 kB	20.9 kB
overall	69.3 kB	26.5 kB	24 kB

[pkg-pr-new]

Open in Stackblitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@11992

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@11992

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@11992

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@11992

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@11992

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@11992

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@11992

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@11992

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@11992

vue

pnpm add https://pkg.pr.new/vue@11992

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@11992

commit: 1ae6da0

[netlify]

❌ Deploy Preview for vue-sfc-playground failed.

Name	Link
🔨 Latest commit	c04d12c
🔍 Latest deploy log	https://app.netlify.com/sites/vue-sfc-playground/deploys/66efe3538422670008dd2f05

[edison1105]

Thanks for this PR and I made small tweaks 78f5696
LGTM.

[edison1105]

/ecosystem-ci run

[vue-bot]

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
language-tools	❌ failure	❌ failure
nuxt	✅ success	✅ success
pinia	✅ success	✅ success
primevue	✅ success	✅ success
quasar	✅ success	✅ success
radix-vue	✅ success	✅ success
router	✅ success	✅ success
test-utils	✅ success	✅ success
vant	✅ success	✅ success
vite-plugin-vue	✅ success	✅ success
vitepress	✅ success	✅ success
vue-i18n	✅ success	✅ success
vue-macros	❌ failure	❌ failure
vuetify	✅ success	✅ success
vueuse	✅ success	✅ success
vue-simple-compiler	✅ success	✅ success

[edison1105]

The css type has changed from Buffer to string, and toString is no longer required.
sourceMap as well

[skirtles-code]

The new API requires Dart Sass 1.45.0+, which was released in 2021.

I'm wondering whether there's some way to express that version requirement to ensure that it's met? Maybe through package.json? We currently have sass in the devDependencies, but I don't think that'll impact end users. I haven't used it myself, but would peerDependenciesMeta be viable for this?

If not, maybe we could try to detect the version in the code?

[edison1105]

@KazariEX @skirtles-code
Maybe we can do compatibility like the following:

if('compileString' in nodeSaas){
  // modern api
} else {
  // legacy api
}

[edison1105]

/ecosystem-ci run

[vue-bot]

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
language-tools	❌ failure	❌ failure
nuxt	✅ success	✅ success
pinia	✅ success	✅ success
primevue	✅ success	✅ success
quasar	✅ success	✅ success
radix-vue	✅ success	✅ success
router	✅ success	✅ success
test-utils	✅ success	✅ success
vant	✅ success	✅ success
vite-plugin-vue	✅ success	✅ success
vitepress	✅ success	✅ success
vue-i18n	✅ success	✅ success
vue-macros	❌ failure	❌ failure
vuetify	✅ success	✅ success
vueuse	✅ success	✅ success
vue-simple-compiler	✅ success	✅ success