Merge branch 'main' into color

mdn · Jan 15, 2025 · 51f26b3 · 51f26b3
2 parents 524dbdc + a3814e6
commit 51f26b3
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 46 deletions.
diff --git a/css/at-rules.json b/css/at-rules.json
@@ -123,8 +123,7 @@
   "@document": {
     "syntax": "@document [ <url> | url-prefix(<string>) | domain(<string>) | media-document(<string>) | regexp(<string>) ]# {\n  <group-rule-body>\n}",
     "interfaces": [
-      "CSSGroupingRule",
-      "CSSConditionRule"
+      "CSSDocumentRule"
     ],
     "groups": [
       "CSS Conditional Rules"
@@ -288,6 +287,9 @@
   },
   "@font-palette-values": {
     "syntax": "@font-palette-values <dashed-ident> {\n  <declaration-list>\n}",
+    "interfaces": [
+      "CSSFontPaletteValuesRule"
+    ],
     "groups": [
       "CSS Fonts"
     ],
@@ -328,6 +330,9 @@
   },
   "@import": {
     "syntax": "@import [ <string> | <url> ]\n        [ layer | layer(<layer-name>) ]?\n        [ supports( [ <supports-condition> | <declaration> ] ) ]?\n        <media-query-list>? ;",
+    "interfaces": [
+      "CSSImportRule"
+    ],
     "groups": [
       "CSS Conditional Rules",
       "Media Queries"
@@ -362,10 +367,7 @@
   "@media": {
     "syntax": "@media <media-query-list> {\n  <group-rule-body>\n}",
     "interfaces": [
-      "CSSGroupingRule",
-      "CSSConditionRule",
-      "CSSMediaRule",
-      "CSSCustomMediaRule"
+      "CSSMediaRule"
     ],
     "groups": [
       "CSS Conditional Rules",
@@ -376,6 +378,9 @@
   },
   "@namespace": {
     "syntax": "@namespace <namespace-prefix>? [ <string> | <url> ];",
+    "interfaces": [
+      "CSSNamespaceRule"
+    ],
     "groups": [
       "CSS Namespaces"
     ],
@@ -459,7 +464,6 @@
   "@property": {
     "syntax": "@property <custom-property-name> {\n  <declaration-list>\n}",
     "interfaces": [
-      "CSS",
       "CSSPropertyRule"
     ],
     "groups": [
@@ -502,6 +506,9 @@
   },
   "@scope": {
     "syntax": "@scope [(<scope-start>)]? [to (<scope-end>)]? {\n  <rule-list>\n}",
+    "interfaces": [
+      "CSSScopeRule"
+    ],
     "groups": [
       "CSS Conditional Rules"
     ],
@@ -522,8 +529,6 @@
   "@supports": {
     "syntax": "@supports <supports-condition> {\n  <group-rule-body>\n}",
     "interfaces": [
-      "CSSGroupingRule",
-      "CSSConditionRule",
       "CSSSupportsRule"
     ],
     "groups": [

diff --git a/css/at-rules.md b/css/at-rules.md
@@ -27,7 +27,7 @@ The 3 properties seen above are all required:
 
 There are 3 more properties that are optional:
 * `mdn_url` (string): a URL linking to the at-rule's page on MDN. This URL must omit the localization part of the URL (such as `en-US/`).
-* `interfaces` (array of strings): These are the [CSSOM](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model) interfaces that belong to the at-rule.
+* `interfaces` (array of strings): These are the [CSSOM](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model) interfaces that belong to the at-rule. Note that inherited interfaces like `CSSGroupingRule` or `CSSConditionRule` should not be included.
 * `descriptors` (object): see below
 
 ## Structure for at-rules with descriptors

diff --git a/css/functions.json b/css/functions.json
@@ -69,15 +69,15 @@
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/attr"
   },
   "blur()": {
-    "syntax": "blur( <length> )",
+    "syntax": "blur( <length>? )",
     "groups": [
       "Filter Effects"
     ],
     "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/filter-function/blur"
   },
   "brightness()": {
-    "syntax": "brightness( <number-percentage> )",
+    "syntax": "brightness( [ <number> | <percentage> ]? )",
     "groups": [
       "Filter Effects"
     ],
@@ -145,10 +145,9 @@
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/gradient/conic-gradient"
   },
   "contrast()": {
-    "syntax": "contrast( [ <number-percentage> ] )",
+    "syntax": "contrast( [ <number> | <percentage> ]? )",
     "groups": [
-      "Filter Effects",
-      "CSS Color"
+      "Filter Effects"
     ],
     "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/filter-function/contrast"
@@ -188,10 +187,9 @@
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/cross-fade"
   },
   "drop-shadow()": {
-    "syntax": "drop-shadow( <length>{2,3} <color>? )",
+    "syntax": "drop-shadow( [ <color>? && <length>{2,3} ] )",
     "groups": [
-      "Filter Effects",
-      "CSS Color"
+      "Filter Effects"
     ],
     "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/filter-function/drop-shadow"
@@ -238,10 +236,9 @@
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/fit-content_function"
   },
   "grayscale()": {
-    "syntax": "grayscale( <number-percentage> )",
+    "syntax": "grayscale( [ <number> | <percentage> ]? )",
     "groups": [
-      "Filter Effects",
-      "CSS Color"
+      "Filter Effects"
     ],
     "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/filter-function/grayscale"
@@ -263,10 +260,9 @@
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/color_value/hsl"
   },
   "hue-rotate()": {
-    "syntax": "hue-rotate( <angle> )",
+    "syntax": "hue-rotate( [ <angle> | <zero> ]? )",
     "groups": [
-      "Filter Effects",
-      "CSS Color"
+      "Filter Effects"
     ],
     "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/filter-function/hue-rotate"
@@ -313,10 +309,9 @@
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/basic-shape/inset"
   },
   "invert()": {
-    "syntax": "invert( <number-percentage> )",
+    "syntax": "invert( [ <number> | <percentage> ]? )",
     "groups": [
-      "Filter Effects",
-      "CSS Color"
+      "Filter Effects"
     ],
     "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/filter-function/invert"
@@ -447,10 +442,9 @@
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/color_value/oklch"
   },
   "opacity()": {
-    "syntax": "opacity( [ <number-percentage> ] )",
+    "syntax": "opacity( [ <number> | <percentage> ]? )",
     "groups": [
-      "Filter Effects",
-      "CSS Color"
+      "Filter Effects"
     ],
     "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/filter-function/opacity"
@@ -624,10 +618,9 @@
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/round"
   },
   "saturate()": {
-    "syntax": "saturate( <number-percentage> )",
+    "syntax": "saturate( [ <number> | <percentage> ]? )",
     "groups": [
-      "Filter Effects",
-      "CSS Color"
+      "Filter Effects"
     ],
     "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/filter-function/saturate"
@@ -681,10 +674,9 @@
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/animation-timeline/scroll"
   },
   "sepia()": {
-    "syntax": "sepia( <number-percentage> )",
+    "syntax": "sepia( [ <number> | <percentage> ]? )",
     "groups": [
-      "Filter Effects",
-      "CSS Color"
+      "Filter Effects"
     ],
     "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/filter-function/sepia"

diff --git a/css/syntaxes.json b/css/syntaxes.json
@@ -99,10 +99,10 @@
     "syntax": "normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity"
   },
   "blur()": {
-    "syntax": "blur( <length> )"
+    "syntax": "blur( <length>? )"
   },
   "brightness()": {
-    "syntax": "brightness( <number-percentage> )"
+    "syntax": "brightness( [ <number> | <percentage> ]? )"
   },
   "calc()": {
     "syntax": "calc( <calc-sum> )"
@@ -222,7 +222,7 @@
     "syntax": "[ contextual | no-contextual ]"
   },
   "contrast()": {
-    "syntax": "contrast( [ <number-percentage> ] )"
+    "syntax": "contrast( [ <number> | <percentage> ]? )"
   },
   "coord-box": {
     "syntax": "<paint-box> | view-box"
@@ -288,7 +288,7 @@
     "syntax": "block | inline | run-in"
   },
   "drop-shadow()": {
-    "syntax": "drop-shadow( <length>{2,3} <color>? )"
+    "syntax": "drop-shadow( [ <color>? && <length>{2,3} ] )"
   },
   "easing-function": {
     "syntax": "linear | <cubic-bezier-timing-function> | <step-timing-function>"
@@ -393,7 +393,7 @@
     "syntax": "<linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()> | <repeating-conic-gradient()>"
   },
   "grayscale()": {
-    "syntax": "grayscale( <number-percentage> )"
+    "syntax": "grayscale( [ <number> | <percentage> ]? )"
   },
   "grid-line": {
     "syntax": "auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]"
@@ -414,7 +414,7 @@
     "syntax": "[ shorter | longer | increasing | decreasing ] hue"
   },
   "hue-rotate()": {
-    "syntax": "hue-rotate( <angle> )"
+    "syntax": "hue-rotate( [ <angle> | <zero> ]? )"
   },
   "hwb()": {
     "syntax": "hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )"
@@ -450,7 +450,7 @@
     "syntax": "inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )"
   },
   "invert()": {
-    "syntax": "invert( <number-percentage> )"
+    "syntax": "invert( [ <number> | <percentage> ]? )"
   },
   "keyframe-block": {
     "syntax": "<keyframe-selector># {\n  <declaration-list>\n}"
@@ -627,7 +627,7 @@
     "syntax": "oklch( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )"
   },
   "opacity()": {
-    "syntax": "opacity( [ <number-percentage> ] )"
+    "syntax": "opacity( [ <number> | <percentage> ]? )"
   },
   "opacity-value": {
     "syntax": "<number> | <percentage>"
@@ -783,7 +783,7 @@
     "syntax": "nearest | up | down | to-zero"
   },
   "saturate()": {
-    "syntax": "saturate( <number-percentage> )"
+    "syntax": "saturate( [ <number> | <percentage> ]? )"
   },
   "scale()": {
     "syntax": "scale( [ <number> | <percentage> ]#{1,2} )"
@@ -819,7 +819,7 @@
     "syntax": "center | start | end | self-start | self-end | flex-start | flex-end"
   },
   "sepia()": {
-    "syntax": "sepia( <number-percentage> )"
+    "syntax": "sepia( [ <number> | <percentage> ]? )"
   },
   "shadow": {
     "syntax": "inset? && <length>{2,4} && <color>?"