Bug 1904285 - [devtools] Don't mark CSS variable declaration invalid in ::cue and highlight pseudo-elements. a=dmeehan.

Original Revision: https://phabricator.services.mozilla.com/D214546

Differential Revision: https://phabricator.services.mozilla.com/D217101

devtools/server/actors/utils/inactive-property-helper.js

@@ -768,7 +768,10 @@ class InactivePropertyHelper {
       if (validator.invalidProperties) {
         isRuleConcerned = validator.invalidProperties.includes(property);
       } else if (validator.acceptedProperties) {
-        isRuleConcerned = !validator.acceptedProperties.has(property);
+        isRuleConcerned =
+          !validator.acceptedProperties.has(property) &&
+          // custom properties can always be set
+          !property.startsWith("--");
       }
 
       if (!isRuleConcerned) {

devtools/server/tests/chrome/inactive-property-helper/cue-pseudo-element.mjs

@@ -368,4 +368,11 @@ export default [
     isActive: false,
     expectedMsgId: "inactive-css-cue-pseudo-element-not-supported",
   },
+  {
+    info: "custom property is active on ::cue",
+    property: "--my-var",
+    tagName: "video",
+    rules: ["video::cue { --my-var: red; }"],
+    isActive: true,
+  },
 ];

devtools/server/tests/chrome/inactive-property-helper/highlight-pseudo-elements.mjs

@@ -168,4 +168,12 @@ export default [
     rules: ["span::target-text { background: red; }"],
     isActive: true,
   },
+  {
+    // accept custom properties
+    info: "custom property is active on ::target-text",
+    property: "--my-var",
+    tagName: "span",
+    rules: ["span::target-text { -my-var: red; }"],
+    isActive: true,
+  },
 ];