ts-gem-plugin 0.0.5 → 0.0.7

package/dist/index.js

@@ -25,19 +25,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 // src/index.ts
 var import_typescript_template_language_service_decorator = require("@mantou/typescript-template-language-service-decorator");
 
-// src/decorate-html.ts
-var import_vscode_html_languageservice = require("vscode-html-languageservice");
-var import_emmet_helper = require("@vscode/emmet-helper");
-var import_vscode_css_languageservice = require("vscode-css-languageservice");
-
-// ../duoyun-ui/lib/types.js
-function isNullish(v) {
-  return v === null || v === void 0;
-}
-function isNotNullish(v) {
-  return !isNullish(v);
-}
-
 // ../gem/lib/utils.js
 var { assign, fromEntries, entries, keys } = Object;
 var LinkedList = class extends EventTarget {
@@ -86,8 +73,10 @@ var LinkedList = class extends EventTarget {
   find(value) {
     return this.#map.get(value);
   }
-  // 添加到尾部，已存在时会删除老的项目
-  // 如果是添加第一个，start 事件会在添加前触发，避免处理事件重复的逻辑
+  /**
+   * 添加到尾部，已存在时会删除老的项目
+   * 如果是添加第一个，start 事件会在添加前触发，避免处理事件重复的逻辑
+   */
   add(value) {
     if (!this.#lastItem) {
       this.dispatchEvent(new CustomEvent("start"));
@@ -104,7 +93,7 @@ var LinkedList = class extends EventTarget {
     }
     this.#map.set(value, item);
   }
-  // 删除这个元素后没有其他元素时立即出发 end 事件
+  /** 删除这个元素后没有其他元素时立即出发 end 事件 */
   delete(value) {
     const deleteItem = this.#delete(value);
     if (!this.#firstItem) {
@@ -112,8 +101,7 @@ var LinkedList = class extends EventTarget {
     }
     return deleteItem;
   }
-  // 获取头部元素
-  // 会从链表删除
+  /** 获取头部元素，会从链表删除 */
   get() {
     const firstItem = this.#firstItem;
     if (!firstItem)
@@ -122,91 +110,225 @@ var LinkedList = class extends EventTarget {
     return firstItem.value;
   }
 };
+function camelToKebabCase(str) {
+  return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
 function kebabToCamelCase(str) {
   return str.replace(/-(.)/g, (_substr, $1) => $1.toUpperCase());
 }
 
+// src/configuration.ts
+var defaultConfiguration = {
+  emmet: {},
+  elementDefineRules: {
+    "Duoyun*Element": "dy-*",
+    "*Element": "*"
+  }
+};
+var Rules = class {
+  #map = /* @__PURE__ */ new Map();
+  constructor(data) {
+    Object.entries(data).forEach(([classNamePattern, tagPattern]) => {
+      this.#map.set(new RegExp(classNamePattern.replace("*", "(.*)")), tagPattern.replace("*", "$1"));
+    });
+  }
+  findTag(className) {
+    for (const [reg, replaceStr] of this.#map) {
+      if (reg.exec(className)) {
+        return camelToKebabCase(className.replace(reg, replaceStr));
+      }
+    }
+  }
+};
+var Configuration = class {
+  #emmet = defaultConfiguration.emmet;
+  #elementDefineRules = new Rules(defaultConfiguration.elementDefineRules);
+  update(config) {
+    this.#emmet = config.emmet || defaultConfiguration.emmet;
+    this.#elementDefineRules = new Rules({
+      ...defaultConfiguration.elementDefineRules,
+      ...config.elementDefineRules
+    });
+  }
+  get emmet() {
+    return this.#emmet;
+  }
+  get elementDefineRules() {
+    return this.#elementDefineRules;
+  }
+};
+
+// src/constants.ts
+var NAME = "gem-plugin";
+
+// 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_html_languageservice2 = require("@mantou/vscode-html-languageservice");
+
+// ../duoyun-ui/lib/map.js
+var StringWeakMap = class {
+  #map = /* @__PURE__ */ new Map();
+  #weakMap = /* @__PURE__ */ new WeakMap();
+  #registry = new FinalizationRegistry((key) => this.#map.delete(key));
+  set(key, val) {
+    this.#map.set(key, new WeakRef(val));
+    this.#weakMap.set(val, key);
+    this.#registry.register(val, key);
+  }
+  get(key) {
+    return this.#map.get(key)?.deref();
+  }
+  findKey(val) {
+    return this.#weakMap.get(val);
+  }
+  *[Symbol.iterator]() {
+    const entries2 = this.#map.entries();
+    for (const [tag, ref] of entries2) {
+      yield [tag, ref.deref()];
+    }
+  }
+};
+
+// ../duoyun-ui/lib/cache.js
+var Cache = class {
+  #max;
+  #maxAge;
+  #renewal;
+  #map = /* @__PURE__ */ new Map();
+  #reverseMap = /* @__PURE__ */ new Map();
+  #addedLinked = new LinkedList();
+  constructor({ max = Infinity, maxAge = Infinity, renewal = false } = {}) {
+    this.#max = max;
+    this.#maxAge = maxAge;
+    this.#renewal = renewal;
+  }
+  setOptions(options) {
+    this.#max = options.max ?? this.#max;
+    this.#maxAge = options.maxAge ?? this.#maxAge;
+    this.#renewal = options.renewal ?? this.#renewal;
+  }
+  #trim() {
+    for (let i = this.#addedLinked.size - this.#max; i > 0; i--) {
+      const value = this.#addedLinked.get();
+      const key = this.#reverseMap.get(value);
+      this.#reverseMap.delete(value);
+      this.#map.delete(key);
+    }
+  }
+  set(key, value) {
+    this.#addedLinked.add(value);
+    this.#reverseMap.set(value, key);
+    this.#map.set(key, { value, timestamp: Date.now() });
+    this.#trim();
+    return value;
+  }
+  get(key, init) {
+    const cache = this.#map.get(key);
+    if (!cache) {
+      return init && this.set(key, init(key));
+    }
+    const { timestamp, value } = cache;
+    if (Date.now() - timestamp > this.#maxAge) {
+      this.#addedLinked.delete(value);
+      this.#reverseMap.delete(value);
+      this.#map.delete(key);
+      return init && this.set(key, init(key));
+    }
+    if (this.#renewal) {
+      cache.timestamp = Date.now();
+    }
+    this.#addedLinked.add(value);
+    return value;
+  }
+};
+
+// src/cache.ts
+var LRUCache = class {
+  #bucket;
+  constructor(args) {
+    this.#bucket = new Cache({ max: 25, renewal: true, ...args });
+  }
+  #genKey(context, position) {
+    return [context.fileName, position?.line, position?.character, context.text].join(";");
+  }
+  get(context, position, init) {
+    return this.#bucket.get(this.#genKey(context, position), init);
+  }
+};
+
+// src/data-provider.ts
+var import_vscode_html_languageservice = require("@mantou/vscode-html-languageservice");
+
 // src/utils.ts
-var vscode = __toESM(require("vscode-languageserver-types"));
-var import_vscode_languageserver_textdocument = require("vscode-languageserver-textdocument");
-function isCustomElement(tag) {
+function isCustomElementTag(tag) {
   return tag.includes("-");
 }
 function isDepElement(node) {
   return node.getSourceFile().fileName.includes("/node_modules/");
 }
-var openTagReg = /(?<prefix><)(?<tag>\w+-\w+)\s+/g;
-function forEachTag(typescript, containerNode, fn) {
-  const list = [containerNode];
+function bindMemberFunction(o, keys2 = Object.keys(o)) {
+  return Object.fromEntries(keys2.map((key) => [key, o[key].bind?.(o)]));
+}
+function forEachNode(roots, fn) {
+  const list = [...roots];
   while (true) {
     const currentNode = list.pop();
     if (!currentNode) return;
-    typescript.forEachChild(currentNode, (node) => {
-      list.push(node);
-      if (typescript.isTemplateHead(node) || typescript.isTemplateMiddle(node) || typescript.isTemplateTail(node) || typescript.isNoSubstitutionTemplateLiteral(node)) {
-        [...node.text.matchAll(openTagReg)].forEach((e) => {
-          const { prefix = "", tag } = e.groups;
-          const start = node.getStart() + 1 + prefix.length + e.index;
-          fn({ tag, length: tag.length, start });
-        });
-      }
-    });
+    fn(currentNode);
+    list.push(...currentNode.children);
+  }
+}
+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);
+    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(/[^ \n<>]+$/)?.at(0) || "";
-  const after = text.slice(offset).match(/^[^ \n<>]+/)?.at(0) || "";
+  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
   };
 }
-var attrMap = {
-  ".": "property",
-  "?": "boolean",
-  "@": "event"
-};
 function getAttrName(text) {
   const attr = text.split("=").at(0);
-  const char = attr.at(0);
-  if (char in attrMap) {
-    return { attr: attr.slice(1), type: attrMap[char] };
-  }
-  return { attr };
-}
-function getCustomElementTag(typescript, node, isDep = isDepElement(node)) {
-  if (!typescript.isClassDeclaration(node)) return;
-  for (const modifier of node.modifiers || []) {
-    if (typescript.isDecorator(modifier) && typescript.isCallExpression(modifier.expression) && modifier.expression.expression.getText() === "customElement") {
-      const arg = modifier.expression.arguments.at(0);
-      if (arg && typescript.isStringLiteral(arg)) {
-        return arg.text;
-      }
-    }
-  }
-  if (isDep && node.name && typescript.isIdentifier(node.name)) {
-    const name = node.name.text;
-    if (name.endsWith("Element")) {
-      return name;
-    }
-  }
+  const isNotLetter = hasDecoratorAttr(attr);
+  const offset = isNotLetter ? 1 : 0;
+  return {
+    attr: attr.slice(offset),
+    offset,
+    decorate: isNotLetter ? attr.at(0) : ""
+  };
 }
-function getDocComment(typescript, declaration) {
-  const fullText = declaration.getSourceFile().getFullText();
-  const commentRanges = typescript.getLeadingCommentRanges(fullText, declaration.getFullStart());
-  const commentStrings = commentRanges?.filter(({ kind }) => kind === typescript.SyntaxKind.MultiLineCommentTrivia).map(({ pos, end }) => fullText.slice(pos, end));
-  return commentStrings?.join("\n");
+function hasDecoratorAttr(str) {
+  return str.charCodeAt(0) < 65;
 }
-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);
-    if (nested === void 0) break;
-    node = nested;
-  }
-  return node;
+function getTagInfo(node, offset) {
+  const tag = node.tag;
+  const openStart = node.start + 1 + offset;
+  return {
+    node,
+    tag,
+    offset,
+    open: { start: openStart, length: tag.length },
+    end: node.endTagStart && {
+      start: node.endTagStart + 2 + offset,
+      length: node.end - node.endTagStart - 3
+    }
+  };
 }
 var marker = Symbol();
 function decorate(origin, cb) {
@@ -215,8 +337,244 @@ function decorate(origin, cb) {
   result[marker] = true;
   return result;
 }
+
+// src/data-provider.ts
+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;
+  }
+  getId() {
+    return NAME;
+  }
+  isApplicable() {
+    return true;
+  }
+  provideTags() {
+    return [...this.#elements].map(([tag, node]) => ({
+      name: tag,
+      attributes: [],
+      description: getDocComment(this.#ts, node)
+    }));
+  }
+  provideAttributes(tag) {
+    const ts = this.#ts;
+    const typeChecker = this.#getProgram().getTypeChecker();
+    const node = this.#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 isDep = isDepElement(node);
+    const props = typeChecker.getTypeAtLocation(node).getApparentProperties();
+    props.forEach((e) => {
+      const declaration = e.getDeclarations()?.at(0);
+      const prop = declaration && ts.isPropertyDeclaration(declaration);
+      if (!prop) return;
+      const hasPropDecorator = declaration.modifiers?.some((m) => ts.isDecorator(m) && ts.isIdentifier(m.expression));
+      if (!hasPropDecorator && !isDep) return;
+      const type = declaration.type && typeChecker.getTypeFromTypeNode(declaration.type);
+      const typeText = declaration.type?.getText();
+      const description = getDocComment(ts, declaration);
+      switch (type) {
+        case typeChecker.getStringType():
+        case typeChecker.getNumberType():
+          result.push({ name: e.name, description });
+          break;
+        case typeChecker.getBooleanType():
+          result.push({ name: e.name, description, valueSet: "v" });
+          result.push({ name: `?${e.name}`, description });
+          break;
+      }
+      if (type && getUnionValues(type)) {
+        result.push({ name: e.name, description });
+      }
+      if (typeText?.startsWith("Emitter")) {
+        result.push({ name: `@${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 });
+      }
+    });
+    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 })) || [];
+  }
+};
+function getUnionValues(type) {
+  if (!type.isUnion()) return;
+  const result = [];
+  type.types.forEach((e) => {
+    if (!e.isLiteral()) return;
+    result.push(String(e.value));
+  });
+  return result;
+}
+var COMMENT_LINE_CONTENT = /^(\/?[ *\t]*)?(?<str>.*?)(\**\/)?$/gm;
+function getDocComment(typescript, declaration) {
+  const fullText = declaration.getSourceFile().getFullText();
+  const commentRanges = typescript.getLeadingCommentRanges(fullText, declaration.getFullStart());
+  const commentStrings = commentRanges?.filter(({ kind }) => kind === typescript.SyntaxKind.MultiLineCommentTrivia).map(({ pos, end }) => {
+    const fullComment = [...fullText.slice(pos, end).matchAll(COMMENT_LINE_CONTENT)];
+    return fullComment.map((m) => m.groups.str).join("\n");
+  });
+  return commentStrings?.join("\n\n");
+}
+
+// src/context.ts
+var Context = class {
+  elements;
+  builtInElements;
+  ts;
+  config;
+  project;
+  logger;
+  dataProvider;
+  cssLanguageService;
+  htmlLanguageService;
+  htmlSourceHelper;
+  htmlTemplateStringSettings;
+  cssTemplateStringSettings;
+  getProgram;
+  constructor(typescript, config, info, logger) {
+    this.ts = typescript;
+    this.config = config;
+    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)]
+    });
+    this.htmlTemplateStringSettings = {
+      tags: ["html", "raw", "h"],
+      enableForStringWithSubstitutions: true,
+      getSubstitution
+    };
+    this.cssTemplateStringSettings = {
+      tags: ["styled", "css"],
+      enableForStringWithSubstitutions: true,
+      getSubstitution,
+      isValidTemplate: (node) => isValidCSSTemplate(typescript, node, "css")
+    };
+    this.htmlSourceHelper = new import_standard_template_source_helper.default(
+      typescript,
+      this.htmlTemplateStringSettings,
+      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 };
+    });
+  }
+  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) {
+        e.prev = arr[index - 1];
+        e.next = arr[index + 1];
+        e.children.forEach(transform);
+      });
+      return { vDoc, vHtml };
+    });
+  }
+  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;
+        }
+      }
+    }
+    if (supportClassName && node.name && this.ts.isIdentifier(node.name)) {
+      return this.config.elementDefineRules.findTag(node.name.text);
+    }
+  }
+  updateElement(file) {
+    const isDep = isDepElement(file);
+    this.ts.forEachChild(file, (node) => {
+      const tag = this.getTagFromNode(node, isDep);
+      if (tag && this.ts.isClassDeclaration(node)) {
+        this.elements.set(tag, node);
+      }
+    });
+  }
+  #initElementsCache = /* @__PURE__ */ new WeakSet();
+  /**
+   * 当 project 准备好了执行
+   */
+  initElements() {
+    const program = this.getProgram();
+    if (this.#initElementsCache.has(program)) return;
+    const files = program.getSourceFiles();
+    files.forEach((file) => this.updateElement(file));
+    const typeChecker = program.getTypeChecker();
+    const symbols = typeChecker.getSymbolsInScope(files.at(0), this.ts.SymbolFlags.Interface);
+    symbols.forEach((symbol) => {
+      const name = symbol.escapedName.toString();
+      const match = name.match(/^(SVG|HTML)(\w*)Element$/);
+      const declaration = symbol.declarations?.find((e) => this.ts.isInterfaceDeclaration(e));
+      if (!match || !declaration) return;
+      if (name in partialBuiltInElementMap) {
+        partialBuiltInElementMap[name].forEach((e) => this.builtInElements.set(e, declaration));
+      } else {
+        this.builtInElements.set(match[2].toLowerCase(), declaration);
+      }
+    });
+  }
+};
+var partialBuiltInElementMap = {
+  SVGAElement: [],
+  HTMLAnchorElement: ["a"],
+  SVGImageElement: [],
+  HTMLImageElement: ["img"],
+  SVGStyleElement: [],
+  HTMLStyleElement: ["style"],
+  HTMLDListElement: ["dl"],
+  HTMLOListElement: ["ol"],
+  HTMLUListElement: ["ul"],
+  HTMLHeadingElement: ["h1", "h2", "h3", "h4", "h5", "h6"],
+  HTMLModElement: ["del", "ins"],
+  HTMLQuoteElement: ["blockquote", "q", "cite"],
+  HTMLTableCaptionElement: ["caption"],
+  HTMLTableCellElement: ["th", "td"],
+  HTMLTableColElement: ["col"],
+  HTMLTableRowElement: ["tr"],
+  HTMLTableSectionElement: ["thead", "tfoot", "tbody"]
+};
 function createVirtualDocument(languageId, content) {
-  return import_vscode_languageserver_textdocument.TextDocument.create(`embedded://document.${languageId}`, languageId, 1, content);
+  return import_vscode_html_languageservice2.TextDocument.create(`embedded://document.${languageId}`, languageId, 1, content);
 }
 function getSubstitution(templateString, start, end) {
   return templateString.slice(start, end).replaceAll(/[^\n]/g, "_");
@@ -224,7 +582,7 @@ function getSubstitution(templateString, start, end) {
 function isValidCSSTemplate(typescript, node, callName) {
   switch (node.kind) {
     case typescript.SyntaxKind.NoSubstitutionTemplateLiteral:
-    case typescript.SyntaxKind.TemplateExpression:
+    case typescript.SyntaxKind.TemplateExpression: {
       const parent = node.parent;
       if (typescript.isCallExpression(parent) && parent.expression.getText() === callName) {
         return true;
@@ -236,10 +594,18 @@ function isValidCSSTemplate(typescript, node, callName) {
         }
       }
       return false;
+    }
     default:
       return false;
   }
 }
+
+// src/decorate-css.ts
+var import_vscode_css_languageservice2 = require("@mantou/vscode-css-languageservice");
+var import_vscode_emmet_helper = require("@mantou/vscode-emmet-helper");
+
+// src/translates.ts
+var vscode = __toESM(require("vscode-languageserver-types"));
 function translateCompletionItemsToCompletionInfo(context, items) {
   return {
     defaultCommitCharacters: [],
@@ -297,8 +663,6 @@ function translationCompletionItemKind(context, kind) {
       return typescript.ScriptElementKind.alias;
     case vscode.CompletionItemKind.File:
       return typescript.ScriptElementKind.moduleElement;
-    case vscode.CompletionItemKind.Snippet:
-    case vscode.CompletionItemKind.Text:
     default:
       return typescript.ScriptElementKind.unknown;
   }
@@ -362,134 +726,168 @@ function genDefaultCompletionEntryDetails(context, name) {
 }
 function toDisplayParts(text, isDoc = false) {
   if (!text) return [];
-  const escape = (unsafe) => unsafe.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;").replaceAll(" ", "&nbsp;").replaceAll("\n", "  \n").replaceAll("	", "&emsp;");
+  const escapeText = (unsafe) => unsafe.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;").replaceAll(" ", "&nbsp;").replaceAll("\n", "  \n").replaceAll("	", "&emsp;");
   return [
     {
       kind: "unknown",
-      text: typeof text !== "string" ? text.value : isDoc ? escape(text) : text
+      text: typeof text !== "string" ? text.value : isDoc ? escapeText(text) : text
     }
   ];
 }
+function genElementDefinitionInfo(context, { start, length }, definitionNode) {
+  const htmlOffset = context.node.pos + 1;
+  return {
+    textSpan: { start, length },
+    definitions: [
+      {
+        containerName: "Custom Element",
+        containerKind: context.typescript.ScriptElementKind.unknown,
+        name: definitionNode.name.text,
+        kind: context.typescript.ScriptElementKind.classElement,
+        fileName: definitionNode.getSourceFile().fileName,
+        textSpan: {
+          start: definitionNode.name.getStart() - htmlOffset,
+          length: definitionNode.name.text.length
+        }
+      }
+    ]
+  };
+}
+function genAttrDefinitionInfo(context, { start, length }, propDeclaration) {
+  const htmlOffset = context.node.pos + 1;
+  return {
+    textSpan: { start, length },
+    definitions: [
+      {
+        containerName: "Attribute",
+        containerKind: context.typescript.ScriptElementKind.unknown,
+        name: propDeclaration.getText(),
+        kind: context.typescript.ScriptElementKind.memberVariableElement,
+        fileName: propDeclaration.getSourceFile().fileName,
+        textSpan: {
+          start: propDeclaration.getStart() - htmlOffset,
+          length: propDeclaration.getText().length
+        }
+      }
+    ]
+  };
+}
+function genCurrentCtxDefinitionInfo(context, { start, length }, definitionTextSpan) {
+  return {
+    textSpan: { start, length },
+    definitions: [
+      {
+        containerName: "Attribute",
+        containerKind: context.typescript.ScriptElementKind.unknown,
+        name: context.text.slice(start, start + length),
+        kind: context.typescript.ScriptElementKind.memberVariableElement,
+        fileName: context.fileName,
+        textSpan: definitionTextSpan
+      }
+    ]
+  };
+}
 
-// ../duoyun-ui/lib/cache.js
-var Cache = class {
-  #max;
-  #maxAge;
-  #renewal;
-  #map = /* @__PURE__ */ new Map();
-  #reverseMap = /* @__PURE__ */ new Map();
-  #linkedList = new LinkedList();
-  constructor({ max = Infinity, maxAge = Infinity, renewal = false } = {}) {
-    this.#max = max;
-    this.#maxAge = maxAge;
-    this.#renewal = renewal;
+// src/decorate-css.ts
+var CSSLanguageService = class {
+  #completionsCache = new LRUCache({ max: 1 });
+  #diagnosticsCache = new LRUCache();
+  #ctx;
+  constructor(ctx) {
+    this.#ctx = ctx;
   }
-  #trim() {
-    for (let i = this.#linkedList.size - this.#max; i > 0; i--) {
-      const value = this.#linkedList.get();
-      const key = this.#reverseMap.get(value);
-      this.#reverseMap.delete(value);
-      this.#map.delete(key);
-    }
+  #normalize(context, position) {
+    const parent = context.node.parent;
+    const tag = context.typescript.isTaggedTemplateExpression(parent) && parent.tag.getText();
+    const isStyle = context.typescript.isPropertyAssignment(parent) || tag === "styled";
+    if (!isStyle) return { offset: 0, text: context.text, pos: { ...position } };
+    const appendBefore = ".parent { ";
+    const appendAfter = " }";
+    const character = position.line === 0 ? position.character + appendBefore.length : position.character;
+    return {
+      offset: appendBefore.length,
+      text: `${appendBefore}${context.text}${appendAfter}`,
+      pos: { line: position.line, character }
+    };
   }
-  set(key, value) {
-    this.#linkedList.add(value);
-    this.#reverseMap.set(value, key);
-    this.#map.set(key, { value, timestamp: Date.now() });
-    this.#trim();
-    return value;
+  #getCompletionsAtPosition(context, position) {
+    return this.#completionsCache.get(context, position, () => {
+      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);
+      this.#ctx.cssLanguageService.setCompletionParticipants([{ onCssProperty }]);
+      (0, import_vscode_css_languageservice2.updateTags)([...this.#ctx.elements].map(([tag]) => tag));
+      const completions = this.#ctx.cssLanguageService.doComplete(vDoc, pos, vCss);
+      completions.items.push(...emmetResults?.items || []);
+      return completions;
+    });
   }
-  get(key, init) {
-    const cache = this.#map.get(key);
-    if (!cache) {
-      return init && this.set(key, init(key));
-    }
-    const { timestamp, value } = cache;
-    if (Date.now() - timestamp > this.#maxAge) {
-      this.#linkedList.delete(value);
-      this.#reverseMap.delete(value);
-      this.#map.delete(key);
-      return init && this.set(key, init(key));
-    }
-    if (this.#renewal) {
-      cache.timestamp = Date.now();
-    }
-    this.#linkedList.get();
-    this.#linkedList.add(value);
-    return value;
+  getCompletionsAtPosition(context, position) {
+    return translateCompletionItemsToCompletionInfo(context, this.#getCompletionsAtPosition(context, position));
   }
-};
-
-// src/cache.ts
-var LRUCache = class {
-  #bucket = new Cache({ max: 100, renewal: true });
-  #genKey(context, position) {
-    return [context.fileName, position?.line, position?.character, context.text].join(";");
+  getCompletionEntryDetails(context, position, name) {
+    const completions = this.#getCompletionsAtPosition(context, position);
+    const item = completions.items.find((e) => e.label === name);
+    if (!item) return genDefaultCompletionEntryDetails(context, name);
+    return translateCompletionItemsToCompletionEntryDetails(context, item);
   }
-  getCached(context, position) {
-    return this.#bucket.get(this.#genKey(context, position));
+  getQuickInfoAtPosition(context, position) {
+    const { text, pos } = this.#normalize(context, position);
+    const { vDoc, vCss } = this.#ctx.getCssDoc(text);
+    const hover = this.#ctx.cssLanguageService.doHover(vDoc, pos, vCss, {
+      documentation: true,
+      references: true
+    });
+    if (!hover) return;
+    return translateHover(context, hover, position, pos.character - position.character);
   }
-  updateCached(context, posOrContent, contentOrUndefined) {
-    let position;
-    let content;
-    if ("line" in posOrContent && "character" in posOrContent) {
-      position = posOrContent;
-      content = contentOrUndefined;
-    } else {
-      position = void 0;
-      content = posOrContent;
-    }
-    return this.#bucket.set(this.#genKey(context, position), content);
+  #getSyntacticDiagnostics(context) {
+    const { text, offset } = this.#normalize(context, { line: 0, character: 0 });
+    const { vDoc, vCss } = this.#ctx.getCssDoc(text);
+    const oDiagnostics = this.#ctx.cssLanguageService.doValidation(vDoc, vCss);
+    const file = this.#ctx.getProgram().getSourceFile(context.fileName);
+    return oDiagnostics.map(({ message, range }) => {
+      const start = context.toOffset(range.start);
+      return {
+        category: context.typescript.DiagnosticCategory.Warning,
+        code: 0,
+        file,
+        start: range.start.line === 0 ? start - offset : start,
+        length: context.toOffset(range.end) - start,
+        messageText: message,
+        source: NAME
+      };
+    });
+  }
+  getSyntacticDiagnostics(context) {
+    this.#ctx.initElements();
+    return this.#diagnosticsCache.get(context, void 0, () => this.#getSyntacticDiagnostics(context));
+  }
+  getDefinitionAndBoundSpan(context, position) {
+    const { text, offset } = this.#normalize(context, position);
+    const { vDoc, vCss } = this.#ctx.getCssDoc(text);
+    const empty = { textSpan: { start: 0, length: 0 } };
+    const node = vCss.findChildAtOffset(context.toOffset(position), true);
+    if (!node) return empty;
+    const ident = vDoc.getText().slice(node.offset, node.end);
+    const definitionNode = this.#ctx.elements.get(ident);
+    if (!definitionNode) return empty;
+    return genElementDefinitionInfo(context, { start: node.offset - offset, length: node.length }, definitionNode);
   }
 };
 
 // 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 HTMLLanguageService = class {
-  #completionsCache = new LRUCache();
+  #completionsCache = new LRUCache({ max: 1 });
   #diagnosticsCache = new LRUCache();
-  #cssLanguageService;
-  #htmlLanguageService;
   #ctx;
   constructor(ctx) {
     this.#ctx = ctx;
-    const ts = ctx.ts;
-    const htmlDataProvider = (0, import_vscode_html_languageservice.getDefaultHTMLDataProvider)();
-    const provideTags = htmlDataProvider.provideTags.bind(htmlDataProvider);
-    htmlDataProvider.provideTags = () => {
-      const result = [...ctx.elements].map(([tag, node]) => ({
-        name: tag,
-        attributes: [],
-        description: getDocComment(ts, node)
-      })).filter(isNotNullish);
-      return [...result, ...provideTags()];
-    };
-    const provideAttributes = htmlDataProvider.provideAttributes.bind(htmlDataProvider);
-    htmlDataProvider.provideAttributes = (tag) => {
-      const typeChecker = ctx.getProgram().getTypeChecker();
-      const node = ctx.elements.get(tag);
-      const isDep = node && isDepElement(node);
-      const props = node && typeChecker.getTypeAtLocation(node).getApparentProperties();
-      const result = (props || []).map((e) => {
-        const declaration = e.getDeclarations()?.at(0);
-        const prop = declaration && ts.isPropertyDeclaration(declaration);
-        if (!prop) return;
-        const hasPropDecorator = declaration.modifiers?.some(
-          (m) => ts.isDecorator(m) && ts.isIdentifier(m.expression)
-        );
-        if (!hasPropDecorator && !isDep) return;
-        const type = declaration.type && typeChecker.getTypeFromTypeNode(declaration.type);
-        return {
-          name: type === typeChecker.getBooleanType() ? e.name : `.${e.name}`,
-          description: getDocComment(ts, declaration),
-          valueSet: "v"
-        };
-      }).filter(isNotNullish);
-      return [...result, ...provideAttributes(isCustomElement(tag) ? "div" : tag)];
-    };
-    this.#htmlLanguageService = (0, import_vscode_html_languageservice.getLanguageService)({ customDataProviders: [htmlDataProvider] });
-    this.#cssLanguageService = (0, import_vscode_css_languageservice.getCSSLanguageService)({ useDefaultDataProvider: true });
   }
-  #getAllCssDoc(doc) {
+  #getAllStyleSheet(doc) {
     const styles = [];
     const nodes = [...doc.roots];
     while (true) {
@@ -500,17 +898,17 @@ var HTMLLanguageService = class {
     }
     return styles;
   }
-  #getCssDoc(context, position, doc) {
+  #getEmbeddedCss(context, position, doc) {
     const node = doc.findNodeAt(context.toOffset(position));
     if (node.tag !== "style") return;
-    const virtualDocument = createVirtualDocument("css", context.text.slice(node.startTagEnd, node.endTagStart));
-    const style = this.#cssLanguageService.parseStylesheet(virtualDocument);
+    const text = context.text.slice(node.startTagEnd, node.endTagStart);
+    const { vDoc, vCss } = this.#ctx.getCssDoc(text);
     const offset = context.toOffset(position) - node.startTagEnd;
-    const toPosition = (pos) => context.toPosition(virtualDocument.offsetAt(pos) + node.startTagEnd);
+    const toPosition = (pos) => context.toPosition(vDoc.offsetAt(pos) + node.startTagEnd);
     return {
-      style,
-      virtualDocument,
-      position: virtualDocument.positionAt(offset),
+      style: vCss,
+      vDoc,
+      position: vDoc.positionAt(offset),
       updateRange: (range) => ({
         start: toPosition(range.start),
         end: toPosition(range.end)
@@ -518,43 +916,34 @@ var HTMLLanguageService = class {
     };
   }
   #getCSSCompletionsAtPosition(context, position, doc) {
-    const css = this.#getCssDoc(context, position, doc);
+    const css = this.#getEmbeddedCss(context, position, doc);
     if (!css) return [];
     let emmetResults;
-    this.#cssLanguageService.setCompletionParticipants([
-      {
-        onCssProperty: () => {
-          emmetResults = (0, import_emmet_helper.doComplete)(css.virtualDocument, css.position, "css", this.#ctx.config.emmet);
-        }
-      }
-    ]);
-    const completions = this.#cssLanguageService.doComplete(css.virtualDocument, css.position, css.style);
+    const onCssProperty = () => emmetResults = (0, import_vscode_emmet_helper2.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);
     completions.items.push(...emmetResults?.items || []);
-    return completions.items.map((e) => ({
-      ...e,
-      textEdit: e.textEdit && "range" in e.textEdit ? {
-        newText: e.textEdit.newText,
-        range: css.updateRange(e.textEdit.range)
-      } : e.textEdit
-    }));
+    return completions.items.map((e) => {
+      const textEdit = e.textEdit && "range" in e.textEdit && e.textEdit;
+      const newTextEdit = textEdit && { newText: textEdit.newText, range: css.updateRange(textEdit.range) };
+      return { ...e, textEdit: newTextEdit || e.textEdit };
+    });
   }
   #getCompletionsAtPosition(context, position) {
-    const cached = this.#completionsCache.getCached(context, position);
-    if (cached) return cached;
-    const virtualDocument = createVirtualDocument("html", context.text);
-    const vHtml = this.#htmlLanguageService.parseHTMLDocument(virtualDocument);
-    let emmetResults;
-    this.#htmlLanguageService.setCompletionParticipants([
-      {
-        onHtmlContent: () => {
-          emmetResults = (0, import_emmet_helper.doComplete)(virtualDocument, position, "html", this.#ctx.config.emmet);
-        }
-      }
-    ]);
-    const completions = this.#htmlLanguageService.doComplete(virtualDocument, position, vHtml);
-    completions.items.push(...emmetResults?.items || []);
-    completions.items.push(...this.#getCSSCompletionsAtPosition(context, position, vHtml));
-    return this.#completionsCache.updateCached(context, position, completions);
+    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);
+      };
+      this.#ctx.htmlLanguageService.setCompletionParticipants([{ onHtmlContent }]);
+      const completions = this.#ctx.htmlLanguageService.doComplete(vDoc, position, vHtml);
+      completions.items.push(...emmetResults?.items || []);
+      completions.items.push(...this.#getCSSCompletionsAtPosition(context, position, vHtml));
+      return completions;
+    });
   }
   getCompletionsAtPosition(context, position) {
     return translateCompletionItemsToCompletionInfo(context, this.#getCompletionsAtPosition(context, position));
@@ -566,163 +955,326 @@ var HTMLLanguageService = class {
     return translateCompletionItemsToCompletionEntryDetails(context, item);
   }
   #getCSSQuickInfoAtPosition(context, position, doc) {
-    const css = this.#getCssDoc(context, position, doc);
-    const hover = css && this.#cssLanguageService.doHover(css.virtualDocument, css.position, css.style, {
+    const css = this.#getEmbeddedCss(context, position, doc);
+    if (!css) return;
+    const hover = this.#ctx.cssLanguageService.doHover(css.vDoc, css.position, css.style, {
       documentation: true,
       references: true
     });
-    return hover && {
-      ...hover,
-      range: hover.range && css.updateRange(hover.range)
-    };
+    if (!hover) return;
+    return { ...hover, range: hover.range && css.updateRange(hover.range) };
   }
   getQuickInfoAtPosition(context, position) {
-    const virtualDocument = createVirtualDocument("html", context.text);
-    const vHtml = this.#htmlLanguageService.parseHTMLDocument(virtualDocument);
-    const hover = this.#htmlLanguageService.doHover(virtualDocument, position, vHtml, {
+    const { vDoc, vHtml } = this.#ctx.getHtmlDoc(context.text);
+    const htmlHover = this.#ctx.htmlLanguageService.doHover(vDoc, position, vHtml, {
       documentation: true,
       references: true
-    }) || this.#getCSSQuickInfoAtPosition(context, position, vHtml);
+    });
+    const hover = htmlHover || this.#getCSSQuickInfoAtPosition(context, position, vHtml);
     if (!hover) return;
     return translateHover(context, hover, position);
   }
-  getSyntacticDiagnostics(context) {
-    const cached = this.#diagnosticsCache.getCached(context);
-    if (cached) return cached;
-    const virtualDocument = createVirtualDocument("html", context.text);
-    const vHtml = this.#htmlLanguageService.parseHTMLDocument(virtualDocument);
-    const styles = this.#getAllCssDoc(vHtml);
-    const file = this.#ctx.getProgram().getSourceFile(context.fileName);
-    return this.#diagnosticsCache.updateCached(
-      context,
-      styles.map((node) => {
-        const textDocument = createVirtualDocument("css", context.text.slice(node.startTagEnd, node.endTagStart));
-        const vCss = this.#cssLanguageService.parseStylesheet(textDocument);
-        const oDiagnostics = this.#cssLanguageService.doValidation(textDocument, vCss);
-        return oDiagnostics.map(({ message, range }) => {
-          const start = node.startTagEnd + textDocument.offsetAt(range.start);
-          const end = node.startTagEnd + textDocument.offsetAt(range.end);
-          return {
+  #getCssSyntacticDiagnostics(context) {
+    return this.#diagnosticsCache.get(context, void 0, () => {
+      const { vHtml } = this.#ctx.getHtmlDoc(context.text);
+      const file = this.#ctx.getProgram().getSourceFile(context.fileName);
+      const styles = this.#getAllStyleSheet(vHtml);
+      const diagnostics = [];
+      styles.forEach((node) => {
+        const text = context.text.slice(node.startTagEnd, node.endTagStart);
+        const { vDoc, vCss } = this.#ctx.getCssDoc(text);
+        this.#ctx.cssLanguageService.doValidation(vDoc, vCss).forEach(({ message, range }) => {
+          const start = node.startTagEnd + vDoc.offsetAt(range.start);
+          const end = node.startTagEnd + vDoc.offsetAt(range.end);
+          diagnostics.push({
             category: context.typescript.DiagnosticCategory.Warning,
             code: 0,
             file,
             start,
             length: end - start,
-            messageText: message
-          };
+            messageText: message,
+            source: NAME
+          });
         });
-      }).flat()
-    );
+      });
+      return diagnostics;
+    });
+  }
+  #getHtmlSyntacticDiagnostics(context) {
+    const offset = context.node.getStart() + 1;
+    const { vHtml } = this.#ctx.getHtmlDoc(context.text);
+    const program = this.#ctx.getProgram();
+    const file = program.getSourceFile(context.fileName);
+    const typeChecker = program.getTypeChecker();
+    const diagnostics = [];
+    forEachNode(vHtml.roots, (node) => {
+      if (!node.tag) return;
+      if (isCustomElementTag(node.tag) && !this.#ctx.elements.get(node.tag)) {
+        diagnostics.push({
+          category: context.typescript.DiagnosticCategory.Warning,
+          code: 101 /* UnknownTag */,
+          file,
+          start: node.start + 1,
+          length: node.tag.length,
+          messageText: `Unknown element tag '${node.tag}'`,
+          source: NAME
+        });
+      }
+      const tagDeclaration = this.#ctx.elements.get(node.tag) || this.#ctx.builtInElements.get(node.tag);
+      if (!tagDeclaration) return;
+      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 diagnostic = {
+          category: context.typescript.DiagnosticCategory.Warning,
+          file,
+          start,
+          length: end - start,
+          source: NAME,
+          code: 103 /* PropTypeError */,
+          messageText: !propType ? `'${attributeName}' type error` : `'${attributeName}' not satisfied '${typeChecker.typeToString(propType)}'`
+        };
+        if ((attributeName === "v-else-if" || attributeName === "v-else") && !node.prev?.attributesMap.has("v-if") && !node.prev?.attributesMap.has("v-else-if")) {
+          diagnostics.push({
+            ...diagnostic,
+            code: 104 /* PropSyntaxError */,
+            messageText: `'${attrInfo.attr}' syntax error`
+          });
+        }
+        if (attributeName === "v-if" || attributeName === "v-else-if") {
+          const spanType = getSpanType(this.#ctx.ts, typeChecker, file, offset, end);
+          if (!hasValueSpan || !typeChecker.isTypeAssignableTo(spanType, typeChecker.getBooleanType())) {
+            diagnostics.push(diagnostic);
+          }
+          continue;
+        }
+        if (attributeName === "v-else") {
+          if (value !== null) {
+            diagnostics.push(diagnostic);
+          }
+          continue;
+        }
+        if (!propType) {
+          if (attrInfo.decorate !== "@") {
+            diagnostics.push({
+              ...diagnostic,
+              code: 102 /* UnknownProp */,
+              messageText: `Unknown property '${attrInfo.attr}'`
+            });
+          }
+          continue;
+        }
+        if (value === null) {
+          if (attrInfo.decorate) {
+            diagnostics.push({
+              ...diagnostic,
+              code: 104 /* PropSyntaxError */,
+              messageText: `Consider using '${camelToKebabCase(attrInfo.attr)}'`
+            });
+          } else if (propType !== typeChecker.getBooleanType()) {
+            diagnostics.push(diagnostic);
+          }
+          continue;
+        }
+        if (hasValueSpan) {
+          const spanType = getSpanType(this.#ctx.ts, typeChecker, file, offset, end);
+          switch (attrInfo.decorate) {
+            case "?": {
+              const boolType = getUnionType(typeChecker, [
+                typeChecker.getBooleanType(),
+                typeChecker.getUndefinedType(),
+                typeChecker.getNullType()
+              ]);
+              if (!typeChecker.isTypeAssignableTo(spanType, boolType)) {
+                diagnostics.push(diagnostic);
+              }
+              continue;
+            }
+            case ".":
+            case "@":
+              if (!typeChecker.isTypeAssignableTo(spanType, propType)) {
+                diagnostics.push(diagnostic);
+              }
+              continue;
+            default:
+              if (!typeChecker.isTypeAssignableTo(spanType, propType) && (!typeChecker.isTypeAssignableTo(propType, typeChecker.getStringType()) || !typeChecker.isTypeAssignableTo(spanType, typeChecker.getStringType()))) {
+                diagnostics.push(diagnostic);
+              }
+              continue;
+          }
+        } else {
+          const types = [typeChecker.getStringType(), typeChecker.getNumberType()];
+          const valueLetter = value.startsWith('"') ? value.slice(1, -1) : value;
+          types.push(typeChecker.getStringLiteralType(valueLetter));
+          const numberValue = Number(valueLetter);
+          if (!Number.isNaN(numberValue)) {
+            types.push(typeChecker.getNumberLiteralType(numberValue));
+          }
+          if (attrInfo.decorate) {
+            diagnostics.push({
+              ...diagnostic,
+              code: 104 /* PropSyntaxError */,
+              messageText: `Consider using '${camelToKebabCase(attrInfo.attr)}'`
+            });
+          } else if (types.every((t) => !typeChecker.isTypeAssignableTo(t, propType))) {
+            diagnostics.push(diagnostic);
+          }
+        }
+      }
+    });
+    return diagnostics;
+  }
+  getSyntacticDiagnostics(context) {
+    this.#ctx.initElements();
+    return [...this.#getCssSyntacticDiagnostics(context), ...this.#getHtmlSyntacticDiagnostics(context)];
   }
   getDefinitionAndBoundSpan(context, position) {
-    const htmlOffset = context.node.pos + 1;
-    const virtualDocument = createVirtualDocument("html", context.text);
-    const vHtml = this.#htmlLanguageService.parseHTMLDocument(virtualDocument);
-    const offset = context.toOffset(position);
-    const node = vHtml.findNodeAt(offset);
-    const { text, start, length } = getHTMLTextAtPosition(context.text, offset);
-    const definitionNode = this.#ctx.elements.get(node.tag);
-    if (!definitionNode || node.tag === "style" || offset > node.startTagEnd || !text) {
-      return { textSpan: { start, length } };
+    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 { 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 (!definitionNode2) return empty;
+      return genElementDefinitionInfo(
+        context,
+        { start: cssNode.offset + node.startTagEnd, length: cssNode.length },
+        definitionNode2
+      );
     }
+    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 {
-        textSpan: { start, length },
-        definitions: [
-          {
-            containerName: "Custom Element",
-            containerKind: context.typescript.ScriptElementKind.unknown,
-            name: definitionNode.name.text,
-            kind: context.typescript.ScriptElementKind.classElement,
-            fileName: definitionNode.getSourceFile().fileName,
-            textSpan: {
-              start: definitionNode.name.getStart() - htmlOffset,
-              length: definitionNode.name.text.length
-            }
-          }
-        ]
-      };
+      return genElementDefinitionInfo(context, { start, length }, definitionNode);
+    }
+    const { attr, offset } = getAttrName(text);
+    if (before.length > attr.length) 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: ifAttr.start, length: ifAttr.end - ifAttr.start }
+      );
     }
-    const { attr, type } = getAttrName(text);
     const typeChecker = this.#ctx.getProgram().getTypeChecker();
     const propSymbol = typeChecker.getTypeAtLocation(definitionNode).getProperty(kebabToCamelCase(attr));
     const propDeclaration = propSymbol?.getDeclarations()?.at(0);
-    return {
-      textSpan: { start: type ? start + 1 : start, length: attr.length },
-      definitions: !propDeclaration ? void 0 : [
-        {
-          containerName: "Attribute",
-          containerKind: context.typescript.ScriptElementKind.unknown,
-          name: propDeclaration.getText(),
-          kind: context.typescript.ScriptElementKind.memberVariableElement,
-          fileName: propDeclaration.getSourceFile().fileName,
-          textSpan: {
-            start: propDeclaration.getStart() - htmlOffset,
-            length: propDeclaration.getText().length
-          }
-        }
-      ]
-    };
+    if (!propDeclaration) return empty;
+    return genAttrDefinitionInfo(context, { start: start + offset, length: attr.length }, propDeclaration);
   }
 };
-
-// src/decorate-ts.ts
-function decorateTypeChecker(ctx, typeChecker) {
-  const fn = typeChecker.isValidPropertyAccessForCompletions.bind(typeChecker);
-  typeChecker.isValidPropertyAccessForCompletions = (...args) => {
-    const result = fn(...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;
-    } catch {
-      return true;
-    }
-  };
-  return typeChecker;
+function getSpanExpression(typescript, file, pos) {
+  let node = getAstNodeAtPosition(typescript, file, pos);
+  while (!typescript.isTemplateSpan(node)) {
+    node = node.parent;
+    if (!node) return;
+  }
+  return node.expression;
 }
-function updateElement(ctx, file) {
-  const isDep = isDepElement(file);
-  ctx.ts.forEachChild(file, (node) => {
-    const tag = getCustomElementTag(ctx.ts, node, isDep);
-    if (tag && ctx.ts.isClassDeclaration(node)) {
-      ctx.elements.set(tag, node);
+function getSpanType(typescript, typeChecker, file, htmlOffset, attrNameEnd) {
+  const valueOffset = attrNameEnd + htmlOffset + 3;
+  const spanExp = getSpanExpression(typescript, file, valueOffset);
+  return typeChecker.getTypeAtLocation(spanExp);
+}
+function getPropType(typeChecker, tagClassDeclaration, attrInfo) {
+  const classType = typeChecker.getTypeAtLocation(tagClassDeclaration);
+  if (attrInfo.attr.startsWith("data-")) {
+    return typeChecker.getStringType();
+  }
+  const propName = kebabToCamelCase(attrInfo.attr);
+  switch (propName) {
+    case "class":
+    case "style":
+    case "part":
+    case "exportparts":
+    case "xmlns":
+    case "viewBox":
+      return typeChecker.getStringType();
+    case "tabindex":
+      return typeChecker.getNumberType();
+    case "ariaDisabled":
+    case "ariaChecked":
+    case "ariaHidden":
+      return getUnionType(typeChecker, [
+        typeChecker.getStringType(),
+        typeChecker.getBooleanType(),
+        typeChecker.getUndefinedType()
+      ]);
+    default: {
+      const isEvent = attrInfo.decorate === "@";
+      const propSymbol = classType.getProperty(propName);
+      const propType = propSymbol && typeChecker.getTypeOfSymbol(propSymbol);
+      if (!isEvent) return propType;
+      const eventHandleType = getEmitterHandleType(typeChecker, classType, propType);
+      return getUnionType(typeChecker, [eventHandleType, typeChecker.getUndefinedType()]);
     }
-  });
+  }
+}
+function getEmitterHandleType(typeChecker, classType, propType) {
+  const handleSymbol = propType?.getProperty("handler");
+  if (handleSymbol) return typeChecker.getTypeOfSymbol(handleSymbol);
+  const addEventListenerSymbol = classType.getProperty("addEventListener");
+  if (!addEventListenerSymbol) return typeChecker.getAnyType();
+  const addEventListenerDecls = addEventListenerSymbol.declarations;
+  const addEventListenerDecl = addEventListenerDecls.find((e) => !e.typeParameters);
+  const listenerDecl = addEventListenerDecl.parameters.at(1);
+  if (!listenerDecl) return typeChecker.getAnyType();
+  return typeChecker.getTypeAtLocation(listenerDecl);
+}
+function getUnionType(typeChecker, types) {
+  if ("getUnionType" in typeChecker) {
+    return typeChecker.getUnionType(types);
+  }
+  return types.at(0);
 }
+
+// src/decorate-ts.ts
 function decorateLanguageService(ctx, languageService) {
   const { ts, getProgram } = ctx;
-  const ls = Object.fromEntries(
-    Object.entries(languageService).map(([key, value]) => [key, value.bind(languageService)])
-  );
+  const ls = bindMemberFunction(languageService);
   languageService.getCompletionsAtPosition = (...args) => {
     const program = getProgram();
     const typeChecker = program.getTypeChecker();
     decorate(typeChecker, () => decorateTypeChecker(ctx, typeChecker));
     return ls.getCompletionsAtPosition(...args);
   };
+  languageService.getSuggestionDiagnostics = (...args) => {
+    const program = getProgram();
+    const file = program.getSourceFile(args[0]);
+    const result = ls.getSuggestionDiagnostics(...args);
+    ctx.updateElement(file);
+    return result.filter(({ start, reportsUnnecessary, category }) => {
+      if (!reportsUnnecessary || category !== ts.DiagnosticCategory.Suggestion) return true;
+      const node = getAstNodeAtPosition(ts, file, start);
+      if (!node || !ts.isPrivateIdentifier(node)) return true;
+      const declaration = node.parent;
+      if (!ts.isMethodDeclaration(declaration) && !ts.isPropertyDeclaration(declaration)) return true;
+      return !declaration.modifiers?.some((e) => e?.kind === ts.SyntaxKind.Decorator);
+    });
+  };
   languageService.findReferences = (...args) => {
+    const oResult = ls.findReferences(...args) || [];
     const program = getProgram();
-    const result = [];
     const currentNode = getAstNodeAtPosition(ts, program.getSourceFile(args[0]), args[1]);
-    const currentTag = currentNode && getCustomElementTag(ts, currentNode.parent);
-    for (const file of program.getSourceFiles()) {
-      const references = [];
-      forEachTag(ts, file, ({ tag, length, start }) => {
-        if (tag !== currentTag) return;
-        references.push({
-          fileName: file.fileName,
-          isWriteAccess: true,
-          textSpan: { start, length }
-        });
-      });
-      if (!references.length) continue;
-      result.push({
-        references,
+    if (!currentNode) return oResult;
+    const isIdent = ts.isIdentifier(currentNode);
+    if (!isIdent) 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: "",
@@ -732,174 +1284,163 @@ function decorateLanguageService(ctx, languageService) {
           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
+        });
+      }
+    });
+    return [...map.values(), ...oResult];
+  };
+  languageService.getRenameInfo = (fileName, position, ...args) => {
+    const result = ls.getRenameInfo(fileName, position, ...args);
+    const tagInfo = findCurrentTagInfo(ctx, fileName, position);
+    if (tagInfo) {
+      return {
+        canRename: true,
+        displayName: tagInfo.tag,
+        fullDisplayName: tagInfo.tag,
+        kind: ts.ScriptElementKind.alias,
+        kindModifiers: "tag",
+        triggerSpan: tagInfo.open
+      };
     }
-    return [...result, ...ls.findReferences(...args) || []];
+    const tagDefinedInfo = findDefinedTagInfo(ctx, fileName, position);
+    if (tagDefinedInfo) {
+      return {
+        canRename: true,
+        displayName: tagDefinedInfo.tag,
+        fullDisplayName: tagDefinedInfo.tag,
+        kind: ts.ScriptElementKind.alias,
+        kindModifiers: "tag",
+        triggerSpan: tagDefinedInfo.textSpan
+      };
+    }
+    return result;
   };
-  languageService.getSuggestionDiagnostics = (...args) => {
-    const program = getProgram();
-    decorate(program, () => {
-      program.getSourceFiles().forEach((file2) => updateElement(ctx, file2));
-      return program;
-    });
-    const file = program.getSourceFile(args[0]);
-    const result = ls.getSuggestionDiagnostics(...args);
-    updateElement(ctx, file);
-    return result.filter(({ start, reportsUnnecessary, category }) => {
-      if (!reportsUnnecessary || category !== ts.DiagnosticCategory.Suggestion) return true;
-      const node = getAstNodeAtPosition(ts, file, start);
-      if (!node || !ts.isPrivateIdentifier(node)) return true;
-      const declaration = node.parent;
-      if (!ts.isMethodDeclaration(declaration) && !ts.isPropertyDeclaration(declaration)) return true;
-      return !declaration.modifiers?.some((e) => e?.kind === ts.SyntaxKind.Decorator);
-    });
+  languageService.findRenameLocations = (fileName, position, ...args) => {
+    const tagPairInfo = findCurrentTagInfo(ctx, fileName, position);
+    if (tagPairInfo) {
+      const result = [{ fileName, textSpan: tagPairInfo.open }];
+      if (tagPairInfo.end) result.push({ fileName, textSpan: tagPairInfo.end });
+      return result;
+    }
+    const tagDefinedInfo = findDefinedTagInfo(ctx, fileName, position);
+    if (tagDefinedInfo) {
+      const result = [{ fileName, textSpan: tagDefinedInfo.textSpan }];
+      forEachAllHtmlTemplateNode(ctx, tagDefinedInfo.tag, (f, info) => {
+        result.push({ fileName: f.fileName, textSpan: info.open });
+        if (info.end) result.push({ fileName: f.fileName, textSpan: info.end });
+      });
+      return result;
+    }
+    const oResult = [...ls.findRenameLocations(fileName, position, ...args) || []];
+    const file = ctx.getProgram().getSourceFile(fileName);
+    const node = getAstNodeAtPosition(ctx.ts, file, position);
+    const tag = node && ts.isPropertyDeclaration(node.parent) && ctx.getTagFromNode(node.parent.parent);
+    if (!tag) 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 (!info) return;
+          const textSpan = { start: info.start + tagInfo.offset, length: info.end - info.start };
+          oResult.push({ fileName: f.fileName, prefixText: ".", textSpan });
+        });
+      });
+    }
+    return oResult;
   };
   return languageService;
 }
-
-// src/configuration.ts
-var defaultConfiguration = {
-  emmet: {},
-  tags: ["html", "raw"],
-  format: {
-    enabled: true
-  }
-};
-var Configuration = class {
-  #emmet = defaultConfiguration.emmet;
-  #format = defaultConfiguration.format;
-  #tags = defaultConfiguration.tags;
-  update(config) {
-    this.#format = Object.assign({}, defaultConfiguration.format, config.format || {});
-    this.#tags = config.tags || defaultConfiguration.tags;
-  }
-  get emmet() {
-    return this.#emmet;
-  }
-  get format() {
-    return this.#format;
-  }
-  get tags() {
-    return this.#tags;
-  }
-};
-var Store = class {
-  #map = /* @__PURE__ */ new Map();
-  #weakMap = /* @__PURE__ */ new WeakMap();
-  #registry = new FinalizationRegistry((key) => this.#map.delete(key));
-  set(key, val) {
-    this.#map.set(key, new WeakRef(val));
-    this.#weakMap.set(val, key);
-    this.#registry.register(val, key);
-  }
-  get(key) {
-    return this.#map.get(key)?.deref();
+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));
+      });
+    }
   }
-  findKey(val) {
-    return this.#weakMap.get(val);
+}
+function findCurrentTagInfo(ctx, fileName, position) {
+  const templateContext = ctx.htmlSourceHelper.getTemplate(fileName, position);
+  if (!templateContext) return;
+  const htmlOffset = templateContext.node.pos + 1;
+  const { vHtml } = ctx.getHtmlDoc(templateContext.text);
+  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);
+}
+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") {
+    return;
   }
-  *[Symbol.iterator]() {
-    const entries2 = this.#map.entries();
-    for (const [tag, ref] of entries2) {
-      yield [tag, ref.deref()];
+  const tag = node.text;
+  return { tag, textSpan: { start: node.getStart() + 1, length: tag.length } };
+}
+function isPropType(typescript, node, types) {
+  if (!typescript.isPropertyDeclaration(node)) return;
+  for (const modifier of node.modifiers || []) {
+    if (!typescript.isDecorator(modifier)) continue;
+    const { expression } = modifier;
+    if (typescript.isIdentifier(expression) && types.includes(expression.text)) {
+      return true;
     }
   }
-};
-
-// src/decorate-css.ts
-var import_vscode_css_languageservice2 = require("vscode-css-languageservice");
-var import_emmet_helper2 = require("@vscode/emmet-helper");
-var CSSLanguageService = class {
-  #completionsCache = new LRUCache();
-  #diagnosticsCache = new LRUCache();
-  #cssLanguageService = (0, import_vscode_css_languageservice2.getCSSLanguageService)();
-  #ctx;
-  constructor(ctx) {
-    this.#ctx = ctx;
-  }
-  #normalize = (context, position) => {
-    const parent = context.node.parent;
-    const tag = context.typescript.isTaggedTemplateExpression(parent) && parent.tag.getText();
-    if (context.typescript.isPropertyAssignment(parent) || tag === "styled") {
-      const appendBefore = ".parent { ";
-      const appendAfter = " }";
-      return {
-        offset: appendBefore.length,
-        text: `${appendBefore}${context.text}${appendAfter}`,
-        pos: {
-          line: position.line,
-          character: position.line === 0 ? position.character + appendBefore.length : position.character
-        }
-      };
+}
+function decorateTypeChecker(ctx, typeChecker) {
+  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;
+    } catch {
+      return true;
     }
-    return {
-      offset: 0,
-      text: context.text,
-      pos: { ...position }
-    };
   };
-  #getCompletionsAtPosition(context, position) {
-    const cached = this.#completionsCache.getCached(context, position);
-    if (cached) return cached;
-    const { text, pos } = this.#normalize(context, position);
-    const virtualDocument = createVirtualDocument("css", text);
-    const vCss = this.#cssLanguageService.parseStylesheet(virtualDocument);
-    let emmetResults;
-    this.#cssLanguageService.setCompletionParticipants([
-      {
-        onCssProperty: () => {
-          emmetResults = (0, import_emmet_helper2.doComplete)(virtualDocument, pos, "css", this.#ctx.config.emmet);
-        }
-      }
-    ]);
-    const completions = this.#cssLanguageService.doComplete(virtualDocument, pos, vCss);
-    completions.items.push(...emmetResults?.items || []);
-    return this.#completionsCache.updateCached(context, position, completions);
-  }
-  getCompletionsAtPosition(context, position) {
-    return translateCompletionItemsToCompletionInfo(context, this.#getCompletionsAtPosition(context, position));
-  }
-  getCompletionEntryDetails(context, position, name) {
-    const completions = this.#getCompletionsAtPosition(context, position);
-    const item = completions.items.find((e) => e.label === name);
-    if (!item) return genDefaultCompletionEntryDetails(context, name);
-    return translateCompletionItemsToCompletionEntryDetails(context, item);
-  }
-  getQuickInfoAtPosition(context, position) {
-    const { text, pos } = this.#normalize(context, position);
-    const virtualDocument = createVirtualDocument("css", text);
-    const vCss = this.#cssLanguageService.parseStylesheet(virtualDocument);
-    const hover = this.#cssLanguageService.doHover(virtualDocument, pos, vCss, {
-      documentation: true,
-      references: true
-    });
-    if (!hover) return;
-    return translateHover(context, hover, position, pos.character - position.character);
-  }
-  getSyntacticDiagnostics(context) {
-    const cached = this.#diagnosticsCache.getCached(context);
-    if (cached) return cached;
-    const { text, offset } = this.#normalize(context, { line: 0, character: 0 });
-    const virtualDocument = createVirtualDocument("css", text);
-    const vCss = this.#cssLanguageService.parseStylesheet(virtualDocument);
-    const oDiagnostics = this.#cssLanguageService.doValidation(virtualDocument, vCss);
-    const file = this.#ctx.getProgram().getSourceFile(context.fileName);
-    return this.#diagnosticsCache.updateCached(
-      context,
-      oDiagnostics.map(({ message, range }) => {
-        const start = context.toOffset(range.start);
-        return {
-          category: context.typescript.DiagnosticCategory.Warning,
-          code: 0,
-          file,
-          start: range.start.line === 0 ? start - offset : start,
-          length: context.toOffset(range.end) - start,
-          messageText: message
-        };
-      })
-    );
-  }
-};
+  return typeChecker;
+}
 
 // src/index.ts
 var LanguageServiceLogger = class {
@@ -908,7 +1449,7 @@ var LanguageServiceLogger = class {
     this.#info = info;
   }
   log(msg) {
-    this.#info.project.projectService.logger.info(`[gem] ${msg}`);
+    this.#info.project.projectService.logger.info(`[${NAME}] ${msg}`);
   }
 };
 var HtmlPlugin = class {
@@ -920,32 +1461,16 @@ var HtmlPlugin = class {
   create(info) {
     return decorate(info.languageService, () => {
       const logger = new LanguageServiceLogger(info);
-      logger.log("Starting ts-gem-plugin...");
+      logger.log("Starting...");
       this.#config.update(info.config);
-      const context = {
-        config: this.#config,
-        ts: this.#ts,
-        logger,
-        elements: new Store(),
-        getProgram: () => {
-          return info.languageService.getProgram();
-        },
-        getProject: () => {
-          return info.project;
-        }
-      };
+      const context = new Context(this.#ts, this.#config, info, logger);
       const decoratedService = decorateLanguageService(context, info.languageService);
       const decoratedService1 = (0, import_typescript_template_language_service_decorator.decorateWithTemplateLanguageService)(
         this.#ts,
         decoratedService,
         info.project,
         new CSSLanguageService(context),
-        {
-          tags: ["styled", "css"],
-          enableForStringWithSubstitutions: true,
-          getSubstitution,
-          isValidTemplate: (node) => isValidCSSTemplate(this.#ts, node, "css")
-        },
+        context.cssTemplateStringSettings,
         { logger }
       );
       return (0, import_typescript_template_language_service_decorator.decorateWithTemplateLanguageService)(
@@ -953,11 +1478,7 @@ var HtmlPlugin = class {
         decoratedService1,
         info.project,
         new HTMLLanguageService(context),
-        {
-          tags: ["html", "raw", "h"],
-          enableForStringWithSubstitutions: true,
-          getSubstitution
-        },
+        context.htmlTemplateStringSettings,
         { logger }
       );
     });