ts-gem-plugin 0.0.7 → 0.0.9

package/dist/index.js

@@ -160,11 +160,31 @@ var Configuration = class {
 
 // src/constants.ts
 var NAME = "gem-plugin";
+var Decorators = {
+  Attr: "attribute",
+  NumAttr: "numattribute",
+  BoolAttr: "boolattribute",
+  Prop: "property",
+  Emitter: "emitter",
+  GlobalEmitter: "globalemitter",
+  AdoptedStyle: "adoptedStyle",
+  CustomElement: "customElement",
+  Part: "part",
+  Slot: "slot"
+};
+var Utils = {
+  ClassMap: "classMap",
+  CreateDecoratorTheme: "createDecoratorTheme"
+};
+var Types = {
+  Emitter: "Emitter"
+};
 
 // src/context.ts
 var import_standard_script_source_helper = __toESM(require("@mantou/typescript-template-language-service-decorator/lib/standard-script-source-helper"));
 var import_standard_template_source_helper = __toESM(require("@mantou/typescript-template-language-service-decorator/lib/standard-template-source-helper"));
 var import_vscode_css_languageservice = require("@mantou/vscode-css-languageservice");
+var import_vscode_emmet_helper = require("@mantou/vscode-emmet-helper");
 var import_vscode_html_languageservice2 = require("@mantou/vscode-html-languageservice");
 
 // ../duoyun-ui/lib/map.js
@@ -173,9 +193,10 @@ var StringWeakMap = class {
   #weakMap = /* @__PURE__ */ new WeakMap();
   #registry = new FinalizationRegistry((key) => this.#map.delete(key));
   set(key, val) {
+    this.delete(key);
     this.#map.set(key, new WeakRef(val));
     this.#weakMap.set(val, key);
-    this.#registry.register(val, key);
+    this.#registry.register(val, key, val);
   }
   get(key) {
     return this.#map.get(key)?.deref();
@@ -183,6 +204,14 @@ var StringWeakMap = class {
   findKey(val) {
     return this.#weakMap.get(val);
   }
+  delete(key) {
+    const val = this.get(key);
+    if (val) {
+      this.#map.delete(key);
+      this.#weakMap.delete(val);
+      this.#registry.unregister(val);
+    }
+  }
   *[Symbol.iterator]() {
     const entries2 = this.#map.entries();
     for (const [tag, ref] of entries2) {
@@ -191,6 +220,14 @@ var StringWeakMap = class {
   }
 };
 
+// ../duoyun-ui/lib/types.js
+function isNullish(v) {
+  return v === null || v === void 0;
+}
+function isNotNullish(v) {
+  return !isNullish(v);
+}
+
 // ../duoyun-ui/lib/cache.js
 var Cache = class {
   #max;
@@ -266,7 +303,8 @@ function isCustomElementTag(tag) {
   return tag.includes("-");
 }
 function isDepElement(node) {
-  return node.getSourceFile().fileName.includes("/node_modules/");
+  const { fileName } = node.getSourceFile();
+  return ["/node_modules/", "/dist/", ".d.ts"].some((s) => fileName.includes(s));
 }
 function bindMemberFunction(o, keys2 = Object.keys(o)) {
   return Object.fromEntries(keys2.map((key) => [key, o[key].bind?.(o)]));
@@ -277,31 +315,85 @@ function forEachNode(roots, fn) {
     const currentNode = list.pop();
     if (!currentNode) return;
     fn(currentNode);
-    list.push(...currentNode.children);
+    list.push(..."getChildren" in currentNode ? currentNode.getChildren() : currentNode.children);
+  }
+}
+function getTemplateNode(typescript, node) {
+  if (typescript.isTaggedTemplateExpression(node)) return node.template;
+  if (typescript.isTemplateExpression(node)) return node;
+  if (typescript.isNoSubstitutionTemplateLiteral(node)) return node;
+}
+function isClassMapKey(typescript, node) {
+  if (!node.parent?.parent?.parent) return false;
+  const assignment = node.parent;
+  const obj = assignment.parent;
+  const callExp = obj.parent;
+  const key = typescript.isStringLiteral(node) || typescript.isIdentifier(node);
+  return key && (typescript.isPropertyAssignment(assignment) && assignment.initializer !== node || typescript.isShorthandPropertyAssignment(assignment)) && typescript.isObjectLiteralExpression(obj) && typescript.isCallExpression(callExp) && typescript.isIdentifier(callExp.expression) && callExp.expression.text === Utils.ClassMap;
+}
+function getAllStyleNode(typescript, typeChecker, node) {
+  const getArgNode = (arg) => {
+    if (typescript.isIdentifier(arg)) {
+      const decl = typeChecker.getSymbolAtLocation(arg)?.valueDeclaration;
+      if (!decl || !typescript.isVariableDeclaration(decl) || !decl.initializer) return;
+      return getArgNode(decl.initializer);
+    }
+    const styleNode = getTemplateNode(typescript, arg);
+    if (styleNode) return styleNode;
+    const argArg = typescript.isCallExpression(arg) && arg.arguments.at(0);
+    if (argArg && typescript.isObjectLiteralExpression(argArg)) {
+      return argArg.properties.map((p) => {
+        const initializer = typescript.isPropertyAssignment(p) && p.initializer;
+        return initializer ? getTemplateNode(typescript, initializer) : void 0;
+      });
+    }
+  };
+  return (node.modifiers || []).flatMap((m) => {
+    const arg = typescript.isDecorator(m) && typescript.isCallExpression(m.expression) && typescript.isIdentifier(m.expression.expression) && m.expression.expression.escapedText === Decorators.AdoptedStyle ? m.expression.arguments.at(0) : void 0;
+    if (!arg) return null;
+    return getArgNode(arg);
+  }).filter(isNotNullish);
+}
+function getTagFromNodeWithDecorator(typescript, node) {
+  if (!typescript.isClassDeclaration(node)) return;
+  for (const modifier of node.modifiers || []) {
+    if (typescript.isDecorator(modifier) && typescript.isCallExpression(modifier.expression) && modifier.expression.expression.getText() === Decorators.CustomElement) {
+      const arg = modifier.expression.arguments.at(0);
+      if (arg && typescript.isStringLiteral(arg)) {
+        return arg.text;
+      }
+    }
+  }
+}
+function getCurrentElementDecl(typescript, node) {
+  while (!getTagFromNodeWithDecorator(typescript, node)) {
+    node = node.parent;
+    if (!node) return;
   }
+  return node;
 }
 function getAstNodeAtPosition(typescript, node, pos) {
   if (node.pos > pos || node.end <= pos) return;
   while (node.kind >= typescript.SyntaxKind.FirstNode) {
-    const nested = typescript.forEachChild(node, (child) => child.pos <= pos && child.end > pos ? child : void 0);
+    const nested = typescript.forEachChild(node, (child) => child.pos < pos && child.end >= pos ? child : void 0);
     if (nested === void 0) break;
     node = nested;
   }
   return node;
 }
-var BEFORE_REG = /[^\s</>]+$/;
-var AFTER_REG = /^[^\s</>]+/;
-function getHTMLTextAtPosition(text, offset) {
-  const before = text.slice(0, offset).match(BEFORE_REG)?.at(0) || "";
-  const after = text.slice(offset).match(AFTER_REG)?.at(0) || "";
-  const str = before + after;
-  return {
-    before,
-    after,
-    text: str,
-    start: offset - before.length,
-    length: str.length
-  };
+function getAllIdent(text) {
+  return [...text.matchAll(/[a-zA-Z0-9-_]+/g)].map(({ 0: v, index }) => ({
+    start: index,
+    length: v.length,
+    value: v
+  }));
+}
+function getIdentAtPosition(text, offset) {
+  for (const { value, start } of getAllIdent(text)) {
+    if (offset >= start && offset <= start + value.length) {
+      return { text: value, start, length: value.length };
+    }
+  }
 }
 function getAttrName(text) {
   const attr = text.split("=").at(0);
@@ -342,12 +434,10 @@ function decorate(origin, cb) {
 var dataProvider = (0, import_vscode_html_languageservice.getDefaultHTMLDataProvider)();
 var HTMLDataProvider = class {
   #ts;
-  #elements;
-  #getProgram;
-  constructor(typescript, elements, getProgram) {
-    this.#ts = typescript;
-    this.#elements = elements;
-    this.#getProgram = getProgram;
+  #ctx;
+  constructor(ctx) {
+    this.#ts = ctx.ts;
+    this.#ctx = ctx;
   }
   getId() {
     return NAME;
@@ -356,7 +446,7 @@ var HTMLDataProvider = class {
     return true;
   }
   provideTags() {
-    return [...this.#elements].map(([tag, node]) => ({
+    return [...this.#ctx.elements].map(([tag, node]) => ({
       name: tag,
       attributes: [],
       description: getDocComment(this.#ts, node)
@@ -364,14 +454,15 @@ var HTMLDataProvider = class {
   }
   provideAttributes(tag) {
     const ts = this.#ts;
-    const typeChecker = this.#getProgram().getTypeChecker();
-    const node = this.#elements.get(tag);
+    const typeChecker = this.#ctx.getProgram().getTypeChecker();
+    const node = this.#ctx.elements.get(tag);
     const result = [
       { name: "v-if", description: "Similar to vue `v-if`" },
       { name: "v-else-if", description: "Similar to vue `v-else-if`" },
       { name: "v-else", description: "Similar to vue `v-else`", valueSet: "v" }
     ];
-    if (!node) return result;
+    const builtInAttrsAndEvents = dataProvider.provideAttributes("div").map((e) => ({ ...e, name: e.name.replace(/^on/, "@") }));
+    if (!node) return [...result, ...builtInAttrsAndEvents];
     const isDep = isDepElement(node);
     const props = typeChecker.getTypeAtLocation(node).getApparentProperties();
     props.forEach((e) => {
@@ -384,40 +475,49 @@ var HTMLDataProvider = class {
       const typeText = declaration.type?.getText();
       const description = getDocComment(ts, declaration);
       switch (type) {
+        // 一般是 attribute
         case typeChecker.getStringType():
         case typeChecker.getNumberType():
           result.push({ name: e.name, description });
           break;
+        // 一般是 boolean attribute
         case typeChecker.getBooleanType():
           result.push({ name: e.name, description, valueSet: "v" });
           result.push({ name: `?${e.name}`, description });
           break;
+        default: {
+          if (type && getUnionValues(type)) {
+            result.push({ name: e.name, description });
+          }
+        }
       }
-      if (type && getUnionValues(type)) {
-        result.push({ name: e.name, description });
-      }
-      if (typeText?.startsWith("Emitter")) {
-        result.push({ name: `@${e.name}`, description });
+      if (typeText?.startsWith(Types.Emitter)) {
+        result.push({ name: `@${camelToKebabCase(e.name)}`, description });
       } else {
         result.push({ name: `.${e.name}`, description });
       }
     });
-    const oResult = dataProvider.provideAttributes(isCustomElementTag(tag) ? "div" : tag);
-    oResult.forEach((data) => {
-      const tryEvtName = data.name.replace(/^on/, "@");
-      if (tryEvtName !== data.name) {
-        result.push({ ...data, name: tryEvtName });
-      }
-    });
+    result.push(...builtInAttrsAndEvents.filter((e) => e.name.startsWith("@")));
     return result;
   }
   provideValues(tag, attr) {
-    const typeChecker = this.#getProgram().getTypeChecker();
-    const node = this.#elements.get(tag);
-    if (!node) return [];
-    const prop = typeChecker.getTypeAtLocation(node).getProperty(getAttrName(attr).attr);
-    const result = prop && getUnionValues(typeChecker.getTypeOfSymbol(prop));
-    return result?.map((name) => ({ name })) || [];
+    const result = [];
+    const typeChecker = this.#ctx.getProgram().getTypeChecker();
+    const node = this.#ctx.elements.get(tag);
+    const prop = node && typeChecker.getTypeAtLocation(node).getProperty(getAttrName(attr).attr);
+    const values = prop && getUnionValues(typeChecker.getTypeOfSymbol(prop));
+    values?.forEach((name) => result.push({ name }));
+    if (attr === "class" || attr === "id") {
+      const currentElementDecl = getCurrentElementDecl(this.#ts, this.#ctx.currentNode);
+      if (currentElementDecl) {
+        this.#ctx.getAllCss(currentElementDecl).forEach(({ classIdNodeMap }) => {
+          classIdNodeMap.entries().filter(([key]) => !(+(attr === "id") ^ +key.startsWith("#"))).forEach(([classOrId]) => {
+            result.push({ name: classOrId.slice(attr === "id" ? 1 : 0) });
+          });
+        });
+      }
+    }
+    return result;
   }
 };
 function getUnionValues(type) {
@@ -441,17 +541,33 @@ function getDocComment(typescript, declaration) {
 }
 
 // src/context.ts
+var NodeMap = class {
+  #map = {};
+  get(key) {
+    return this.#map[key];
+  }
+  add(key, value) {
+    if (!this.#map[key]) this.#map[key] = [];
+    this.#map[key].push(value);
+  }
+  entries() {
+    return Object.entries(this.#map);
+  }
+};
 var Context = class {
+  // 用于 data-provider 自动完成
+  currentNode;
+  // TODO: 支持同名元素，查找时使用最近的声明
   elements;
   builtInElements;
   ts;
   config;
   project;
   logger;
-  dataProvider;
   cssLanguageService;
   htmlLanguageService;
   htmlSourceHelper;
+  cssSourceHelper;
   htmlTemplateStringSettings;
   cssTemplateStringSettings;
   getProgram;
@@ -461,12 +577,11 @@ var Context = class {
     this.getProgram = () => info.languageService.getProgram();
     this.project = info.project;
     this.logger = logger;
-    this.dataProvider = dataProvider;
     this.elements = new StringWeakMap();
     this.builtInElements = new StringWeakMap();
     this.cssLanguageService = (0, import_vscode_css_languageservice.getCSSLanguageService)({});
     this.htmlLanguageService = (0, import_vscode_html_languageservice2.getLanguageService)({
-      customDataProviders: [dataProvider, new HTMLDataProvider(typescript, this.elements, this.getProgram)]
+      customDataProviders: [new HTMLDataProvider(this)]
     });
     this.htmlTemplateStringSettings = {
       tags: ["html", "raw", "h"],
@@ -485,43 +600,98 @@ var Context = class {
       new import_standard_script_source_helper.default(typescript, info.project),
       logger
     );
+    this.cssSourceHelper = new import_standard_template_source_helper.default(
+      typescript,
+      this.cssTemplateStringSettings,
+      new import_standard_script_source_helper.default(typescript, info.project),
+      logger
+    );
   }
-  #virtualHtmlCache = new LRUCache({ max: 1e3 });
   #virtualCssCache = new LRUCache({ max: 1e3 });
   getCssDoc(text) {
     return this.#virtualCssCache.get({ text, fileName: "" }, void 0, () => {
       const vDoc = createVirtualDocument("css", text);
       const vCss = this.cssLanguageService.parseStylesheet(vDoc);
-      return { vDoc, vCss };
+      const tagNodeMap = new NodeMap();
+      const classIdNodeMap = new NodeMap();
+      const propNodeMap = new NodeMap();
+      forEachNode(vCss.getChildren(), (node) => {
+        if (node.type === import_vscode_css_languageservice.NodeType.ElementNameSelector) {
+          tagNodeMap.add(node.getText(), node);
+        }
+        if (node.type === import_vscode_css_languageservice.NodeType.IdentifierSelector || node.parent?.type === import_vscode_css_languageservice.NodeType.ClassSelector) {
+          classIdNodeMap.add(node.getText(), node);
+        }
+        if (node.parent?.type === import_vscode_css_languageservice.NodeType.CustomPropertyDeclaration) {
+          propNodeMap.add(node.getText(), node);
+        }
+      });
+      return { vDoc, vCss, tagNodeMap, classIdNodeMap, customPropNodeMap: propNodeMap };
     });
   }
+  getAllCss(node) {
+    return getAllStyleNode(this.ts, this.getProgram().getTypeChecker(), node).map((templateNode) => {
+      const { fileName } = templateNode.getSourceFile();
+      const templateContext = this.cssSourceHelper.getTemplate(fileName, templateNode.pos + 1);
+      if (!templateContext) return;
+      return { ...this.getCssDoc(templateContext.text), templateContext, templateNode };
+    }).filter(isNotNullish);
+  }
+  #virtualHtmlCache = new LRUCache({ max: 1e3 });
   getHtmlDoc(text) {
     return this.#virtualHtmlCache.get({ text, fileName: "" }, void 0, () => {
       const vDoc = createVirtualDocument("html", text);
       const vHtml = this.htmlLanguageService.parseHTMLDocument(vDoc);
-      vHtml.roots.forEach(function transform(e, index, arr) {
+      const tagNodeMap = new NodeMap();
+      const classIdNodeMap = new NodeMap();
+      vHtml.roots.forEach(function process2(e, index, arr) {
         e.prev = arr[index - 1];
         e.next = arr[index + 1];
-        e.children.forEach(transform);
+        e.tag && tagNodeMap.add(e.tag, e);
+        const idAttr = e.attributesMap.get("id");
+        const classAttr = e.attributesMap.get("class");
+        if (idAttr?.value) {
+          const text2 = getIdentAtPosition(idAttr.value, 1);
+          if (text2) {
+            classIdNodeMap.add(`#${text2.text}`, {
+              start: idAttr.end + 1 + text2.start,
+              length: text2.length
+            });
+          }
+        }
+        if (classAttr?.value) {
+          getAllIdent(classAttr.value).forEach((text2) => {
+            classIdNodeMap.add(text2.value, {
+              start: classAttr.end + 1 + text2.start,
+              length: text2.length
+            });
+          });
+        }
+        e.children.forEach(process2);
       });
-      return { vDoc, vHtml };
+      return { vDoc, vHtml, tagNodeMap, classIdNodeMap };
     });
   }
+  prepareComplete(node) {
+    const tags = [...this.elements].map(([tag]) => tag);
+    (0, import_vscode_emmet_helper.updateTags)(tags);
+    (0, import_vscode_css_languageservice.updateTags)(tags);
+    this.currentNode = node;
+  }
   getTagFromNode(node, supportClassName = isDepElement(node)) {
     if (!this.ts.isClassDeclaration(node)) return;
-    for (const modifier of node.modifiers || []) {
-      if (this.ts.isDecorator(modifier) && this.ts.isCallExpression(modifier.expression) && modifier.expression.expression.getText() === "customElement") {
-        const arg = modifier.expression.arguments.at(0);
-        if (arg && this.ts.isStringLiteral(arg)) {
-          return arg.text;
-        }
-      }
-    }
+    const tag = getTagFromNodeWithDecorator(this.ts, node);
+    if (tag) return tag;
     if (supportClassName && node.name && this.ts.isIdentifier(node.name)) {
       return this.config.elementDefineRules.findTag(node.name.text);
     }
   }
   updateElement(file) {
+    for (const [tag, decl] of this.elements) {
+      if (decl.getSourceFile().fileName === file.fileName) {
+        this.elements.delete?.(tag);
+      }
+    }
     const isDep = isDepElement(file);
     this.ts.forEachChild(file, (node) => {
       const tag = this.getTagFromNode(node, isDep);
@@ -536,7 +706,8 @@ var Context = class {
    */
   initElements() {
     const program = this.getProgram();
-    if (this.#initElementsCache.has(program)) return;
+    if (this.#initElementsCache.has(this.project)) return;
+    this.#initElementsCache.add(this.project);
     const files = program.getSourceFiles();
     files.forEach((file) => this.updateElement(file));
     const typeChecker = program.getTypeChecker();
@@ -555,12 +726,54 @@ var Context = class {
   }
 };
 var partialBuiltInElementMap = {
-  SVGAElement: [],
-  HTMLAnchorElement: ["a"],
-  SVGImageElement: [],
-  HTMLImageElement: ["img"],
-  SVGStyleElement: [],
-  HTMLStyleElement: ["style"],
+  HTMLElement: [
+    "abbr",
+    "address",
+    "article",
+    "aside",
+    "b",
+    "bid",
+    "bdo",
+    "cite",
+    "code",
+    "dd",
+    "dfn",
+    "dt",
+    "em",
+    "figcaption",
+    "figure",
+    "footer",
+    "header",
+    "hgroup",
+    "i",
+    "kbd",
+    "main",
+    "mark",
+    "nav",
+    "noscript",
+    "rp",
+    "rt",
+    "ruby",
+    "s",
+    "samp",
+    "search",
+    "section",
+    "small",
+    "strong",
+    "sub",
+    "summary",
+    "sup",
+    "u",
+    "var",
+    "wbr"
+  ],
+  HTMLIFrameElement: ["iframe"],
+  HTMLFieldSetElement: ["fieldset"],
+  HTMLFencedFrameElement: ["fencedframe"],
+  HTMLSelectedContentElement: ["selectedcontent"],
+  HTMLParagraphElement: ["p"],
+  HTMLOptGroupElement: ["optgroup"],
+  HTMLTextAreaElement: ["textarea"],
   HTMLDListElement: ["dl"],
   HTMLOListElement: ["ol"],
   HTMLUListElement: ["ul"],
@@ -571,7 +784,18 @@ var partialBuiltInElementMap = {
   HTMLTableCellElement: ["th", "td"],
   HTMLTableColElement: ["col"],
   HTMLTableRowElement: ["tr"],
-  HTMLTableSectionElement: ["thead", "tfoot", "tbody"]
+  HTMLTableSectionElement: ["thead", "tfoot", "tbody"],
+  // 和 svg 同名元素使用 html 元素对待
+  SVGAElement: [],
+  HTMLAnchorElement: ["a"],
+  SVGImageElement: [],
+  HTMLImageElement: ["img"],
+  SVGStyleElement: [],
+  HTMLStyleElement: ["style"],
+  SVGScriptElement: [],
+  HTMLScriptElement: ["script"],
+  SVGTitleElement: [],
+  HTMLTitleElement: ["title"]
 };
 function createVirtualDocument(languageId, content) {
   return import_vscode_html_languageservice2.TextDocument.create(`embedded://document.${languageId}`, languageId, 1, content);
@@ -602,7 +826,7 @@ function isValidCSSTemplate(typescript, node, callName) {
 
 // src/decorate-css.ts
 var import_vscode_css_languageservice2 = require("@mantou/vscode-css-languageservice");
-var import_vscode_emmet_helper = require("@mantou/vscode-emmet-helper");
+var import_vscode_emmet_helper2 = require("@mantou/vscode-emmet-helper");
 
 // src/translates.ts
 var vscode = __toESM(require("vscode-languageserver-types"));
@@ -704,6 +928,36 @@ function translateHover(context, hover, position, offset = 0) {
     tags: []
   };
 }
+function translateFoldingRangeKind(context, kind) {
+  const typescript = context.typescript;
+  switch (kind) {
+    case vscode.FoldingRangeKind.Comment:
+      return typescript.OutliningSpanKind.Comment;
+    case vscode.FoldingRangeKind.Imports:
+      return typescript.OutliningSpanKind.Imports;
+    case vscode.FoldingRangeKind.Region:
+      return typescript.OutliningSpanKind.Region;
+    default:
+      return typescript.OutliningSpanKind.Code;
+  }
+}
+function translateFoldingRange(context, range) {
+  const start = context.toOffset({ line: range.startLine, character: range.startCharacter || 0 });
+  const end = context.toOffset({ line: range.endLine, character: range.endCharacter || 0 });
+  return {
+    kind: translateFoldingRangeKind(context, range.kind),
+    autoCollapse: true,
+    bannerText: range.collapsedText || "",
+    textSpan: {
+      start,
+      length: end - start
+    },
+    hintSpan: {
+      start,
+      length: end - start
+    }
+  };
+}
 function translateCompletionItemsToCompletionEntryDetails(context, item) {
   return {
     name: item.label,
@@ -742,8 +996,8 @@ function genElementDefinitionInfo(context, { start, length }, definitionNode) {
       {
         containerName: "Custom Element",
         containerKind: context.typescript.ScriptElementKind.unknown,
-        name: definitionNode.name.text,
         kind: context.typescript.ScriptElementKind.classElement,
+        name: definitionNode.name.text,
         fileName: definitionNode.getSourceFile().fileName,
         textSpan: {
           start: definitionNode.name.getStart() - htmlOffset,
@@ -755,18 +1009,19 @@ function genElementDefinitionInfo(context, { start, length }, definitionNode) {
 }
 function genAttrDefinitionInfo(context, { start, length }, propDeclaration) {
   const htmlOffset = context.node.pos + 1;
+  const propName = propDeclaration.getText();
   return {
     textSpan: { start, length },
     definitions: [
       {
         containerName: "Attribute",
         containerKind: context.typescript.ScriptElementKind.unknown,
-        name: propDeclaration.getText(),
         kind: context.typescript.ScriptElementKind.memberVariableElement,
+        name: propName,
         fileName: propDeclaration.getSourceFile().fileName,
         textSpan: {
           start: propDeclaration.getStart() - htmlOffset,
-          length: propDeclaration.getText().length
+          length: propName.length
         }
       }
     ]
@@ -779,14 +1034,31 @@ function genCurrentCtxDefinitionInfo(context, { start, length }, definitionTextS
       {
         containerName: "Attribute",
         containerKind: context.typescript.ScriptElementKind.unknown,
-        name: context.text.slice(start, start + length),
         kind: context.typescript.ScriptElementKind.memberVariableElement,
+        name: context.text.slice(start, start + length),
         fileName: context.fileName,
         textSpan: definitionTextSpan
       }
     ]
   };
 }
+function genCurrentCtxCssDefinitionInfo(context, value, start, definitions) {
+  const htmlOffset = context.node.getStart();
+  const length = value.length;
+  return {
+    textSpan: { start, length },
+    definitions: definitions.flatMap(
+      ({ ctx, nodes, offset = 0 }) => nodes.map((node) => ({
+        containerName: "AttributeValue",
+        containerKind: context.typescript.ScriptElementKind.unknown,
+        kind: context.typescript.ScriptElementKind.memberVariableElement,
+        name: value,
+        fileName: context.fileName,
+        textSpan: { start: node.offset + ctx.node.pos - offset - htmlOffset, length: node.length }
+      }))
+    )
+  };
+}
 
 // src/decorate-css.ts
 var CSSLanguageService = class {
@@ -815,9 +1087,9 @@ var CSSLanguageService = class {
       const { text, pos } = this.#normalize(context, position);
       const { vDoc, vCss } = this.#ctx.getCssDoc(text);
       let emmetResults;
-      const onCssProperty = () => emmetResults = (0, import_vscode_emmet_helper.doComplete)(vDoc, pos, "css", this.#ctx.config.emmet);
+      const onCssProperty = () => emmetResults = (0, import_vscode_emmet_helper2.doComplete)(vDoc, pos, "css", this.#ctx.config.emmet);
       this.#ctx.cssLanguageService.setCompletionParticipants([{ onCssProperty }]);
-      (0, import_vscode_css_languageservice2.updateTags)([...this.#ctx.elements].map(([tag]) => tag));
+      this.#ctx.prepareComplete(context.node);
       const completions = this.#ctx.cssLanguageService.doComplete(vDoc, pos, vCss);
       completions.items.push(...emmetResults?.items || []);
       return completions;
@@ -864,22 +1136,95 @@ var CSSLanguageService = class {
     this.#ctx.initElements();
     return this.#diagnosticsCache.get(context, void 0, () => this.#getSyntacticDiagnostics(context));
   }
+  getReferencesAtPosition(context, position) {
+    const typeChecker = this.#ctx.getProgram().getTypeChecker();
+    const { text, offset } = this.#normalize(context, position);
+    const { vCss } = this.#ctx.getCssDoc(text);
+    const node = vCss.findChildAtOffset(context.toOffset(position) + offset, true);
+    const result = [];
+    if (node?.type === import_vscode_css_languageservice2.NodeType.IdentifierSelector || node?.parent?.type === import_vscode_css_languageservice2.NodeType.ClassSelector) {
+      const classOrId = node.getText();
+      for (const [, decl] of this.#ctx.elements) {
+        const { fileName } = decl.getSourceFile();
+        const styles = getAllStyleNode(context.typescript, typeChecker, decl);
+        if (!styles.includes(context.node)) continue;
+        forEachNode(decl.getChildren(), (node2) => {
+          const templateNode = getTemplateNode(context.typescript, node2);
+          if (templateNode) {
+            const templateContext = this.#ctx.htmlSourceHelper.getTemplate(fileName, templateNode.pos + 1);
+            if (!templateContext) return;
+            const { classIdNodeMap } = this.#ctx.getHtmlDoc(templateContext.text);
+            classIdNodeMap.get(classOrId)?.forEach((n) => {
+              result.push({
+                fileName,
+                textSpan: { start: n.start + templateNode.pos - context.node.pos, length: n.length },
+                isWriteAccess: true
+              });
+            });
+          } else if (isClassMapKey(context.typescript, node2) && node2.text === classOrId) {
+            const isString = context.typescript.isStringLiteral(node2);
+            result.push({
+              fileName,
+              textSpan: {
+                start: node2.getStart() - context.node.pos - 1 + (isString ? 1 : 0),
+                length: node2.text.length
+              },
+              isWriteAccess: true
+            });
+          }
+        });
+      }
+    }
+    if (node?.parent?.type === import_vscode_css_languageservice2.NodeType.Property) {
+      forEachIdent(vCss, node.getText(), (cssNode) => {
+        result.push({
+          fileName: context.fileName,
+          textSpan: { start: cssNode.offset - offset, length: cssNode.end - cssNode.offset },
+          isWriteAccess: true
+        });
+      });
+    }
+    return result;
+  }
   getDefinitionAndBoundSpan(context, position) {
     const { text, offset } = this.#normalize(context, position);
-    const { vDoc, vCss } = this.#ctx.getCssDoc(text);
+    const { vCss, customPropNodeMap } = this.#ctx.getCssDoc(text);
     const empty = { textSpan: { start: 0, length: 0 } };
-    const node = vCss.findChildAtOffset(context.toOffset(position), true);
+    const node = vCss.findChildAtOffset(context.toOffset(position) + offset, true);
     if (!node) return empty;
-    const ident = vDoc.getText().slice(node.offset, node.end);
-    const definitionNode = this.#ctx.elements.get(ident);
+    const textSpan = { start: node.offset - offset, length: node.length };
+    if (node.type === import_vscode_css_languageservice2.NodeType.IdentifierSelector || node.parent?.type === import_vscode_css_languageservice2.NodeType.ClassSelector || node.parent?.parent?.type === import_vscode_css_languageservice2.NodeType.CustomPropertyDeclaration) {
+      return genCurrentCtxDefinitionInfo(context, textSpan, textSpan);
+    }
+    const propDefinitions = customPropNodeMap.get(node.getText());
+    if (node.type === import_vscode_css_languageservice2.NodeType.Identifier && propDefinitions) {
+      return genCurrentCtxCssDefinitionInfo(context, node.getText(), node.offset - offset, [
+        { ctx: context, nodes: propDefinitions, offset }
+      ]);
+    }
+    if (node.parent?.type !== import_vscode_css_languageservice2.NodeType.ElementNameSelector) return empty;
+    const definitionNode = this.#ctx.elements.get(node.getText());
     if (!definitionNode) return empty;
-    return genElementDefinitionInfo(context, { start: node.offset - offset, length: node.length }, definitionNode);
+    return genElementDefinitionInfo(context, textSpan, definitionNode);
+  }
+  // 不知道如何起作用的，没有被调用，但不加就没有 css 折叠了
+  getOutliningSpans(context) {
+    const { vDoc } = this.#ctx.getHtmlDoc(context.text);
+    const ranges = this.#ctx.cssLanguageService.getFoldingRanges(vDoc);
+    return ranges.map((range) => translateFoldingRange(context, range));
   }
 };
+function forEachIdent(vCss, customPropName, fn) {
+  forEachNode(vCss.getChildren(), (ident) => {
+    if (ident.type !== import_vscode_css_languageservice2.NodeType.Identifier || ident.getText() !== customPropName) return;
+    if (ident.parent?.type !== import_vscode_css_languageservice2.NodeType.Term && ident?.parent?.type !== import_vscode_css_languageservice2.NodeType.Property) return;
+    fn(ident);
+  });
+}
 
 // src/decorate-html.ts
 var import_vscode_css_languageservice3 = require("@mantou/vscode-css-languageservice");
-var import_vscode_emmet_helper2 = require("@mantou/vscode-emmet-helper");
+var import_vscode_emmet_helper3 = require("@mantou/vscode-emmet-helper");
 var HTMLLanguageService = class {
   #completionsCache = new LRUCache({ max: 1 });
   #diagnosticsCache = new LRUCache();
@@ -919,7 +1264,7 @@ var HTMLLanguageService = class {
     const css = this.#getEmbeddedCss(context, position, doc);
     if (!css) return [];
     let emmetResults;
-    const onCssProperty = () => emmetResults = (0, import_vscode_emmet_helper2.doComplete)(css.vDoc, css.position, "css", this.#ctx.config.emmet);
+    const onCssProperty = () => emmetResults = (0, import_vscode_emmet_helper3.doComplete)(css.vDoc, css.position, "css", this.#ctx.config.emmet);
     this.#ctx.cssLanguageService.setCompletionParticipants([{ onCssProperty }]);
     (0, import_vscode_css_languageservice3.updateTags)([...this.#ctx.elements].map(([tag]) => tag));
     const completions = this.#ctx.cssLanguageService.doComplete(css.vDoc, css.position, css.style);
@@ -934,11 +1279,9 @@ var HTMLLanguageService = class {
     return this.#completionsCache.get(context, position, () => {
       const { vDoc, vHtml } = this.#ctx.getHtmlDoc(context.text);
       let emmetResults;
-      const onHtmlContent = () => {
-        (0, import_vscode_emmet_helper2.updateTags)([...this.#ctx.elements].map(([tag]) => tag));
-        emmetResults = (0, import_vscode_emmet_helper2.doComplete)(vDoc, position, "html", this.#ctx.config.emmet);
-      };
+      const onHtmlContent = () => emmetResults = (0, import_vscode_emmet_helper3.doComplete)(vDoc, position, "html", this.#ctx.config.emmet);
       this.#ctx.htmlLanguageService.setCompletionParticipants([{ onHtmlContent }]);
+      this.#ctx.prepareComplete(context.node);
       const completions = this.#ctx.htmlLanguageService.doComplete(vDoc, position, vHtml);
       completions.items.push(...emmetResults?.items || []);
       completions.items.push(...this.#getCSSCompletionsAtPosition(context, position, vHtml));
@@ -1000,7 +1343,7 @@ var HTMLLanguageService = class {
       return diagnostics;
     });
   }
-  #getHtmlSyntacticDiagnostics(context) {
+  #getHtmlSemanticDiagnostics(context) {
     const offset = context.node.getStart() + 1;
     const { vHtml } = this.#ctx.getHtmlDoc(context.text);
     const program = this.#ctx.getProgram();
@@ -1009,7 +1352,9 @@ var HTMLLanguageService = class {
     const diagnostics = [];
     forEachNode(vHtml.roots, (node) => {
       if (!node.tag) return;
-      if (isCustomElementTag(node.tag) && !this.#ctx.elements.get(node.tag)) {
+      const customElementTagDecl = this.#ctx.elements.get(node.tag);
+      const builtInElementTagDecl = this.#ctx.builtInElements.get(node.tag);
+      if (isCustomElementTag(node.tag) && !customElementTagDecl) {
         diagnostics.push({
           category: context.typescript.DiagnosticCategory.Warning,
           code: 101 /* UnknownTag */,
@@ -1020,13 +1365,38 @@ var HTMLLanguageService = class {
           source: NAME
         });
       }
-      const tagDeclaration = this.#ctx.elements.get(node.tag) || this.#ctx.builtInElements.get(node.tag);
+      const tagDeclaration = customElementTagDecl || builtInElementTagDecl;
       if (!tagDeclaration) return;
+      if (tagDeclaration.name && isDeprecate(typeChecker.getSymbolAtLocation(tagDeclaration.name))) {
+        [node.start + 1, node.endTagStart && node.endTagStart + 2].forEach((tagStart) => {
+          tagStart && diagnostics.push({
+            category: context.typescript.DiagnosticCategory.Suggestion,
+            file,
+            start: tagStart,
+            length: node.tag.length,
+            source: NAME,
+            code: 105 /* Deprecated */,
+            messageText: `Deprecated tag '${node.tag}'`,
+            reportsDeprecated: "true"
+          });
+        });
+      }
       for (const [attributeName, { value, start, end }] of node.attributesMap) {
         if (attributeName.startsWith("_")) continue;
         const hasValueSpan = value?.startsWith("_");
         const attrInfo = getAttrName(attributeName);
-        const propType = getPropType(typeChecker, tagDeclaration, attrInfo);
+        const propType = getPropType(typeChecker, tagDeclaration, !customElementTagDecl, attrInfo, () => {
+          diagnostics.push({
+            category: context.typescript.DiagnosticCategory.Suggestion,
+            file,
+            start,
+            length: end - start,
+            source: NAME,
+            code: 105 /* Deprecated */,
+            messageText: `Deprecated prop '${attrInfo.attr}'`,
+            reportsDeprecated: "true"
+          });
+        });
         const diagnostic = {
           category: context.typescript.DiagnosticCategory.Warning,
           file,
@@ -1042,6 +1412,7 @@ var HTMLLanguageService = class {
             code: 104 /* PropSyntaxError */,
             messageText: `'${attrInfo.attr}' syntax error`
           });
+          continue;
         }
         if (attributeName === "v-if" || attributeName === "v-else-if") {
           const spanType = getSpanType(this.#ctx.ts, typeChecker, file, offset, end);
@@ -1056,8 +1427,17 @@ var HTMLLanguageService = class {
           }
           continue;
         }
+        if (attrInfo.decorate === "" && attributeName !== camelToKebabCase(attrInfo.attr)) {
+          diagnostics.push({
+            ...diagnostic,
+            code: 2552 /* AttrFormatError */,
+            messageText: `Consider using '${customElementTagDecl ? camelToKebabCase(attrInfo.attr) : attrInfo.attr.toLowerCase()}'`
+          });
+          continue;
+        }
         if (!propType) {
-          if (attrInfo.decorate !== "@") {
+          if (attrInfo.decorate !== "@" && // SVG 元素有很多 css 属性，所以不检查
+          !builtInElementTagDecl?.name.getText().startsWith("SVG")) {
             diagnostics.push({
               ...diagnostic,
               code: 102 /* UnknownProp */,
@@ -1066,6 +1446,16 @@ var HTMLLanguageService = class {
           }
           continue;
         }
+        if (globalEnumeratedBooleanAttr.has(attrInfo.attr) && // <div ?draggable=${xx}>
+        (attrInfo.decorate === "?" || // <div draggable>
+        value === null)) {
+          diagnostics.push({
+            ...diagnostic,
+            code: 104 /* PropSyntaxError */,
+            messageText: `Consider using '${camelToKebabCase(attrInfo.attr)}', must has value`
+          });
+          continue;
+        }
         if (value === null) {
           if (attrInfo.decorate) {
             diagnostics.push({
@@ -1098,11 +1488,13 @@ var HTMLLanguageService = class {
                 diagnostics.push(diagnostic);
               }
               continue;
-            default:
-              if (!typeChecker.isTypeAssignableTo(spanType, propType) && (!typeChecker.isTypeAssignableTo(propType, typeChecker.getStringType()) || !typeChecker.isTypeAssignableTo(spanType, typeChecker.getStringType()))) {
+            default: {
+              const nullablePropType = getUnionType(typeChecker, [propType, typeChecker.getNullType()]);
+              if (!typeChecker.isTypeAssignableTo(spanType, nullablePropType) && (!typeChecker.isTypeAssignableTo(propType, typeChecker.getStringType()) || !typeChecker.isTypeAssignableTo(spanType, typeChecker.getStringType()))) {
                 diagnostics.push(diagnostic);
               }
               continue;
+            }
           }
         } else {
           const types = [typeChecker.getStringType(), typeChecker.getNumberType()];
@@ -1118,6 +1510,15 @@ var HTMLLanguageService = class {
               code: 104 /* PropSyntaxError */,
               messageText: `Consider using '${camelToKebabCase(attrInfo.attr)}'`
             });
+          } else if (globalEnumeratedBooleanAttr.has(attrInfo.attr)) {
+            const values = ["true", "false", ...globalEnumeratedBooleanAttr.get(attrInfo.attr)];
+            if (!values.includes(valueLetter)) {
+              diagnostics.push({
+                ...diagnostic,
+                code: 103 /* PropTypeError */,
+                messageText: `Must be ${values.join(", ")}`
+              });
+            }
           } else if (types.every((t) => !typeChecker.isTypeAssignableTo(t, propType))) {
             diagnostics.push(diagnostic);
           }
@@ -1128,20 +1529,25 @@ var HTMLLanguageService = class {
   }
   getSyntacticDiagnostics(context) {
     this.#ctx.initElements();
-    return [...this.#getCssSyntacticDiagnostics(context), ...this.#getHtmlSyntacticDiagnostics(context)];
+    return this.#getCssSyntacticDiagnostics(context);
+  }
+  getSemanticDiagnostics(context) {
+    return this.#getHtmlSemanticDiagnostics(context);
   }
   getDefinitionAndBoundSpan(context, position) {
+    const typeChecker = this.#ctx.getProgram().getTypeChecker();
     const currentOffset = context.toOffset(position);
     const { vHtml } = this.#ctx.getHtmlDoc(context.text);
-    const node = vHtml.findNodeAt(currentOffset);
-    const { text, start, length, before } = getHTMLTextAtPosition(context.text, currentOffset);
-    const empty = { textSpan: { start, length } };
-    if (node.tag === "style" && currentOffset > node.startTagEnd) {
+    const { node, attrStart, attrEnd, attrName, attrValue } = getHTMLNodeAtPosition(vHtml, currentOffset);
+    const empty = { textSpan: { start: 0, length: 0 } };
+    const notInStartTag = currentOffset > node.startTagEnd;
+    const startTagNameStart = node.start + 1;
+    if (!node.tag) return empty;
+    if (node.tag === "style" && notInStartTag) {
       const { style, vDoc, position: pos } = this.#getEmbeddedCss(context, position, vHtml);
       const cssNode = style.findChildAtOffset(vDoc.offsetAt(pos), true);
-      if (!cssNode) return empty;
-      const ident = vDoc.getText().slice(cssNode.offset, cssNode.end);
-      const definitionNode2 = this.#ctx.elements.get(ident);
+      if (!cssNode || cssNode.parent?.type !== import_vscode_css_languageservice3.NodeType.ElementNameSelector) return empty;
+      const definitionNode2 = this.#ctx.elements.get(cssNode.getText());
       if (!definitionNode2) return empty;
       return genElementDefinitionInfo(
         context,
@@ -1150,28 +1556,104 @@ var HTMLLanguageService = class {
       );
     }
     const definitionNode = this.#ctx.elements.get(node.tag) || this.#ctx.builtInElements.get(node.tag);
-    if (!definitionNode || currentOffset > node.startTagEnd || !text) return empty;
-    if (text === node.tag) {
-      return genElementDefinitionInfo(context, { start, length }, definitionNode);
+    if (!definitionNode || notInStartTag) return empty;
+    if (currentOffset < startTagNameStart + node.tag.length) {
+      return genElementDefinitionInfo(context, { start: startTagNameStart, length: node.tag.length }, definitionNode);
     }
-    const { attr, offset } = getAttrName(text);
-    if (before.length > attr.length) return empty;
+    if (!attrName) return empty;
+    const { attr, offset } = getAttrName(attrName);
+    if (attr === "class" || attr === "id") {
+      if (!attrValue) return empty;
+      const currentAttrValue = getIdentAtPosition(attrValue, currentOffset - (attrEnd + 1));
+      const currentElementDecl = getCurrentElementDecl(context.typescript, context.node);
+      if (!currentAttrValue || !currentElementDecl) return empty;
+      return genCurrentCtxCssDefinitionInfo(
+        context,
+        currentAttrValue.text,
+        attrEnd + 1 + currentAttrValue.start,
+        this.#ctx.getAllCss(currentElementDecl).flatMap(({ classIdNodeMap, templateContext }) => {
+          const nodes = classIdNodeMap.get(attr === "id" ? `#${currentAttrValue.text}` : currentAttrValue.text);
+          return { ctx: templateContext, nodes: nodes || [], offset: 0 };
+        }).filter(isNotNullish)
+      );
+    }
+    if (currentOffset > attrEnd) return empty;
     if (attr === "v-else" || attr === "v-else-if") {
       const ifAttr = node.prev?.attributesMap.get("v-if") || node.prev?.attributesMap.get("v-else-if");
       if (!ifAttr) return empty;
       return genCurrentCtxDefinitionInfo(
         context,
-        { start: start + offset, length: attr.length },
+        { start: attrStart + offset, length: attr.length },
         { start: ifAttr.start, length: ifAttr.end - ifAttr.start }
       );
     }
-    const typeChecker = this.#ctx.getProgram().getTypeChecker();
     const propSymbol = typeChecker.getTypeAtLocation(definitionNode).getProperty(kebabToCamelCase(attr));
     const propDeclaration = propSymbol?.getDeclarations()?.at(0);
     if (!propDeclaration) return empty;
-    return genAttrDefinitionInfo(context, { start: start + offset, length: attr.length }, propDeclaration);
+    return genAttrDefinitionInfo(context, { start: attrStart + offset, length: attr.length }, propDeclaration);
+  }
+  // 不知道如何起作用的，没有被调用，但不加就没有 HTML 折叠了
+  // 所以也忽略了 HTML 里面的内联样式折叠
+  getOutliningSpans(context) {
+    const { vDoc } = this.#ctx.getHtmlDoc(context.text);
+    const ranges = this.#ctx.htmlLanguageService.getFoldingRanges(vDoc);
+    return ranges.map((range) => translateFoldingRange(context, range));
+  }
+  getJsxClosingTagAtPosition(context, position) {
+    const currentOffset = context.toOffset(position);
+    const { vHtml } = this.#ctx.getHtmlDoc(context.text);
+    const node = vHtml.findNodeAt(currentOffset);
+    if (!node.tag || !node.startTagEnd || voidElementTags.has(node.tag)) return;
+    if (!node.endTagStart) return { newText: `</${node.tag}>` };
+  }
+  getDocumentHighlights(context, position) {
+    const { vDoc, vHtml } = this.#ctx.getHtmlDoc(context.text);
+    const docHighlights = this.#ctx.htmlLanguageService.findDocumentHighlights(vDoc, position, vHtml);
+    return [
+      {
+        fileName: context.fileName,
+        highlightSpans: docHighlights.map(({ range }) => {
+          const start = vDoc.offsetAt(range.start);
+          const end = vDoc.offsetAt(range.end);
+          return { textSpan: { start, length: end - start }, kind: this.#ctx.ts.HighlightSpanKind.definition };
+        })
+      }
+    ];
+  }
+  getCodeFixesAtPosition(context, start, end, errorCodes) {
+    const result = [];
+    if (errorCodes.includes(2552 /* AttrFormatError */)) {
+      const { vHtml } = this.#ctx.getHtmlDoc(context.text);
+      const node = vHtml.findNodeAt(start);
+      const isBuiltInTag = !!this.#ctx.builtInElements.get(node.tag);
+      const attr = context.text.slice(start, end);
+      const targetAttr = isBuiltInTag ? attr.toLowerCase() : camelToKebabCase(attr);
+      const textChanges = [{ span: { start, length: end - start }, newText: targetAttr }];
+      result.push({
+        fixName: context.fileName,
+        description: `Convert attribute to '${targetAttr}'`,
+        changes: [{ fileName: context.fileName, textChanges }]
+      });
+    }
+    return result;
   }
 };
+var voidElementTags = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
 function getSpanExpression(typescript, file, pos) {
   let node = getAstNodeAtPosition(typescript, file, pos);
   while (!typescript.isTemplateSpan(node)) {
@@ -1181,29 +1663,55 @@ function getSpanExpression(typescript, file, pos) {
   return node.expression;
 }
 function getSpanType(typescript, typeChecker, file, htmlOffset, attrNameEnd) {
-  const valueOffset = attrNameEnd + htmlOffset + 3;
+  const valueOffset = attrNameEnd + htmlOffset + 4;
   const spanExp = getSpanExpression(typescript, file, valueOffset);
   return typeChecker.getTypeAtLocation(spanExp);
 }
-function getPropType(typeChecker, tagClassDeclaration, attrInfo) {
+var buildInElementNoGlobalAttrPropMap = /* @__PURE__ */ new Map([
+  ["crossorigin", "crossOrigin"],
+  ["rowspan", "rowSpan"],
+  ["colspan", "colSpan"],
+  // <input> list: string
+  ["list", "ariaLabelledby"]
+]);
+var globalAttrPropMap = /* @__PURE__ */ new Map([["contenteditable", "contentEditable"]]);
+var globalEnumeratedBooleanAttr = /* @__PURE__ */ new Map([
+  ["draggable", []],
+  ["spellcheck", []],
+  ["contenteditable", ["plaintext-only"]]
+]);
+function getPropType(typeChecker, tagClassDeclaration, isBuiltInTag, attrInfo, reportDeprecate) {
   const classType = typeChecker.getTypeAtLocation(tagClassDeclaration);
   if (attrInfo.attr.startsWith("data-")) {
     return typeChecker.getStringType();
   }
-  const propName = kebabToCamelCase(attrInfo.attr);
+  const propName = globalAttrPropMap.get(attrInfo.attr) || (isBuiltInTag ? buildInElementNoGlobalAttrPropMap.get(attrInfo.attr) || kebabToCamelCase(attrInfo.attr) : kebabToCamelCase(attrInfo.attr));
   switch (propName) {
     case "class":
     case "style":
     case "part":
     case "exportparts":
+    case "accesskey":
     case "xmlns":
     case "viewBox":
+    case "ariaLabelledby":
       return typeChecker.getStringType();
     case "tabindex":
       return typeChecker.getNumberType();
-    case "ariaDisabled":
+    case "ariaAtomic":
+    case "ariaBusy":
     case "ariaChecked":
+    case "ariaDisabled":
+    case "ariaExpanded":
+    case "ariaGrabbed":
     case "ariaHidden":
+    case "ariaModal":
+    case "ariaMultiline":
+    case "ariaMultiselectable":
+    case "ariaReadonly":
+    case "ariaRequired":
+    case "ariaPressed":
+    case "ariaSelected":
       return getUnionType(typeChecker, [
         typeChecker.getStringType(),
         typeChecker.getBooleanType(),
@@ -1212,6 +1720,7 @@ function getPropType(typeChecker, tagClassDeclaration, attrInfo) {
     default: {
       const isEvent = attrInfo.decorate === "@";
       const propSymbol = classType.getProperty(propName);
+      if (isDeprecate(propSymbol)) reportDeprecate();
       const propType = propSymbol && typeChecker.getTypeOfSymbol(propSymbol);
       if (!isEvent) return propType;
       const eventHandleType = getEmitterHandleType(typeChecker, classType, propType);
@@ -1219,6 +1728,11 @@ function getPropType(typeChecker, tagClassDeclaration, attrInfo) {
     }
   }
 }
+function isDeprecate(symbol) {
+  if (!symbol) return false;
+  const tags = symbol.getJsDocTags();
+  return tags.some(({ name }) => name === "deprecated");
+}
 function getEmitterHandleType(typeChecker, classType, propType) {
   const handleSymbol = propType?.getProperty("handler");
   if (handleSymbol) return typeChecker.getTypeOfSymbol(handleSymbol);
@@ -1236,6 +1750,19 @@ function getUnionType(typeChecker, types) {
   }
   return types.at(0);
 }
+function getHTMLNodeAtPosition(vHtml, offset) {
+  const node = vHtml.findNodeAt(offset);
+  const attr = node.attributesMap.entries().find(([_, n]) => {
+    return offset > n.start && offset < n.end + 1 + (n.value?.length || 0);
+  });
+  return {
+    node,
+    attrName: attr?.[0] ?? "",
+    attrValue: attr?.[1].value ?? "",
+    attrStart: attr?.[1].start ?? 0,
+    attrEnd: attr?.[1].end ?? 0
+  };
+}
 
 // src/decorate-ts.ts
 function decorateLanguageService(ctx, languageService) {
@@ -1244,14 +1771,58 @@ function decorateLanguageService(ctx, languageService) {
   languageService.getCompletionsAtPosition = (...args) => {
     const program = getProgram();
     const typeChecker = program.getTypeChecker();
-    decorate(typeChecker, () => decorateTypeChecker(ctx, typeChecker));
+    decorate(typeChecker, () => decorateTypeChecker(typeChecker));
+    const classKeys = getClassKeys(ctx, args[0], args[1]);
+    if (classKeys) {
+      return {
+        isGlobalCompletion: true,
+        isMemberCompletion: true,
+        isNewIdentifierLocation: true,
+        entries: classKeys.map((name) => ({ kind: ts.ScriptElementKind.enumMemberElement, sortText: "", name }))
+      };
+    }
+    const themeKeys = getThemeKeys(ctx, args[0], args[1]);
+    if (themeKeys) {
+      return {
+        isGlobalCompletion: true,
+        isMemberCompletion: true,
+        isNewIdentifierLocation: true,
+        entries: themeKeys.map((name) => ({ kind: ts.ScriptElementKind.enumMemberElement, sortText: "", name }))
+      };
+    }
     return ls.getCompletionsAtPosition(...args);
   };
+  languageService.getSyntacticDiagnostics = (...args) => {
+    const program = getProgram();
+    const file = program.getSourceFile(args[0]);
+    ctx.updateElement(file);
+    return ls.getSyntacticDiagnostics(...args);
+  };
   languageService.getSuggestionDiagnostics = (...args) => {
     const program = getProgram();
     const file = program.getSourceFile(args[0]);
     const result = ls.getSuggestionDiagnostics(...args);
-    ctx.updateElement(file);
+    ts.forEachChild(file, (node) => {
+      const tag = ctx.getTagFromNode(node);
+      if (tag && ts.isClassDeclaration(node)) {
+        node.members.forEach((member) => {
+          if (!ts.isPropertyDeclaration(member) || !member.modifiers) return;
+          const shouldIsStatic = member.modifiers.some(
+            (modifier) => ts.isDecorator(modifier) && ts.isIdentifier(modifier.expression) && [Decorators.Slot, Decorators.Part].includes(modifier.expression.text)
+          );
+          if (shouldIsStatic && member.modifiers.every((e) => e.kind !== ts.SyntaxKind.StaticKeyword)) {
+            result.push({
+              file,
+              start: member.getStart(),
+              length: member.getEnd() - member.getStart(),
+              category: ts.DiagnosticCategory.Warning,
+              code: 2552 /* DecoratorSyntaxError */,
+              messageText: "Use static field for `@part` and `@slot`"
+            });
+          }
+        });
+      }
+    });
     return result.filter(({ start, reportsUnnecessary, category }) => {
       if (!reportsUnnecessary || category !== ts.DiagnosticCategory.Suggestion) return true;
       const node = getAstNodeAtPosition(ts, file, start);
@@ -1262,52 +1833,84 @@ function decorateLanguageService(ctx, languageService) {
     });
   };
   languageService.findReferences = (...args) => {
+    const map = /* @__PURE__ */ new Map();
+    const tagDefinedInfo = findDefinedTagInfo(ctx, ...args);
+    if (tagDefinedInfo) {
+      forEachAllHtmlTemplateNode(ctx, tagDefinedInfo.tag, (file, tagInfo) => {
+        const symbol = map.get(file.fileName) || getReferencedSymbol(ctx, file);
+        map.set(file.fileName, symbol);
+        symbol.references.push({
+          fileName: file.fileName,
+          isWriteAccess: true,
+          textSpan: tagInfo.open
+        });
+      });
+      forEachAllCssTemplateNode(ctx, tagDefinedInfo.tag, (file, textSpan) => {
+        const symbol = map.get(file.fileName) || getReferencedSymbol(ctx, file);
+        map.set(file.fileName, symbol);
+        symbol.references.push({
+          fileName: file.fileName,
+          isWriteAccess: true,
+          textSpan
+        });
+      });
+      return [...map.values()];
+    }
     const oResult = ls.findReferences(...args) || [];
     const program = getProgram();
     const currentNode = getAstNodeAtPosition(ts, program.getSourceFile(args[0]), args[1]);
-    if (!currentNode) return oResult;
-    const isIdent = ts.isIdentifier(currentNode);
-    if (!isIdent) return oResult;
+    if (!currentNode || !ts.isIdentifier(currentNode)) return oResult;
     const currentTag = ctx.getTagFromNode(currentNode.parent) || ctx.getTagFromNode(currentNode.parent.parent);
     const prop = ts.isClassDeclaration(currentNode.parent.parent) && currentNode;
     if (!currentTag) return oResult;
-    const map = /* @__PURE__ */ new Map();
-    forEachAllHtmlTemplateNode(ctx, currentTag, (file, tagInfo) => {
-      const symbol = map.get(file.fileName) || {
-        references: [],
-        definition: {
-          containerKind: ctx.ts.ScriptElementKind.unknown,
-          containerName: "",
-          displayParts: [],
-          fileName: file.fileName,
-          textSpan: { start: 0, length: 0 },
-          name: "test",
-          kind: ctx.ts.ScriptElementKind.unknown
-        }
-      };
-      map.set(file.fileName, symbol);
-      if (prop) {
-        const propNames = /* @__PURE__ */ new Set([`.${prop.text}`]);
-        const kebabCaseName = camelToKebabCase(prop.text);
-        ["", "?", "@"].forEach((c) => propNames.add(`${c}${kebabCaseName}`));
-        for (const propName of propNames) {
-          const info = tagInfo.node.attributesMap.get(propName);
-          if (!info) continue;
-          const textSpan = { start: info.start + tagInfo.offset, length: info.end - info.start };
-          symbol.references.push({ fileName: file.fileName, isWriteAccess: true, textSpan });
-        }
-      } else {
-        symbol.references.push({
-          fileName: file.fileName,
-          isWriteAccess: true,
-          textSpan: tagInfo.open
+    if (prop) {
+      getAllTagFromProp(ctx, currentNode).forEach((tag) => {
+        forEachAllHtmlTemplateNode(ctx, tag, (file, tagInfo) => {
+          const symbol = map.get(file.fileName) || getReferencedSymbol(ctx, file);
+          map.set(file.fileName, symbol);
+          const propNames = /* @__PURE__ */ new Set([`.${prop.text}`]);
+          const kebabCaseName = camelToKebabCase(prop.text);
+          ["", "?", "@"].forEach((c) => propNames.add(`${c}${kebabCaseName}`));
+          for (const propName of propNames) {
+            const info = tagInfo.node.attributesMap.get(propName);
+            if (!info) continue;
+            const textSpan = { start: info.start + tagInfo.offset, length: info.end - info.start };
+            symbol.references.push({ fileName: file.fileName, isWriteAccess: true, textSpan });
+          }
         });
-      }
-    });
+      });
+    }
     return [...map.values(), ...oResult];
   };
+  languageService.getDefinitionAndBoundSpan = (...args) => {
+    const classMapKeyInfo = getClassMapKeyInfo(ctx, ...args);
+    const kind = ts.ScriptElementKind.classElement;
+    const containerKind = ts.ScriptElementKind.unknown;
+    const fileName = args[0];
+    if (classMapKeyInfo) {
+      return {
+        textSpan: classMapKeyInfo.textSpan,
+        definitions: classMapKeyInfo.styles.flatMap(({ classIdNodeMap, templateNode }) => {
+          return classIdNodeMap.get(classMapKeyInfo.text)?.map((node) => ({
+            kind,
+            containerKind,
+            fileName,
+            containerName: "",
+            name: "",
+            textSpan: { start: node.offset + templateNode.pos + 1, length: node.getText().length }
+          }));
+        }).filter(isNotNullish)
+      };
+    }
+    const tagDefinedInfo = findDefinedTagInfo(ctx, ...args);
+    if (!tagDefinedInfo) return ls.getDefinitionAndBoundSpan(...args);
+    const textSpan = tagDefinedInfo.textSpan;
+    return {
+      textSpan,
+      definitions: [{ kind, containerKind, fileName, containerName: "", name: "", textSpan }]
+    };
+  };
   languageService.getRenameInfo = (fileName, position, ...args) => {
-    const result = ls.getRenameInfo(fileName, position, ...args);
     const tagInfo = findCurrentTagInfo(ctx, fileName, position);
     if (tagInfo) {
       return {
@@ -1330,7 +1933,7 @@ function decorateLanguageService(ctx, languageService) {
         triggerSpan: tagDefinedInfo.textSpan
       };
     }
-    return result;
+    return ls.getRenameInfo(fileName, position, ...args);
   };
   languageService.findRenameLocations = (fileName, position, ...args) => {
     const tagPairInfo = findCurrentTagInfo(ctx, fileName, position);
@@ -1346,31 +1949,42 @@ function decorateLanguageService(ctx, languageService) {
         result.push({ fileName: f.fileName, textSpan: info.open });
         if (info.end) result.push({ fileName: f.fileName, textSpan: info.end });
       });
+      forEachAllCssTemplateNode(ctx, tagDefinedInfo.tag, (f, textSpan) => {
+        result.push({ fileName: f.fileName, textSpan });
+      });
       return result;
     }
     const oResult = [...ls.findRenameLocations(fileName, position, ...args) || []];
     const file = ctx.getProgram().getSourceFile(fileName);
-    const node = getAstNodeAtPosition(ctx.ts, file, position);
+    const node = getAstNodeAtPosition(ts, file, position);
     const tag = node && ts.isPropertyDeclaration(node.parent) && ctx.getTagFromNode(node.parent.parent);
-    if (!tag) return oResult;
+    if (!tag || !ts.isIdentifier(node)) return oResult;
     const propText = node.getText();
     const kebabCaseName = camelToKebabCase(propText);
-    if (isPropType(ctx.ts, node.parent, ["emitter", "globalemitter"])) {
-      forEachAllHtmlTemplateNode(ctx, tag, (f, tagInfo) => {
-        const info = tagInfo.node.attributesMap.get(`@${kebabCaseName}`);
-        if (!info) return;
-        const textSpan = { start: info.start + tagInfo.offset, length: info.end - info.start };
-        oResult.push({ fileName: f.fileName, prefixText: "@", textSpan });
-      });
-    }
-    if (isPropType(ctx.ts, node.parent, ["attribute", "numattribute", "boolattribute", "property"])) {
-      forEachAllHtmlTemplateNode(ctx, tag, (f, tagInfo) => {
-        const propNames = ["", ".", "?"].map((c) => `${c}${kebabCaseName}`);
-        propNames.map((propName) => {
-          const info = tagInfo.node.attributesMap.get(propName);
+    if (isPropType(ts, node.parent, [Decorators.Emitter, Decorators.GlobalEmitter])) {
+      getAllTagFromProp(ctx, node).forEach((tag2) => {
+        forEachAllHtmlTemplateNode(ctx, tag2, (f, tagInfo) => {
+          const info = tagInfo.node.attributesMap.get(`@${kebabCaseName}`);
           if (!info) return;
           const textSpan = { start: info.start + tagInfo.offset, length: info.end - info.start };
-          oResult.push({ fileName: f.fileName, prefixText: ".", textSpan });
+          oResult.push({ textSpan, fileName: f.fileName, prefixText: "@" });
+        });
+      });
+    }
+    if (isPropType(ts, node.parent, [Decorators.Attr, Decorators.NumAttr, Decorators.BoolAttr, Decorators.Prop])) {
+      getAllTagFromProp(ctx, node).forEach((tag2) => {
+        forEachAllHtmlTemplateNode(ctx, tag2, (f, tagInfo) => {
+          const propNames = [
+            ["", kebabCaseName],
+            ["?", kebabCaseName],
+            [".", propText]
+          ];
+          propNames.map(([decorate2, propName]) => {
+            const info = tagInfo.node.attributesMap.get(decorate2 + propName);
+            if (!info) return;
+            const textSpan = { start: info.start + tagInfo.offset, length: info.end - info.start };
+            oResult.push({ textSpan, fileName: f.fileName, prefixText: decorate2 });
+          });
         });
       });
     }
@@ -1378,15 +1992,53 @@ function decorateLanguageService(ctx, languageService) {
   };
   return languageService;
 }
+function getAllTagFromProp(ctx, prop) {
+  let originTagDecl = prop;
+  while (!ctx.ts.isClassDeclaration(originTagDecl)) {
+    originTagDecl = originTagDecl.parent;
+  }
+  const typeChecker = ctx.getProgram().getTypeChecker();
+  const originTagType = typeChecker.getTypeAtLocation(originTagDecl);
+  const result = [];
+  [...ctx.elements].forEach(([tag, decl]) => {
+    const tagType = typeChecker.getTypeAtLocation(decl);
+    if (!tagType.isClassOrInterface()) return;
+    if (typeChecker.isTypeAssignableTo(tagType, originTagType)) {
+      result.push(tag);
+    }
+  });
+  return result;
+}
+function getReferencedSymbol(ctx, file) {
+  return {
+    references: [],
+    definition: {
+      containerKind: ctx.ts.ScriptElementKind.unknown,
+      containerName: "",
+      displayParts: [],
+      fileName: file.fileName,
+      textSpan: { start: 0, length: 0 },
+      name: "test",
+      kind: ctx.ts.ScriptElementKind.unknown
+    }
+  };
+}
 function forEachAllHtmlTemplateNode(ctx, tag, fn) {
   for (const file of ctx.getProgram().getSourceFiles()) {
     if (file.fileName.endsWith(".d.ts")) continue;
     for (const templateContext of ctx.htmlSourceHelper.getAllTemplates(file.fileName)) {
-      const { vHtml } = ctx.getHtmlDoc(templateContext.text);
-      forEachNode(vHtml.roots, (node) => {
-        if (node.tag !== tag) return;
-        fn(file, getTagInfo(node, templateContext.node.getStart() + 1));
-      });
+      const { tagNodeMap } = ctx.getHtmlDoc(templateContext.text);
+      tagNodeMap.get(tag)?.forEach((node) => fn(file, getTagInfo(node, templateContext.node.getStart() + 1)));
+    }
+  }
+}
+function forEachAllCssTemplateNode(ctx, tag, fn) {
+  for (const file of ctx.getProgram().getSourceFiles()) {
+    if (file.fileName.endsWith(".d.ts")) continue;
+    for (const templateContext of ctx.cssSourceHelper.getAllTemplates(file.fileName)) {
+      const { tagNodeMap } = ctx.getCssDoc(templateContext.text);
+      const offset = templateContext.node.getStart() + 1;
+      tagNodeMap.get(tag)?.forEach((node) => fn(file, { start: offset + node.offset, length: node.end - node.offset }));
     }
   }
 }
@@ -1398,20 +2050,97 @@ function findCurrentTagInfo(ctx, fileName, position) {
   const relativePosition = ctx.htmlSourceHelper.getRelativePosition(templateContext, position);
   const offset = templateContext.toOffset(relativePosition);
   const node = vHtml.findNodeAt(offset);
-  const { text } = getHTMLTextAtPosition(templateContext.text, offset);
-  const onTag = offset < node.startTagEnd && text === node.tag;
-  if (!onTag || !node.tag) return;
-  return getTagInfo(node, htmlOffset);
+  if (node.tag && offset < node.start + 1 + node.tag.length) return getTagInfo(node, htmlOffset);
 }
 function findDefinedTagInfo(ctx, fileName, position) {
   const file = ctx.getProgram().getSourceFile(fileName);
   const node = getAstNodeAtPosition(ctx.ts, file, position);
-  if (!node || !ctx.ts.isStringLiteral(node) || !ctx.ts.isCallExpression(node.parent) || node.parent.expression.getText() !== "customElement") {
+  if (!node || !ctx.ts.isStringLiteral(node) || !ctx.ts.isCallExpression(node.parent) || node.parent.expression.getText() !== Decorators.CustomElement) {
     return;
   }
   const tag = node.text;
   return { tag, textSpan: { start: node.getStart() + 1, length: tag.length } };
 }
+function getClassMapKeyInfo(ctx, fileName, position) {
+  const file = ctx.getProgram().getSourceFile(fileName);
+  const node = getAstNodeAtPosition(ctx.ts, file, position);
+  const decl = node && getCurrentElementDecl(ctx.ts, node);
+  if (decl && isClassMapKey(ctx.ts, node)) {
+    const isString = ctx.ts.isStringLiteral(node);
+    return {
+      text: node.text,
+      styles: ctx.getAllCss(decl),
+      textSpan: { start: node.getStart() + (isString ? 1 : 0), length: node.text.length }
+    };
+  }
+}
+function isKey(typescript, node) {
+  if (!node.parent?.parent) return false;
+  const assignment = node.parent;
+  const obj = assignment.parent;
+  const key = typescript.isStringLiteral(node) || typescript.isIdentifier(node);
+  return key && (typescript.isPropertyAssignment(assignment) && assignment.initializer !== node || typescript.isShorthandPropertyAssignment(assignment)) && typescript.isObjectLiteralExpression(obj);
+}
+function inReturn(typescript, node) {
+  if (!node?.parent?.parent) return false;
+  const isReturnObject = (n) => typescript.isObjectLiteralExpression(n) && (typescript.isParenthesizedExpression(n.parent) && typescript.isArrowFunction(n.parent.parent) && n.parent.parent.body === n.parent || typescript.isReturnStatement(n.parent));
+  return (
+    // 空对象
+    isReturnObject(node) || // 在返回对象的 key 上
+    isReturnObject(node.parent.parent) && isKey(typescript, node)
+  );
+}
+function getThemeKeys(ctx, fileName, position) {
+  const program = ctx.getProgram();
+  const typeChecker = program.getTypeChecker();
+  const file = program.getSourceFile(fileName);
+  const node = getAstNodeAtPosition(ctx.ts, file, position);
+  if (!inReturn(ctx.ts, node)) return;
+  let desc = node;
+  while (desc) {
+    if ((ctx.ts.isArrowFunction(desc) || ctx.ts.isFunctionExpression(desc)) && !ctx.ts.isPropertyDeclaration(desc.parent) || ctx.ts.isFunctionDeclaration(desc) || ctx.ts.isClassDeclaration(desc) || ctx.ts.isClassExpression(desc)) {
+      return;
+    }
+    if (ctx.ts.isPropertyDeclaration(desc) || ctx.ts.isMethodDeclaration(desc)) {
+      for (const modifier of desc.modifiers || []) {
+        if (!ctx.ts.isDecorator(modifier) || !ctx.ts.isCallExpression(modifier.expression)) continue;
+        const themeDescSymbol = typeChecker.getSymbolAtLocation(modifier.expression.expression);
+        const themeDesc = themeDescSymbol?.valueDeclaration;
+        const param = themeDesc && ctx.ts.isVariableDeclaration(themeDesc) && themeDesc.initializer && ctx.ts.isCallExpression(themeDesc.initializer) && themeDesc.initializer.expression.getText() === Utils.CreateDecoratorTheme && themeDesc.initializer.arguments.at(0);
+        if (!param) continue;
+        const type = typeChecker.getTypeAtLocation(param);
+        return type.getApparentProperties().map((e) => e.name);
+      }
+      return;
+    }
+    desc = desc.parent;
+  }
+}
+function isClassMap(typescript, node) {
+  if (!node.parent?.parent) return false;
+  const callExp = node.parent;
+  const isEmptyClassMap = typescript.isObjectLiteralExpression(node) && typescript.isCallExpression(callExp) && typescript.isIdentifier(callExp.expression) && callExp.expression.text === Utils.ClassMap;
+  return isEmptyClassMap || isClassMapKey(typescript, node);
+}
+function getCurrentClassMap(typescript, node) {
+  while (!typescript.isObjectLiteralExpression(node)) {
+    node = node.parent;
+    if (!node) return;
+  }
+  return node;
+}
+function getClassKeys(ctx, fileName, position) {
+  const file = ctx.getProgram().getSourceFile(fileName);
+  const node = getAstNodeAtPosition(ctx.ts, file, position);
+  const decl = node && getCurrentElementDecl(ctx.ts, node);
+  if (decl && isClassMap(ctx.ts, node)) {
+    const obj = getCurrentClassMap(ctx.ts, node);
+    const keys2 = new Set(obj.properties.map((e) => e.name?.getText()));
+    return ctx.getAllCss(decl).flatMap(({ classIdNodeMap }) => {
+      return [...classIdNodeMap.entries()].filter(([k]) => !keys2.has(k) && !k.startsWith("#")).map(([k]) => k);
+    });
+  }
+}
 function isPropType(typescript, node, types) {
   if (!typescript.isPropertyDeclaration(node)) return;
   for (const modifier of node.modifiers || []) {
@@ -1422,21 +2151,16 @@ function isPropType(typescript, node, types) {
     }
   }
 }
-function decorateTypeChecker(ctx, typeChecker) {
+function decorateTypeChecker(typeChecker) {
+  const neverType = typeChecker.getNeverType();
   const internal = typeChecker;
   const checker = bindMemberFunction(internal, ["isValidPropertyAccessForCompletions"]);
   internal.isValidPropertyAccessForCompletions = (...args) => {
     const result = checker.isValidPropertyAccessForCompletions(...args);
-    if (!result) return false;
     try {
-      const { declarations } = args.at(2);
-      if (!declarations) return true;
-      const isNever = declarations.every(
-        (node) => ctx.ts.isPropertySignature(node) && node.type?.getText() === "never"
-      );
-      return !isNever;
+      return result && typeChecker.getTypeOfSymbol(args.at(2)) !== neverType;
     } catch {
-      return true;
+      return result;
     }
   };
   return typeChecker;