react-diff-viewer-continued 4.2.2 → 4.4.0

package/lib/esm/src/styles.js

@@ -1,65 +1,67 @@
 import createEmotion from "@emotion/css/create-instance";
+export const defaultLightThemeVariables = Object.freeze({
+    diffViewerBackground: "#fff",
+    diffViewerColor: "#212529",
+    addedBackground: "#e6ffed",
+    addedColor: "#24292e",
+    removedBackground: "#ffeef0",
+    removedColor: "#24292e",
+    changedBackground: "#fffbdd",
+    wordAddedBackground: "#acf2bd",
+    wordRemovedBackground: "#fdb8c0",
+    addedGutterBackground: "#cdffd8",
+    removedGutterBackground: "#ffdce0",
+    gutterBackground: "#f7f7f7",
+    gutterBackgroundDark: "#f3f1f1",
+    highlightBackground: "#fffbdd",
+    highlightGutterBackground: "#fff5b1",
+    codeFoldGutterBackground: "#dbedff",
+    codeFoldBackground: "#f1f8ff",
+    emptyLineBackground: "#fafbfc",
+    gutterColor: "#212529",
+    addedGutterColor: "#212529",
+    removedGutterColor: "#212529",
+    codeFoldContentColor: "#212529",
+    diffViewerTitleBackground: "#fafbfc",
+    diffViewerTitleColor: "#212529",
+    diffViewerTitleBorderColor: "#eee",
+});
+export const defaultDarkThemeVariables = Object.freeze({
+    diffViewerBackground: "#2e303c",
+    diffViewerColor: "#FFF",
+    addedBackground: "#2ea04326",
+    addedColor: "white",
+    removedBackground: "#f851491a",
+    removedColor: "white",
+    changedBackground: "#3e302c",
+    wordAddedBackground: "#2ea04366",
+    wordRemovedBackground: "#f8514966",
+    addedGutterBackground: "#3fb9504d",
+    removedGutterBackground: "#f851494d",
+    gutterBackground: "#2c2f3a",
+    gutterBackgroundDark: "#262933",
+    highlightBackground: "#2a3967",
+    highlightGutterBackground: "#2d4077",
+    codeFoldGutterBackground: "#262831",
+    codeFoldBackground: "#262831",
+    emptyLineBackground: "#363946",
+    gutterColor: "#f0f6fc",
+    addedGutterColor: "#f0f6fc",
+    removedGutterColor: "#f0f6fc",
+    codeFoldContentColor: "#9198a1",
+    diffViewerTitleBackground: "#2f323e",
+    diffViewerTitleColor: "#f0f6fc",
+    diffViewerTitleBorderColor: "#353846",
+});
 export default (styleOverride, useDarkTheme = false, nonce = "") => {
     const { variables: overrideVariables = {}, ...styles } = styleOverride;
     const themeVariables = {
         light: {
-            ...{
-                diffViewerBackground: "#fff",
-                diffViewerColor: "#212529",
-                addedBackground: "#e6ffed",
-                addedColor: "#24292e",
-                removedBackground: "#ffeef0",
-                removedColor: "#24292e",
-                changedBackground: "#fffbdd",
-                wordAddedBackground: "#acf2bd",
-                wordRemovedBackground: "#fdb8c0",
-                addedGutterBackground: "#cdffd8",
-                removedGutterBackground: "#ffdce0",
-                gutterBackground: "#f7f7f7",
-                gutterBackgroundDark: "#f3f1f1",
-                highlightBackground: "#fffbdd",
-                highlightGutterBackground: "#fff5b1",
-                codeFoldGutterBackground: "#dbedff",
-                codeFoldBackground: "#f1f8ff",
-                emptyLineBackground: "#fafbfc",
-                gutterColor: "#212529",
-                addedGutterColor: "#212529",
-                removedGutterColor: "#212529",
-                codeFoldContentColor: "#212529",
-                diffViewerTitleBackground: "#fafbfc",
-                diffViewerTitleColor: "#212529",
-                diffViewerTitleBorderColor: "#eee",
-            },
+            ...defaultLightThemeVariables,
             ...(overrideVariables.light || {}),
         },
         dark: {
-            ...{
-                diffViewerBackground: "#2e303c",
-                diffViewerColor: "#FFF",
-                addedBackground: "#2ea04326",
-                addedColor: "white",
-                removedBackground: "#f851491a",
-                removedColor: "white",
-                changedBackground: "#3e302c",
-                wordAddedBackground: "#2ea04366",
-                wordRemovedBackground: "#f8514966",
-                addedGutterBackground: "#3fb9504d",
-                removedGutterBackground: "#f851494d",
-                gutterBackground: "#2c2f3a",
-                gutterBackgroundDark: "#262933",
-                highlightBackground: "#2a3967",
-                highlightGutterBackground: "#2d4077",
-                codeFoldGutterBackground: "#262831",
-                codeFoldBackground: "#262831",
-                emptyLineBackground: "#363946",
-                gutterColor: "#f0f6fc",
-                addedGutterColor: "#f0f6fc",
-                removedGutterColor: "#f0f6fc",
-                codeFoldContentColor: "#9198a1",
-                diffViewerTitleBackground: "#2f323e",
-                diffViewerTitleColor: "#f0f6fc",
-                diffViewerTitleBorderColor: "#353846",
-            },
+            ...defaultDarkThemeVariables,
             ...(overrideVariables.dark || {}),
         },
     };
@@ -68,6 +70,9 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
     const content = css({
         width: "auto",
         overflow: "hidden",
+        // Host `:where(th,td){ padding }` (daisyui `.table`) would indent the code
+        // column; we own horizontal spacing via gutter/marker instead.
+        padding: 0,
         label: "content",
     });
     const splitView = css({
@@ -109,6 +114,18 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         },
         label: "diff-container",
         borderCollapse: "collapse",
+        borderRadius: 0,
+        // Isolate from host table CSS (e.g. daisyui `.table` / `.table-zebra`, Bootstrap,
+        // etc.). Such frameworks emit their table rules inside `@layer` with `:where()`
+        // selectors, so these unlayered declarations win regardless of specificity. We
+        // only reset properties a host injects onto our rows/cells that we do NOT set
+        // ourselves per-cell — background, font-size and padding are pinned on the
+        // individual line/gutter/marker/content classes instead, so this container rule
+        // never outranks and clobbers our own diff colouring.
+        "& td, & th": {
+            border: 0,
+            verticalAlign: "baseline",
+        },
         "@media (max-width: 768px)": {
             minWidth: "unset",
         },
@@ -125,6 +142,30 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         textDecoration: "none",
         label: "content-text",
     });
+    // Line content is laid out as two flex items: a fixed indent column carrying the
+    // line's leading whitespace, and a flexible body that wraps. This gives wrapped
+    // continuation lines a hanging indent — they align under the first character of
+    // the line's content instead of falling back to the cell's left edge.
+    const contentFlex = css({
+        display: "flex",
+        alignItems: "baseline",
+        label: "content-flex",
+    });
+    // The indent column. `pre` + `flex-shrink: 0` keep the whitespace intact and
+    // prevent it from ever collapsing or wrapping, so it sizes exactly to the indent.
+    const lineIndent = css({
+        whiteSpace: "pre",
+        wordBreak: "keep-all",
+        flex: "0 0 auto",
+        label: "line-indent",
+    });
+    // The wrapping body. `min-width: 0` is required so a long unbreakable run wraps
+    // within the flex item instead of overflowing the row.
+    const lineBody = css({
+        flex: "1 1 auto",
+        minWidth: 0,
+        label: "line-body",
+    });
     const unselectable = css({
         userSelect: "none",
         label: "unselectable",
@@ -227,18 +268,38 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         label: "code-fold-gutter",
         minWidth: "50px",
         width: "50px",
+        // Neutralize host `:where(th,td){ padding }` on the fold gutter cell.
+        padding: 0,
         textAlign: "center",
         fill: variables.codeFoldContentColor,
     });
     const codeFoldContentContainer = css({
-        padding: "",
+        // Neutralize host `:where(th,td){ padding }` on the fold content cell.
+        padding: 0,
+        // Clip the button to the cell box so any residual misalignment can't bleed into the row flow.
+        overflow: "hidden",
+        // `diffContainer`'s `& td` isolation reset pins vertical-align:baseline at specificity
+        // (0,2,0), which out-ranks this single class and drags the fold cell back onto the row
+        // baseline (the ~2-3px offset). Self-chain the selector to (0,3,0) so the fold cell's
+        // middle alignment wins over that reset.
+        "&&&": {
+            verticalAlign: "middle",
+        },
+        label: "code-fold-content-container",
     });
     const codeFoldExpandButton = css({
         background: variables.codeFoldBackground,
         cursor: "pointer",
-        display: "inline",
+        // `display: inline` puts the button in the cell's line box, so baseline/line-height
+        // metrics nudge it ~2-3px down from the cell top and it spills past the bottom.
+        // A block box leaves the inline formatting context and sits flush.
+        display: "block",
         margin: 0,
+        padding: 0,
         border: "none",
+        font: "inherit",
+        lineHeight: "inherit",
+        textAlign: "left",
         fill: variables.codeFoldContentColor,
         label: "code-fold-expand-button",
     });
@@ -270,6 +331,14 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         fontWeight: 700,
         cursor: "pointer",
         label: "code-fold",
+        // The fold row has empty/classless placeholder cells (spacer gutters, line-number
+        // stand-ins) that pin no padding of their own. Host `:where(th,td){ padding }`
+        // (daisyui `.table`) inflates their vertical padding and stretches the fold row
+        // out of line with the code rows. Zero block padding on every cell in the row.
+        "& td": {
+            paddingTop: 0,
+            paddingBottom: 0,
+        },
         "&:hover": {
             color: variables.diffViewerColor,
             fill: variables.diffViewerColor,
@@ -294,6 +363,10 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         width: 28,
         paddingLeft: 10,
         paddingRight: 10,
+        // Host `padding-block` (daisyui `:where(th,td){ padding }`) would misalign the
+        // +/- marker against its line; pin the vertical padding to zero.
+        paddingTop: 0,
+        paddingBottom: 0,
         userSelect: "none",
         label: "marker",
         [`&.${diffAdded}`]: {
@@ -363,6 +436,11 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         verticalAlign: "baseline",
         label: "line",
         textDecoration: "none",
+        // Neutralize host row styling (e.g. daisyui `.table-zebra` striping and the
+        // `tr { font-size }` set by `.table-*` size variants). Cell-level diff colours
+        // are painted on the td, so a transparent row lets them show through.
+        backgroundColor: "transparent",
+        fontSize: 12,
     });
     const column = css({});
     const defaultStyles = {
@@ -394,6 +472,9 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         emptyLine,
         lineNumber,
         contentText,
+        contentFlex,
+        lineIndent,
+        lineBody,
         content,
         column,
         codeFoldContent,