Use :deep with LESS broken syntax highlight

[giapdong]

Vue - Official extension or vue-tsc version

Vue-Official v2.1.6, vue-tsc ^2.0.28

VSCode version

1.9.3

Vue version

^3.4.31

TypeScript version

^5.5.4

System Info

System:
    OS: Windows 11 10.0.22635
    CPU: (8) x64 Intel(R) Core(TM) i3-10105 CPU @ 3.70GHz
    Memory: 4.15 GB / 15.81 GB
  Binaries:
    Node: 20.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.8)
    Internet Explorer: 11.0.22621.3566

package.json dependencies

{
	"name": "vue-vite-simplest",
	"version": "1.0.0",
	"main": "index.js",
	"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1",
		"dev": "vite"
	},
	"author": "",
	"license": "ISC",
	"description": "",
	"dependencies": {
		"vue": "^3.4.31"
	},
	"devDependencies": {
		"@vitejs/plugin-vue": "^5.1.3",
		"less": "^4.2.0",
		"vite": "^5.3.3"
	}
}

Steps to reproduce

Before start, can be reproduce by some resource:

// main.js
import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)
app.mount('#app')

// App.vue
<template>
	<div class='app-content'>App content</div>
</template>

<script setup>

</script>

<style lang='less'>
body {
	:deep(.app-content) {
		color: red;
	}
}
</style>

What is expected?

Syntax highlight work well, it contain:

• style tag highlight work well
• CSS selectors work well

Image sample when using with CSS language

What is actually happening?

Just only change language from css to less immediately make bug for syntax highlight here:

Because too many components I need to use more than 1 style tag, so it hard to separate in each section

It also bug when using nested selector same as

Link to minimal reproduction

No response

Any additional comments?

No response

[ziadsarour]

Exact same problem for me

[kangyangyang]

俺也一样