@samitouri / QOS-React-2 / commits / 53ac219378

Devtools:-Removed unused CSS (#27032)

I tried to check out for the CSS bundle using the [eslint-plugin-css-modules](https://www.npmjs.com/package/eslint-plugin-css-modules), and ran it locally , seems like There are lot of unused styles and classes present . I have attached the output below after running the lint command. https://gist.github.com/Biki-das/647ceb7383b43cca9c8619e1dc33fe0d All the shared.css files should not be touched i feel as they are being used randomly by some file Thoughts @hoxyq

BIKI DAS committed Jul 3, 2023 at 16:46 UTC 53ac21937864c1c7fc3d9077bc2d80b3e11193e3
18 files changed +4 -109
packages/react-devtools-shared/src/devtools/views/Components/EditableValue.css
-5
@@ -33,8 +33,3 @@
33 background-color: var(--color-button-background-focus);
34 outline: none;
35 }
36 -
37 -.ResetButton {
38 - flex: 0 0 auto;
39 - padding: 0 0.5rem;
40 -}
packages/react-devtools-shared/src/devtools/views/Components/Element.css
-5
@@ -22,11 +22,6 @@
22 user-select: none;
23 }
24
25 -.ScrollAnchor {
26 - height: 100%;
27 - width: 0;
28 -}
29 -
25 .SelectedElement {
26 background-color: var(--color-background-selected);
27 color: var(--color-text-selected);
packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
+2 -10
@@ -264,7 +264,7 @@ export default function InspectedElementWrapper(_: Props): React.Node {
264 <div
265 className={
266 element.isStrictModeNonCompliant
267 - ? styles.StrictModeNonCompliantComponent
267 + ? styles.StrictModeNonCompliant
268 : styles.Component
269 }
270 title={element.displayName}>
@@ -272,16 +272,12 @@ export default function InspectedElementWrapper(_: Props): React.Node {
272 </div>
273 </div>
274 {canOpenInEditor && (
275 - <Button
276 - className={styles.IconButton}
277 - onClick={onOpenInEditor}
278 - title="Open in editor">
275 + <Button onClick={onOpenInEditor} title="Open in editor">
276 <ButtonIcon type="editor" />
277 </Button>
278 )}
279 {canToggleError && (
280 <Toggle
284 - className={styles.IconButton}
281 isChecked={isErrored}
282 onChange={toggleErrored}
283 title={
@@ -294,7 +290,6 @@ export default function InspectedElementWrapper(_: Props): React.Node {
290 )}
291 {canToggleSuspense && (
292 <Toggle
297 - className={styles.IconButton}
293 isChecked={isSuspended}
294 onChange={toggleSuspended}
295 title={
@@ -307,7 +302,6 @@ export default function InspectedElementWrapper(_: Props): React.Node {
302 )}
303 {store.supportsNativeInspection && (
304 <Button
310 - className={styles.IconButton}
305 onClick={highlightElement}
306 title="Inspect the matching DOM element">
307 <ButtonIcon type="view-dom" />
@@ -315,7 +309,6 @@ export default function InspectedElementWrapper(_: Props): React.Node {
309 )}
310 {!hideLogAction && (
311 <Button
318 - className={styles.IconButton}
312 onClick={logElement}
313 title="Log this component data to the console">
314 <ButtonIcon type="log-data" />
@@ -323,7 +316,6 @@ export default function InspectedElementWrapper(_: Props): React.Node {
316 )}
317 {!hideViewSourceAction && (
318 <Button
326 - className={styles.IconButton}
319 disabled={!canViewSource}
320 onClick={viewSource}
321 title="View source for this element">
packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css
-13
@@ -2,10 +2,6 @@
2 display: flex;
3 }
4
5 -.DisabledItem {
6 - opacity: 0.5;
7 -}
8 -
5 .Name {
6 color: var(--color-attribute-name-not-editable);
7 flex: 0 0 auto;
@@ -40,20 +36,11 @@
36 flex: 1;
37 }
38
43 -.None {
44 - color: var(--color-dimmer);
45 - font-style: italic;
46 -}
47 -
39 .ExpandCollapseToggleSpacer {
40 flex: 0 0 1rem;
41 width: 1rem;
42 }
43
53 -.Empty {
54 - color: var(--color-dimmer);
55 -}
56 -
44 .DeleteArrayItemButton {
45 padding: 0;
46 margin-right: 0.125rem;
packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.css
-6
@@ -50,9 +50,3 @@
50 box-shadow: 0px 1px 3px var(--color-shadow);
51 }
52
53 -.Empty {
54 - color: var(--color-dimmer);
55 - font-style: italic;
56 - user-select: none;
57 - padding-left: 1rem;
58 -}
packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.css
-1
@@ -13,7 +13,6 @@
13 color: var(--color-text-invalid) !important;
14 }
15
16 -.Input:focus,
16 .Invalid:focus {
17 background-color: var(--color-button-background-focus);
18 }
\ No newline at end of file
packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
+1 -4
@@ -191,10 +191,7 @@ export default function OwnerStack(): React.Node {
191 ))}
192 </div>
193 <div className={styles.VRule} />
194 - <Button
195 - className={styles.IconButton}
196 - onClick={() => selectOwner(null)}
197 - title="Back to tree view">
194 + <Button onClick={() => selectOwner(null)} title="Back to tree view">
195 <ButtonIcon type="close" />
196 </Button>
197 </div>
packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css
-4
@@ -22,10 +22,6 @@
22 text-overflow: ellipsis;
23 }
24
25 -.Label {
26 - font-weight: bold;
27 -}
28 -
25 .CurrentCommit {
26 margin: 0.25rem 0;
27 display: block;
packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
-4
@@ -13,10 +13,6 @@
13 overflow-y: auto;
14 }
15
16 -.WhatChanged {
17 - margin-bottom: 1rem;
18 -}
19 -
16 .Component {
17 flex: 1;
18 color: var(--color-component-name);
packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
-1
@@ -108,7 +108,6 @@ export default function SidebarSelectedFiberInfo(_: Props): React.Node {
108 </div>
109
110 <Button
111 - className={styles.IconButton}
111 onClick={() => selectFiber(null, null)}
112 title="Back to commit view">
113 <ButtonIcon type="close" />
packages/react-devtools-shared/src/devtools/views/SearchInput.css
+1 -5
@@ -28,8 +28,7 @@
28 white-space: pre;
29 }
30
31 -.LeftVRule,
32 -.RightVRule {
31 +.LeftVRule{
32 height: 20px;
33 width: 1px;
34 background-color: var(--color-border);
@@ -37,6 +36,3 @@
36 .LeftVRule {
37 margin: 0 0.25rem 0 0.5rem;
38 }
40 -.RightVRule {
41 - margin: 0 0.5rem 0 0.25rem;
42 -}
packages/react-devtools-shared/src/devtools/views/SearchInput.js
-3
@@ -104,7 +104,6 @@ export default function SearchInput({
104 <div className={styles.LeftVRule} />
105 <Button
106 data-testname={testName ? `${testName}-PreviousButton` : undefined}
107 - className={styles.IconButton}
107 disabled={!searchText}
108 onClick={goToPreviousResult}
109 title={
@@ -117,7 +116,6 @@ export default function SearchInput({
116 </Button>
117 <Button
118 data-testname={testName ? `${testName}-NextButton` : undefined}
120 - className={styles.IconButton}
119 disabled={!searchText}
120 onClick={goToNextResult}
121 title={
@@ -129,7 +127,6 @@ export default function SearchInput({
127 </Button>
128 <Button
129 data-testname={testName ? `${testName}-ResetButton` : undefined}
132 - className={styles.IconButton}
130 disabled={!searchText}
131 onClick={resetSearch}
132 title="Reset search">
packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
-3
@@ -38,9 +38,6 @@
38 height: 0.5rem;
39 }
40
41 -.Select {
42 -}
43 -
41 .CheckboxOption {
42 display: block;
43 padding: 0 0 0.5rem;
packages/react-devtools-shared/src/devtools/views/Toggle.css
-6
@@ -46,9 +46,3 @@
46 color: var(--color-button-disabled);
47 cursor: default;
48 }
49 -
50 -.Input {
51 - width: 0;
52 - margin: 0;
53 - opacity: 0;
54 -}
packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.css
-4
@@ -8,10 +8,6 @@
8 margin-bottom: 0.5rem;
9 }
10
11 -.ReleaseNotesLink {
12 - color: var(--color-button-active);
13 -}
14 -
11 .Version {
12 color: var(--color-bridge-version-number);
13 font-weight: bold;
packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.css
-6
@@ -4,12 +4,6 @@
4 align-items: center;
5 }
6
7 -.Column {
8 - display: flex;
9 - flex-direction: column;
10 - align-items: center;
11 -}
12 -
7 .Title {
8 font-size: var(--font-size-sans-large);
9 margin-bottom: 0.5rem;
packages/react-devtools-timeline/src/EventTooltip.css
-1
@@ -75,7 +75,6 @@
75 margin-right: 0.25rem;
76 }
77
78 -.InfoText,
78 .WarningText {
79 color: var(--color-warning-text-color);
80 }
packages/react-devtools-timeline/src/Timeline.css
-28
@@ -8,9 +8,6 @@
8 justify-content: center;
9 }
10
11 -.Paragraph {
12 - text-align: center;
13 -}
11
12 .ErrorMessage {
13 margin: 0.5rem 0;
@@ -35,28 +32,3 @@
32 font-size: var(--font-size-sans-large);
33 margin-bottom: 0.5rem;
34 }
38 -
39 -.WelcomeInstructionsList {
40 -}
41 -
42 -.WelcomeInstructionsListItem {
43 - display: flex;
44 - align-items: center;
45 - line-height: 1.5rem;
46 - counter-increment: li;
47 -}
48 -
49 -.WelcomeInstructionsListItem::before {
50 - content: counter(li);
51 - margin-right: 0.5rem;
52 -}
53 -
54 -.WelcomeInstructionsListItemLink {
55 - color: var(--color-link);
56 - margin-left: 0.25rem;
57 - margin-right: 0.25rem;
58 -}
59 -
60 -.ImportButtonLabel {
61 - margin-left: 0.25rem;
62 -}
\ No newline at end of file