Highlight inline(…) in @source inline(…)

Author: thecrypticace

packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap

@@ -600,41 +600,53 @@ exports[`@source 1`] = `
 ^                                                            1: source.css.tailwind
 
 @source inline("flex");
-^^^^^^^^^^^^^^^^^^^^^^^                                      9: source.css.tailwind
+^^^^^^^^^^^^^^^^^^^^^^^                                     10: source.css.tailwind
 ^^^^^^^                                                      2: keyword.control.at-rule.source.tailwind
 ^                                                            1: punctuation.definition.keyword.tailwind
+        ^^^^^^                                               1: support.function.inline.css
+              ^                                              1: punctuation.section.function.begin.bracket.round.css
                ^^^^^^                                        3: string.quoted.double.css
                ^                                             1: punctuation.definition.string.begin.css
                     ^                                        1: punctuation.definition.string.end.css
+                     ^                                       1: punctuation.section.function.end.bracket.round.css
                       ^                                      1: punctuation.terminator.rule.css
 
 @source inline("flex bg-red-{50,{100..900..100},950}");
-^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^      9: source.css.tailwind
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^     10: source.css.tailwind
 ^^^^^^^                                                      2: keyword.control.at-rule.source.tailwind
 ^                                                            1: punctuation.definition.keyword.tailwind
+        ^^^^^^                                               1: support.function.inline.css
+              ^                                              1: punctuation.section.function.begin.bracket.round.css
                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^        3: string.quoted.double.css
                ^                                             1: punctuation.definition.string.begin.css
                                                     ^        1: punctuation.definition.string.end.css
+                                                     ^       1: punctuation.section.function.end.bracket.round.css
                                                       ^      1: punctuation.terminator.rule.css
 
 @source not inline("flex");
-^^^^^^^^^^^^^^^^^^^^^^^^^^^                                 10: source.css.tailwind
+^^^^^^^^^^^^^^^^^^^^^^^^^^^                                 12: source.css.tailwind
 ^^^^^^^                                                      2: keyword.control.at-rule.source.tailwind
 ^                                                            1: punctuation.definition.keyword.tailwind
         ^^^                                                  1: support.constant.not.css
+            ^^^^^^                                           1: support.function.inline.css
+                  ^                                          1: punctuation.section.function.begin.bracket.round.css
                    ^^^^^^                                    3: string.quoted.double.css
                    ^                                         1: punctuation.definition.string.begin.css
                         ^                                    1: punctuation.definition.string.end.css
+                         ^                                   1: punctuation.section.function.end.bracket.round.css
                           ^                                  1: punctuation.terminator.rule.css
 
 @source not inline("flex bg-red-{50,{100..900..100},950}");
-^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 10: source.css.tailwind
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 12: source.css.tailwind
 ^^^^^^^                                                      2: keyword.control.at-rule.source.tailwind
 ^                                                            1: punctuation.definition.keyword.tailwind
         ^^^                                                  1: support.constant.not.css
+            ^^^^^^                                           1: support.function.inline.css
+                  ^                                          1: punctuation.section.function.begin.bracket.round.css
                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^    3: string.quoted.double.css
                    ^                                         1: punctuation.definition.string.begin.css
                                                         ^    1: punctuation.definition.string.end.css
+                                                         ^   1: punctuation.section.function.end.bracket.round.css
                                                           ^  1: punctuation.terminator.rule.css
 "
 `;

packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json

@@ -311,6 +311,9 @@
         },
         {
           "include": "source.css#string"
+        },
+        {
+          "include": "#inline-fn"
         }
       ]
     },
@@ -613,6 +616,36 @@
         }
       ]
     },
+    "inline-fn": {
+      "patterns": [
+        {
+          "begin": "(?i)(?:\\s*)(?<![\\w@-])(inline)([(])",
+          "beginCaptures": {
+            "1": {
+              "name": "support.function.inline.css"
+            },
+            "2": {
+              "name": "punctuation.section.function.begin.bracket.round.css"
+            }
+          },
+          "end": "[)]",
+          "endCaptures": {
+            "0": {
+              "name": "punctuation.section.function.end.bracket.round.css"
+            }
+          },
+          "patterns": [
+            {
+              "match": "none(?=[)])",
+              "name": "support.constant.none.css"
+            },
+            {
+              "include": "source.css#string"
+            }
+          ]
+        }
+      ]
+    },
     "theme-meta-fn": {
       "patterns": [
         {