react-diff-viewer-continued 4.2.2 → 4.4.0

package/lib/cjs/src/styles.js

@@ -10,69 +10,74 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 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 = {} } = styleOverride, styles = __rest(styleOverride, ["variables"]);
     const themeVariables = {
-        light: Object.assign({
-            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",
-        }, (overrideVariables.light || {})),
-        dark: Object.assign({
-            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",
-        }, (overrideVariables.dark || {})),
+        light: Object.assign(Object.assign({}, defaultLightThemeVariables), (overrideVariables.light || {})),
+        dark: Object.assign(Object.assign({}, defaultDarkThemeVariables), (overrideVariables.dark || {})),
     };
     const variables = useDarkTheme ? themeVariables.dark : themeVariables.light;
     const { css, cx } = createEmotion({ key: "react-diff", 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({
@@ -114,6 +119,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",
         },
@@ -130,6 +147,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",
@@ -232,18 +273,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",
     });
@@ -275,6 +336,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,
@@ -299,6 +368,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}`]: {
@@ -368,6 +441,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 = {
@@ -399,6 +477,9 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         emptyLine,
         lineNumber,
         contentText,
+        contentFlex,
+        lineIndent,
+        lineBody,
         content,
         column,
         codeFoldContent,