feat(css): Update syntax of filter functions for optional parameters (#886)

Author: skyclouds2001

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"

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> )"
@@ -216,7 +216,7 @@
     "syntax": "[ contextual | no-contextual ]"
   },
   "contrast()": {
-    "syntax": "contrast( [ <number-percentage> ] )"
+    "syntax": "contrast( [ <number> | <percentage> ]? )"
   },
   "coord-box": {
     "syntax": "<paint-box> | view-box"
@@ -282,7 +282,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>"
@@ -387,7 +387,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> ] ]"
@@ -408,7 +408,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] ]? )"
@@ -444,7 +444,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}"
@@ -621,7 +621,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>"
@@ -777,7 +777,7 @@
     "syntax": "nearest | up | down | to-zero"
   },
   "saturate()": {
-    "syntax": "saturate( <number-percentage> )"
+    "syntax": "saturate( [ <number> | <percentage> ]? )"
   },
   "scale()": {
     "syntax": "scale( [ <number> | <percentage> ]#{1,2} )"
@@ -813,7 +813,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>?"