fix(themes): preserve language-specific ICLS styles (#1457)

Importing a PhpStorm .icls applied Java/Kotlin keys and PHP-only colours to every language, so PHP variables, strings and punctuation came out wrong. Java, Kotlin and PHP attributes are now kept per language (Color Scheme lists them under their own nodes, and editors scope them by data-language), explicit attribute inheritance is resolved, an explicit TextAttributes value resets omitted bold/italic, the light/dark parent follows the scheme's background, and PHP classes, method declarations, fields, brackets and separators get their own tags. Selecting a language attribute in Settings previews that language's colours.

Co-authored-by: marianomd <[email protected]>

src/editor/core/cm/highlight.ts

@@ -9,17 +9,19 @@ import { tags as t, type Tag } from "@lezer/highlight";
 function token(
   tag: Tag | Tag[],
   name: string,
-  defaults: { italic?: string; bold?: string; effect?: string } = {},
+  defaults: { italic?: string; bold?: string; effect?: string; color?: string } = {},
 ): TagStyle {
+  const variable = (suffix: string, fallback: string) =>
+    `var(--syn-${name}${suffix}, ${defaults.color ? `var(--syn-${defaults.color}${suffix}, ${fallback})` : fallback})`;
   return {
     tag,
-    color: `var(--syn-${name})`,
-    fontStyle: `var(--syn-${name}-italic, ${defaults.italic ?? "inherit"})`,
-    fontWeight: `var(--syn-${name}-bold, ${defaults.bold ?? "inherit"})`,
-    backgroundColor: `var(--syn-${name}-bg, transparent)`,
-    textDecoration: `var(--syn-${name}-effect, ${defaults.effect ?? "none"})`,
+    color: defaults.color ? variable("", "inherit") : `var(--syn-${name})`,
+    fontStyle: variable("-italic", defaults.italic ?? "inherit"),
+    fontWeight: variable("-bold", defaults.bold ?? "inherit"),
+    backgroundColor: variable("-bg", "transparent"),
+    textDecoration: variable("-effect", defaults.effect ?? "none"),
     // WebKit takes a decoration with a style or colour only through the prefixed property.
-    WebkitTextDecoration: `var(--syn-${name}-effect, ${defaults.effect ?? "none"})`,
+    WebkitTextDecoration: variable("-effect", defaults.effect ?? "none"),
   };
 }
 
@@ -71,10 +73,12 @@ export const openideaHighlightStyle = HighlightStyle.define([
   token(t.special(t.brace), "decorator"),
   token([t.tagName, t.angleBracket], "tag"),
   token([t.punctuation, t.bracket, t.separator, t.operator, t.derefOperator], "punct"),
+  token(t.bracket, "bracket", { color: "punct" }),
+  token(t.separator, "separator", { color: "punct" }),
   token(t.invalid, "invalid"),
   // Markup (Markdown, docs)
   token(t.heading, "markup-heading", { bold: "var(--fw-code-bold, 700)" }),
-  token(t.processingInstruction, "keyword"),
+  token(t.processingInstruction, "processing-instruction", { color: "keyword" }),
   { tag: t.emphasis, fontStyle: "italic" },
   { tag: t.strong, fontWeight: "var(--fw-code-bold, 700)" },
   { tag: t.strikethrough, textDecoration: "line-through" },

src/editor/core/cm/languages.test.ts

@@ -3,6 +3,27 @@ import { highlightTree, tagHighlighter, tags as t } from "@lezer/highlight";
 import { findLanguageDescription, loadSupport } from "./languages";
 
 describe("language modes", () => {
+  it("distinguishes PHP classes, method declarations and fields for imported schemes", async () => {
+    const support = await loadSupport(findLanguageDescription("PHP", "/tmp/palette.php")!);
+    const source = "<?php class Palette extends BasePalette { var $name; function example() {} }";
+    const found: Array<[string, string]> = [];
+    highlightTree(
+      support!.language.parser.parse(source),
+      tagHighlighter([
+        { tag: t.className, class: "class" },
+        { tag: t.function(t.definition(t.variableName)), class: "function" },
+        { tag: t.definition(t.propertyName), class: "field" },
+      ]),
+      (from, to, style) => found.push([source.slice(from, to), style]),
+    );
+    expect(found).toEqual([
+      ["Palette", "class"],
+      ["BasePalette", "class"],
+      ["$name", "field"],
+      ["example", "function"],
+    ]);
+  });
+
   it("recognizes AsciiDoc files and loads their lightweight syntax mode", async () => {
     for (const path of ["/docs/guide.adoc", "/docs/guide.asciidoc"]) {
       const description = findLanguageDescription("AsciiDoc", path);

src/editor/core/cm/languages.ts

@@ -5,6 +5,7 @@
  * and indentation fall back to the backend definition when the mode lacks them.
  */
 import { EditorState, Prec, type Extension } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
 import {
   LRLanguage,
   LanguageDescription,
@@ -246,6 +247,12 @@ const EXTRA_TAGS: Record<string, Parameters<typeof styleTags>[0]> = {
   JSX: JS_TAGS,
   TSX: JS_TAGS,
   Java: JAVA_TAGS,
+  PHP: {
+    "; ,": t.separator,
+    "ClassDeclaration/Name BaseClause/Name InterfaceClause/Name": t.className,
+    "MethodDeclaration/Name FunctionDefinition/Name": t.function(t.definition(t.variableName)),
+    "PropertyDeclaration/VariableDeclarator/VariableName": t.definition(t.propertyName),
+  },
   CSS: CSS_TAGS,
   SCSS: CSS_TAGS,
   Sass: CSS_TAGS,
@@ -255,8 +262,14 @@ const EXTRA_TAGS: Record<string, Parameters<typeof styleTags>[0]> = {
 
 function patchSupport(desc: LanguageDescription, support: LanguageSupport): LanguageSupport {
   const extra = EXTRA_TAGS[desc.name];
-  if (!extra || !(support.language instanceof LRLanguage)) return support;
-  const patched = new LanguageSupport(support.language.configure({ props: [styleTags(extra)] }), support.support);
+  const language =
+    extra && support.language instanceof LRLanguage
+      ? support.language.configure({ props: [styleTags(extra)] })
+      : support.language;
+  const patched = new LanguageSupport(language, [
+    support.support,
+    EditorView.editorAttributes.of({ "data-language": desc.name }),
+  ]);
   // `loadedSupport` reads `desc.support` synchronously; keep it on the patched instance.
   (desc as { support: LanguageSupport | undefined }).support = patched;
   return patched;