refactor(compiler-sfc): support sass modern api #11992

KazariEX · 2024-09-20T17:59:03Z

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

github-actions · 2024-09-20T18:00:10Z

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 · 2024-09-20T18:00:15Z

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

packages/compiler-sfc/src/style/preprocessors.ts

netlify · 2024-09-22T06:01:14Z

❌ 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 · 2024-09-22T09:31:10Z

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

edison1105 · 2024-09-22T09:32:04Z

/ecosystem-ci run

vue-bot · 2024-09-22T11:27:24Z

📝 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 · 2024-09-22T14:31:09Z

packages/compiler-sfc/src/style/preprocessors.ts

      return {
-        code: result.css.toString(),
-        map: merge(map, JSON.parse(result.map.toString())),
+        code: result.css,


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

skirtles-code · 2024-09-22T16:56:50Z

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 · 2024-09-23T01:09:08Z

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

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

packages/compiler-sfc/src/style/preprocessors.ts

Co-authored-by: edison <[email protected]>

edison1105 · 2024-09-23T03:09:47Z

/ecosystem-ci run

vue-bot · 2024-09-23T03:16:08Z

📝 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

…tion warning (vuejs#11992)

chore(compiler-sfc): suppress deprecation warning of sass legacy api

aad407d

edison1105 added ready to merge The PR is ready to be merged. 🧹 p1-chore Priority 1: this doesn't change code behavior. labels Sep 21, 2024

they-cloned-me reviewed Sep 21, 2024

View reviewed changes

packages/compiler-sfc/src/style/preprocessors.ts Outdated Show resolved Hide resolved

edison1105 removed the ready to merge The PR is ready to be merged. label Sep 22, 2024

refactor: support modern api

637b137

KazariEX changed the title ~~chore(compiler-sfc): suppress deprecation warning of sass legacy api~~ refactor(compiler-sfc): support sass modern api Sep 22, 2024

edison1105 added the ready to merge The PR is ready to be merged. label Sep 22, 2024

chore: minor tweaks

78f5696

edison1105 force-pushed the chore/sass-deprecation branch from 34af007 to 78f5696 Compare September 22, 2024 11:26

vuejs deleted a comment from vue-bot Sep 22, 2024

KazariEX and others added 3 commits September 22, 2024 19:31

chore: type

d0f4d4a

Update preprocessors.ts

73a80e8

Update preprocessors.ts

211d03b

edison1105 reviewed Sep 22, 2024

View reviewed changes

refactor: compatibility

fd852e4

edison1105 reviewed Sep 23, 2024

View reviewed changes

packages/compiler-sfc/src/style/preprocessors.ts Outdated Show resolved Hide resolved

KazariEX and others added 2 commits September 23, 2024 10:58

Update packages/compiler-sfc/src/style/preprocessors.ts

f5e0541

Co-authored-by: edison <[email protected]>

[autofix.ci] apply automated fixes

1ae6da0

edison1105 added scope: compiler and removed 🧹 p1-chore Priority 1: this doesn't change code behavior. labels Sep 23, 2024

yyx990803 merged commit 4474c11 into vuejs:main Oct 11, 2024

KazariEX deleted the chore/sass-deprecation branch October 11, 2024 06:05

edison1105 mentioned this pull request Oct 15, 2024

Vue compiler-sfc 3.5.12 breaks esbuild transpilation/bundling if style with lang="scss" is present in an SFC #12180

Closed

abdullah-wn pushed a commit to Lazy-work/vue that referenced this pull request Jan 4, 2025

fix(compiler-sfc): use sass modern api if available and avoid depreca…

4311a60

…tion warning (vuejs#11992)

imnatgreen mentioned this pull request Mar 12, 2025

Sass compilation is broken when running with Vue 3.5.12 and above vuejs/vue-jest#568

Open

Uh oh!

refactor(compiler-sfc): support sass modern api #11992

refactor(compiler-sfc): support sass modern api #11992

Uh oh!

Conversation

KazariEX commented Sep 20, 2024

Uh oh!

github-actions bot commented Sep 20, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Size Report

Bundles

Usages

Uh oh!

pkg-pr-new bot commented Sep 20, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

netlify bot commented Sep 22, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ Deploy Preview for vue-sfc-playground failed.

Uh oh!

edison1105 commented Sep 22, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

edison1105 commented Sep 22, 2024

Uh oh!

vue-bot commented Sep 22, 2024

Uh oh!

edison1105 Sep 22, 2024

Choose a reason for hiding this comment

Uh oh!

skirtles-code commented Sep 22, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

edison1105 commented Sep 23, 2024

Uh oh!

Uh oh!

edison1105 commented Sep 23, 2024

Uh oh!

vue-bot commented Sep 23, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

github-actions bot commented Sep 20, 2024 •

edited

Loading

pkg-pr-new bot commented Sep 20, 2024 •

edited

Loading

netlify bot commented Sep 22, 2024 •

edited

Loading

edison1105 commented Sep 22, 2024 •

edited

Loading

skirtles-code commented Sep 22, 2024 •

edited

Loading