fix(editor): show wavy and dotted underlines on macOS (#1086)

Error, warning, weak-warning and typo underlines never showed on macOS, nor did underline effects of syntax tokens from a colour scheme: WebKit rejects a text-decoration shorthand with a style or colour (underline wavy <colour>), so the declaration fell back to none.

The editor's diagnostic and token styles also set -webkit-text-decoration, which WebKit takes the full value through; the red wavy underlines of the Problems, Build, Project and Database views use the longhand properties.

src/editor/core/cm/highlight.ts

@@ -18,6 +18,8 @@ function token(
     fontWeight: `var(--syn-${name}-bold, ${defaults.bold ?? "inherit"})`,
     backgroundColor: `var(--syn-${name}-bg, transparent)`,
     textDecoration: `var(--syn-${name}-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"})`,
   };
 }
 

src/editor/lsp/diagnostics.ts

@@ -213,21 +213,26 @@ const diagnosticsSync = ViewPlugin.fromClass(
 
 // Effects follow the IDEA schemes: errors wavy red; warnings wavy yellow (dark) or
 // a yellow background (light, via --editor-warning-*); weak warnings dotted; typos wavy green.
+// WebKit drops a `text-decoration` with a style or colour; `-webkit-text-decoration`, set after
+// it, takes the whole value there.
 const lintTheme = EditorView.theme({
   ".cm-lintRange": { backgroundImage: "none", paddingBottom: "0" },
   ".cm-lintRange-error": {
     textDecoration: "var(--editor-error-decoration, underline wavy var(--danger))",
+    WebkitTextDecoration: "var(--editor-error-decoration, underline wavy var(--danger))",
     textDecorationSkipInk: "none",
     textUnderlineOffset: "3px",
   },
   ".cm-lintRange-warning": {
     textDecoration: "var(--editor-warning-decoration, underline wavy var(--warning))",
+    WebkitTextDecoration: "var(--editor-warning-decoration, underline wavy var(--warning))",
     backgroundColor: "var(--editor-warning-background, transparent)",
     textDecorationSkipInk: "none",
     textUnderlineOffset: "3px",
   },
   ".cm-lintRange-info": {
     textDecoration: "underline dotted color-mix(in srgb, var(--fg-muted) 80%, transparent)",
+    WebkitTextDecoration: "underline dotted color-mix(in srgb, var(--fg-muted) 80%, transparent)",
     textDecorationSkipInk: "none",
     textUnderlineOffset: "3px",
   },
@@ -235,6 +240,7 @@ const lintTheme = EditorView.theme({
   // Typo level: IDEA's green wavy underline.
   ".cm-lintRange.cm-lsp-typo": {
     textDecoration: "underline wavy color-mix(in srgb, var(--success) 85%, transparent)",
+    WebkitTextDecoration: "underline wavy color-mix(in srgb, var(--success) 85%, transparent)",
     textDecorationSkipInk: "none",
     textUnderlineOffset: "3px",
   },
@@ -248,9 +254,11 @@ const lintTheme = EditorView.theme({
   // An error or warning on the same range (merged into one mark) keeps its underline.
   ".cm-lintRange-error.cm-lsp-typo, .cm-lintRange-error.cm-lsp-unnecessary": {
     textDecoration: "var(--editor-error-decoration, underline wavy var(--danger))",
+    WebkitTextDecoration: "var(--editor-error-decoration, underline wavy var(--danger))",
   },
   ".cm-lintRange-warning.cm-lsp-typo, .cm-lintRange-warning.cm-lsp-unnecessary": {
     textDecoration: "var(--editor-warning-decoration, underline wavy var(--warning))",
+    WebkitTextDecoration: "var(--editor-warning-decoration, underline wavy var(--warning))",
   },
   ".cm-lintRange-active": { backgroundColor: "transparent" },
   ".cm-lintRange-warning.cm-lintRange-active": { backgroundColor: "var(--editor-warning-background, transparent)" },

src/features/build/Build.module.css

@@ -42,7 +42,9 @@
   color: var(--fg-muted);
 }
 .fileError {
-  text-decoration: underline wavy var(--danger);
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: var(--danger);
   text-decoration-skip-ink: none;
   text-underline-offset: 3px;
 }

src/features/code-insight/ProblemsView.module.css

@@ -42,7 +42,9 @@
   color: var(--fg-strong);
 }
 .fileError {
-  text-decoration: underline wavy var(--danger);
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: var(--danger);
   text-decoration-skip-ink: none;
   text-underline-offset: 3px;
 }

src/features/database/Database.module.css

@@ -292,7 +292,9 @@
 
 /* Inline statement errors in consoles. */
 :global(.cm-openidea-db-error) {
-  text-decoration: underline wavy var(--danger);
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: var(--danger);
   text-underline-offset: 3px;
 }
 

src/features/project-tree/ProjectView.module.css

@@ -51,7 +51,9 @@
   background: color-mix(in srgb, var(--vcs-ignored) 14%, transparent);
 }
 .error {
-  text-decoration: underline wavy var(--danger);
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: var(--danger);
   text-decoration-skip-ink: none;
   text-underline-offset: 3px;
 }

src/features/settings/pages/editor/colorScheme.tsx

@@ -89,6 +89,8 @@ function tokenStyle(attr: AttributeDef | undefined): CSSProperties {
     fontStyle: `var(--syn-${t}-italic, ${t === "comment" ? "var(--syn-comment-style)" : t === "doc-comment" || t === "docstring" ? "italic" : "inherit"})`,
     backgroundColor: `var(--syn-${t}-bg, transparent)`,
     textDecoration: `var(--syn-${t}-effect, none)`,
+    // WebKit takes a decoration with a style or colour only through the prefixed property.
+    ...({ WebkitTextDecoration: `var(--syn-${t}-effect, none)` } as CSSProperties),
   };
 }