Skip to content

Commit 42419f8

Browse files
MrWangJustToDoMrWangJustToDo
committed
refactor css
1 parent 820912f commit 42419f8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+470
-652
lines changed

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@
3838
"eslint": "^8.57.0",
3939
"husky": "^8.0.2",
4040
"postcss": "^8.4.47",
41+
"postcss-cli": "^11.0.0",
42+
"postcss-import": "^16.1.0",
4143
"postcss-prefix-selector": "^1.16.1",
4244
"prettier": "^3.3.3",
4345
"prettier-plugin-tailwindcss": "^0.6.8",

‎packages/react/index.d.ts

+4-113
Original file line numberDiff line numberDiff line change
@@ -627,125 +627,16 @@ export type SyntaxNode = {
627627
};
628628
children?: SyntaxNode[];
629629
};
630-
declare const createDiffConfigStore: (props: DiffViewProps<any>, diffFileId: string) => import("reactivity-store").UseSelectorWithStore<{
631-
id: import("reactivity-store").Ref<string, string>;
632-
setId: (_id: string) => string;
633-
mode: import("reactivity-store").Ref<DiffModeEnum, DiffModeEnum>;
634-
setMode: (_mode: DiffModeEnum) => DiffModeEnum;
635-
enableWrap: import("reactivity-store").Ref<boolean, boolean>;
636-
setEnableWrap: (_enableWrap: boolean) => boolean;
637-
enableAddWidget: import("reactivity-store").Ref<boolean, boolean>;
638-
setEnableAddWidget: (_enableAddWidget: boolean) => boolean;
639-
enableHighlight: import("reactivity-store").Ref<boolean, boolean>;
640-
setEnableHighlight: (_enableHighlight: boolean) => boolean;
641-
fontSize: import("reactivity-store").Ref<number, number>;
642-
setFontSize: (_fontSize: number) => number;
643-
extendData: import("reactivity-store").Ref<{
644-
oldFile: {
645-
[x: string]: {
646-
data: any;
647-
};
648-
};
649-
newFile: {
650-
[x: string]: {
651-
data: any;
652-
};
653-
};
654-
}, {
655-
oldFile: {
656-
[x: string]: {
657-
data: any;
658-
};
659-
};
660-
newFile: {
661-
[x: string]: {
662-
data: any;
663-
};
664-
};
665-
} | {
666-
oldFile: {
667-
[x: string]: {
668-
data: any;
669-
};
670-
};
671-
newFile: {
672-
[x: string]: {
673-
data: any;
674-
};
675-
};
676-
}>;
677-
setExtendData: (_extendData: DiffViewProps<any>["extendData"]) => void;
678-
renderWidgetLine: import("reactivity-store").Ref<({ diffFile, side, lineNumber, onClose, }: {
679-
lineNumber: number;
680-
side: SplitSide;
681-
diffFile: DiffFile;
682-
onClose: () => void;
683-
}) => import("react").ReactNode, ({ diffFile, side, lineNumber, onClose, }: {
684-
lineNumber: number;
685-
side: SplitSide;
686-
diffFile: DiffFile;
687-
onClose: () => void;
688-
}) => import("react").ReactNode>;
689-
setRenderWidgetLine: (_renderWidgetLine: ({ diffFile, side, lineNumber, onClose, }: {
690-
lineNumber: number;
691-
side: SplitSide;
692-
diffFile: DiffFile;
693-
onClose: () => void;
694-
}) => import("react").ReactNode) => ({ diffFile, side, lineNumber, onClose, }: {
695-
lineNumber: number;
696-
side: SplitSide;
697-
diffFile: DiffFile;
698-
onClose: () => void;
699-
}) => import("react").ReactNode;
700-
renderExtendLine: import("reactivity-store").Ref<({ diffFile, side, data, lineNumber, onUpdate, }: {
701-
lineNumber: number;
702-
side: SplitSide;
703-
data: any;
704-
diffFile: DiffFile;
705-
onUpdate: () => void;
706-
}) => import("react").ReactNode, ({ diffFile, side, data, lineNumber, onUpdate, }: {
707-
lineNumber: number;
708-
side: SplitSide;
709-
data: any;
710-
diffFile: DiffFile;
711-
onUpdate: () => void;
712-
}) => import("react").ReactNode>;
713-
setRenderExtendLine: (_renderExtendLine: ({ diffFile, side, data, lineNumber, onUpdate, }: {
714-
lineNumber: number;
715-
side: SplitSide;
716-
data: any;
717-
diffFile: DiffFile;
718-
onUpdate: () => void;
719-
}) => import("react").ReactNode) => ({ diffFile, side, data, lineNumber, onUpdate, }: {
720-
lineNumber: number;
721-
side: SplitSide;
722-
data: any;
723-
diffFile: DiffFile;
724-
onUpdate: () => void;
725-
}) => import("react").ReactNode;
726-
onAddWidgetClick: {
727-
current: (lineNumber: number, side: SplitSide) => void;
728-
};
729-
setOnAddWidgetClick: (_onAddWidgetClick: {
730-
current: (lineNumber: number, side: SplitSide) => void;
731-
}) => (lineNumber: number, side: SplitSide) => void;
732-
}>;
630+
export declare enum SplitSide {
631+
old = 1,
632+
new = 2
633+
}
733634
export declare enum DiffModeEnum {
734635
SplitGitHub = 1,
735636
SplitGitLab = 2,
736637
Split = 3,
737638
Unified = 4
738639
}
739-
export declare const DiffViewContext: import("react").Context<{
740-
useDiffContext: ReturnType<typeof createDiffConfigStore>;
741-
}>;
742-
export declare const useDiffViewContext: () => {
743-
useDiffContext: ReturnType<typeof createDiffConfigStore>;
744-
};
745-
export declare enum SplitSide {
746-
old = 1,
747-
new = 2
748-
}
749640
export type DiffViewProps<T> = {
750641
data?: {
751642
oldFile?: {

‎packages/react/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@
1414
],
1515
"scripts": {
1616
"gen:type": "dts-bundle-generator -o index.d.ts dist/types/index.d.ts",
17-
"gen:css": "postcss src/style --dir dist/css"
17+
"gen:css1": "postcss src/tailwind.css -o dist/css/diff-view.css",
18+
"gen:css2": "postcss src/tailwind_pure.css -o dist/css/diff-view-pure.css",
19+
"gen:css": "npm run gen:css1 && npm run gen:css2"
1820
},
1921
"repository": {
2022
"type": "git",
@@ -33,7 +35,7 @@
3335
},
3436
"buildOptions": [
3537
{
36-
"input": "./src/index.withStyle.ts",
38+
"input": "./src/index.ts",
3739
"output": [
3840
{
3941
"dir": "./dist",
@@ -76,8 +78,6 @@
7678
"@types/use-sync-external-store": "^0.0.6",
7779
"autoprefixer": "^10.4.20",
7880
"postcss": "^8.4.47",
79-
"postcss-cli": "^11.0.0",
80-
"postcss-import": "^16.1.0",
8181
"react": "^18.0.0",
8282
"tailwindcss": "^3.4.14"
8383
},

‎packages/react/postcss.config.js

+9-4
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,15 @@ module.exports = {
88
prefix: ".diff-tailwindcss-wrapper",
99
transform: function (prefix, selector, prefixedSelector, _filePath, rule) {
1010
const filePath = rule.source?.input?.file;
11-
// ignore base css
12-
// TODO next release update
13-
if (rule.source?.start?.line === 1 && rule.source?.start?.column === 1) {
14-
return selector;
11+
if (filePath.includes("_base.css")) {
12+
if (rule.source?.start?.line === 1) {
13+
return selector;
14+
} else {
15+
return prefixedSelector;
16+
}
17+
}
18+
if (filePath.includes("_base_pure.css")) {
19+
return prefixedSelector;
1520
}
1621
if (selector.includes("diff-line-extend-wrapper") || selector.includes("diff-line-widget-wrapper")) {
1722
return selector;

‎packages/react/src/_base.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎packages/react/src/_base_pure.css

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@tailwind components;
2+
@tailwind utilities;

‎packages/react/src/_com.css

+168
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
[data-theme="light"] .diff-style-root {
6+
--diff-border--: #dedede;
7+
--diff-add-content--: #e6ffec;
8+
--diff-del-content--: #ffebe9;
9+
--diff-add-lineNumber--: #ccffd8;
10+
--diff-del-lineNumber--: #ffd7d5;
11+
--diff-plain-content--: #ffffff;
12+
--diff-expand-content--: #fafafa;
13+
--diff-plain-lineNumber--: #fafafa;
14+
--diff-plain-lineNumber-color--: #555555;
15+
--diff-hunk-content--: #ddf4ff;
16+
--diff-hunk-lineNumber--: #c7ecff;
17+
--diff-hunk-lineNumber-hover--: #0969da;
18+
--diff-add-content-highlight--: #abf2bc;
19+
--diff-del-content-highlight--: #ffb3ad;
20+
--diff-add-widget--: #0969d2;
21+
--diff-add-widget-color--: #ffffff;
22+
--diff-empty-content--: #fafafa;
23+
--diff-hunk-content-color--: #777777;
24+
25+
color: black;
26+
}
27+
28+
.diff-style-root .diff-line-syntax-raw *,
29+
[data-theme="light"] .diff-line-syntax-raw * {
30+
color: var(--diff-view-light, inherit);
31+
font-weight: var(--diff-view-light-font-weight, inherit);
32+
}
33+
34+
[data-theme="dark"] .diff-style-root {
35+
--diff-border--: #3d444d;
36+
--diff-add-content--: #14261f;
37+
--diff-del-content--: #311b1f;
38+
--diff-add-lineNumber--: #1f4429;
39+
--diff-del-lineNumber--: #552527;
40+
--diff-plain-content--: #0d1117;
41+
--diff-expand-content--: #161b22;
42+
--diff-plain-lineNumber--: #161b22;
43+
--diff-plain-lineNumber-color--: #a0aaab;
44+
--diff-hunk-content--: #131d2e;
45+
--diff-hunk-lineNumber--: #204274;
46+
--diff-hunk-lineNumber-hover--: #1f6feb;
47+
--diff-add-content-highlight--: #1f572d;
48+
--diff-del-content-highlight--: #80312f;
49+
--diff-add-widget--: #0969d2;
50+
--diff-add-widget-color--: #ffffff;
51+
--diff-empty-content--: #161b22;
52+
--diff-hunk-content-color--: #9298a0;
53+
54+
color: white;
55+
}
56+
57+
[data-theme="dark"] .diff-line-syntax-raw * {
58+
color: var(--diff-view-dark, inherit);
59+
font-weight: var(--diff-view-dark-font-weight, inherit);
60+
}
61+
62+
table,
63+
tr,
64+
td {
65+
border-color: transparent;
66+
border-width: 0px;
67+
text-align: left;
68+
}
69+
70+
.diff-line-old-num,
71+
.diff-line-new-num,
72+
.diff-line-num {
73+
text-align: right;
74+
}
75+
76+
.diff-style-root tr {
77+
content-visibility: auto;
78+
}
79+
80+
.diff-add-widget-wrapper {
81+
transform-origin: center;
82+
transform: translateX(-50%) !important;
83+
}
84+
85+
.diff-line-old-content .diff-add-widget-wrapper,
86+
.diff-line-new-content .diff-add-widget-wrapper {
87+
transform: translateX(50%) !important;
88+
}
89+
90+
.diff-add-widget-wrapper:hover {
91+
transform: translateX(-50%) scale(1.1) !important;
92+
}
93+
94+
.diff-line-old-content .diff-add-widget-wrapper:hover,
95+
.diff-line-new-content .diff-add-widget-wrapper:hover {
96+
transform: translateX(50%) scale(1.1) !important;
97+
}
98+
99+
.diff-widget-tooltip {
100+
position: relative;
101+
}
102+
103+
.diff-add-widget,
104+
.diff-widget-tooltip {
105+
font-family: inherit;
106+
font-feature-settings: inherit;
107+
font-variation-settings: inherit;
108+
font-size: 100%;
109+
font-weight: inherit;
110+
line-height: inherit;
111+
letter-spacing: inherit;
112+
color: inherit;
113+
margin: 0;
114+
text-transform: none;
115+
border-width: 0px;
116+
background-color: transparent;
117+
background-image: none;
118+
}
119+
120+
.diff-widget-tooltip::after {
121+
display: none;
122+
box-sizing: border-box;
123+
background-color: #555555;
124+
position: absolute;
125+
content: attr(data-title);
126+
font-size: 11px;
127+
padding: 1px 2px;
128+
border-radius: 4px;
129+
overflow: hidden;
130+
top: 50%;
131+
white-space: nowrap;
132+
transform: translateY(-50%);
133+
left: calc(100% + 8px);
134+
color: #ffffff;
135+
}
136+
137+
.diff-widget-tooltip::before {
138+
display: none;
139+
box-sizing: border-box;
140+
content: "";
141+
position: absolute;
142+
top: 50%;
143+
left: calc(100% - 2px);
144+
transform: translateY(-50%);
145+
border: 6px solid transparent;
146+
border-right-color: #555555;
147+
}
148+
149+
.diff-widget-tooltip:hover {
150+
background-color: var(--diff-hunk-lineNumber-hover--);
151+
color: white;
152+
}
153+
154+
.diff-widget-tooltip:hover::before {
155+
display: block;
156+
}
157+
158+
.diff-widget-tooltip:hover::after {
159+
display: block;
160+
}
161+
162+
.diff-line-extend-wrapper * {
163+
color: initial;
164+
}
165+
166+
.diff-line-widget-wrapper * {
167+
color: initial;
168+
}

‎packages/react/src/_theme.css

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@import url(highlight.js/styles/github.css);
2+
@import url(highlight.js/styles/github-dark.css);

‎packages/react/src/components/DiffSplitContentLineNormal.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,12 @@ import {
88
} from "@git-diff-view/utils";
99
import * as React from "react";
1010

11-
import { useDiffViewContext, SplitSide } from "..";
11+
import { SplitSide } from "..";
1212

1313
import { DiffSplitAddWidget } from "./DiffAddWidget";
1414
import { DiffContent } from "./DiffContent";
1515
// import { DiffContent_v2 } from "./DiffContent_v2";
16+
import { useDiffViewContext } from "./DiffViewContext";
1617
import { useDiffWidgetContext } from "./DiffWidgetContext";
1718

1819
const _DiffSplitLine = ({

‎packages/react/src/components/DiffSplitContentLineWrap.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,12 @@ import {
88
} from "@git-diff-view/utils";
99
import * as React from "react";
1010

11-
import { SplitSide, useDiffViewContext } from "..";
11+
import { SplitSide } from "..";
1212

1313
import { DiffSplitAddWidget } from "./DiffAddWidget";
1414
import { DiffContent } from "./DiffContent";
1515
// import { DiffContent_v2 } from "./DiffContent_v2";
16+
import { useDiffViewContext } from "./DiffViewContext";
1617
import { useDiffWidgetContext } from "./DiffWidgetContext";
1718

1819
const _DiffSplitLine = ({ index, diffFile, lineNumber }: { index: number; diffFile: DiffFile; lineNumber: number }) => {

0 commit comments

Comments
 (0)