fix(compiler-sfc): Show location of >>> / /deep/ in the ...combinators have been deprecated message #8596
Conversation
# Conflicts: # packages/compiler-sfc/src/style/pluginScoped.ts
Size ReportBundles
Usages
|
❌ Deploy Preview for vue-next-template-explorer failed.
|
❌ Deploy Preview for vue-sfc-playground failed.
|
There was a problem hiding this comment.
I tried testing this locally, after merging in main. The line numbers seem to be off. I think they're only counting lines within the <style> section, not within the file as a whole.
Not sure whether fixing that would be in scope for this PR, but including the line number in the warning isn't currently very helpful.
I've made some other suggestions for changes to the warnings below, though I haven't taken into account the inaccurate line numbers.
| `the >>> and /deep/ combinators have been deprecated. ` + | ||
| `Use :deep() instead.(${filename}(${n.source?.start?.line} : ${n.source?.start?.column}))` |
There was a problem hiding this comment.
The spacing of this message seems a bit off, as does the nested bracketing. I also wonder whether the column is really that useful in this context. Perhaps something like this instead?
| `the >>> and /deep/ combinators have been deprecated. ` + | |
| `Use :deep() instead.(${filename}(${n.source?.start?.line} : ${n.source?.start?.column}))` | |
| `the >>> and /deep/ combinators have been deprecated. ` + | |
| `Use :deep() instead. Line ${n.source?.start?.line}, ${filename}`, |
| @@ -131,7 +136,7 @@ function rewriteSelector( | |||
| // .foo ::v-deep .bar -> .foo[xxxxxxx] .bar | |||
| warn( | |||
| `${value} usage as a combinator has been deprecated. ` + | |||
| `Use :deep(<inner-selector>) instead of ${value} <inner-selector>.` | |||
| `Use :deep(<inner-selector>) instead of ${value} <inner-selector>.(${filename}(${n.source?.start?.line} : ${n.source?.start?.column}))` | |||
There was a problem hiding this comment.
Similar to the other message, perhaps something like this?
| `Use :deep(<inner-selector>) instead of ${value} <inner-selector>.(${filename}(${n.source?.start?.line} : ${n.source?.start?.column}))` | |
| `Use :deep(<inner-selector>) instead of ${value} <inner-selector>. Line ${n.source?.start?.line}, ${filename}`, |
| @@ -4,15 +4,18 @@ import { warn } from '../warn' | |||
|
|
|||
| const animationNameRE = /^(-\w+-)?animation-name$/ | |||
| const animationRE = /^(-\w+-)?animation$/ | |||
| type pluginParam = { id: string; filename?: string } | |||
There was a problem hiding this comment.
Type names usually begin with uppercase letters.
close #6404