`nvim-treesitter` highlight missing in some diff files

[marcelarie]

I found this issue with gitcommit and diff files.

my lighthaus and treesitter config:

require("nvim-treesitter.configs").setup {
    auto_install = true,
    highlight = {
        enable = true,
        additional_vim_regex_highlighting = false,
    },
}

require("lighthaus").setup {
    bg_dark = true,
    colors = {
        -- black = '#0E0E10',
        -- black = '#1e1d23',
        black = "#111111",
        fg_nc_statusline = "#888888",
        red = "#FC2929",
        red2 = "#FF5050",
        blue = "#1D918B",
        blue2 = "#47A8A1",
        blue3 = "#0db9d7",
        hl_yellow = "#FFFF00",
        hl_orange = "#FF4D00",
        hl_bg = "#fff",
        hl_bg_dark = "#282c34",
        gutter_bg = "#282c34",
        non_text = "#373C45",
        lsp_error = "#db4b4b",
        lsp_warning = "#e0af68",
        lsp_information = "#0db9d7",
        lsp_hint = "#10B981",
        -- bg = 'Red'
    },
    lsp_underline_style = "undercurl",
}

some examples:

lightaus.nvim:

catppuccin:

the diff file:

diff --git a/apps/dashboard-v2/shared/containers/ScheduledJobsPage/ScheduledJobsTableAdvancedSearch.tsx b/apps/dashboard-v2/shared/containers/ScheduledJobsPage/ScheduledJobsTableAdvancedSearch.tsx
index a83ecd575..33a4a4e16 100644
--- a/apps/dashboard-v2/shared/containers/ScheduledJobsPage/ScheduledJobsTableAdvancedSearch.tsx
+++ b/apps/dashboard-v2/shared/containers/ScheduledJobsPage/ScheduledJobsTableAdvancedSearch.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { Column, TableState, CellValue, Row } from "react-table";
+import { TableState, CellValue, Row } from "react-table";
 import { useHistory } from "react-router-dom";
 import { DateTime } from "luxon";

@@ -44,137 +44,133 @@ const ScheduledJobsTableAvancedTable = ({
   const { push } = useHistory();

   const columns = useMemo(
-    () =>
-      [
-        {
-          id: "jobDate",
-          Header: datetimeColumn.name,
-          accessor: (originalRow) => new Date(getDate(originalRow)),
-          Cell: ({ value, row: { original } }: CellValue) => {
-            const date = DateTime.fromJSDate(value).toFormat("dd/MM/yyyy");
-            return <span id={`jobDate-${original.id}`}>{date}</span>;
-          },
-          sortType: "datetime",
+    () => [
+      {
+        id: "jobDate",
+        Header: datetimeColumn.name,
+        accessor: (originalRow: Job) => new Date(getDate(originalRow)),
+        Cell: ({ value, row: { original } }: CellValue) => {
+          const date = DateTime.fromJSDate(value).toFormat("dd/MM/yyyy");
+          return <span id={`jobDate-${original.id}`}>{date}</span>;
         },
-        {
-          id: "deliveryId",
-          Header: (
-            <FormattedMessage
-              id="PackageTable.package_id"
-              defaultMessage="Package ID"
-            />
-          ),
-          accessor: (originalRow) => originalRow.deliveries,
-          Cell: ({ value }: CellValue) =>
-            value.map((delivery: Delivery, index: number) => (
-              <div
-                id={`packageId-${delivery.id}}`}
-                key={delivery.id}
-                className={cx({
-                  [layoutStyles.mbs]: index !== value.length - 1,
-                })}
-              >
-                <CopyButton
-                  id={`copyButton-${delivery.id}`}
-                  text={delivery.id as string}
-                />
-              </div>
-            )),
-          disableSortBy: true,
-          minWidth: 160,
-        },
-        {
-          id: "clientReference",
-          Header: clientReferenceColumn.name,
-          accessor: (originalRow) => originalRow.deliveries,
-          disableSortBy: true,
-          Cell: ({ value }: CellValue) =>
-            value.map((delivery: Delivery, index: number) => (
-              <div
-                id={`clientReference-${delivery.id}}`}
-                key={delivery.id}
-                className={cx({
-                  [layoutStyles.mbm]: index !== value.length - 1,
-                })}
-              >
-                {delivery.clientReference ? (
-                  <span>{delivery.clientReference}</span>
-                ) : (
-                  <FormattedMessage id="jobTable.none" defaultMessage="None" />
-                )}
-              </div>
-            )),
-        },
-        {
-          id: "PU Time",
-          Header: (
-            <FormattedMessage
-              id="jobTable.pickupTime"
-              defaultMessage="Pick-up time"
-            />
-          ),
-          accessor: (originalRow) => originalRow,
-          disableSortBy: true,
-          Cell: ({ value }: CellValue) => (
-            <p id={`pickupAtTime-${value.id}`}>
-              <FormattedTime value={value.pickupAt} />
-            </p>
-          ),
-        },
-        {
-          id: "PU",
-          Header: pickUpColumn.name,
-          accessor: (originalRow) => originalRow.deliveries,
-          disableSortBy: true,
-          width: 300,
-          Cell: ({ value }: CellValue) =>
-            value.map((delivery: Delivery, index: number) => (
-              <div
-                id={`pickUpAddress-${delivery.id}}`}
-                key={delivery.id}
-                className={cx({
-                  [layoutStyles.mbm]: index !== value.length - 1,
-                })}
-              >
-                {delivery.pickup.address && (
-                  <Address address={delivery.dropoff.address}>
-                    {(m) => <span className={styles.placeAddress}>{m}</span>}
-                  </Address>
-                )}
-              </div>
-            )),
-        },
-        {
-          id: "DO",
-          Header: dropOffColumn.name,
-          accessor: (originalRow) => originalRow.deliveries,
-          disableSortBy: true,
-          width: 300,
-          Cell: ({ value }: CellValue) =>
-            value.map((delivery: Delivery, index: number) => (
-              <div
-                id={`dropOffAddress-${delivery.id}}`}
-                key={delivery.id}
-                className={cx({
-                  [layoutStyles.mbm]: index !== value.length - 1,
-                })}
-              >
-                {delivery.dropoff.address && (
-                  <Address address={delivery.dropoff.address}>
-                    {(m) => <span className={styles.placeAddress}>{m}</span>}
-                  </Address>
-                )}
-              </div>
-            )),
-        },
-        {
-          id: "action",
-          accessor: (originalRow) => originalRow,
-          disableSortBy: true,
-          Cell: ({ value }: CellValue) =>
-            cancelColumn.renderer(value, { onJobCancelClick }),
-        },
-      ] as Column<Job>[],
+        sortType: "datetime",
+      },
+      {
+        id: "deliveryId",
+        Header: (
+          <FormattedMessage
+            id="PackageTable.package_id"
+            defaultMessage="Package ID"
+          />
+        ),
+        accessor: (originalRow: Job) => originalRow.deliveries,
+        Cell: ({ value }: CellValue) =>
+          value.map((delivery: Delivery, index: number) => (
+            <div
+              id={`packageId-${delivery.id}}`}
+              key={delivery.id}
+              className={cx({
+                [layoutStyles.mbs]: index !== value.length - 1,
+              })}
+            >
+              <CopyButton id={`copyButton-${delivery.id}`} text={delivery.id} />
+            </div>
+          )),
+        disableSortBy: true,
+        minWidth: 160,
+      },
+      {
+        id: "clientReference",
+        Header: clientReferenceColumn.name,
+        accessor: (originalRow: Job) => originalRow.deliveries,
+        disableSortBy: true,
+        Cell: ({ value }: CellValue) =>
+          value.map((delivery: Delivery, index: number) => (
+            <div
+              id={`clientReference-${delivery.id}}`}
+              key={delivery.id}
+              className={cx({
+                [layoutStyles.mbm]: index !== value.length - 1,
+              })}
+            >
+              {delivery.clientReference ? (
+                <span>{delivery.clientReference}</span>
+              ) : (
+                <FormattedMessage id="jobTable.none" defaultMessage="None" />
+              )}
+            </div>
+          )),
+      },
+      {
+        id: "PU Time",
+        Header: (
+          <FormattedMessage
+            id="jobTable.pickupTime"
+            defaultMessage="Pick-up time"
+          />
+        ),
+        accessor: (originalRow: Job) => originalRow,
+        disableSortBy: true,
+        Cell: ({ value }: CellValue) => (
+          <p id={`pickupAtTime-${value.id}`}>
+            <FormattedTime value={value.pickupAt} />
+          </p>
+        ),
+      },
+      {
+        id: "PU",
+        Header: pickUpColumn.name,
+        accessor: (originalRow: Job) => originalRow.deliveries,
+        disableSortBy: true,
+        width: 300,
+        Cell: ({ value }: CellValue) =>
+          value.map((delivery: Delivery, index: number) => (
+            <div
+              id={`pickUpAddress-${delivery.id}}`}
+              key={delivery.id}
+              className={cx({
+                [layoutStyles.mbm]: index !== value.length - 1,
+              })}
+            >
+              {delivery.pickup.address && (
+                <Address address={delivery.dropoff.address}>
+                  {(m) => <span className={styles.placeAddress}>{m}</span>}
+                </Address>
+              )}
+            </div>
+          )),
+      },
+      {
+        id: "DO",
+        Header: dropOffColumn.name,
+        accessor: (originalRow: Job) => originalRow.deliveries,
+        disableSortBy: true,
+        width: 300,
+        Cell: ({ value }: CellValue) =>
+          value.map((delivery: Delivery, index: number) => (
+            <div
+              id={`dropOffAddress-${delivery.id}}`}
+              key={delivery.id}
+              className={cx({
+                [layoutStyles.mbm]: index !== value.length - 1,
+              })}
+            >
+              {delivery.dropoff.address && (
+                <Address address={delivery.dropoff.address}>
+                  {(m) => <span className={styles.placeAddress}>{m}</span>}
+                </Address>
+              )}
+            </div>
+          )),
+      },
+      {
+        id: "action",
+        accessor: (originalRow: Job) => originalRow,
+        disableSortBy: true,
+        Cell: ({ value }: CellValue) =>
+          cancelColumn.renderer(value, { onJobCancelClick }),
+      },
+    ],
     [onJobCancelClick]
   );

@@ -185,7 +181,7 @@ const ScheduledJobsTableAvancedTable = ({
           id: "jobDate",
         },
       ],
-    } as Partial<TableState<Job>>;
+    };
   }, []);

   const handleOnClick = ({ original: job }: Row<Job>) => {
diff --git a/packages/stuart-ui/CopyButton/index.tsx b/packages/stuart-ui/CopyButton/index.tsx
index 3678c189d..d7f5e86c8 100644
--- a/packages/stuart-ui/CopyButton/index.tsx
+++ b/packages/stuart-ui/CopyButton/index.tsx
@@ -5,7 +5,7 @@ import copyToClipboard from "stuart-libs/copyToClipboard";
 import styles from "./CopyButton.scss";

 interface CopyButtonProps {
-  text: string;
+  text: string | number;
   label?: string;
   className?: string;
   id?: string;

[marcelarie]

for the moment my workaround is to add this to the config:

vim.api.nvim_set_hl(0, "@text.diff.add", { fg = "#50C16E" })
vim.api.nvim_set_hl(0, "@text.diff.delete", { fg = "#FF5050" })