[ts-plugin] Support css without tag

crates/zed-plugin-gem/src/injections.scm

@@ -6,6 +6,11 @@
     value: (template_string (string_fragment) @content
       (#set! "language" "css"))))))
 
+(call_expression
+  function: (identifier) @_name (#eq? @_name "css")
+  arguments: (arguments ((template_string (string_fragment) @content
+    (#set! "language" "css")))))
+
 (call_expression
   function: (identifier) @_name (#match? @_name "^styled(\\.\\w+)?$")
   arguments: (template_string (string_fragment) @content

cspell.json

@@ -1,7 +1,12 @@
 {
   "$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json",
   "version": "0.2",
-  "ignorePaths": ["**/pnpm-lock.yaml", "**/package.json", "**/settings.json", "**/cspell.json"],
+  "ignorePaths": [
+    "**/pnpm-lock.yaml",
+    "**/package.json",
+    "**/settings.json",
+    "**/cspell.json"
+  ],
   "useGitignore": true,
   "words": [
     "activekey",
@@ -119,13 +124,14 @@
     "tetris",
     "texcoord",
     "titlebar",
+    "tsserverlibrary",
     "visibilitychange",
     "vlist",
     "webextension",
     "webrtc",
     "WIDTHSCREEN",
     "worklet",
-    "xywh",
-    "worktree"
+    "worktree",
+    "xywh"
   ]
 }

packages/ts-gem-plugin/package.json

@@ -9,13 +9,13 @@
   "main": "dist/index.js",
   "files": [],
   "scripts": {
-    "prepublishOnly": "esbuild ./src/index.ts --outdir=./dist --platform=node --sourcemap --bundle --external:@vscode/emmet-helper --external:vscode-* --external:typescript-*",
+    "prepublishOnly": "esbuild ./src/index.ts --outdir=./dist --platform=node --sourcemap --bundle --external:@vscode/* --external:@mantou/* --external:vscode-*",
     "start": "pnpm run prepublishOnly --watch"
   },
   "dependencies": {
+    "@mantou/typescript-template-language-service-decorator": "^2.3.2",
     "@vscode/emmet-helper": "^2.9.3",
     "duoyun-ui": "^2.2.0",
-    "typescript-template-language-service-decorator": "^2.3.2",
     "vscode-css-languageservice": "^6.3.1",
     "vscode-html-languageservice": "^5.3.1",
     "vscode-languageserver-textdocument": "^1.0.12",

packages/ts-gem-plugin/src/cache.ts

@@ -1,4 +1,4 @@
-import type { TemplateContext } from 'typescript-template-language-service-decorator';
+import type { TemplateContext } from '@mantou/typescript-template-language-service-decorator';
 import type { Position } from 'vscode-languageserver-textdocument';
 import { Cache } from 'duoyun-ui/lib/cache';
 

packages/ts-gem-plugin/src/decorate-css.ts

@@ -1,5 +1,5 @@
 import type * as ts from 'typescript/lib/tsserverlibrary';
-import type { TemplateLanguageService, TemplateContext } from 'typescript-template-language-service-decorator';
+import type { TemplateLanguageService, TemplateContext } from '@mantou/typescript-template-language-service-decorator';
 import type { CompletionList } from 'vscode-css-languageservice';
 import { getCSSLanguageService } from 'vscode-css-languageservice';
 import { doComplete as doEmmetComplete } from '@vscode/emmet-helper';
@@ -25,9 +25,9 @@ export class CSSLanguageService implements TemplateLanguageService {
   }
 
   #normalize = (context: TemplateContext, position: ts.LineAndCharacter) => {
-    const tagged = context.node.parent;
-    const tag = context.typescript.isTaggedTemplateExpression(tagged) && tagged.tag.getText();
-    if (tag === 'styled') {
+    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 {

packages/ts-gem-plugin/src/decorate-html.ts

@@ -1,5 +1,5 @@
 import type * as ts from 'typescript/lib/tsserverlibrary';
-import type { TemplateLanguageService, TemplateContext } from 'typescript-template-language-service-decorator';
+import type { TemplateLanguageService, TemplateContext } from '@mantou/typescript-template-language-service-decorator';
 import type { CompletionList, HTMLDocument, Position, Range } from 'vscode-html-languageservice';
 import { getLanguageService as getHTMLanguageService } from 'vscode-html-languageservice';
 import { doComplete as doEmmetComplete } from '@vscode/emmet-helper';

packages/ts-gem-plugin/src/decorate-ts.ts

@@ -1,6 +1,6 @@
 import type * as ts from 'typescript/lib/tsserverlibrary';
 import type { LanguageService } from 'typescript';
-import type { Logger } from 'typescript-template-language-service-decorator';
+import type { Logger } from '@mantou/typescript-template-language-service-decorator';
 
 import { decorate, type Utils } from './utils';
 import type { Configuration } from './configuration';

packages/ts-gem-plugin/src/index.ts

@@ -1,13 +1,13 @@
-import type { Logger } from 'typescript-template-language-service-decorator';
+// FIXME: css('xx', `:host ${1}`) `getQuickInfoAtPosition` `getCompletionsAtPosition`
+// FIXME: nested html style `getSyntacticDiagnostics`
+import { decorateWithTemplateLanguageService } from '@mantou/typescript-template-language-service-decorator';
+import type { Logger } from '@mantou/typescript-template-language-service-decorator';
 import type * as ts from 'typescript/lib/tsserverlibrary';
-// FIXME: nested `getSyntacticDiagnostics`
-// TODO: support object property value none tag css template
-import { decorateWithTemplateLanguageService } from 'typescript-template-language-service-decorator';
 
 import { HTMLLanguageService } from './decorate-html';
 import type { Context } from './decorate-ts';
 import { decorateLanguageService } from './decorate-ts';
-import { Utils, decorate, getSubstitution } from './utils';
+import { Utils, decorate, getSubstitution, isValidCSSTemplate } from './utils';
 import { Configuration } from './configuration';
 import { CSSLanguageService } from './decorate-css';
 
@@ -62,6 +62,7 @@ class HtmlPlugin {
           tags: ['styled', 'css'],
           enableForStringWithSubstitutions: true,
           getSubstitution,
+          isValidTemplate: (node) => isValidCSSTemplate(this.#ts, node, 'css'),
         },
         { logger },
       );
@@ -72,7 +73,7 @@ class HtmlPlugin {
         info.project,
         new HTMLLanguageService(context),
         {
-          tags: ['html', 'raw'],
+          tags: ['html', 'raw', 'h'],
           enableForStringWithSubstitutions: true,
           getSubstitution,
         },

packages/ts-gem-plugin/src/utils.ts

@@ -1,7 +1,7 @@
 import type * as ts from 'typescript/lib/tsserverlibrary';
 import * as vscode from 'vscode-languageserver-types';
 import { TextDocument } from 'vscode-languageserver-textdocument';
-import type { TemplateContext } from 'typescript-template-language-service-decorator';
+import type { TemplateContext } from '@mantou/typescript-template-language-service-decorator';
 
 export class Utils {
   #ts: typeof ts;
@@ -38,6 +38,30 @@ export function getSubstitution(templateString: string, start: number, end: numb
   return templateString.slice(start, end).replaceAll(/[^\n]/g, '_');
 }
 
+export function isValidCSSTemplate(
+  typescript: typeof ts,
+  node: ts.NoSubstitutionTemplateLiteral | ts.TaggedTemplateExpression | ts.TemplateExpression,
+  callName: string,
+) {
+  switch (node.kind) {
+    case typescript.SyntaxKind.NoSubstitutionTemplateLiteral:
+    case typescript.SyntaxKind.TemplateExpression:
+      const parent = node.parent;
+      if (typescript.isCallExpression(parent) && parent.expression.getText() === callName) {
+        return true;
+      }
+      if (typescript.isPropertyAssignment(parent)) {
+        const call = parent.parent.parent;
+        if (typescript.isCallExpression(call) && call.expression.getText() === callName) {
+          return true;
+        }
+      }
+      return false;
+    default:
+      return false;
+  }
+}
+
 export function translateCompletionItemsToCompletionInfo(
   context: TemplateContext,
   items: vscode.CompletionList,