@git-diff-view/react 0.0.30 → 0.0.32

package/index.d.ts

@@ -1,5 +1,6 @@
 // Generated by dts-bundle-generator v9.5.1
 
+import { Root } from 'hast';
 import { CSSProperties, ForwardedRef, ReactNode, RefObject } from 'react';
 
 declare class Cache$1<K, V> extends Map<K, V> {
@@ -276,8 +277,10 @@ export declare class DiffLine {
 	changes?: IRange;
 	diffChanges?: DiffRange;
 	plainTemplate?: string;
+	plainTemplateMode?: "fast-diff" | "relative";
 	syntaxTemplate?: string;
-	constructor(text: string, type: DiffLineType, originalLineNumber: number | null, oldLineNumber: number | null, newLineNumber: number | null, noTrailingNewLine?: boolean, changes?: IRange, diffChanges?: DiffRange, plainTemplate?: string, syntaxTemplate?: string);
+	syntaxTemplateMode?: "fast-diff" | "relative";
+	constructor(text: string, type: DiffLineType, originalLineNumber: number | null, oldLineNumber: number | null, newLineNumber: number | null, noTrailingNewLine?: boolean, changes?: IRange, diffChanges?: DiffRange, plainTemplate?: string, plainTemplateMode?: "fast-diff" | "relative", syntaxTemplate?: string, syntaxTemplateMode?: "fast-diff" | "relative");
 	withNoTrailingNewLine(noTrailingNewLine: boolean): DiffLine;
 	isIncludeableLine(): boolean;
 	equals(other: DiffLine): boolean;
@@ -426,6 +429,7 @@ export declare const checkCurrentLineIsHidden: (diffFile: DiffFile, lineNumber:
 	unified: boolean;
 };
 export declare const checkDiffLineIncludeChange: (diffLine?: DiffLine) => boolean;
+export declare const defaultTransform: (content: string) => string;
 export declare const disableCache: () => void;
 export declare const getCurrentComposeLength: () => number;
 export declare const getDiffRange: (additions: DiffLine[], deletions: DiffLine[], { getAdditionRaw, getDeletionRaw, getAdditionSyntax, getDeletionSyntax, }: {
@@ -434,12 +438,18 @@ export declare const getDiffRange: (additions: DiffLine[], deletions: DiffLine[]
 	getAdditionSyntax: (lineNumber: number) => SyntaxLineWithTemplate;
 	getDeletionSyntax: (lineNumber: number) => SyntaxLineWithTemplate;
 }) => void;
+export declare const getEnableFastDiffTemplate: () => boolean;
 export declare const getLang: (fileName: string) => string;
 export declare const getPlainDiffTemplate: ({ diffLine, rawLine, operator, }: {
 	diffLine: DiffLine;
 	rawLine: string;
 	operator: "add" | "del";
 }) => void;
+export declare const getPlainDiffTemplateByFastDiff: ({ diffLine, rawLine, operator, }: {
+	diffLine: DiffLine;
+	rawLine: string;
+	operator: "add" | "del";
+}) => void;
 export declare const getPlainLineTemplate: (line: string) => string;
 export declare const getSplitContentLines: (diffFile: DiffFile) => DiffSplitContentLineItem[];
 export declare const getSplitLines: (diffFile: DiffFile) => DiffSplitLineItem[];
@@ -448,6 +458,11 @@ export declare const getSyntaxDiffTemplate: ({ diffLine, syntaxLine, operator, }
 	syntaxLine: SyntaxLineWithTemplate;
 	operator: "add" | "del";
 }) => void;
+export declare const getSyntaxDiffTemplateByFastDiff: ({ diffLine, syntaxLine, operator, }: {
+	diffLine: DiffLine;
+	syntaxLine: SyntaxLineWithTemplate;
+	operator: "add" | "del";
+}) => void;
 export declare const getSyntaxLineTemplate: (line: SyntaxLine) => string;
 export declare const getUnifiedContentLine: (diffFile: DiffFile) => DiffUnifiedContentLineItem[];
 export declare const getUnifiedLines: (diffFile: DiffFile) => DiffUnifiedLineItem[];
@@ -496,6 +511,7 @@ export declare const processTransformForFile: (content: string) => string;
  */
 export declare const processTransformTemplateContent: (content: string) => string;
 export declare const resetDefaultComposeLength: () => void;
+export declare const resetEnableFastDiffTemplate: () => void;
 /**
  * Resets all transformation functions to their default state and disables transformation.
  *
@@ -505,6 +521,7 @@ export declare const resetDefaultComposeLength: () => void;
  * ```
  */
 export declare const resetTransform: () => void;
+export declare const setEnableFastDiffTemplate: (enable: boolean) => void;
 /**
  * ⚠️ **WARNING: DANGEROUS OPERATION** ⚠️
  *
@@ -617,7 +634,8 @@ export interface DiffRange {
 	readonly range: {
 		type: 1 | -1 | 0;
 		str: string;
-		location: number;
+		startIndex: number;
+		endIndex: number;
 		length: number;
 	}[];
 	readonly hasLineChange?: boolean;
@@ -682,7 +700,7 @@ export interface UnifiedLineItem {
 	isHidden?: boolean;
 	_isHidden?: boolean;
 }
-export type DiffAST = ReturnType<typeof lowlight.highlight>;
+export type DiffAST = Root;
 export type DiffHighlighter = {
 	name: string;
 	type: "class" | "style" | string;
@@ -780,7 +798,6 @@ export type SyntaxLine = {
 export type SyntaxLineWithTemplate = SyntaxLine & {
 	template?: string;
 };
-// Generated by dts-bundle-generator v9.5.1
 export type SyntaxNode = {
 	type: string;
 	value: string;
@@ -804,6 +821,8 @@ declare const createDiffConfigStore: (props: DiffViewProps<any> & {
 }, diffFileId: string) => import("reactivity-store").UseSelectorWithStore<{
 	id: import("reactivity-store").Ref<string, string>;
 	setId: (_id: string) => string;
+	dom: import("reactivity-store").Ref<HTMLElement, HTMLElement>;
+	setDom: (_dom: HTMLElement) => HTMLElement;
 	mode: import("reactivity-store").Ref<DiffModeEnum, DiffModeEnum>;
 	setMode: (_mode: DiffModeEnum) => DiffModeEnum;
 	mounted: import("reactivity-store").Ref<boolean, boolean>;

package/package.json

@@ -3,7 +3,7 @@
   "description": "@git-diff-view/react",
   "author": "MrWangJustToDo",
   "license": "MIT",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "main": "index.js",
   "types": "index.d.ts",
   "files": [
@@ -61,7 +61,7 @@
     "react diff component"
   ],
   "dependencies": {
-    "@git-diff-view/core": "^0.0.30",
+    "@git-diff-view/core": "^0.0.32",
     "@types/hast": "^3.0.0",
     "fast-diff": "^1.3.0",
     "highlight.js": "^11.11.0",

package/src/_com.css

@@ -71,6 +71,10 @@ td {
   text-align: left;
 }
 
+td {
+  padding: 0;
+}
+
 .diff-line-old-num,
 .diff-line-new-num,
 .diff-line-num {

package/src/components/DiffAddWidget.tsx

@@ -28,6 +28,7 @@ export const DiffSplitAddWidget = ({
       style={{
         width: `calc(var(${diffFontSizeName}) * 1.4)`,
         height: `calc(var(${diffFontSizeName}) * 1.4)`,
+        top: `calc(var(${diffFontSizeName}) * 0.1)`,
       }}
     >
       <button
@@ -62,10 +63,11 @@ export const DiffUnifiedAddWidget = ({
 }) => {
   return (
     <div
-      className="diff-add-widget-wrapper invisible absolute left-[100%] top-[1px] translate-x-[-50%] select-none transition-transform hover:scale-110 group-hover:visible"
+      className="diff-add-widget-wrapper invisible absolute left-[100%] translate-x-[-50%] select-none transition-transform hover:scale-110 group-hover:visible"
       style={{
         width: `calc(var(${diffFontSizeName}) * 1.4)`,
         height: `calc(var(${diffFontSizeName}) * 1.4)`,
+        top: `calc(var(${diffFontSizeName}) * 0.1)`,
       }}
     >
       <button

package/src/components/DiffSplitContentLineNormal.tsx

@@ -13,7 +13,6 @@ import { SplitSide } from "..";
 
 import { DiffSplitAddWidget } from "./DiffAddWidget";
 import { DiffContent } from "./DiffContent";
-// import { DiffContent_v2 } from "./DiffContent_v2";
 import { useDiffViewContext } from "./DiffViewContext";
 import { useDiffWidgetContext } from "./DiffWidgetContext";
 

package/src/components/DiffSplitContentLineWrap.tsx

@@ -13,7 +13,6 @@ import { SplitSide } from "..";
 
 import { DiffSplitAddWidget } from "./DiffAddWidget";
 import { DiffContent } from "./DiffContent";
-// import { DiffContent_v2 } from "./DiffContent_v2";
 import { useDiffViewContext } from "./DiffViewContext";
 import { useDiffWidgetContext } from "./DiffWidgetContext";
 
@@ -77,7 +76,10 @@ const InternalDiffSplitLine = ({
           <td
             className="diff-line-old-num group relative w-[1%] min-w-[40px] select-none pl-[10px] pr-[10px] text-right align-top"
             data-side={SplitSide[SplitSide.old]}
-            style={{ backgroundColor: oldLineNumberBG, color: `var(${plainLineNumberColorName})` }}
+            style={{
+              backgroundColor: oldLineNumberBG,
+              color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
+            }}
           >
             {hasDiff && enableAddWidget && (
               <DiffSplitAddWidget

package/src/components/DiffSplitViewNormal.tsx

@@ -51,7 +51,7 @@ const DiffSplitViewTable = ({
           <th scope="col">{SplitSide[side]} line content</th>
         </tr>
       </thead>
-      <tbody className="diff-table-body leading-[1.4]" onMouseDownCapture={onMouseDown}>
+      <tbody className="diff-table-body leading-[1.6]" onMouseDownCapture={onMouseDown}>
         {lines.map((line) => (
           <Fragment key={line.index}>
             <DiffSplitHunkLine index={line.index} side={side} lineNumber={line.lineNumber} diffFile={diffFile} />

package/src/components/DiffSplitViewWrap.tsx

@@ -119,7 +119,7 @@ export const DiffSplitViewWrap = memo(({ diffFile }: { diffFile: DiffFile }) =>
               <th scope="col">new line content</th>
             </tr>
           </thead>
-          <tbody className="diff-table-body leading-[1.4]" onMouseDownCapture={onMouseDown}>
+          <tbody className="diff-table-body leading-[1.6]" onMouseDownCapture={onMouseDown}>
             {lines.map((line) => (
               <Fragment key={line.index}>
                 <DiffSplitHunkLine index={line.index} lineNumber={line.lineNumber} diffFile={diffFile} />

package/src/components/DiffUnifiedExtendLine.tsx

@@ -12,12 +12,14 @@ const InternalDiffUnifiedExtendLine = ({
   index,
   diffFile,
   lineNumber,
+  enableWrap,
   oldLineExtend,
   newLineExtend,
 }: {
   index: number;
   diffFile: DiffFile;
   lineNumber: number;
+  enableWrap: boolean;
   oldLineExtend: { data: any };
   newLineExtend: { data: any };
 }) => {
@@ -27,9 +29,10 @@ const InternalDiffUnifiedExtendLine = ({
 
   const unifiedItem = diffFile.getUnifiedLine(index);
 
+  // TODO use css variable to get width
   const width = useDomWidth({
     selector: ".unified-diff-table-wrapper",
-    enable: typeof renderExtendLine === "function",
+    enable: typeof renderExtendLine === "function" && !enableWrap,
   });
 
   if (!renderExtendLine) return null;
@@ -38,7 +41,7 @@ const InternalDiffUnifiedExtendLine = ({
     <tr data-line={`${lineNumber}-extend`} data-state="extend" className="diff-line diff-line-extend">
       <td className="diff-line-extend-content p-0 align-top" colSpan={2}>
         <div className="diff-line-extend-wrapper sticky left-0 z-[1]" style={{ width }}>
-          {width > 0 &&
+          {(enableWrap ? true : width > 0) &&
             oldLineExtend?.data !== undefined &&
             oldLineExtend?.data !== null &&
             renderExtendLine?.({
@@ -48,7 +51,7 @@ const InternalDiffUnifiedExtendLine = ({
               data: oldLineExtend.data,
               onUpdate: diffFile.notifyAll,
             })}
-          {width > 0 &&
+          {(enableWrap ? true : width > 0) &&
             newLineExtend?.data !== undefined &&
             newLineExtend?.data !== null &&
             renderExtendLine?.({
@@ -68,10 +71,12 @@ export const DiffUnifiedExtendLine = ({
   index,
   diffFile,
   lineNumber,
+  enableWrap,
 }: {
   index: number;
   diffFile: DiffFile;
   lineNumber: number;
+  enableWrap: boolean;
 }) => {
   const { useDiffContext } = useDiffViewContext();
 
@@ -96,6 +101,7 @@ export const DiffUnifiedExtendLine = ({
       index={index}
       diffFile={diffFile}
       lineNumber={lineNumber}
+      enableWrap={enableWrap}
       oldLineExtend={oldLineExtend}
       newLineExtend={newLineExtend}
     />

package/src/components/DiffUnifiedView.tsx

@@ -135,7 +135,7 @@ export const DiffUnifiedView = memo(({ diffFile }: { diffFile: DiffFile }) => {
                 <th scope="col">line content</th>
               </tr>
             </thead>
-            <tbody className="diff-table-body leading-[1.4]" onMouseDownCapture={onMouseDown}>
+            <tbody className="diff-table-body leading-[1.6]" onMouseDownCapture={onMouseDown}>
               {lines.map((item) => (
                 <Fragment key={item.index}>
                   <DiffUnifiedHunkLine index={item.index} lineNumber={item.lineNumber} diffFile={diffFile} />
@@ -147,8 +147,18 @@ export const DiffUnifiedView = memo(({ diffFile }: { diffFile: DiffFile }) => {
                     enableHighlight={enableHighlight}
                     enableAddWidget={enableAddWidget}
                   />
-                  <DiffUnifiedWidgetLine index={item.index} lineNumber={item.lineNumber} diffFile={diffFile} />
-                  <DiffUnifiedExtendLine index={item.index} lineNumber={item.lineNumber} diffFile={diffFile} />
+                  <DiffUnifiedWidgetLine
+                    index={item.index}
+                    lineNumber={item.lineNumber}
+                    diffFile={diffFile}
+                    enableWrap={enableWrap}
+                  />
+                  <DiffUnifiedExtendLine
+                    index={item.index}
+                    lineNumber={item.lineNumber}
+                    diffFile={diffFile}
+                    enableWrap={enableWrap}
+                  />
                 </Fragment>
               ))}
               <DiffUnifiedHunkLine

package/src/components/DiffUnifiedWidgetLine.tsx

@@ -12,10 +12,12 @@ const InternalDiffUnifiedWidgetLine = ({
   index,
   diffFile,
   lineNumber,
+  enableWrap,
 }: {
   index: number;
   diffFile: DiffFile;
   lineNumber: number;
+  enableWrap: boolean;
 }) => {
   const { useWidget } = useDiffWidgetContext();
 
@@ -42,7 +44,7 @@ const InternalDiffUnifiedWidgetLine = ({
 
   const width = useDomWidth({
     selector: ".unified-diff-table-wrapper",
-    enable: typeof renderWidgetLine === "function",
+    enable: typeof renderWidgetLine === "function" && !enableWrap,
   });
 
   if (!renderWidgetLine) return null;
@@ -51,10 +53,10 @@ const InternalDiffUnifiedWidgetLine = ({
     <tr data-line={`${lineNumber}-widget`} data-state="widget" className="diff-line diff-line-widget">
       <td className="diff-line-widget-content p-0" colSpan={2}>
         <div className="diff-line-widget-wrapper sticky left-0 z-[1]" style={{ width }}>
-          {width > 0 &&
+          {(enableWrap ? true : width > 0) &&
             oldWidget &&
             renderWidgetLine?.({ diffFile, side: SplitSide.old, lineNumber: unifiedItem.oldLineNumber, onClose })}
-          {width > 0 &&
+          {(enableWrap ? true : width > 0) &&
             newWidget &&
             renderWidgetLine?.({ diffFile, side: SplitSide.new, lineNumber: unifiedItem.newLineNumber, onClose })}
         </div>
@@ -67,10 +69,12 @@ export const DiffUnifiedWidgetLine = ({
   index,
   diffFile,
   lineNumber,
+  enableWrap,
 }: {
   index: number;
   diffFile: DiffFile;
   lineNumber: number;
+  enableWrap: boolean;
 }) => {
   const { useWidget } = useDiffWidgetContext();
 
@@ -100,5 +104,7 @@ export const DiffUnifiedWidgetLine = ({
 
   if (!currentIsShow) return null;
 
-  return <InternalDiffUnifiedWidgetLine index={index} diffFile={diffFile} lineNumber={lineNumber} />;
+  return (
+    <InternalDiffUnifiedWidgetLine index={index} diffFile={diffFile} lineNumber={lineNumber} enableWrap={enableWrap} />
+  );
 };

package/src/components/DiffView.tsx

@@ -210,6 +210,10 @@ const InternalDiffView = <T extends unknown>(
     onCreateUseWidgetHook,
   ]);
 
+  useEffect(() => {
+    useDiffContext.getReadonlyState().setDom(wrapperRef?.current);
+  }, [useDiffContext, wrapperRef]);
+
   const value = useMemo(() => ({ useDiffContext }), [useDiffContext]);
 
   return (
@@ -299,19 +303,23 @@ const DiffViewWithRef = <T extends unknown>(
   useEffect(() => {
     if (!diffFile) return;
     diffFile.initTheme(diffViewTheme);
+
     diffFile.initRaw();
+
     diffFile.buildSplitDiffLines();
+
     diffFile.buildUnifiedDiffLines();
   }, [diffFile, diffViewTheme]);
 
   useEffect(() => {
     if (!diffFile) return;
-    
+
     if (props.diffViewHighlight) {
       diffFile.initSyntax({ registerHighlighter });
-      diffFile.notifyAll();
     }
-  }, [diffFile, props.diffViewHighlight, registerHighlighter]);
+
+    diffFile.notifyAll();
+  }, [diffFile, props.diffViewHighlight, registerHighlighter, diffViewTheme]);
 
   useEffect(() => {
     if (!diffFile) return;
@@ -326,7 +334,7 @@ const DiffViewWithRef = <T extends unknown>(
     const cb = diffFile.subscribe(init);
 
     return cb;
-  }, [diffFile, diffViewTheme]);
+  }, [diffFile]);
 
   // fix react strict mode error
   useUnmount(() => (__DEV__ ? diffFile?._destroy?.() : diffFile?.clear?.()), [diffFile]);

package/src/components/tools.ts

@@ -5,6 +5,10 @@ import type { RefObject } from "react";
 
 export const createDiffConfigStore = (props: DiffViewProps<any> & { isMounted: boolean }, diffFileId: string) => {
   return createStore(() => {
+    const dom = ref<HTMLElement>();
+
+    const setDom = (_dom: HTMLElement) => (dom.value = _dom);
+
     const id = ref(diffFileId);
 
     const setId = (_id: string) => (id.value = _id);
@@ -85,6 +89,8 @@ export const createDiffConfigStore = (props: DiffViewProps<any> & { isMounted: b
     return {
       id,
       setId,
+      dom,
+      setDom,
       mode,
       setMode,
       mounted,

package/src/components/v2/DiffSplitViewNormal_v2.tsx

@@ -55,6 +55,8 @@ export const DiffSplitViewNormal = memo(({ diffFile }: { diffFile: DiffFile }) =
 
   const ref = useRef<HTMLStyleElement>();
 
+  const tempRef = useRef<SplitSide>();
+
   const splitLineLength = Math.max(diffFile.splitLineLength, diffFile.fileLineLength);
 
   const { useDiffContext } = useDiffViewContext();
@@ -105,13 +107,19 @@ export const DiffSplitViewNormal = memo(({ diffFile }: { diffFile: DiffFile }) =
       const state = ele.getAttribute("data-state");
       const side = ele.getAttribute("data-side");
       if (side) {
-        setStyle(SplitSide[side]);
-        removeAllSelection();
+        if (tempRef.current !== SplitSide[side]) {
+          tempRef.current = SplitSide[side];
+          setStyle(SplitSide[side]);
+          removeAllSelection();
+        }
       }
       if (state) {
         if (state === "extend" || state === "hunk" || state === "widget") {
-          setStyle(undefined);
-          removeAllSelection();
+          if (tempRef.current !== undefined) {
+            tempRef.current = undefined;
+            setStyle(undefined);
+            removeAllSelection();
+          }
           return;
         } else {
           return;
@@ -125,6 +133,16 @@ export const DiffSplitViewNormal = memo(({ diffFile }: { diffFile: DiffFile }) =
   return (
     <div className="split-diff-view split-diff-view-normal flex w-full basis-[50%]">
       <style data-select-style ref={ref} />
+      <style>
+        {`
+.diff-tailwindcss-wrapper .diff-add-widget-wrapper.diff-add-widget-wrapper.diff-add-widget-wrapper {
+  transform: translate(-50%, -50%) !important;
+}
+.diff-tailwindcss-wrapper .diff-add-widget-wrapper.diff-add-widget-wrapper.diff-add-widget-wrapper:hover {
+  transform: translate(-50%, -50%) scale(1.1) !important;
+}
+        `}
+      </style>
       <div
         className="old-diff-table-wrapper diff-table-scroll-container w-full overflow-x-auto overflow-y-hidden"
         ref={ref1}

package/src/hooks/useDomWidth.ts

@@ -1,3 +1,4 @@
+import { getElementRoot } from "@git-diff-view/utils";
 import { useEffect, useState } from "react";
 
 import { useDiffViewContext } from "../components/DiffViewContext";
@@ -12,11 +13,17 @@ export const useDomWidth = ({ selector, enable }: { selector: string; enable: bo
 
   const { useDiffContext } = useDiffViewContext();
 
-  const { id, mounted } = useDiffContext.useShallowStableSelector((s) => ({ id: s.id, mounted: s.mounted }));
+  const { id, mounted, dom } = useDiffContext.useShallowStableSelector((s) => ({
+    id: s.id,
+    mounted: s.mounted,
+    dom: s.dom,
+  }));
 
   useEffect(() => {
     if (enable) {
-      const container = document.querySelector(`#diff-root${id}`);
+      const rootDocument = getElementRoot(dom as HTMLDivElement);
+
+      const container = rootDocument.querySelector(`#diff-root${id}`);
 
       const wrapper = container?.querySelector(selector);
 
@@ -61,7 +68,7 @@ export const useDomWidth = ({ selector, enable }: { selector: string; enable: bo
 
       return () => cleanCb();
     }
-  }, [selector, enable, id, mounted]);
+  }, [selector, enable, id, mounted, dom]);
 
   return width;
 };

package/src/hooks/useSyncHeight.ts

@@ -1,3 +1,4 @@
+import { getElementRoot } from "@git-diff-view/utils";
 import { useEffect } from "react";
 
 import { useDiffViewContext } from "../components/DiffViewContext";
@@ -17,11 +18,17 @@ export const useSyncHeight = ({
 }) => {
   const { useDiffContext } = useDiffViewContext();
 
-  const { id, mounted } = useDiffContext.useShallowStableSelector((s) => ({ id: s.id, mounted: s.mounted }));
+  const { id, mounted, dom } = useDiffContext.useShallowStableSelector((s) => ({
+    id: s.id,
+    mounted: s.mounted,
+    dom: s.dom,
+  }));
 
   useEffect(() => {
     if (enable) {
-      const container = document.querySelector(`#diff-root${id}`);
+      const rootDocument = getElementRoot(dom as HTMLDivElement);
+
+      const container = rootDocument.querySelector(`#diff-root${id}`);
 
       const elements = Array.from(container?.querySelectorAll(selector) || []);
 
@@ -83,5 +90,5 @@ export const useSyncHeight = ({
         return () => cleanCb();
       }
     }
-  }, [selector, enable, side, id, wrapper, mounted]);
+  }, [selector, enable, side, id, wrapper, mounted, dom]);
 };

package/styles/diff-view-pure.css

@@ -50,9 +50,6 @@
 .diff-tailwindcss-wrapper .top-0 {
   top: 0px;
 }
-.diff-tailwindcss-wrapper .top-\[1px\] {
-  top: 1px;
-}
 .diff-tailwindcss-wrapper .top-\[50\%\] {
   top: 50%;
 }
@@ -155,6 +152,9 @@
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.diff-tailwindcss-wrapper .transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .diff-tailwindcss-wrapper .cursor-pointer {
   cursor: pointer;
 }
@@ -247,9 +247,6 @@
 .diff-tailwindcss-wrapper .text-\[1\.2em\] {
   font-size: 1.2em;
 }
-.diff-tailwindcss-wrapper .leading-\[1\.4\] {
-  line-height: 1.4;
-}
 .diff-tailwindcss-wrapper .leading-\[1\.6\] {
   line-height: 1.6;
 }
@@ -260,9 +257,6 @@
 .diff-tailwindcss-wrapper .opacity-\[0\.5\] {
   opacity: 0.5;
 }
-.diff-tailwindcss-wrapper .filter {
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
 .diff-tailwindcss-wrapper .transition-transform {
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -335,6 +329,9 @@
   border-width: 0px;
   text-align: left;
 }
+.diff-tailwindcss-wrapper td {
+  padding: 0;
+}
 .diff-tailwindcss-wrapper .diff-line-old-num,
 .diff-tailwindcss-wrapper .diff-line-new-num,
 .diff-tailwindcss-wrapper .diff-line-num {

package/styles/diff-view.css

@@ -556,9 +556,6 @@ video {
 .diff-tailwindcss-wrapper .top-0 {
   top: 0px;
 }
-.diff-tailwindcss-wrapper .top-\[1px\] {
-  top: 1px;
-}
 .diff-tailwindcss-wrapper .top-\[50\%\] {
   top: 50%;
 }
@@ -661,6 +658,9 @@ video {
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.diff-tailwindcss-wrapper .transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .diff-tailwindcss-wrapper .cursor-pointer {
   cursor: pointer;
 }
@@ -753,9 +753,6 @@ video {
 .diff-tailwindcss-wrapper .text-\[1\.2em\] {
   font-size: 1.2em;
 }
-.diff-tailwindcss-wrapper .leading-\[1\.4\] {
-  line-height: 1.4;
-}
 .diff-tailwindcss-wrapper .leading-\[1\.6\] {
   line-height: 1.6;
 }
@@ -766,9 +763,6 @@ video {
 .diff-tailwindcss-wrapper .opacity-\[0\.5\] {
   opacity: 0.5;
 }
-.diff-tailwindcss-wrapper .filter {
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
 .diff-tailwindcss-wrapper .transition-transform {
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -841,6 +835,9 @@ video {
   border-width: 0px;
   text-align: left;
 }
+.diff-tailwindcss-wrapper td {
+  padding: 0;
+}
 .diff-tailwindcss-wrapper .diff-line-old-num,
 .diff-tailwindcss-wrapper .diff-line-new-num,
 .diff-tailwindcss-wrapper .diff-line-num {