From af02decd68b7f0dbecec0c5ac2468119daab6989 Mon Sep 17 00:00:00 2001
From: Tim van der Lippe <tvanderlippe@chromium.org>
Date: Tue, 4 May 2021 14:56:19 +0100
Subject: [PATCH] Disallow !important in CSS files

To make sure that any newly written CSS files for new components
do not use !important, since they will be using shadow DOM. Moreover,
!important is usually an anti-pattern that makes it harder to reason
about CSS cascading. It is also disallowed internally at Google.

R=jacktfranklin@chromium.org

Bug: none
Change-Id: Idcd2c90d01ff2e782a02d0a4631be384b1a3ca74
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2871716
Auto-Submit: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Commit-Queue: Mathias Bynens <mathias@chromium.org>
---
 .stylelintrc.json                             |  1 +
 .../panels/accessibility/axBreadcrumbs.css    |  2 +-
 .../panels/animation/animationTimeline.css    |  2 +-
 .../panels/application/indexedDBViews.css     |  2 +-
 .../xhrBreakpointsSidebarPane.css             |  2 +-
 front_end/panels/changes/changesView.css      |  4 ++--
 front_end/panels/console/consoleSidebar.css   |  2 +-
 front_end/panels/console/consoleView.css      |  8 +++----
 .../elements/computedStyleSidebarPane.css     |  2 +-
 .../panels/elements/elementsTreeOutline.css   | 20 ++++++++--------
 .../panels/elements/nodeStackTraceWidget.css  |  2 +-
 .../panels/elements/stylesSectionTree.css     |  8 +++----
 .../panels/elements/stylesSidebarPane.css     |  2 +-
 .../panels/emulation/locationsSettingsTab.css |  2 +-
 front_end/panels/emulation/sensors.css        |  4 ++--
 .../event_listeners/eventListenersView.css    |  6 ++---
 .../panels/layer_viewer/paintProfiler.css     |  4 ++--
 .../panels/lighthouse/lighthousePanel.css     |  2 +-
 .../throttlingSettingsTab.css                 |  2 +-
 front_end/panels/network/blockedURLsPane.css  |  4 ++--
 front_end/panels/network/networkLogView.css   | 12 +++++-----
 front_end/panels/network/networkPanel.css     |  4 ++--
 .../performanceMonitor.css                    |  2 +-
 front_end/panels/profiler/heapProfiler.css    |  2 +-
 front_end/panels/profiler/profilesPanel.css   |  2 +-
 .../panels/profiler/profilesSidebarTree.css   |  4 ++--
 .../frameworkIgnoreListSettingsTab.css        |  2 +-
 front_end/panels/timeline/timelinePanel.css   |  6 ++---
 .../components/docs/theme_colors/basic.html   |  4 ++--
 front_end/ui/legacy/checkboxTextLabel.css     |  4 ++--
 front_end/ui/legacy/closeButton.css           |  2 +-
 .../components/color_picker/spectrum.css      | 12 +++++-----
 .../legacy/components/data_grid/dataGrid.css  | 12 +++++-----
 .../components/inline_editor/bezierEditor.css |  2 +-
 .../object_ui/objectPropertiesSection.css     |  2 +-
 .../ui/legacy/components/perf_ui/PieChart.ts  |  2 +-
 .../components/text_editor/cmdevtools.css     |  8 +++----
 .../text_editor/cmdevtools.darkmode.css       |  2 +-
 front_end/ui/legacy/glassPane.css             |  2 +-
 front_end/ui/legacy/inspectorCommon.css       | 24 +++++++++----------
 .../ui/legacy/inspectorViewTabbedPane.css     |  2 +-
 front_end/ui/legacy/rootView.css              |  2 +-
 front_end/ui/legacy/softContextMenu.css       |  2 +-
 front_end/ui/legacy/splitWidget.css           |  2 +-
 front_end/ui/legacy/tabbedPane.css            |  6 ++---
 front_end/ui/legacy/textButton.css            |  2 +-
 front_end/ui/legacy/textPrompt.css            | 12 +++++-----
 front_end/ui/legacy/toolbar.css               | 16 ++++++-------
 front_end/ui/legacy/treeoutline.css           |  2 +-
 front_end/ui/legacy/viewContainers.css        |  2 +-
 inspector_overlay/common.css                  |  2 +-
 51 files changed, 121 insertions(+), 120 deletions(-)

diff --git a/.stylelintrc.json b/.stylelintrc.json
index 3cb43430e2..f1f62c6620 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -9,6 +9,7 @@
     "color-function-notation": "modern",
     "hue-degree-notation": "angle",
     "comment-empty-line-before": null,
+    "declaration-no-important": true,
     "color-named": "never",
     "property-no-vendor-prefix": [
       true,
diff --git a/front_end/panels/accessibility/axBreadcrumbs.css b/front_end/panels/accessibility/axBreadcrumbs.css
index bf58733f82..ede16f341d 100644
--- a/front_end/panels/accessibility/axBreadcrumbs.css
+++ b/front_end/panels/accessibility/axBreadcrumbs.css
@@ -130,7 +130,7 @@
 
   .ax-breadcrumbs .ax-node.inspected .selection {
     forced-color-adjust: none;
-    background: Highlight !important;
+    background: Highlight !important; /* stylelint-disable-line declaration-no-important */
   }
 
   .ax-breadcrumbs .ax-node.inspected .wrapper {
diff --git a/front_end/panels/animation/animationTimeline.css b/front_end/panels/animation/animationTimeline.css
index cd428b0de3..1d45d8a296 100644
--- a/front_end/panels/animation/animationTimeline.css
+++ b/front_end/panels/animation/animationTimeline.css
@@ -379,7 +379,7 @@ text.animation-timeline-grid-label {
 }
 
 .animation-buffer-preview.selected > svg > line {
-  stroke: var(--color-background) !important;
+  stroke: var(--color-background) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 @keyframes newGroupAnim {
diff --git a/front_end/panels/application/indexedDBViews.css b/front_end/panels/application/indexedDBViews.css
index 88519fe125..ea494bb8a5 100644
--- a/front_end/panels/application/indexedDBViews.css
+++ b/front_end/panels/application/indexedDBViews.css
@@ -86,7 +86,7 @@
 }
 
 .source-code.indexed-db-key-path {
-  font-size: unset !important;
+  font-size: unset !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .resources-toolbar {
diff --git a/front_end/panels/browser_debugger/xhrBreakpointsSidebarPane.css b/front_end/panels/browser_debugger/xhrBreakpointsSidebarPane.css
index 9df983484e..9bd72bad71 100644
--- a/front_end/panels/browser_debugger/xhrBreakpointsSidebarPane.css
+++ b/front_end/panels/browser_debugger/xhrBreakpointsSidebarPane.css
@@ -25,7 +25,7 @@
   display: block;
   margin-left: 0;
   margin-right: 0;
-  outline: none !important;
+  outline: none !important; /* stylelint-disable-line declaration-no-important */
   border: 1px solid rgb(66% 66% 66%); /* stylelint-disable-line plugin/use_theme_colors */
   /* See: crbug.com/1152736 for color variable migration. */
 }
diff --git a/front_end/panels/changes/changesView.css b/front_end/panels/changes/changesView.css
index f1cf3198bb..4bc40cb604 100644
--- a/front_end/panels/changes/changesView.css
+++ b/front_end/panels/changes/changesView.css
@@ -24,11 +24,11 @@
 }
 
 .CodeMirror-lines:not(:active) {
-  cursor: default !important;
+  cursor: default !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .CodeMirror-line:hover {
-  cursor: default !important;
+  cursor: default !important; /* stylelint-disable-line declaration-no-important */
   background-color: rgb(0 0 255 / 5%); /* stylelint-disable-line plugin/use_theme_colors */
   /* See: crbug.com/1152736 for color variable migration. */
 }
diff --git a/front_end/panels/console/consoleSidebar.css b/front_end/panels/console/consoleSidebar.css
index 061c3abe7c..dafe2112d8 100644
--- a/front_end/panels/console/consoleSidebar.css
+++ b/front_end/panels/console/consoleSidebar.css
@@ -72,6 +72,6 @@ li .largeicon-navigator-folder {
   .tree-outline li:hover [is=ui-icon].icon-mask,
   .tree-outline li.selected [is=ui-icon].icon-mask,
   .tree-outline li.selected:focus .spritesheet-mediumicons:not(.icon-mask) {
-    background-color: HighlightText !important;
+    background-color: HighlightText !important; /* stylelint-disable-line declaration-no-important */
   }
 }
diff --git a/front_end/panels/console/consoleView.css b/front_end/panels/console/consoleView.css
index ff82911d0e..9c1a2b5fa2 100644
--- a/front_end/panels/console/consoleView.css
+++ b/front_end/panels/console/consoleView.css
@@ -333,7 +333,7 @@
 
 .console-error-level .console-message-text,
 .console-error-level .console-view-object-properties-section {
-  color: var(--override-error-text-color) !important;
+  color: var(--override-error-text-color) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .console-system-type.console-info-level {
@@ -343,7 +343,7 @@
 
 .-theme-with-dark-background .console-verbose-level:not(.console-warning-level) .console-message-text,
 .-theme-with-dark-background .console-system-type.console-info-level {
-  color: hsl(220deg 100% 65%) !important;
+  color: hsl(220deg 100% 65%) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 #console-messages .link {
@@ -402,7 +402,7 @@
 .console-message-nowrap-below,
 .console-message-nowrap-below div,
 .console-message-nowrap-below span {
-  white-space: nowrap !important;
+  white-space: nowrap !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .object-state-note {
@@ -469,7 +469,7 @@
   .console-message-wrapper:focus:last-of-type *,
   .console-message-wrapper:focus .devtools-link,
   .console-message-wrapper:focus:last-of-type .devtools-link {
-    color: HighlightText !important;
+    color: HighlightText !important; /* stylelint-disable-line declaration-no-important */
   }
 
   #console-messages .devtools-link,
diff --git a/front_end/panels/elements/computedStyleSidebarPane.css b/front_end/panels/elements/computedStyleSidebarPane.css
index 72c5070e86..6decfa9b1d 100644
--- a/front_end/panels/elements/computedStyleSidebarPane.css
+++ b/front_end/panels/elements/computedStyleSidebarPane.css
@@ -20,7 +20,7 @@
 }
 
 .styles-sidebar-pane-filter-box > input {
-  outline: none !important;
+  outline: none !important; /* stylelint-disable-line declaration-no-important */
   border: none;
   width: 100%;
   background: var(--color-background);
diff --git a/front_end/panels/elements/elementsTreeOutline.css b/front_end/panels/elements/elementsTreeOutline.css
index 6904ff0d0d..eac43db37f 100644
--- a/front_end/panels/elements/elementsTreeOutline.css
+++ b/front_end/panels/elements/elementsTreeOutline.css
@@ -7,21 +7,21 @@
 .editing {
   box-shadow: var(--drop-shadow);
   background-color: var(--color-background);
-  text-overflow: clip !important;
+  text-overflow: clip !important; /* stylelint-disable-line declaration-no-important */
   padding-left: 2px;
   margin-left: -2px;
   padding-right: 2px;
   margin-right: -2px;
   margin-bottom: -1px;
   padding-bottom: 1px;
-  opacity: 100% !important;
+  opacity: 100% !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .editing,
 .editing * {
-  color: #222 !important; /* stylelint-disable-line plugin/use_theme_colors */
+  color: #222 !important; /* stylelint-disable-line plugin/use_theme_colors, declaration-no-important */
   /* See: crbug.com/1152736 for color variable migration. */
-  text-decoration: none !important;
+  text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .editing br {
@@ -186,7 +186,7 @@
 
 .CodeMirror {
   background-color: var(--color-background);
-  height: 300px !important;
+  height: 300px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .CodeMirror-lines {
@@ -230,7 +230,7 @@ select {
 
 .elements-tree-nowrap,
 .elements-tree-nowrap .li {
-  white-space: pre !important;
+  white-space: pre !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .elements-disclosure .elements-tree-nowrap li {
@@ -335,7 +335,7 @@ li.selected:not(.always-parent) + ol.children {
 }
 
 li.selected:not(.always-parent) + ol.children {
-  --indentation-level-border-color: hsl(216deg 68% 80% / 100%) !important;
+  --indentation-level-border-color: hsl(216deg 68% 80% / 100%) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 li.hovered:not(.always-parent) + ol.children:not(.shadow-root) {
@@ -349,7 +349,7 @@ li.hovered:not(.always-parent) + ol.children:not(.shadow-root) {
 @media (forced-colors: active) {
   .elements-disclosure li.parent::before {
     forced-color-adjust: none;
-    background-color: ButtonText !important;
+    background-color: ButtonText !important; /* stylelint-disable-line declaration-no-important */
   }
 
   .elements-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) li.selected .selected-hint::before {
@@ -360,8 +360,8 @@ li.hovered:not(.always-parent) + ol.children:not(.shadow-root) {
   .elements-disclosure li.hovered:not(.selected) .selection,
   .elements-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) li.selected:focus .selection {
     forced-color-adjust: none;
-    background: canvas !important;
-    border: 1px solid Highlight !important;
+    background: canvas !important; /* stylelint-disable-line declaration-no-important */
+    border: 1px solid Highlight !important; /* stylelint-disable-line declaration-no-important */
   }
 
   .gutter-menu-icon {
diff --git a/front_end/panels/elements/nodeStackTraceWidget.css b/front_end/panels/elements/nodeStackTraceWidget.css
index 6b69d8474b..b300c3a81c 100644
--- a/front_end/panels/elements/nodeStackTraceWidget.css
+++ b/front_end/panels/elements/nodeStackTraceWidget.css
@@ -5,6 +5,6 @@
  */
 
 .stack-trace {
-  font-size: 11px !important;
+  font-size: 11px !important; /* stylelint-disable-line declaration-no-important */
   font-family: Menlo, monospace;
 }
diff --git a/front_end/panels/elements/stylesSectionTree.css b/front_end/panels/elements/stylesSectionTree.css
index d7be9ac77f..65fcc9bbd7 100644
--- a/front_end/panels/elements/stylesSectionTree.css
+++ b/front_end/panels/elements/stylesSectionTree.css
@@ -75,8 +75,8 @@
 }
 
 .tree-outline li.child-editing {
-  word-wrap: break-word !important;
-  white-space: normal !important;
+  word-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
+  white-space: normal !important; /* stylelint-disable-line declaration-no-important */
   padding-left: 0;
 }
 
@@ -111,7 +111,7 @@ ol.expanded {
 }
 
 .tree-outline li.editing .enabled-button {
-  display: none !important;
+  display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .overloaded:not(.has-ignorable-error),
@@ -192,7 +192,7 @@ ol.expanded {
 /* Matched styles */
 
 :host-context(.matched-styles) .tree-outline li {
-  margin-left: 0 !important;
+  margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .expand-icon {
diff --git a/front_end/panels/elements/stylesSidebarPane.css b/front_end/panels/elements/stylesSidebarPane.css
index c1b11c2ae6..7c33c78504 100644
--- a/front_end/panels/elements/stylesSidebarPane.css
+++ b/front_end/panels/elements/stylesSidebarPane.css
@@ -174,7 +174,7 @@
 }
 
 .styles-sidebar-pane-filter-box > input {
-  outline: none !important;
+  outline: none !important; /* stylelint-disable-line declaration-no-important */
   border: none;
   width: 100%;
   background: var(--color-background);
diff --git a/front_end/panels/emulation/locationsSettingsTab.css b/front_end/panels/emulation/locationsSettingsTab.css
index e634320203..af54001b43 100644
--- a/front_end/panels/emulation/locationsSettingsTab.css
+++ b/front_end/panels/emulation/locationsSettingsTab.css
@@ -68,7 +68,7 @@
 
 .locations-list-separator-invisible {
   visibility: hidden;
-  height: 100% !important;
+  height: 100% !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .locations-edit-row {
diff --git a/front_end/panels/emulation/sensors.css b/front_end/panels/emulation/sensors.css
index 4e84e21d68..3cfa9b3a57 100644
--- a/front_end/panels/emulation/sensors.css
+++ b/front_end/panels/emulation/sensors.css
@@ -37,7 +37,7 @@
 }
 
 .sensors-view input:focus::-webkit-input-placeholder {
-  color: transparent !important;
+  color: transparent !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .sensors-view .chrome-select {
@@ -98,7 +98,7 @@
 .orientation-stage.disabled {
   filter: grayscale();
   opacity: 50%;
-  cursor: default !important;
+  cursor: default !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .orientation-element,
diff --git a/front_end/panels/event_listeners/eventListenersView.css b/front_end/panels/event_listeners/eventListenersView.css
index a74e4f7bef..8636a5ecf7 100644
--- a/front_end/panels/event_listeners/eventListenersView.css
+++ b/front_end/panels/event_listeners/eventListenersView.css
@@ -21,12 +21,12 @@
 }
 
 .tree-outline-disclosure {
-  padding-left: 0 !important;
+  padding-left: 0 !important; /* stylelint-disable-line declaration-no-important */
   padding-right: 3px;
 }
 
 .tree-outline-disclosure li.parent::before {
-  top: 0 !important;
+  top: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .tree-outline-disclosure .name {
@@ -79,7 +79,7 @@
   }
 
   .event-listener-button:hover {
-    background-color: Highlight !important;
+    background-color: Highlight !important; /* stylelint-disable-line declaration-no-important */
     color: HighlightText;
     border-color: ButtonText;
   }
diff --git a/front_end/panels/layer_viewer/paintProfiler.css b/front_end/panels/layer_viewer/paintProfiler.css
index 7ef6e77eff..1b26627c3b 100644
--- a/front_end/panels/layer_viewer/paintProfiler.css
+++ b/front_end/panels/layer_viewer/paintProfiler.css
@@ -14,8 +14,8 @@
 }
 
 .paint-profiler-pie-chart {
-  width: 60px !important;
-  height: 60px !important;
+  width: 60px !important; /* stylelint-disable-line declaration-no-important */
+  height: 60px !important; /* stylelint-disable-line declaration-no-important */
   padding: 2px;
   overflow: hidden;
   font-size: 10px;
diff --git a/front_end/panels/lighthouse/lighthousePanel.css b/front_end/panels/lighthouse/lighthousePanel.css
index a7b086d0fb..52c8883607 100644
--- a/front_end/panels/lighthouse/lighthousePanel.css
+++ b/front_end/panels/lighthouse/lighthousePanel.css
@@ -31,7 +31,7 @@ button.view-trace {
     the LH viewer app, so disable this feature. */
 
 .lh-tools--viewer {
-  display: none !important;
+  display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .lighthouse-settings-pane {
diff --git a/front_end/panels/mobile_throttling/throttlingSettingsTab.css b/front_end/panels/mobile_throttling/throttlingSettingsTab.css
index 66c2f04a54..60b990dae1 100644
--- a/front_end/panels/mobile_throttling/throttlingSettingsTab.css
+++ b/front_end/panels/mobile_throttling/throttlingSettingsTab.css
@@ -74,7 +74,7 @@
 
 .conditions-list-separator-invisible {
   visibility: hidden;
-  height: 100% !important;
+  height: 100% !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .conditions-edit-row {
diff --git a/front_end/panels/network/blockedURLsPane.css b/front_end/panels/network/blockedURLsPane.css
index c8b982007f..4a94caea15 100644
--- a/front_end/panels/network/blockedURLsPane.css
+++ b/front_end/panels/network/blockedURLsPane.css
@@ -5,8 +5,8 @@
  */
 
 .list {
-  border: none !important;
-  border-top: 1px solid var(--color-details-hairline) !important;
+  border: none !important; /* stylelint-disable-line declaration-no-important */
+  border-top: 1px solid var(--color-details-hairline) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .blocking-disabled {
diff --git a/front_end/panels/network/networkLogView.css b/front_end/panels/network/networkLogView.css
index 2e61f8bfdf..3008e2eb94 100644
--- a/front_end/panels/network/networkLogView.css
+++ b/front_end/panels/network/networkLogView.css
@@ -29,12 +29,12 @@
  */
 
 .network-log-grid.data-grid {
-  border: none !important;
+  border: none !important; /* stylelint-disable-line declaration-no-important */
   flex: auto;
 }
 
 .network-log-grid.data-grid.no-selection:focus-visible {
-  border: none !important;
+  border: none !important; /* stylelint-disable-line declaration-no-important */
 }
 
 #network-container {
@@ -144,7 +144,7 @@
 }
 
 .network-log-grid.data-grid th.sortable:active {
-  background-image: none !important;
+  background-image: none !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .network-cell-subtitle {
@@ -167,7 +167,7 @@
 
 .network-error-row,
 .network-error-row .network-cell-subtitle {
-  color: #e60000 !important; /* stylelint-disable-line plugin/use_theme_colors */
+  color: #e60000 !important; /* stylelint-disable-line plugin/use_theme_colors, declaration-no-important */
   /* See: crbug.com/1152736 for color variable migration. */
 }
 
@@ -178,7 +178,7 @@
 .network-log-grid.data-grid:focus tr.selected.network-error-row,
 .network-log-grid.data-grid:focus tr.selected.network-error-row .network-cell-subtitle,
 .network-log-grid.data-grid:focus tr.selected.network-error-row .network-dim-cell {
-  color: #9f0000 !important; /* stylelint-disable-line plugin/use_theme_colors */
+  color: #9f0000 !important; /* stylelint-disable-line plugin/use_theme_colors, declaration-no-important */
   /* See: crbug.com/1152736 for color variable migration. */
 }
 
@@ -465,7 +465,7 @@
   .network-status-pane {
     forced-color-adjust: none;
     border-color: Highlight;
-    background-color: canvas !important;
+    background-color: canvas !important; /* stylelint-disable-line declaration-no-important */
   }
 
   .network-waterfall-header:hover {
diff --git a/front_end/panels/network/networkPanel.css b/front_end/panels/network/networkPanel.css
index 32984d70ad..11c9fa0896 100644
--- a/front_end/panels/network/networkPanel.css
+++ b/front_end/panels/network/networkPanel.css
@@ -96,7 +96,7 @@
 }
 
 .resource-timing-table {
-  width: 100% !important;
+  width: 100% !important; /* stylelint-disable-line declaration-no-important */
 }
 
 #network-overview-panel {
@@ -146,7 +146,7 @@
 
 .network-film-strip {
   border-bottom: solid 1px var(--color-details-hairline);
-  flex: none !important;
+  flex: none !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .network-film-strip-placeholder {
diff --git a/front_end/panels/performance_monitor/performanceMonitor.css b/front_end/panels/performance_monitor/performanceMonitor.css
index 5b2ef3acc6..fe04dec7a4 100644
--- a/front_end/panels/performance_monitor/performanceMonitor.css
+++ b/front_end/panels/performance_monitor/performanceMonitor.css
@@ -67,7 +67,7 @@
 }
 
 .perfmon-indicator:not(.active) .perfmon-indicator-swatch {
-  background-color: #eee !important; /* stylelint-disable-line plugin/use_theme_colors */
+  background-color: #eee !important; /* stylelint-disable-line plugin/use_theme_colors, declaration-no-important */
   /* See: crbug.com/1152736 for color variable migration. */
 }
 
diff --git a/front_end/panels/profiler/heapProfiler.css b/front_end/panels/profiler/heapProfiler.css
index f20836e170..7a2e6bc96e 100644
--- a/front_end/panels/profiler/heapProfiler.css
+++ b/front_end/panels/profiler/heapProfiler.css
@@ -44,7 +44,7 @@
 }
 
 .heap-snapshot-view .data-grid span.percent-column {
-  width: 35px !important;
+  width: 35px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .heap-snapshot-view .object-value-object,
diff --git a/front_end/panels/profiler/profilesPanel.css b/front_end/panels/profiler/profilesPanel.css
index bdfd54e923..5677b350a4 100644
--- a/front_end/panels/profiler/profilesPanel.css
+++ b/front_end/panels/profiler/profilesPanel.css
@@ -129,7 +129,7 @@
 }
 
 .cpu-profile-flame-chart-overview-pane {
-  flex: 0 0 80px !important;
+  flex: 0 0 80px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .profile-text-view {
diff --git a/front_end/panels/profiler/profilesSidebarTree.css b/front_end/panels/profiler/profilesSidebarTree.css
index 1080efa352..f65cd66cd7 100644
--- a/front_end/panels/profiler/profilesSidebarTree.css
+++ b/front_end/panels/profiler/profilesSidebarTree.css
@@ -137,11 +137,11 @@ li.small .subtitle {
 /* Launcher */
 
 .profile-launcher-view-tree-item {
-  margin-left: 0 !important;
+  margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .profile-launcher-view-tree-item > .icon {
-  width: 8px !important;
+  width: 8px !important; /* stylelint-disable-line declaration-no-important */
   visibility: hidden;
 }
 /* Heap profiles and CPU profiles */
diff --git a/front_end/panels/settings/frameworkIgnoreListSettingsTab.css b/front_end/panels/settings/frameworkIgnoreListSettingsTab.css
index 45dc2d20c4..c735f9102e 100644
--- a/front_end/panels/settings/frameworkIgnoreListSettingsTab.css
+++ b/front_end/panels/settings/frameworkIgnoreListSettingsTab.css
@@ -90,7 +90,7 @@
 
 .ignore-list-separator-invisible {
   visibility: hidden;
-  height: 100% !important;
+  height: 100% !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .ignore-list-edit-row {
diff --git a/front_end/panels/timeline/timelinePanel.css b/front_end/panels/timeline/timelinePanel.css
index 7fbe1daebb..32b57fc3ac 100644
--- a/front_end/panels/timeline/timelinePanel.css
+++ b/front_end/panels/timeline/timelinePanel.css
@@ -113,7 +113,7 @@
 
 #timeline-overview-framerate {
   flex-basis: 16px;
-  margin-top: 0 !important;
+  margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 
 #timeline-overview-filmstrip {
@@ -142,7 +142,7 @@
 
 #timeline-overview-responsiveness {
   flex-basis: 5px;
-  margin-top: 0 !important;
+  margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 
 #timeline-overview-input {
@@ -283,7 +283,7 @@
 }
 
 .timeline-details-view-block .timeline-details-stack-values {
-  flex-direction: column !important;
+  flex-direction: column !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .timeline-details-chip-title {
diff --git a/front_end/ui/components/docs/theme_colors/basic.html b/front_end/ui/components/docs/theme_colors/basic.html
index bf0a25a8b7..585df690be 100644
--- a/front_end/ui/components/docs/theme_colors/basic.html
+++ b/front_end/ui/components/docs/theme_colors/basic.html
@@ -16,8 +16,8 @@
        * The injected themes switch off user-select. This switches
        * it back on so that we can select colors.
        */
-      user-select: auto !important;
-      overflow: auto !important;
+      user-select: auto !important; /* stylelint-disable-line declaration-no-important */
+      overflow: auto !important; /* stylelint-disable-line declaration-no-important */
     }
 
     #container {
diff --git a/front_end/ui/legacy/checkboxTextLabel.css b/front_end/ui/legacy/checkboxTextLabel.css
index b784e139be..86ce35b3c4 100644
--- a/front_end/ui/legacy/checkboxTextLabel.css
+++ b/front_end/ui/legacy/checkboxTextLabel.css
@@ -9,7 +9,7 @@
   margin: 0;
   display: inline-flex;
   flex-shrink: 0;
-  align-items: center !important;
+  align-items: center !important; /* stylelint-disable-line declaration-no-important */
 }
 
 input {
@@ -103,7 +103,7 @@ input.dt-checkbox-themed:checked::after {
 
   input.dt-checkbox-theme-preserve:hover:checked::before,
   input.dt-checkbox-theme-preserve:hover:checked::after {
-    background-color: Highlight !important;
+    background-color: Highlight !important; /* stylelint-disable-line declaration-no-important */
   }
 
   input.dt-checkbox-theme-preserve:hover:checked {
diff --git a/front_end/ui/legacy/closeButton.css b/front_end/ui/legacy/closeButton.css
index 7bf2998737..3f3faed4fb 100644
--- a/front_end/ui/legacy/closeButton.css
+++ b/front_end/ui/legacy/closeButton.css
@@ -33,7 +33,7 @@
 }
 
 .close-button:active .hover-icon {
-  display: none !important;
+  display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .close-button:focus-visible .hover-icon {
diff --git a/front_end/ui/legacy/components/color_picker/spectrum.css b/front_end/ui/legacy/components/color_picker/spectrum.css
index cd019eb50b..a5bb7dfed9 100644
--- a/front_end/ui/legacy/components/color_picker/spectrum.css
+++ b/front_end/ui/legacy/components/color_picker/spectrum.css
@@ -412,7 +412,7 @@
   position: relative;
   border: 1px solid rgb(0 0 0 / 10%); /* stylelint-disable-line plugin/use_theme_colors */
   /* See: crbug.com/1152736 for color variable migration. */
-  background-position: -1px !important;
+  background-position: -1px !important; /* stylelint-disable-line declaration-no-important */
   z-index: 14;
 }
 
@@ -653,7 +653,7 @@ div.palette-preview {
 
 @media (forced-colors: active) {
   :host {
-    border: 1px solid canvastext !important;
+    border: 1px solid canvastext !important; /* stylelint-disable-line declaration-no-important */
   }
 
   .spectrum-color {
@@ -663,7 +663,7 @@ div.palette-preview {
   .spectrum-switcher:hover,
   .spectrum-switcher:focus-visible {
     forced-color-adjust: none;
-    background-color: Highlight !important;
+    background-color: Highlight !important; /* stylelint-disable-line declaration-no-important */
   }
 
   :host-context(.-theme-with-dark-background) .spectrum-switcher {
@@ -687,12 +687,12 @@ div.palette-preview {
 
   .swatch-overlay:hover,
   .swatch-overlay:focus-visible {
-    background-color: canvas !important;
+    background-color: canvas !important; /* stylelint-disable-line declaration-no-important */
   }
 
   .spectrum-slider {
     forced-color-adjust: none;
-    background-color: ButtonText !important;
-    box-shadow: 0 1px 4px 0 ButtonFace !important;
+    background-color: ButtonText !important; /* stylelint-disable-line declaration-no-important */
+    box-shadow: 0 1px 4px 0 ButtonFace !important; /* stylelint-disable-line declaration-no-important */
   }
 }
diff --git a/front_end/ui/legacy/components/data_grid/dataGrid.css b/front_end/ui/legacy/components/data_grid/dataGrid.css
index 3d2dcd8865..2fdc41f277 100644
--- a/front_end/ui/legacy/components/data_grid/dataGrid.css
+++ b/front_end/ui/legacy/components/data_grid/dataGrid.css
@@ -1,6 +1,6 @@
 .data-grid {
   position: relative;
-  border: 1px solid rgb(204 204 204) !important; /* stylelint-disable-line plugin/use_theme_colors */
+  border: 1px solid rgb(204 204 204) !important; /* stylelint-disable-line plugin/use_theme_colors, declaration-no-important */
   /* See: crbug.com/1152736 for color variable migration. */
   line-height: 120%;
 }
@@ -48,7 +48,7 @@
   width: 14px;
   padding-right: 0;
   padding-left: 0;
-  border-left: 0 none transparent !important;
+  border-left: 0 none transparent !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .data-grid.inline .corner {
@@ -62,8 +62,8 @@
 
 .data-grid .top-filler-td,
 .data-grid .bottom-filler-td {
-  height: auto !important;
-  padding: 0 !important;
+  height: auto !important; /* stylelint-disable-line declaration-no-important */
+  padding: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .data-grid table.data {
@@ -123,7 +123,7 @@
 
 .data-grid th:first-child,
 .data-grid td:first-child {
-  border-left: none !important;
+  border-left: none !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .data-grid td > div,
@@ -231,7 +231,7 @@
 }
 
 .data-grid.no-selection:focus-visible {
-  border: 1px solid var(--legacy-accent-color) !important;
+  border: 1px solid var(--legacy-accent-color) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .data-grid:focus table.data tr.selected {
diff --git a/front_end/ui/legacy/components/inline_editor/bezierEditor.css b/front_end/ui/legacy/components/inline_editor/bezierEditor.css
index 0414c9bf7c..00a8da2462 100644
--- a/front_end/ui/legacy/components/inline_editor/bezierEditor.css
+++ b/front_end/ui/legacy/components/inline_editor/bezierEditor.css
@@ -171,7 +171,7 @@ span.bezier-display-value {
   line-height: 20px;
   height: 20px;
   cursor: text;
-  white-space: nowrap !important;
+  white-space: nowrap !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .bezier-container {
diff --git a/front_end/ui/legacy/components/object_ui/objectPropertiesSection.css b/front_end/ui/legacy/components/object_ui/objectPropertiesSection.css
index 0283b9d1fc..739d61d1bd 100644
--- a/front_end/ui/legacy/components/object_ui/objectPropertiesSection.css
+++ b/front_end/ui/legacy/components/object_ui/objectPropertiesSection.css
@@ -10,7 +10,7 @@
 
 .object-properties-section {
   padding: 0 0 0 0;
-  color: rgb(33 33 33) !important; /* stylelint-disable-line plugin/use_theme_colors */
+  color: rgb(33 33 33) !important; /* stylelint-disable-line plugin/use_theme_colors, declaration-no-important */
   /* See: crbug.com/1152736 for color variable migration. */
   display: flex;
   flex-direction: column;
diff --git a/front_end/ui/legacy/components/perf_ui/PieChart.ts b/front_end/ui/legacy/components/perf_ui/PieChart.ts
index 693e443d70..666195caa2 100644
--- a/front_end/ui/legacy/components/perf_ui/PieChart.ts
+++ b/front_end/ui/legacy/components/perf_ui/PieChart.ts
@@ -123,7 +123,7 @@ export class PieChart extends HTMLElement {
         }
 
         .pie-chart-legend-row:focus-visible {
-          box-shadow: 0 0 0 2px var(--legacy-selection-bg-color) !important;
+          box-shadow: 0 0 0 2px var(--legacy-selection-bg-color) !important; /* stylelint-disable-line declaration-no-important */
         }
 
         .pie-chart-swatch {
diff --git a/front_end/ui/legacy/components/text_editor/cmdevtools.css b/front_end/ui/legacy/components/text_editor/cmdevtools.css
index 75816ced8b..2e7882d162 100644
--- a/front_end/ui/legacy/components/text_editor/cmdevtools.css
+++ b/front_end/ui/legacy/components/text_editor/cmdevtools.css
@@ -6,15 +6,15 @@
  */
 
 .CodeMirror {
-  line-height: 1.2em !important;
-  background-color: transparent !important;
+  line-height: 1.2em !important; /* stylelint-disable-line declaration-no-important */
+  background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
   color: #222; /* stylelint-disable-line plugin/use_theme_colors */
   /* See: crbug.com/1152736 for color variable migration. */
   height: 300px;
 }
 
 .CodeMirror-linewidget {
-  overflow: visible !important;
+  overflow: visible !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .CodeMirror-gutter-performance {
@@ -444,7 +444,7 @@ div.CodeMirror:focus-within span.CodeMirror-nonmatchingbracket {
 }
 
 .show-whitespaces .CodeMirror .cm-tab::before {
-  display: block !important;
+  display: block !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .cm-execution-line {
diff --git a/front_end/ui/legacy/components/text_editor/cmdevtools.darkmode.css b/front_end/ui/legacy/components/text_editor/cmdevtools.darkmode.css
index 6122094088..b7d731d37b 100644
--- a/front_end/ui/legacy/components/text_editor/cmdevtools.darkmode.css
+++ b/front_end/ui/legacy/components/text_editor/cmdevtools.darkmode.css
@@ -1,6 +1,6 @@
 /* This file was automatically generated via:
 npm run generate-dark-mode-styles front_end/ui/legacy/components/text_editor/cmdevtools.css
-* Last Updated: Wed Apr 28 2021 13:21:56 GMT+0000 (Coordinated Universal Time)
+* Last Updated: Tue May 04 2021 14:55:52 GMT+0100 (British Summer Time)
 */
 /* stylelint-disable */
 :host-context(.-theme-with-dark-background) .CodeMirror,
diff --git a/front_end/ui/legacy/glassPane.css b/front_end/ui/legacy/glassPane.css
index cfe4c09761..3dbcdc549b 100644
--- a/front_end/ui/legacy/glassPane.css
+++ b/front_end/ui/legacy/glassPane.css
@@ -5,7 +5,7 @@
  */
 
 :host {
-  position: absolute !important;
+  position: absolute !important; /* stylelint-disable-line declaration-no-important */
   top: 0;
   bottom: 0;
   left: 0;
diff --git a/front_end/ui/legacy/inspectorCommon.css b/front_end/ui/legacy/inspectorCommon.css
index ac4f29627f..fb371476b2 100644
--- a/front_end/ui/legacy/inspectorCommon.css
+++ b/front_end/ui/legacy/inspectorCommon.css
@@ -136,12 +136,12 @@ body {
 
 .monospace {
   font-family: var(--monospace-font-family);
-  font-size: var(--monospace-font-size) !important;
+  font-size: var(--monospace-font-size) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .source-code {
   font-family: var(--source-code-font-family);
-  font-size: var(--source-code-font-size) !important;
+  font-size: var(--source-code-font-size) !important; /* stylelint-disable-line declaration-no-important */
   white-space: pre-wrap;
 }
 
@@ -175,13 +175,13 @@ iframe.fill {
 
 .hbox {
   display: flex;
-  flex-direction: row !important;
+  flex-direction: row !important; /* stylelint-disable-line declaration-no-important */
   position: relative;
 }
 
 .vbox {
   display: flex;
-  flex-direction: column !important;
+  flex-direction: column !important; /* stylelint-disable-line declaration-no-important */
   position: relative;
 }
 
@@ -219,7 +219,7 @@ iframe.widget {
 }
 
 .hidden {
-  display: none !important;
+  display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .highlighted-search-result {
@@ -315,21 +315,21 @@ input::placeholder {
 .editing {
   box-shadow: var(--drop-shadow);
   background-color: var(--color-background);
-  text-overflow: clip !important;
+  text-overflow: clip !important; /* stylelint-disable-line declaration-no-important */
   padding-left: 2px;
   margin-left: -2px;
   padding-right: 2px;
   margin-right: -2px;
   margin-bottom: -1px;
   padding-bottom: 1px;
-  opacity: 100% !important;
+  opacity: 100% !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .editing,
 .editing * {
-  color: #222 !important; /* stylelint-disable-line plugin/use_theme_colors */
+  color: #222 !important; /* stylelint-disable-line plugin/use_theme_colors, declaration-no-important */
   /* See: crbug.com/1152736 for color variable migration. */
-  text-decoration: none !important;
+  text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .chrome-select {
@@ -492,7 +492,7 @@ span[is=dt-icon-label] {
 .-theme-preserve {
   -webkit-mask-image: var(--image-file-smallIcons);
   -webkit-mask-position: var(--spritesheet-position);
-  background: #fafafa !important; /* stylelint-disable-line plugin/use_theme_colors */
+  background: #fafafa !important; /* stylelint-disable-line plugin/use_theme_colors, declaration-no-important */
   /* See: crbug.com/1152736 for color variable migration. */
 }
 
@@ -502,7 +502,7 @@ span[is=dt-icon-label] {
 .-theme-preserve {
   -webkit-mask-image: var(--image-file-largeIcons);
   -webkit-mask-position: var(--spritesheet-position);
-  background: #fafafa !important; /* stylelint-disable-line plugin/use_theme_colors */
+  background: #fafafa !important; /* stylelint-disable-line plugin/use_theme_colors, declaration-no-important */
   /* See: crbug.com/1152736 for color variable migration. */
 }
 
@@ -512,7 +512,7 @@ span[is=dt-icon-label] {
 .-theme-preserve {
   -webkit-mask-image: var(--image-file-mediumIcons);
   -webkit-mask-position: var(--spritesheet-position);
-  background: #fafafa !important; /* stylelint-disable-line plugin/use_theme_colors */
+  background: #fafafa !important; /* stylelint-disable-line plugin/use_theme_colors, declaration-no-important */
   /* See: crbug.com/1152736 for color variable migration. */
 }
 
diff --git a/front_end/ui/legacy/inspectorViewTabbedPane.css b/front_end/ui/legacy/inspectorViewTabbedPane.css
index 077252beff..de5400dc6f 100644
--- a/front_end/ui/legacy/inspectorViewTabbedPane.css
+++ b/front_end/ui/legacy/inspectorViewTabbedPane.css
@@ -22,5 +22,5 @@
 }
 
 .tabbed-pane-left-toolbar {
-  margin-right: 0 !important;
+  margin-right: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
diff --git a/front_end/ui/legacy/rootView.css b/front_end/ui/legacy/rootView.css
index 11e1420b8f..b975c4cb83 100644
--- a/front_end/ui/legacy/rootView.css
+++ b/front_end/ui/legacy/rootView.css
@@ -7,7 +7,7 @@
 .root-view {
   background-color: var(--color-background);
   overflow: hidden;
-  position: absolute !important;
+  position: absolute !important; /* stylelint-disable-line declaration-no-important */
   left: 0;
   top: 0;
   right: 0;
diff --git a/front_end/ui/legacy/softContextMenu.css b/front_end/ui/legacy/softContextMenu.css
index e43977cab3..9e0e67cf9c 100644
--- a/front_end/ui/legacy/softContextMenu.css
+++ b/front_end/ui/legacy/softContextMenu.css
@@ -6,7 +6,7 @@
 
 .soft-context-menu {
   overflow-y: auto;
-  min-width: 160px !important;
+  min-width: 160px !important; /* stylelint-disable-line declaration-no-important */
   /* NOTE: Keep padding in sync with padding adjustment in SoftContextMenu.js */
   padding: 4px 0 4px 0;
   border: 1px solid #b9b9b9; /* stylelint-disable-line plugin/use_theme_colors */
diff --git a/front_end/ui/legacy/splitWidget.css b/front_end/ui/legacy/splitWidget.css
index 0ff56d76dd..8a335be3b9 100644
--- a/front_end/ui/legacy/splitWidget.css
+++ b/front_end/ui/legacy/splitWidget.css
@@ -64,7 +64,7 @@
 }
 
 .shadow-split-widget.vbox > .shadow-split-widget-sidebar.no-default-splitter {
-  border: 0 !important;
+  border: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .shadow-split-widget.vbox > .shadow-split-widget-sidebar:not(.maximized) {
diff --git a/front_end/ui/legacy/tabbedPane.css b/front_end/ui/legacy/tabbedPane.css
index efc6901061..73cb39b08c 100644
--- a/front_end/ui/legacy/tabbedPane.css
+++ b/front_end/ui/legacy/tabbedPane.css
@@ -210,12 +210,12 @@
 /* Web page style */
 
 .tabbed-pane-shadow.vertical-tab-layout {
-  flex-direction: row !important;
+  flex-direction: row !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .tabbed-pane-shadow.vertical-tab-layout .tabbed-pane-header {
   background-color: transparent;
-  border: none transparent !important;
+  border: none transparent !important; /* stylelint-disable-line declaration-no-important */
   width: auto;
   flex: 0 0 auto;
   flex-direction: column;
@@ -254,7 +254,7 @@
 }
 
 .tabbed-pane-shadow.vertical-tab-layout .tabbed-pane-header-tab:not(.selected) {
-  cursor: pointer !important;
+  cursor: pointer !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .tabbed-pane-shadow.vertical-tab-layout .tabbed-pane-header-tab.selected {
diff --git a/front_end/ui/legacy/textButton.css b/front_end/ui/legacy/textButton.css
index 4038c084d1..638db848bb 100644
--- a/front_end/ui/legacy/textButton.css
+++ b/front_end/ui/legacy/textButton.css
@@ -59,7 +59,7 @@
 .text-button.link-style {
   background: none;
   border: none;
-  padding: 0 !important;
+  padding: 0 !important; /* stylelint-disable-line declaration-no-important */
   font: inherit;
   cursor: pointer;
   height: 18px;
diff --git a/front_end/ui/legacy/textPrompt.css b/front_end/ui/legacy/textPrompt.css
index 65e5b85095..acfeeba3b0 100644
--- a/front_end/ui/legacy/textPrompt.css
+++ b/front_end/ui/legacy/textPrompt.css
@@ -12,14 +12,14 @@
 .text-prompt-editing {
   box-shadow: var(--drop-shadow);
   background-color: var(--color-background);
-  text-overflow: clip !important;
+  text-overflow: clip !important; /* stylelint-disable-line declaration-no-important */
   padding-left: 2px;
   margin-left: -2px;
   padding-right: 2px;
   margin-right: -2px;
   margin-bottom: -1px;
   padding-bottom: 1px;
-  opacity: 100% !important;
+  opacity: 100% !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .text-prompt {
@@ -32,13 +32,13 @@
 }
 
 .text-prompt-editing > .text-prompt {
-  color: var(--color-text-primary) !important;
-  text-decoration: none !important;
+  color: var(--color-text-primary) !important; /* stylelint-disable-line declaration-no-important */
+  text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
   white-space: pre;
 }
 
 .text-prompt > .auto-complete-text {
-  color: var(--color-text-secondary) !important;
+  color: var(--color-text-secondary) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .text-prompt[data-placeholder]:empty::before {
@@ -67,7 +67,7 @@
 
 @media (forced-colors: active) {
   .text-prompt[data-placeholder]:empty::before {
-    color: GrayText !important;
+    color: GrayText !important; /* stylelint-disable-line declaration-no-important */
   }
 
   .text-prompt.disabled {
diff --git a/front_end/ui/legacy/toolbar.css b/front_end/ui/legacy/toolbar.css
index 67c22382f0..2b7b925721 100644
--- a/front_end/ui/legacy/toolbar.css
+++ b/front_end/ui/legacy/toolbar.css
@@ -194,13 +194,13 @@ it. */
 
 .toolbar-button.toolbar-state-on.toolbar-toggle-with-red-color .toolbar-glyph,
 .toolbar-button.toolbar-state-off.toolbar-default-with-red-color .toolbar-glyph {
-  background-color: rgb(216 0 0) !important; /* stylelint-disable-line plugin/use_theme_colors */
+  background-color: rgb(216 0 0) !important; /* stylelint-disable-line plugin/use_theme_colors, declaration-no-important */
   /* See: crbug.com/1152736 for color variable migration. */
 }
 
 .toolbar-button.toolbar-state-on.toolbar-toggle-with-red-color .toolbar-icon,
 .toolbar-button.toolbar-state-off.toolbar-default-with-red-color .toolbar-icon {
-  --icon-color: rgb(216 0 0) !important; /* stylelint-disable-line plugin/use_theme_colors */
+  --icon-color: rgb(216 0 0) !important; /* stylelint-disable-line plugin/use_theme_colors, declaration-no-important */
   /* See: crbug.com/1152736 for color variable migration. */
 }
 
@@ -221,7 +221,7 @@ it. */
 }
 
 .toolbar-button.dark-text .toolbar-text {
-  color: #333 !important; /* stylelint-disable-line plugin/use_theme_colors */
+  color: #333 !important; /* stylelint-disable-line plugin/use_theme_colors, declaration-no-important */
   /* See: crbug.com/1152736 for color variable migration. */
 }
 
@@ -230,11 +230,11 @@ it. */
 }
 
 :host-context(.-theme-with-dark-background) .toolbar-button .toolbar-icon {
-  --icon-color: rgb(145 145 145) !important;
+  --icon-color: rgb(145 145 145) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 :host-context(.-theme-with-dark-background) .toolbar-button:hover .toolbar-icon {
-  --icon-color: rgb(204 204 204) !important;
+  --icon-color: rgb(204 204 204) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 :not(.toolbar-render-as-links) .toolbar-button:enabled:hover:not(:active) .toolbar-glyph {
@@ -278,17 +278,17 @@ it. */
 }
 
 .toolbar-toggled-gray .toolbar-button.toolbar-state-on {
-  background-color: var(--color-background-elevation-1) !important;
+  background-color: var(--color-background-elevation-1) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 :host-context(.-theme-with-dark-background) .toolbar-button.toolbar-state-on.toolbar-toggle-with-red-color .toolbar-glyph,
 :host-context(.-theme-with-dark-background) .toolbar-button.toolbar-state-off.toolbar-default-with-red-color .toolbar-glyph {
-  background-color: hsl(0deg 100% 65%) !important; /* stylelint-disable-line plugin/use_theme_colors */
+  background-color: hsl(0deg 100% 65%) !important; /* stylelint-disable-line plugin/use_theme_colors, declaration-no-important */
 }
 
 :host-context(.-theme-with-dark-background) .toolbar-button.toolbar-state-on.toolbar-toggle-with-red-color .toolbar-icon,
 :host-context(.-theme-with-dark-background) .toolbar-button.toolbar-state-off.toolbar-default-with-red-color .toolbar-icon {
-  --icon-color: hsl(0deg 100% 65%) !important;
+  --icon-color: hsl(0deg 100% 65%) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 /* Checkbox */
diff --git a/front_end/ui/legacy/treeoutline.css b/front_end/ui/legacy/treeoutline.css
index e55e4020b9..a48cb7ea38 100644
--- a/front_end/ui/legacy/treeoutline.css
+++ b/front_end/ui/legacy/treeoutline.css
@@ -204,7 +204,7 @@ ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus * {
 
   .tree-outline li.selected [is=ui-icon].icon-mask,
   .tree-outline li.selected:focus [is=ui-icon]:not(.icon-mask) {
-    background-color: HighlightText !important;
+    background-color: HighlightText !important; /* stylelint-disable-line declaration-no-important */
   }
 
   ol.tree-outline:not(.hide-selection-when-blurred) li.selected,
diff --git a/front_end/ui/legacy/viewContainers.css b/front_end/ui/legacy/viewContainers.css
index 973b45312d..e3bb7141bf 100644
--- a/front_end/ui/legacy/viewContainers.css
+++ b/front_end/ui/legacy/viewContainers.css
@@ -71,7 +71,7 @@
 @media (forced-colors: active) {
   .expandable-view-title:focus-visible {
     forced-color-adjust: none;
-    background: canvas !important;
+    background: canvas !important; /* stylelint-disable-line declaration-no-important */
     box-shadow: 0 0 0 2px Highlight inset;
   }
 }
diff --git a/inspector_overlay/common.css b/inspector_overlay/common.css
index 877877416e..efd186935b 100644
--- a/inspector_overlay/common.css
+++ b/inspector_overlay/common.css
@@ -37,5 +37,5 @@ body.platform-windows {
 }
 
 .hidden {
-  display: none !important;
+  display: none !important; /* stylelint-disable-line declaration-no-important */
 }