[CSS] Update completions from MDN (#3881)

* [CSS] Add "hyphenate-limit-chars" property * [CSS] Add support for oklab() and oklch() functions * [CSS] Use more common slash as alpha separator * [CSS] Add "page" property * [CSS] Add "font-variant-emoji" property * [CSS] Update "container-name" values * [CSS] Add "font-synthesis-..." properties * [CSS] Update "offset-position" values * [CSS] Add text-wrap and white-space-collapse, and update white-space * [CSS] Add light-dark() function
sublimehq · Mar 15, 2024 · 2805af6 · 2805af6
1 parent 851fc57
commit 2805af6
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 13 deletions.
diff --git a/CSS/CSS.sublime-syntax b/CSS/CSS.sublime-syntax
@@ -2034,7 +2034,9 @@ contexts:
   color-color-functions:
     # color()
     # https://drafts.csswg.org/css-color/#color-function
-    - match: \b(?i:color)(?=\()
+    # light-dark()
+    # https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark
+    - match: \b(?i:color|light-dark)(?=\()
       scope: meta.function-call.identifier.css support.function.color.css
       push:
         - color-color-function-arguments-list-body
@@ -2056,8 +2058,9 @@ contexts:
     # https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hwb
     # lch()
     # https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lch
-    # https://drafts.csswg.org/css-color/#funcdef-lch
-    - match: \b(?i:hsla?|hwb|lch)(?=\()
+    # oklch()
+    # https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch
+    - match: \b(?i:hsla?|hwb|(?:ok)?lch)(?=\()
       scope: meta.function-call.identifier.css support.function.color.css
       push:
         - hsl-color-function-arguments-list-body
@@ -2075,11 +2078,11 @@ contexts:
   rgb-color-functions:
     # rgb(), rgba()
     # https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb
-    # https://drafts.csswg.org/css-color/#funcdef-rgb
     # lab()
     # https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lab
-    # https://drafts.csswg.org/css-color/#funcdef-lab
-    - match: \b(?i:rgba?|lab)(?=\()
+    # oklab()
+    # https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklab
+    - match: \b(?i:rgba?|(?:ok)?lab)(?=\()
       scope: meta.function-call.identifier.css support.function.color.css
       push:
         - rgb-color-function-arguments-list-body

diff --git a/CSS/completions/common.py b/CSS/completions/common.py
@@ -100,13 +100,16 @@ def get_common_values():
         "color": [
             "currentColor",
             "transparent",
-            ["rgb()", "rgb(${1:0}, ${2:0}, ${3:0}${4:, ${5:1.0}})"],
+            ["rgb()", "rgb(${1:0}, ${2:0}, ${3:0}${4: / ${5:1.0}})"],
             ["rgba()", "rgba(${1:0}, ${2:0}, ${3:0}, ${4:1.0})"],
-            ["hsl()", "hsl(${1:0}, ${2:100%}, ${3:50%}${4:, ${5:1.0}})"],
+            ["hsl()", "hsl(${1:0}, ${2:100%}, ${3:50%}${4: / ${5:1.0}})"],
             ["hsla()", "hsla(${1:0}, ${2:100%}, ${3:50%}, ${4:1.0})"],
-            ["hwb()", "hwb(${1:0}, ${2:100%}, ${3:50%}${4:, ${5:1.0}})"],
-            ["lab()", "lab(${1:0%}, ${2:0}, ${3:0}${4:, ${5:1.0}})"],
-            ["lch()", "lch(${1:0%}, ${2:0.0}, ${3:0.0}${4:, ${5:1.0}})"],
+            ["hwb()", "hwb(${1:0}, ${2:100%}, ${3:50%}${4: / ${5:1.0}})"],
+            ["lab()", "lab(${1:0%}, ${2:0}, ${3:0}${4: / ${5:1.0}})"],
+            ["lch()", "lch(${1:0%}, ${2:0.0}, ${3:0.0}${4: / ${5:1.0}})"],
+            ["light-dark()", "light-dark(${1}, ${2})"],
+            ["oklab()", "oklab(${1:0%}, ${2:0}, ${3:0}${4: / ${5:1.0}})"],
+            ["oklch()", "oklch(${1:0%}, ${2:0.0}, ${3:0.0}${4: / ${5:1.0}})"],
             # Named colors
             "aliceblue",
             "antiquewhite",
@@ -441,6 +444,7 @@ def get_common_values():
         ],
         "shape-radius": ["closest-side", "farthest-side"],
         "side-or-corner": ["left", "right", "top", "bottom"],
+        "text-wrap": ["wrap", "nowrap", "balance", "stable", "pretty"],
         "timing-function": [
             "linear",
             "ease",
@@ -494,6 +498,20 @@ def get_common_values():
             "%",
         ],
         "url": [["url()", "url($1)"]],
+        "white-space-collapse": [
+            "collapse",
+            "discard",
+            "preserve",
+            "preserve-breaks",
+            "preserve-spaces",
+            "break-spaces"
+        ],
+        "white-space-trim": [
+            "none",
+            "discard-before",
+            "discard-after",
+            "discard-inner"
+        ],
     }
 
     resolved_values = {}

diff --git a/CSS/completions/function_args.py b/CSS/completions/function_args.py
@@ -41,6 +41,7 @@ def get_func_args():
         "lab": ["<calc>", "none"],
         "lch": ["<calc>", "none"],
         "leader": ["<leader-type>"],
+        "light-dark": ["<color>"],
         "linear-gradient": ["<side-or-corner>", "<color>", "to"],
         "log": ["<calc>"],
         "matrix": ["<calc>"],
@@ -49,6 +50,8 @@ def get_func_args():
         "min": [["attr()", "attr($1)"], "<calc>"],
         "minmax": ["min-content", "max-content", "auto"],
         "mod": ["<calc>"],
+        "oklab": ["<calc>", "none"],
+        "oklch": ["<calc>", "none"],
         "opacity": ["<calc>"],
         "path": ["<fill-rule>"],
         "paint": [],

diff --git a/CSS/completions/properties.py b/CSS/completions/properties.py
@@ -274,7 +274,7 @@ def get_properties():
         ],
         "columns": ["<calc>", "auto"],
         "container": ["<container-type>"],
-        "container-name": [],
+        "container-name": ["none"],
         "container-type": ["<container-type>"],
         "contain": ["content", "layout", "none", "paint", "inline-size", "size", "strict", "style"],
         "contain-intrinsic-size": ["none", "auto"],
@@ -479,6 +479,9 @@ def get_properties():
         ],
         "font-style": ["normal", "italic", "oblique"],
         "font-synthesis": ["none", "weight", "style", "small-caps"],
+        "font-synthesis-small-caps": ["auto", "none"],
+        "font-synthesis-style": ["auto", "none"],
+        "font-synthesis-weight": ["auto", "none"],
         "font-variant": ["normal", "small-caps"],
         "font-variant-alternates": ["<font-variant-alternates>"],
         "font-variant-caps": [
@@ -500,6 +503,7 @@ def get_properties():
             "simplified",
             "traditional",
         ],
+        "font-variant-emoji": ["normal", "text", "emoji", "unicode"],
         "font-variant-ligatures": [
             "normal",
             "none",
@@ -626,6 +630,7 @@ def get_properties():
         "height": ["<calc>", "auto", "fit-content"],
         "hyphens": ["none", "manual", "auto"],
         "hyphenate-character": ["auto"],
+        "hyphenate-limit-chars": ["auto"],
         "image-orientation": ["flip", "from-image"],
         "image-rendering": ["auto", "optimizeSpeed", "optimizeQuality", "pixelated"],
         "image-resolution": ["from-image"],
@@ -812,7 +817,7 @@ def get_properties():
         "offset-inline-end": ["<calc>", "auto"],
         "offset-inline-start": ["<calc>", "auto"],
         "offset-path": ["<calc>", "none"],
-        "offset-position": ["<calc>", "auto"],
+        "offset-position": ["<calc>", "auto", "normal"],
         "offset-rotate": ["<calc>", "auto", "reverse"],
         "opacity": [
             "<calc>",
@@ -872,9 +877,11 @@ def get_properties():
         "padding-left": ["<calc>", "auto"],
         "padding-right": ["<calc>", "auto"],
         "padding-top": ["<calc>", "auto"],
+        "page": ["auto"],
         "page-break-after": ["auto", "always", "avoid", "left", "right"],
         "page-break-before": ["auto", "always", "avoid", "left", "right"],
         "page-break-inside": ["avoid", "auto"],
+        "page-orientation": ["upright", "rotate-left", "rotate-right"],
         "paint-order": ["normal", "fill", "stroke", "markers"],
         "perspective": ["none"],
         "perspective-origin": ["<calc>", "<position>"],
@@ -1091,6 +1098,7 @@ def get_properties():
         ],
         "text-underline-offset": ["<calc>", "auto"],
         "text-underline-position": ["auto", "under", "left", "right"],
+        "text-wrap": ["<text-wrap>"],
         "top": ["<calc>", "auto"],
         "touch-action": [
             "auto",
@@ -1192,7 +1200,12 @@ def get_properties():
             "nowrap",
             "pre-wrap",
             "pre-line",
+            "<text-wrap>",
+            "<white-space-collapse>",
+            "<white-space-trim>",
         ],
+        "white-space-collapse": ["<white-space-collapse>"],
+        "white-space-trim": ["<white-space-trim>"],
         "widows": [
             "<calc>",
         ],

diff --git a/CSS/syntax_test_css.css b/CSS/syntax_test_css.css
@@ -3253,6 +3253,25 @@
 /*                              ^^^ constant.numeric.value.css */
 /*                                 ^ constant.numeric.suffix.css */
 
+    color: oklab(0% 0 0 / 1.0);
+/*         ^^^^^ support.function.color.css */
+/*                      ^ punctuation.separator.alpha.css */
+
+    color: oklch(0% 0.0 0.0 / 1.0);
+/*         ^^^^^ support.function.color.css */
+/*               ^^ meta.number.integer.decimal.css */
+/*               ^ constant.numeric.value.css */
+/*                  ^^^ meta.number.float.decimal.css constant.numeric.value.css */
+/*                      ^^^ meta.number.float.decimal.css constant.numeric.value.css */
+/*                          ^ punctuation.separator.alpha.css */
+/*                            ^^^ meta.number.float.decimal.css constant.numeric.value.css */
+
+    color: light-dark(red, rgb(0, 0, 0));
+/*         ^^^^^^^^^^ support.function.color.css */
+/*                    ^^^ support.constant.color.w3c.standard.css */
+/*                       ^ punctuation.separator.sequence.css */
+/*                         ^^^ support.function.color.css */
+
     top: color(w(var()) s(var()) () ));
 /*       ^^^^^ support.function.color.css */
 /*            ^ punctuation.section.group.begin.css */