refactor: switch to lezer highlight (#4347)

We already use lezer code highlighting in codemirror. Here I replaced
prism.js with lezer for css preview as well.

Also switched theme in code editor to the same solarized light extracted
from thememirror.net.

Html highlighting is improved a little.
![Screenshot 2024-10-27 at 13 23
42](https://github.com/user-attachments/assets/2fc42a38-456e-4c8c-8f05-ea767c9e1a13)

Author: TrySound

apps/builder/app/builder/features/navigator/css-preview.tsx

@@ -17,8 +17,8 @@ import {
 import type { StyleMap, StyleProperty } from "@webstudio-is/css-engine";
 import { CollapsibleSection } from "~/builder/shared/collapsible-section";
 import { useMemo } from "react";
-import Prism from "prismjs";
 import { captureError } from "@webstudio-is/error-utils";
+import { highlightCss } from "~/builder/shared/code-highlight";
 
 const preStyle = css(textVariants.mono, {
   margin: 0,
@@ -92,7 +92,7 @@ const useHighlightedCss = () => {
       return;
     }
     const cssText = getCssText(currentStyle);
-    return Prism.highlight(cssText, Prism.languages.css, "css");
+    return highlightCss(cssText);
   }, [currentStyle]);
 };
 
@@ -108,7 +108,6 @@ export const CssPreview = () => {
       <ScrollArea css={{ padding: theme.panel.padding }}>
         <pre tabIndex={0} className={preStyle()}>
           <div
-            className="language-css"
             style={{ whiteSpace: "break-spaces" }}
             dangerouslySetInnerHTML={{ __html: code }}
           ></div>

apps/builder/app/builder/shared/code-editor-base.tsx

@@ -26,8 +26,7 @@ import {
   historyKeymap,
   indentWithTab,
 } from "@codemirror/commands";
-import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
-import { tags } from "@lezer/highlight";
+import { syntaxHighlighting } from "@codemirror/language";
 import {
   theme,
   textVariants,
@@ -44,6 +43,7 @@ import {
   rawTheme,
 } from "@webstudio-is/design-system";
 import { CrossIcon, MaximizeIcon, MinimizeIcon } from "@webstudio-is/icons";
+import { solarizedLight } from "./code-highlight";
 
 // This undocumented flag is required to keep contenteditable fields editable after the first activation of EditorView.
 // To reproduce the issue, open any Binding dialog and then try to edit a Navigation Item in the Navigation menu.
@@ -118,39 +118,6 @@ const editorContentStyle = css({
   },
 });
 
-// https://thememirror.net/clouds
-const highlightStyle = HighlightStyle.define([
-  // darker comment variant from https://github.com/vadimdemedes/thememirror/blob/main/source/themes/ayu-light.ts#L17-L20
-  {
-    tag: [tags.comment, tags.annotation],
-    color: "#787b8099",
-  },
-  {
-    tag: [tags.string, tags.special(tags.brace), tags.regexp, tags.url],
-    color: "#5D90CD",
-  },
-  {
-    tag: [tags.number, tags.bool, tags.null],
-    color: "#46A609",
-  },
-  {
-    tag: tags.keyword,
-    color: "#AF956F",
-  },
-  {
-    tag: [tags.definitionKeyword, tags.modifier],
-    color: "#C52727",
-  },
-  {
-    tag: [tags.angleBracket, tags.tagName, tags.attributeName, tags.separator],
-    color: "#606060",
-  },
-  {
-    tag: tags.self,
-    color: "#000",
-  },
-]);
-
 const autocompletionTooltipTheme = EditorView.theme({
   ".cm-tooltip.cm-tooltip-autocomplete": {
     ...textVariants.mono,
@@ -262,7 +229,7 @@ export const EditorContent = ({
         history(),
         drawSelection(),
         dropCursor(),
-        syntaxHighlighting(highlightStyle, { fallback: true }),
+        syntaxHighlighting(solarizedLight, { fallback: true }),
         keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
         EditorView.lineWrapping,
         EditorView.editable.of(readOnly === false),

apps/builder/app/builder/shared/code-highlight.ts

@@ -0,0 +1,85 @@
+import { HighlightStyle } from "@codemirror/language";
+import { highlightCode, tags } from "@lezer/highlight";
+import { parser } from "@lezer/css";
+
+// inspired by https://thememirror.net/solarized-light
+export const solarizedLight = HighlightStyle.define([
+  {
+    tag: tags.comment,
+    color: "#93A1A1",
+  },
+  {
+    tag: tags.string,
+    color: "#2AA198",
+  },
+  {
+    tag: tags.regexp,
+    color: "#D30102",
+  },
+  {
+    tag: tags.number,
+    color: "#D33682",
+  },
+  {
+    tag: tags.variableName,
+    color: "#268BD2",
+  },
+  {
+    tag: [tags.keyword, tags.operator, tags.punctuation],
+    color: "#859900",
+  },
+  {
+    tag: [tags.definitionKeyword, tags.modifier],
+    color: "#073642",
+  },
+  {
+    tag: [tags.self, tags.definition(tags.propertyName)],
+    color: "#268BD2",
+  },
+  {
+    tag: tags.function(tags.variableName),
+    color: "#268BD2",
+  },
+  {
+    tag: [tags.bool, tags.null],
+    color: "#B58900",
+  },
+  {
+    tag: tags.tagName,
+    color: "#268BD2",
+  },
+  {
+    tag: tags.angleBracket,
+    color: "#93A1A1",
+  },
+  {
+    tag: tags.attributeName,
+    color: "#93A1A1",
+  },
+  {
+    tag: tags.typeName,
+    color: "#859900",
+  },
+]);
+
+export const highlightCss = (code: string) => {
+  const styles = solarizedLight.module?.getRules();
+  // generated classes are scoped to parent
+  let highlightedCode = `<style>@scope {${styles}}</style>`;
+  highlightCode(
+    code,
+    parser.parse(code),
+    solarizedLight,
+    (text, classes) => {
+      if (classes) {
+        highlightedCode += `<span class="${classes}">${text}</span>`;
+      } else {
+        highlightedCode += text;
+      }
+    },
+    () => {
+      highlightedCode += "\n";
+    }
+  );
+  return highlightedCode;
+};

apps/builder/app/routes/_ui.(builder).tsx

@@ -26,7 +26,6 @@ import { dashboardPath, isBuilder, isDashboard } from "~/shared/router-utils";
 import env from "~/env/env.server";
 
 import builderStyles from "~/builder/builder.css?url";
-import prismStyles from "prismjs/themes/prism-solarizedlight.min.css?url";
 import { ClientOnly } from "~/shared/client-only";
 import { parseBuilderUrl } from "@webstudio-is/http-client";
 import { preventCrossOriginCookie } from "~/services/no-cross-origin-cookie";
@@ -40,10 +39,7 @@ import { loader as authWsLoader } from "./auth.ws";
 export { ErrorBoundary } from "~/shared/error/error-boundary";
 
 export const links = () => {
-  return [
-    { rel: "stylesheet", href: builderStyles },
-    { rel: "stylesheet", href: prismStyles },
-  ];
+  return [{ rel: "stylesheet", href: builderStyles }];
 };
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {

apps/builder/package.json

@@ -37,6 +37,7 @@
     "@lexical/selection": "^0.16.0",
     "@lexical/utils": "^0.16.0",
     "@lezer/common": "^1.2.2",
+    "@lezer/css": "^1.1.9",
     "@lezer/highlight": "^1.2.1",
     "@nanostores/react": "^0.7.1",
     "@radix-ui/react-select": "^2.1.2",
@@ -98,7 +99,6 @@
     "nanostores": "^0.9.3",
     "picocolors": "^1.1.0",
     "pretty-bytes": "^6.1.1",
-    "prismjs": "^1.29.0",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-colorful": "^5.6.1",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
@@ -129,7 +129,6 @@
     "@types/cookie": "^0.6.0",
     "@types/debug": "^4.1.12",
     "@types/dom-navigation": "^1.0.3",
-    "@types/prismjs": "^1.26.0",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "@webstudio-is/jest-config": "workspace:*",