Add support for \!important priority in CSS declarations

replayio · Dec 6, 2024 · 55747a7 · 55747a7
1 parent bf180ef
commit 55747a7
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 1 deletion.
diff --git a/src/devtools/client/inspector/computed/actions/index.ts b/src/devtools/client/inspector/computed/actions/index.ts
@@ -105,13 +105,15 @@ export async function createComputedProperties(
               cachedParsedProperties.set(combinedNameValue, parsedValue);
             }
 
+
             selectors.push({
               value: property.value,
               parsedValue,
               selector,
               stylesheet,
               stylesheetURL,
               overridden: !!property.overridden,
+              priority: property.priority,
             });
           }
         }

diff --git a/src/devtools/client/inspector/computed/components/ComputedProperty.tsx b/src/devtools/client/inspector/computed/components/ComputedProperty.tsx
@@ -73,6 +73,7 @@ export default function ComputedProperty(props: ComputedPropertyProps) {
         <div className="matchedselectors">
           {isExpanded
             ? property.selectors.map((selector, index) => (
+                // Reproduction step Repro:ComputedProperty:
                 <MatchedSelector key={index} selector={selector} />
               ))
             : null}

diff --git a/src/devtools/client/inspector/computed/components/MatchedSelector.tsx b/src/devtools/client/inspector/computed/components/MatchedSelector.tsx
@@ -26,11 +26,13 @@ export default function MatchedSelector(props: MatchedSelectorProps) {
       <span dir="ltr" className="rule-text theme-fg-color3">
         <div className="fix-get-selection">{selector.selector}</div>
         <div className="fix-get-selection computed-other-property-value theme-fg-color1">
+
           <DeclarationValue
             colorSpanClassName="computed-color"
             colorSwatchClassName="computed-colorswatch"
             fontFamilySpanClassName="computed-font-family"
             values={selector.parsedValue}
+            priority={selector.priority}
           />
         </div>
       </span>

diff --git a/src/devtools/client/inspector/rules/components/DeclarationValue.tsx b/src/devtools/client/inspector/rules/components/DeclarationValue.tsx
@@ -11,11 +11,13 @@ interface DeclarationValueProps {
   colorSwatchClassName: string;
   fontFamilySpanClassName: string;
   values: (string | Record<string, string>)[];
+  priority?: string;
 }
 
 class DeclarationValue extends React.PureComponent<DeclarationValueProps> {
   render() {
-    return this.props.values.map(v => {
+
+    const renderedValues = this.props.values.map(v => {
       if (typeof v === "string") {
         return v;
       }
@@ -46,6 +48,13 @@ class DeclarationValue extends React.PureComponent<DeclarationValueProps> {
 
       return value;
     });
+
+    // Add the !important suffix if needed
+    if (this.props.priority === "important") {
+      renderedValues.push(" !important");
+    }
+
+    return renderedValues;
   }
 }