react-diff-viewer-continued 4.0.0 → 4.0.2

package/lib/esm/src/index.js

@@ -0,0 +1,345 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import cn from 'classnames';
+import { computeLineInformation, DiffMethod, DiffType, } from './compute-lines';
+import computeStyles from './styles';
+import { computeHiddenBlocks } from "./compute-hidden-blocks";
+import { Expand } from "./expand";
+import memoize from 'memoize-one';
+import { Fold } from "./fold";
+export var LineNumberPrefix;
+(function (LineNumberPrefix) {
+    LineNumberPrefix["LEFT"] = "L";
+    LineNumberPrefix["RIGHT"] = "R";
+})(LineNumberPrefix || (LineNumberPrefix = {}));
+class DiffViewer extends React.Component {
+    styles;
+    static defaultProps = {
+        oldValue: '',
+        newValue: '',
+        splitView: true,
+        highlightLines: [],
+        disableWordDiff: false,
+        compareMethod: DiffMethod.CHARS,
+        styles: {},
+        hideLineNumbers: false,
+        extraLinesSurroundingDiff: 3,
+        showDiffOnly: true,
+        useDarkTheme: false,
+        linesOffset: 0,
+        nonce: '',
+    };
+    constructor(props) {
+        super(props);
+        this.state = {
+            expandedBlocks: [],
+            noSelect: undefined,
+        };
+    }
+    /**
+     * Resets code block expand to the initial stage. Will be exposed to the parent component via
+     * refs.
+     */
+    resetCodeBlocks = () => {
+        if (this.state.expandedBlocks.length > 0) {
+            this.setState({
+                expandedBlocks: [],
+            });
+            return true;
+        }
+        return false;
+    };
+    /**
+     * Pushes the target expanded code block to the state. During the re-render,
+     * this value is used to expand/fold unmodified code.
+     */
+    onBlockExpand = (id) => {
+        const prevState = this.state.expandedBlocks.slice();
+        prevState.push(id);
+        this.setState({
+            expandedBlocks: prevState,
+        });
+    };
+    /**
+     * Computes final styles for the diff viewer. It combines the default styles with the user
+     * supplied overrides. The computed styles are cached with performance in mind.
+     *
+     * @param styles User supplied style overrides.
+     */
+    computeStyles = memoize(computeStyles);
+    /**
+     * Returns a function with clicked line number in the closure. Returns an no-op function when no
+     * onLineNumberClick handler is supplied.
+     *
+     * @param id Line id of a line.
+     */
+    onLineNumberClickProxy = (id) => {
+        if (this.props.onLineNumberClick) {
+            return (e) => this.props.onLineNumberClick(id, e);
+        }
+        return () => { };
+    };
+    /**
+     * Maps over the word diff and constructs the required React elements to show word diff.
+     *
+     * @param diffArray Word diff information derived from line information.
+     * @param renderer Optional renderer to format diff words. Useful for syntax highlighting.
+     */
+    renderWordDiff = (diffArray, renderer) => {
+        return diffArray.map((wordDiff, i) => {
+            const content = renderer ? renderer(wordDiff.value) : wordDiff.value;
+            if (typeof content !== 'string')
+                return;
+            return wordDiff.type === DiffType.ADDED ?
+                _jsx("ins", { className: cn(this.styles.wordDiff, {
+                        [this.styles.wordAdded]: wordDiff.type === DiffType.ADDED,
+                    }), children: content }, i)
+                : wordDiff.type === DiffType.REMOVED ? _jsx("del", { className: cn(this.styles.wordDiff, {
+                        [this.styles.wordRemoved]: wordDiff.type === DiffType.REMOVED,
+                    }), children: content }, i) : _jsx("span", { className: cn(this.styles.wordDiff), children: content }, i);
+        });
+    };
+    /**
+     * Maps over the line diff and constructs the required react elements to show line diff. It calls
+     * renderWordDiff when encountering word diff. This takes care of both inline and split view line
+     * renders.
+     *
+     * @param lineNumber Line number of the current line.
+     * @param type Type of diff of the current line.
+     * @param prefix Unique id to prefix with the line numbers.
+     * @param value Content of the line. It can be a string or a word diff array.
+     * @param additionalLineNumber Additional line number to be shown. Useful for rendering inline
+     *  diff view. Right line number will be passed as additionalLineNumber.
+     * @param additionalPrefix Similar to prefix but for additional line number.
+     */
+    renderLine = (lineNumber, type, prefix, value, additionalLineNumber, additionalPrefix) => {
+        const lineNumberTemplate = `${prefix}-${lineNumber}`;
+        const additionalLineNumberTemplate = `${additionalPrefix}-${additionalLineNumber}`;
+        const highlightLine = this.props.highlightLines.includes(lineNumberTemplate) ||
+            this.props.highlightLines.includes(additionalLineNumberTemplate);
+        const added = type === DiffType.ADDED;
+        const removed = type === DiffType.REMOVED;
+        const changed = type === DiffType.CHANGED;
+        let content;
+        const hasWordDiff = Array.isArray(value);
+        if (hasWordDiff) {
+            content = this.renderWordDiff(value, this.props.renderContent);
+        }
+        else if (this.props.renderContent) {
+            content = this.props.renderContent(value);
+        }
+        else {
+            content = value;
+        }
+        let ElementType = 'div';
+        if (added && !hasWordDiff) {
+            ElementType = 'ins';
+        }
+        else if (removed && !hasWordDiff) {
+            ElementType = 'del';
+        }
+        return (_jsxs(_Fragment, { children: [!this.props.hideLineNumbers && (_jsx("td", { onClick: lineNumber && this.onLineNumberClickProxy(lineNumberTemplate), className: cn(this.styles.gutter, {
+                        [this.styles.emptyGutter]: !lineNumber,
+                        [this.styles.diffAdded]: added,
+                        [this.styles.diffRemoved]: removed,
+                        [this.styles.diffChanged]: changed,
+                        [this.styles.highlightedGutter]: highlightLine,
+                    }), children: _jsx("pre", { className: this.styles.lineNumber, children: lineNumber }) })), !this.props.splitView && !this.props.hideLineNumbers && (_jsx("td", { onClick: additionalLineNumber &&
+                        this.onLineNumberClickProxy(additionalLineNumberTemplate), className: cn(this.styles.gutter, {
+                        [this.styles.emptyGutter]: !additionalLineNumber,
+                        [this.styles.diffAdded]: added,
+                        [this.styles.diffRemoved]: removed,
+                        [this.styles.diffChanged]: changed,
+                        [this.styles.highlightedGutter]: highlightLine,
+                    }), children: _jsx("pre", { className: this.styles.lineNumber, children: additionalLineNumber }) })), this.props.renderGutter
+                    ? this.props.renderGutter({
+                        lineNumber,
+                        type,
+                        prefix,
+                        value,
+                        additionalLineNumber,
+                        additionalPrefix,
+                        styles: this.styles,
+                    })
+                    : null, _jsx("td", { className: cn(this.styles.marker, {
+                        [this.styles.emptyLine]: !content,
+                        [this.styles.diffAdded]: added,
+                        [this.styles.diffRemoved]: removed,
+                        [this.styles.diffChanged]: changed,
+                        [this.styles.highlightedLine]: highlightLine,
+                    }), children: _jsxs("pre", { children: [added && '+', removed && '-'] }) }), _jsx("td", { className: cn(this.styles.content, {
+                        [this.styles.emptyLine]: !content,
+                        [this.styles.diffAdded]: added,
+                        [this.styles.diffRemoved]: removed,
+                        [this.styles.diffChanged]: changed,
+                        [this.styles.highlightedLine]: highlightLine,
+                        left: prefix === LineNumberPrefix.LEFT,
+                        right: prefix === LineNumberPrefix.RIGHT,
+                    }), onMouseDown: () => {
+                        const elements = document.getElementsByClassName(prefix === LineNumberPrefix.LEFT ? 'right' : 'left');
+                        for (let i = 0; i < elements.length; i++) {
+                            const element = elements.item(i);
+                            element.classList.add(this.styles.noSelect);
+                        }
+                    }, title: added && !hasWordDiff ? "Added line" : removed && !hasWordDiff ? "Removed line" : undefined, children: _jsx(ElementType, { className: this.styles.contentText, children: content }) })] }));
+    };
+    /**
+     * Generates lines for split view.
+     *
+     * @param obj Line diff information.
+     * @param obj.left Life diff information for the left pane of the split view.
+     * @param obj.right Life diff information for the right pane of the split view.
+     * @param index React key for the lines.
+     */
+    renderSplitView = ({ left, right }, index) => {
+        return (_jsxs("tr", { className: this.styles.line, children: [this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value), this.renderLine(right.lineNumber, right.type, LineNumberPrefix.RIGHT, right.value)] }, index));
+    };
+    /**
+     * Generates lines for inline view.
+     *
+     * @param obj Line diff information.
+     * @param obj.left Life diff information for the added section of the inline view.
+     * @param obj.right Life diff information for the removed section of the inline view.
+     * @param index React key for the lines.
+     */
+    renderInlineView = ({ left, right }, index) => {
+        let content;
+        if (left.type === DiffType.REMOVED && right.type === DiffType.ADDED) {
+            return (_jsxs(React.Fragment, { children: [_jsx("tr", { className: this.styles.line, children: this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, null) }), _jsx("tr", { className: this.styles.line, children: this.renderLine(null, right.type, LineNumberPrefix.RIGHT, right.value, right.lineNumber) })] }, index));
+        }
+        if (left.type === DiffType.REMOVED) {
+            content = this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, null);
+        }
+        if (left.type === DiffType.DEFAULT) {
+            content = this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, right.lineNumber, LineNumberPrefix.RIGHT);
+        }
+        if (right.type === DiffType.ADDED) {
+            content = this.renderLine(null, right.type, LineNumberPrefix.RIGHT, right.value, right.lineNumber);
+        }
+        return (_jsx("tr", { className: this.styles.line, children: content }, index));
+    };
+    /**
+     * Returns a function with clicked block number in the closure.
+     *
+     * @param id Cold fold block id.
+     */
+    onBlockClickProxy = (id) => () => this.onBlockExpand(id);
+    /**
+     * Generates cold fold block. It also uses the custom message renderer when available to show
+     * cold fold messages.
+     *
+     * @param num Number of skipped lines between two blocks.
+     * @param blockNumber Code fold block id.
+     * @param leftBlockLineNumber First left line number after the current code fold block.
+     * @param rightBlockLineNumber First right line number after the current code fold block.
+     */
+    renderSkippedLineIndicator = (num, blockNumber, leftBlockLineNumber, rightBlockLineNumber) => {
+        const { hideLineNumbers, splitView } = this.props;
+        const message = this.props.codeFoldMessageRenderer ? (this.props.codeFoldMessageRenderer(num, leftBlockLineNumber, rightBlockLineNumber)) : (_jsxs("pre", { className: this.styles.codeFoldContent, children: ["Expand ", num, " lines ..."] }));
+        const content = (_jsx("td", { className: this.styles.codeFoldContentContainer, children: _jsx("a", { onClick: this.onBlockClickProxy(blockNumber), tabIndex: 0, children: message }) }));
+        const isUnifiedViewWithoutLineNumbers = !splitView && !hideLineNumbers;
+        return (_jsxs("tr", { className: this.styles.codeFold, children: [!hideLineNumbers && _jsx("td", { className: this.styles.codeFoldGutter }), this.props.renderGutter ? (_jsx("td", { className: this.styles.codeFoldGutter })) : null, _jsx("td", { className: cn({
+                        [this.styles.codeFoldGutter]: isUnifiedViewWithoutLineNumbers,
+                    }) }), isUnifiedViewWithoutLineNumbers ? (_jsxs(React.Fragment, { children: [_jsx("td", {}), content] })) : (_jsxs(React.Fragment, { children: [content, this.props.renderGutter ? _jsx("td", {}) : null, _jsx("td", {}), _jsx("td", {}), !hideLineNumbers ? _jsx("td", {}) : null] }))] }, `${leftBlockLineNumber}-${rightBlockLineNumber}`));
+    };
+    /**
+     * Generates the entire diff view.
+     */
+    renderDiff = () => {
+        const { oldValue, newValue, splitView, disableWordDiff, compareMethod, linesOffset, } = this.props;
+        const { lineInformation, diffLines } = computeLineInformation(oldValue, newValue, disableWordDiff, compareMethod, linesOffset, this.props.alwaysShowLines);
+        const extraLines = this.props.extraLinesSurroundingDiff < 0
+            ? 0
+            : Math.round(this.props.extraLinesSurroundingDiff);
+        const { lineBlocks, blocks } = computeHiddenBlocks(lineInformation, diffLines, extraLines);
+        const diffNodes = lineInformation.map((line, lineIndex) => {
+            if (this.props.showDiffOnly) {
+                const blockIndex = lineBlocks[lineIndex];
+                if (blockIndex !== undefined) {
+                    const lastLineOfBlock = blocks[blockIndex].endLine === lineIndex;
+                    if (!this.state.expandedBlocks.includes(blockIndex) && lastLineOfBlock) {
+                        return (_jsx(React.Fragment, { children: this.renderSkippedLineIndicator(blocks[blockIndex].lines, blockIndex, line.left.lineNumber, line.right.lineNumber) }, lineIndex));
+                    }
+                    else if (!this.state.expandedBlocks.includes(blockIndex)) {
+                        return null;
+                    }
+                }
+            }
+            return splitView
+                ? this.renderSplitView(line, lineIndex)
+                : this.renderInlineView(line, lineIndex);
+        });
+        return {
+            diffNodes,
+            blocks,
+            lineInformation
+        };
+    };
+    render = () => {
+        const { oldValue, newValue, useDarkTheme, leftTitle, rightTitle, splitView, hideLineNumbers, nonce, } = this.props;
+        if (this.props.compareMethod !== DiffMethod.JSON) {
+            if (typeof oldValue !== 'string' || typeof newValue !== 'string') {
+                throw Error('"oldValue" and "newValue" should be strings');
+            }
+        }
+        this.styles = this.computeStyles(this.props.styles, useDarkTheme, nonce);
+        const nodes = this.renderDiff();
+        let colSpanOnSplitView = 3;
+        let colSpanOnInlineView = 4;
+        if (hideLineNumbers) {
+            colSpanOnSplitView -= 1;
+            colSpanOnInlineView -= 1;
+        }
+        if (this.props.renderGutter) {
+            colSpanOnSplitView += 1;
+            colSpanOnInlineView += 1;
+        }
+        let deletions = 0, additions = 0;
+        nodes.lineInformation.forEach((l) => {
+            if (l.left.type === DiffType.ADDED) {
+                additions++;
+            }
+            if (l.right.type === DiffType.ADDED) {
+                additions++;
+            }
+            if (l.left.type === DiffType.REMOVED) {
+                deletions++;
+            }
+            if (l.right.type === DiffType.REMOVED) {
+                deletions++;
+            }
+        });
+        const totalChanges = deletions + additions;
+        const percentageAddition = Math.round((additions / totalChanges) * 100);
+        const blocks = [];
+        for (let i = 0; i < 5; i++) {
+            if (percentageAddition > i * 20) {
+                blocks.push(_jsx("span", { className: cn(this.styles.block, this.styles.blockAddition) }, i));
+            }
+            else {
+                blocks.push(_jsx("span", { className: cn(this.styles.block, this.styles.blockDeletion) }, i));
+            }
+        }
+        const allExpanded = this.state.expandedBlocks.length === nodes.blocks.length;
+        return (_jsxs("div", { children: [_jsxs("div", { className: this.styles.summary, role: 'banner', children: [_jsx("a", { style: { cursor: 'pointer' }, onClick: () => {
+                                this.setState({
+                                    expandedBlocks: allExpanded ? [] : nodes.blocks.map(b => b.index)
+                                });
+                            }, children: allExpanded ? _jsx(Fold, {}) : _jsx(Expand, {}) }), " ", totalChanges, _jsx("div", { style: { display: 'flex', gap: '1px' }, children: blocks }), this.props.summary ? _jsx("span", { children: this.props.summary }) : null] }), _jsx("table", { className: cn(this.styles.diffContainer, {
+                        [this.styles.splitView]: splitView,
+                    }), onMouseUp: () => {
+                        const elements = document.getElementsByClassName('right');
+                        for (let i = 0; i < elements.length; i++) {
+                            const element = elements.item(i);
+                            element.classList.remove(this.styles.noSelect);
+                        }
+                        const elementsLeft = document.getElementsByClassName('left');
+                        for (let i = 0; i < elementsLeft.length; i++) {
+                            const element = elementsLeft.item(i);
+                            element.classList.remove(this.styles.noSelect);
+                        }
+                    }, children: _jsxs("tbody", { children: [_jsxs("tr", { children: [!this.props.hideLineNumbers ? _jsx("td", { width: '50px' }) : null, !splitView && !this.props.hideLineNumbers ? _jsx("td", { width: '50px' }) : null, this.props.renderGutter ? _jsx("td", { width: '50px' }) : null, _jsx("td", { width: '28px' }), _jsx("td", { width: '100%' }), splitView ? _jsxs(_Fragment, { children: [!this.props.hideLineNumbers ? _jsx("td", { width: '50px' }) : null, this.props.renderGutter ? _jsx("td", { width: '50px' }) : null, _jsx("td", { width: '28px' }), _jsx("td", { width: '100%' })] }) : null] }), leftTitle || rightTitle ? _jsxs("tr", { children: [_jsx("td", { colSpan: (splitView ? colSpanOnSplitView : colSpanOnInlineView), className: cn(this.styles.titleBlock, this.styles.column), role: 'columnheader', children: leftTitle ? _jsx("pre", { className: this.styles.contentText, children: leftTitle }) : null }), splitView ? _jsx("td", { colSpan: colSpanOnSplitView, className: cn(this.styles.titleBlock, this.styles.column), role: 'columnheader', children: rightTitle ? _jsx("pre", { className: this.styles.contentText, children: rightTitle }) : null }) : null] }) : null, nodes.diffNodes] }) })] }));
+    };
+}
+export default DiffViewer;
+export { DiffMethod };

package/lib/esm/src/styles.js

@@ -0,0 +1,348 @@
+import createEmotion from '@emotion/css/create-instance';
+// eslint-disable-next-line import/no-anonymous-default-export
+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',
+            },
+            ...(overrideVariables.light || {}),
+        },
+        dark: {
+            ...{
+                diffViewerBackground: '#2e303c',
+                diffViewerColor: '#FFF',
+                addedBackground: '#044B53',
+                addedColor: 'white',
+                removedBackground: '#632F34',
+                removedColor: 'white',
+                changedBackground: '#3e302c',
+                wordAddedBackground: '#055d67',
+                wordRemovedBackground: '#7d383f',
+                addedGutterBackground: '#034148',
+                removedGutterBackground: '#632b30',
+                gutterBackground: '#2c2f3a',
+                gutterBackgroundDark: '#262933',
+                highlightBackground: '#2a3967',
+                highlightGutterBackground: '#2d4077',
+                codeFoldGutterBackground: '#262831',
+                codeFoldBackground: '#262831',
+                emptyLineBackground: '#363946',
+                gutterColor: '#666c87',
+                addedGutterColor: '#8c8c8c',
+                removedGutterColor: '#8c8c8c',
+                codeFoldContentColor: '#656a8b',
+                diffViewerTitleBackground: '#2f323e',
+                diffViewerTitleColor: '#757a9b',
+                diffViewerTitleBorderColor: '#353846',
+            },
+            ...(overrideVariables.dark || {}),
+        },
+    };
+    const variables = useDarkTheme ? themeVariables.dark : themeVariables.light;
+    const { css, cx } = createEmotion({ key: 'react-diff', nonce });
+    const content = css({
+        width: 'auto',
+        label: 'content',
+    });
+    const splitView = css({
+        label: 'split-view',
+    });
+    const summary = css({
+        background: variables.diffViewerTitleBackground,
+        color: variables.diffViewerTitleColor,
+        padding: '0.5em 1em',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.5em',
+        fontFamily: "monospace",
+        fill: variables.diffViewerTitleColor,
+    });
+    const diffContainer = css({
+        width: '100%',
+        minWidth: '1000px',
+        overflowX: 'auto',
+        tableLayout: 'fixed',
+        background: variables.diffViewerBackground,
+        pre: {
+            margin: 0,
+            whiteSpace: 'pre-wrap',
+            lineHeight: '1.6em',
+            width: 'fit-content'
+        },
+        label: 'diff-container',
+        borderCollapse: 'collapse',
+    });
+    const lineContent = css({
+        overflow: 'hidden',
+        width: '100%'
+    });
+    const contentText = css({
+        color: variables.diffViewerColor,
+        whiteSpace: 'pre-wrap',
+        fontFamily: 'monospace',
+        textDecoration: 'none',
+        label: 'content-text',
+    });
+    const unselectable = css({
+        userSelect: 'none',
+        label: 'unselectable',
+    });
+    const titleBlock = css({
+        background: variables.diffViewerTitleBackground,
+        padding: '0.5em',
+        lineHeight: '1.4em',
+        height: "2.4em",
+        overflow: 'hidden',
+        width: '50%',
+        borderBottom: `1px solid ${variables.diffViewerTitleBorderColor}`,
+        label: 'title-block',
+        ':last-child': {
+            borderLeft: `1px solid ${variables.diffViewerTitleBorderColor}`,
+        },
+        [`.${contentText}`]: {
+            color: variables.diffViewerTitleColor,
+        },
+    });
+    const lineNumber = css({
+        color: variables.gutterColor,
+        label: 'line-number',
+    });
+    const diffRemoved = css({
+        background: variables.removedBackground,
+        color: variables.removedColor,
+        pre: {
+            color: variables.removedColor,
+        },
+        [`.${lineNumber}`]: {
+            color: variables.removedGutterColor,
+        },
+        label: 'diff-removed',
+    });
+    const diffAdded = css({
+        background: variables.addedBackground,
+        color: variables.addedColor,
+        pre: {
+            color: variables.addedColor,
+        },
+        [`.${lineNumber}`]: {
+            color: variables.addedGutterColor,
+        },
+        label: 'diff-added',
+    });
+    const diffChanged = css({
+        background: variables.changedBackground,
+        [`.${lineNumber}`]: {
+            color: variables.gutterColor,
+        },
+        label: 'diff-changed',
+    });
+    const wordDiff = css({
+        padding: 2,
+        display: 'inline-flex',
+        borderRadius: 4,
+        wordBreak: 'break-all',
+        label: 'word-diff',
+    });
+    const wordAdded = css({
+        background: variables.wordAddedBackground,
+        textDecoration: 'none',
+        label: 'word-added',
+    });
+    const wordRemoved = css({
+        background: variables.wordRemovedBackground,
+        textDecoration: 'none',
+        label: 'word-removed',
+    });
+    const codeFoldGutter = css({
+        backgroundColor: variables.codeFoldGutterBackground,
+        label: 'code-fold-gutter',
+        minWidth: '50px',
+        width: '50px'
+    });
+    const codeFoldContentContainer = css({
+        padding: '8px 16px'
+    });
+    const codeFoldContent = css({
+        color: variables.codeFoldContentColor,
+        label: 'code-fold-content',
+    });
+    const block = css({
+        display: 'block',
+        width: '10px',
+        height: '10px',
+        backgroundColor: '#ddd',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: variables.diffViewerTitleBorderColor
+    });
+    const blockAddition = css({
+        backgroundColor: variables.wordAddedBackground
+    });
+    const blockDeletion = css({
+        backgroundColor: variables.wordRemovedBackground
+    });
+    const codeFold = css({
+        backgroundColor: variables.codeFoldBackground,
+        height: 40,
+        fontSize: 14,
+        alignItems: 'center',
+        userSelect: 'none',
+        fontWeight: 700,
+        label: 'code-fold',
+        a: {
+            textDecoration: 'underline !important',
+            cursor: 'pointer',
+            pre: {
+                display: 'inline',
+            },
+        },
+    });
+    const emptyLine = css({
+        backgroundColor: variables.emptyLineBackground,
+        label: 'empty-line',
+    });
+    const marker = css({
+        width: 28,
+        paddingLeft: 10,
+        paddingRight: 10,
+        userSelect: 'none',
+        label: 'marker',
+        [`&.${diffAdded}`]: {
+            pre: {
+                color: variables.addedColor,
+            },
+        },
+        [`&.${diffRemoved}`]: {
+            pre: {
+                color: variables.removedColor,
+            },
+        },
+    });
+    const highlightedLine = css({
+        background: variables.highlightBackground,
+        label: 'highlighted-line',
+        [`.${wordAdded}, .${wordRemoved}`]: {
+            backgroundColor: 'initial',
+        },
+    });
+    const highlightedGutter = css({
+        label: 'highlighted-gutter',
+    });
+    const gutter = css({
+        userSelect: 'none',
+        minWidth: 50,
+        width: '50px',
+        padding: '0 10px',
+        whiteSpace: 'nowrap',
+        label: 'gutter',
+        textAlign: 'right',
+        background: variables.gutterBackground,
+        '&:hover': {
+            cursor: 'pointer',
+            background: variables.gutterBackgroundDark,
+            pre: {
+                opacity: 1,
+            },
+        },
+        pre: {
+            opacity: 0.5,
+        },
+        [`&.${diffAdded}`]: {
+            background: variables.addedGutterBackground,
+        },
+        [`&.${diffRemoved}`]: {
+            background: variables.removedGutterBackground,
+        },
+        [`&.${highlightedGutter}`]: {
+            background: variables.highlightGutterBackground,
+            '&:hover': {
+                background: variables.highlightGutterBackground,
+            },
+        },
+    });
+    const emptyGutter = css({
+        '&:hover': {
+            background: variables.gutterBackground,
+            cursor: 'initial',
+        },
+        label: 'empty-gutter',
+    });
+    const line = css({
+        verticalAlign: 'baseline',
+        label: 'line',
+        textDecoration: 'none'
+    });
+    const column = css({});
+    const defaultStyles = {
+        diffContainer,
+        diffRemoved,
+        diffAdded,
+        diffChanged,
+        splitView,
+        marker,
+        highlightedGutter,
+        highlightedLine,
+        gutter,
+        line,
+        lineContent,
+        wordDiff,
+        wordAdded,
+        summary,
+        block,
+        blockAddition,
+        blockDeletion,
+        wordRemoved,
+        noSelect: unselectable,
+        codeFoldGutter,
+        codeFoldContentContainer,
+        codeFold,
+        emptyGutter,
+        emptyLine,
+        lineNumber,
+        contentText,
+        content,
+        column,
+        codeFoldContent,
+        titleBlock,
+    };
+    const computerOverrideStyles = Object.keys(styles).reduce((acc, key) => ({
+        ...acc,
+        ...{
+            [key]: css(styles[key]),
+        },
+    }), {});
+    return Object.keys(defaultStyles).reduce((acc, key) => ({
+        ...acc,
+        ...{
+            [key]: computerOverrideStyles[key]
+                ? cx(defaultStyles[key], computerOverrideStyles[key])
+                : defaultStyles[key],
+        },
+    }), {});
+};