refactor(core): enhance template inline CSS features

Author: wangshunnn

README.md

@@ -14,22 +14,23 @@
 
 ### Feature Comparison
 
-| Feature                                    | Legacy | New               |
-| ------------------------------------------ | ------ | ----------------- |
-| 语法高亮                                   | ✅     | ✅                |
-| SFC blocks 语言支持                        | ✅     | ✅                |
-| Emmet 支持                                 | ✅     | ✅                |
-| \<template\> 原生组件标签及属性补全提示    | ✅     | ✅ (enhanced)     |
-| 格式化 formatter                           | ✅     | 60% (enhanced)    |
-| 关联 tsconfig 配置                         | ✅     | ✅ (enhanced)     |
-| 支持 Monorepo                              | ❌     | ✅                |
-| 支持选择 typescript 版本                   | ❌     | ✅                |
-| SFC 编辑器视图拆分                         | ❌     | ✅                |
-| \<template\> 支持 TS 类型检查、补全提示... | ❌     | ✅                |
-| \<template\> 支持定义跳转、查找参考引用    | ❌     | ✅                |
-| \<template\> 样式类名跳转 \<style\>        | ❌     | ✅                |
-| \<template\> 原生组件属性检查              | ❌     | in Progress (50%) |
-| \<template\> 自定义组件跳转、属性检查      | ❌     | in Progress       |
+| Feature                                      | Legacy | New               |
+| -------------------------------------------- | ------ | ----------------- |
+| 语法高亮                                     | ✅     | ✅                |
+| SFC blocks 语言支持                          | ✅     | ✅                |
+| Emmet 支持                                   | ✅     | ✅                |
+| \<template\> 原生组件标签及属性补全提示      | ✅     | ✅ (enhanced)     |
+| 格式化 formatter                             | ✅     | 60% (enhanced)    |
+| 关联 tsconfig 配置                           | ✅     | ✅ (enhanced)     |
+| 支持 Monorepo                                | ❌     | ✅                |
+| 支持选择 typescript 版本                     | ❌     | ✅                |
+| SFC 编辑器视图拆分                           | ❌     | ✅                |
+| \<template\> 支持 TS 类型检查、补全提示...   | ❌     | ✅                |
+| \<template\> 支持定义跳转、查找参考引用      | ❌     | ✅                |
+| \<template\> 样式类名跳转 \<style\>          | ❌     | ✅                |
+| \<template\> style 属性支持原生 CSS 补全提示 | ❌     | ✅                |
+| \<template\> 原生组件属性检查                | ❌     | in Progress (50%) |
+| \<template\> 自定义组件跳转、属性检查        | ❌     | in Progress       |
 
 ### More
 

inspect-extension/components/composition/wxStyle.mpx

@@ -2,4 +2,16 @@
   <view wx:style="color: {{activeColor}}; font-size: {{fontSize}}px; fontWeight: bold">
     这是一段测试文字
   </view>
-</template>
+  <view style="color: {{activeColor}}; font-size: {{fontSize}}px; fontWeight: bold">
+    这是一段测试文字
+  </view>
+  <view style="color: aliceblue;font-weight: 500;"></view>
+</template>
+
+<script setup lang="ts">
+defineExpose({
+  activeColor: 'red',
+  fontSize: 16,
+  themeColor: 'blue'
+})
+</script>

packages/language-core/src/plugins/mpx-template-inline-css.ts

@@ -1,12 +1,14 @@
+import type { CodeInformation } from '@volar/language-core'
 import type { Code, MpxLanguagePlugin } from '../types'
 import * as CompilerDOM from '@vue/compiler-dom'
 import { forEachElementNode } from '../codegen/template'
 import { allCodeFeatures } from './shared'
 
-const codeFeatures = {
+const codeFeatures: CodeInformation = {
   ...allCodeFeatures,
   format: false,
   structure: false,
+  verification: false,
 }
 
 const plugin: MpxLanguagePlugin = () => {
@@ -24,8 +26,7 @@ const plugin: MpxLanguagePlugin = () => {
       if (embeddedFile.id !== 'template_inline_css' || !sfc.template?.ast) {
         return
       }
-      embeddedFile.parentCodeId =
-        sfc.template.lang === 'md' ? 'root_tags' : 'template'
+      embeddedFile.parentCodeId = 'template'
       embeddedFile.content.push(...generate(sfc.template.ast))
     },
   }
@@ -44,7 +45,8 @@ function* generate(
         prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION &&
         prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION &&
         prop.arg.content === 'style' &&
-        prop.exp.constType === CompilerDOM.ConstantTypes.CAN_STRINGIFY
+        prop.exp.constType === CompilerDOM.ConstantTypes.CAN_STRINGIFY &&
+        hasNotExpression(prop.arg.loc.source)
       ) {
         const endCrt = prop.arg.loc.source[prop.arg.loc.source.length - 1] // " | '
         const start = prop.arg.loc.source.indexOf(endCrt) + 1
@@ -63,3 +65,7 @@ function* generate(
     }
   }
 }
+
+function hasNotExpression(source: string): boolean {
+  return !source.includes('{{') && !source.includes('}}')
+}