Update syntax definitions

packages/vscode-tailwindcss/package.json

@@ -52,12 +52,50 @@
     ],
     "grammars": [
       {
-        "scopeName": "tailwindcss.injection",
+        "scopeName": "tailwindcss.at-rules.injection",
-        "path": "./syntaxes/tailwind.tmLanguage.json",
+        "path": "./syntaxes/at-rules.tmLanguage.json",
+        "injectTo": [
+          "source.css",
+          "source.css.postcss",
+          "source.vue",
+          "source.svelte",
+          "text.html"
+        ]
+      },
+      {
+        "scopeName": "tailwindcss.at-rules.scss.injection",
+        "path": "./syntaxes/at-rules.scss.tmLanguage.json",
+        "injectTo": [
+          "source.css.scss"
+        ]
+      },
+      {
+        "scopeName": "tailwindcss.at-apply.injection",
+        "path": "./syntaxes/at-apply.tmLanguage.json",
+        "injectTo": [
+          "source.css",
+          "source.css.postcss",
+          "source.vue",
+          "source.svelte",
+          "text.html"
+        ]
+      },
+      {
+        "scopeName": "tailwindcss.theme-fn.injection",
+        "path": "./syntaxes/theme-fn.tmLanguage.json",
+        "injectTo": [
+          "source.css",
+          "source.css.postcss",
+          "source.vue",
+          "source.svelte",
+          "text.html"
+        ]
+      },
+      {
+        "scopeName": "tailwindcss.screen-fn.injection",
+        "path": "./syntaxes/screen-fn.tmLanguage.json",
         "injectTo": [
           "source.css",
-          "source.css.scss",
-          "source.css.less",
           "source.css.postcss",
           "source.vue",
           "source.svelte",

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

@@ -0,0 +1,39 @@
+{
+  "scopeName": "tailwindcss.at-apply.injection",
+  "fileTypes": [],
+  "injectionSelector": "L:meta.property-list.css -comment, meta.property-list.scss -comment",
+  "name": "TailwindCSS",
+  "patterns": [
+    {
+      "name": "meta.at-rule.apply.tailwind",
+      "begin": "(@)apply\\b",
+      "beginCaptures": {
+        "0": {
+          "name": "keyword.control.at-rule.apply.tailwind"
+        },
+        "1": {
+          "name": "punctuation.definition.keyword.css"
+        }
+      },
+      "end": ";|(?=[}])",
+      "endCaptures": {
+        "0": {
+          "name": "punctuation.terminator.apply.tailwind"
+        }
+      },
+      "patterns": [
+        {
+          "include": "source.css#comment-block"
+        },
+        {
+          "match": "!\\s*important(?![\\w-])",
+          "name": "keyword.other.important.css"
+        },
+        {
+          "match": "[^\\s;]+?",
+          "name": "entity.other.attribute-name.class.css"
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,121 @@
+{
+  "scopeName": "tailwindcss.at-rules.scss.injection",
+  "fileTypes": [],
+  "injectionSelector": "L:source.css.scss -comment",
+  "name": "TailwindCSS",
+  "patterns": [
+    {
+      "begin": "(?i)((@)tailwind)(?=\\s|/\\*|$)",
+      "beginCaptures": {
+        "1": {
+          "name": "keyword.control.at-rule.tailwind.tailwind"
+        },
+        "2": {
+          "name": "punctuation.definition.keyword.css"
+        }
+      },
+      "end": ";",
+      "endCaptures": {
+        "0": {
+          "name": "punctuation.terminator.tailwind.tailwind"
+        }
+      },
+      "name": "meta.at-rule.tailwind.css",
+      "patterns": [
+        {
+          "include": "source.css#comment-block"
+        },
+        {
+          "include": "source.css#escapes"
+        },
+        {
+          "match": "[^\\s;]+?",
+          "name": "entity.name.function.scss"
+        }
+      ]
+    },
+    {
+      "begin": "(?i)((@)screen)\\b",
+      "beginCaptures": {
+        "1": {
+          "name": "keyword.control.at-rule.screen.tailwind"
+        },
+        "2": {
+          "name": "punctuation.definition.keyword.css"
+        }
+      },
+      "end": "\\s*(?={)",
+      "patterns": [
+        {
+          "include": "source.css#comment-block"
+        },
+        {
+          "match": "[^\\s{]+?",
+          "name": "entity.name.function.scss"
+        }
+      ]
+    },
+    {
+      "begin": "(?i)((@)layer)\\b",
+      "beginCaptures": {
+        "1": {
+          "name": "keyword.control.at-rule.layer.tailwind"
+        },
+        "2": {
+          "name": "punctuation.definition.keyword.css"
+        }
+      },
+      "end": "\\s*(?={)",
+      "patterns": [
+        {
+          "include": "source.css#comment-block"
+        },
+        {
+          "match": "[^\\s{]+?",
+          "name": "entity.name.function.scss"
+        }
+      ]
+    },
+    {
+      "begin": "(?i)((@)variants)\\b",
+      "beginCaptures": {
+        "1": {
+          "name": "keyword.control.at-rule.variants.tailwind"
+        },
+        "2": {
+          "name": "punctuation.definition.keyword.css"
+        }
+      },
+      "end": "\\s*(?={)",
+      "patterns": [
+        {
+          "include": "source.css#comment-block"
+        },
+        {
+          "include": "source.css#commas"
+        },
+        {
+          "match": "[^\\s{,]+?",
+          "name": "entity.name.function.scss"
+        }
+      ]
+    },
+    {
+      "begin": "(?i)((@)responsive)\\b",
+      "beginCaptures": {
+        "1": {
+          "name": "keyword.control.at-rule.responsive.tailwind"
+        },
+        "2": {
+          "name": "punctuation.definition.keyword.css"
+        }
+      },
+      "end": "\\s*(?={)",
+      "patterns": [
+        {
+          "include": "source.css#comment-block"
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,201 @@
+{
+  "scopeName": "tailwindcss.at-rules.injection",
+  "fileTypes": [],
+  "injectionSelector": "L:source.css -comment -source.css.scss",
+  "name": "TailwindCSS",
+  "patterns": [
+    {
+      "begin": "(?i)((@)tailwind)(?=\\s|/\\*|$)",
+      "beginCaptures": {
+        "1": {
+          "name": "keyword.control.at-rule.tailwind.tailwind"
+        },
+        "2": {
+          "name": "punctuation.definition.keyword.css"
+        }
+      },
+      "end": ";",
+      "endCaptures": {
+        "0": {
+          "name": "punctuation.terminator.tailwind.tailwind"
+        }
+      },
+      "name": "meta.at-rule.tailwind.css",
+      "patterns": [
+        {
+          "include": "source.css#comment-block"
+        },
+        {
+          "include": "source.css#escapes"
+        },
+        {
+          "match": "[^\\s;]+?",
+          "name": "variable.parameter.tailwind.tailwind"
+        }
+      ]
+    },
+    {
+      "begin": "(?i)((@)screen)(?=[\\s{]|/\\*|$)",
+      "beginCaptures": {
+        "1": {
+          "name": "keyword.control.at-rule.screen.tailwind"
+        },
+        "2": {
+          "name": "punctuation.definition.keyword.css"
+        }
+      },
+      "end": "(?<=})(?!\\G)",
+      "patterns": [
+        {
+          "include": "source.css#comment-block"
+        },
+        {
+          "match": "[^\\s{]+?",
+          "name": "variable.parameter.screen.tailwind"
+        },
+        {
+          "begin": "{",
+          "beginCaptures": {
+            "0": {
+              "name": "punctuation.section.screen.begin.bracket.curly.tailwind"
+            }
+          },
+          "end": "}",
+          "endCaptures": {
+            "0": {
+              "name": "punctuation.section.screen.end.bracket.curly.tailwind"
+            }
+          },
+          "name": "meta.at-rule.screen.body.tailwind",
+          "patterns": [
+            {
+              "include": "source.css"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "begin": "(?i)((@)layer)(?=[\\s{]|/\\*|$)",
+      "beginCaptures": {
+        "1": {
+          "name": "keyword.control.at-rule.layer.tailwind"
+        },
+        "2": {
+          "name": "punctuation.definition.keyword.css"
+        }
+      },
+      "end": "(?<=})(?!\\G)",
+      "patterns": [
+        {
+          "include": "source.css#comment-block"
+        },
+        {
+          "match": "[^\\s{]+?",
+          "name": "variable.parameter.layer.tailwind"
+        },
+        {
+          "begin": "{",
+          "beginCaptures": {
+            "0": {
+              "name": "punctuation.section.layer.begin.bracket.curly.tailwind"
+            }
+          },
+          "end": "}",
+          "endCaptures": {
+            "0": {
+              "name": "punctuation.section.layer.end.bracket.curly.tailwind"
+            }
+          },
+          "name": "meta.at-rule.layer.body.tailwind",
+          "patterns": [
+            {
+              "include": "source.css"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "begin": "(?i)((@)variants)(?=[\\s{]|/\\*|$)",
+      "beginCaptures": {
+        "1": {
+          "name": "keyword.control.at-rule.variants.tailwind"
+        },
+        "2": {
+          "name": "punctuation.definition.keyword.css"
+        }
+      },
+      "end": "(?<=})(?!\\G)",
+      "patterns": [
+        {
+          "include": "source.css#comment-block"
+        },
+        {
+          "include": "source.css#commas"
+        },
+        {
+          "match": "[^\\s{,]+?",
+          "name": "variable.parameter.variants.tailwind"
+        },
+        {
+          "begin": "{",
+          "beginCaptures": {
+            "0": {
+              "name": "punctuation.section.variants.begin.bracket.curly.tailwind"
+            }
+          },
+          "end": "}",
+          "endCaptures": {
+            "0": {
+              "name": "punctuation.section.variants.end.bracket.curly.tailwind"
+            }
+          },
+          "name": "meta.at-rule.variants.body.tailwind",
+          "patterns": [
+            {
+              "include": "source.css"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "begin": "(?i)((@)responsive)(?=[\\s{]|/\\*|$)",
+      "beginCaptures": {
+        "1": {
+          "name": "keyword.control.at-rule.responsive.tailwind"
+        },
+        "2": {
+          "name": "punctuation.definition.keyword.css"
+        }
+      },
+      "end": "(?<=})(?!\\G)",
+      "patterns": [
+        {
+          "include": "source.css#comment-block"
+        },
+        {
+          "begin": "{",
+          "beginCaptures": {
+            "0": {
+              "name": "punctuation.section.responsive.begin.bracket.curly.tailwind"
+            }
+          },
+          "end": "}",
+          "endCaptures": {
+            "0": {
+              "name": "punctuation.section.responsive.end.bracket.curly.tailwind"
+            }
+          },
+          "name": "meta.at-rule.responsive.body.tailwind",
+          "patterns": [
+            {
+              "include": "source.css"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

packages/vscode-tailwindcss/syntaxes/screen-fn.tmLanguage.json

@@ -0,0 +1,37 @@
+{
+  "scopeName": "tailwindcss.screen-fn.injection",
+  "fileTypes": [],
+  "injectionSelector": "L:meta.property-value.css -comment, meta.at-rule.media.header.css -comment",
+  "name": "TailwindCSS",
+  "patterns": [
+    {
+      "begin": "(?i)(?<![\\w-])(screen)(\\()",
+      "beginCaptures": {
+        "1": {
+          "name": "support.function.screen.tailwind"
+        },
+        "2": {
+          "name": "punctuation.section.function.begin.bracket.round.css"
+        }
+      },
+      "end": "\\)",
+      "endCaptures": {
+        "0": {
+          "name": "punctuation.section.function.end.bracket.round.css"
+        }
+      },
+      "patterns": [
+        {
+          "include": "source.css#comment-block"
+        },
+        {
+          "include": "source.css#string"
+        },
+        {
+          "match": "[^\\s\\)]+?",
+          "name": "variable.parameter.screen.tailwind"
+        }
+      ]
+    }
+  ]
+}

packages/vscode-tailwindcss/syntaxes/tailwind.tmLanguage.json

@@ -1,75 +0,0 @@
-{
-  "scopeName": "tailwindcss.injection",
-  "fileTypes": [],
-  "injectionSelector": "meta.property-list.css, meta.property-list.scss",
-  "name": "TailwindCSS",
-  "patterns": [
-    {
-      "begin": "(@)apply\\b",
-      "beginCaptures": {
-        "0": {
-          "name": "keyword.control.at-rule.apply.tailwind"
-        },
-        "1": {
-          "name": "punctuation.definition.keyword.tailwind"
-        }
-      },
-      "end": ";",
-      "endCaptures": {
-        "0": {
-          "name": "punctuation.terminator.rule.tailwind"
-        }
-      },
-      "patterns": [
-        {
-          "begin": "(?x)\n(?=\n  (?:\\|)?                    # Possible anonymous namespace prefix\n  (?:\n    [-\\[:.*\\#a-zA-Z_]       # Valid selector character\n    |\n    [^\\x00-\\x7F]            # Which can include non-ASCII symbols\n    |\n    \\\\                      # Or an escape sequence\n    (?:[0-9a-fA-F]{1,6}|.)\n  )\n)",
-          "end": "(?=\\s*[;])",
-          "patterns": [
-            {
-              "match": "!\\s*important(?![\\w-])",
-              "name": "keyword.other.important.tailwind"
-            },
-            {
-              "captures": {
-                "1": {
-                  "name": "punctuation.definition.entity.tailwind"
-                },
-                "2": {
-                  "patterns": [
-                    {
-                      "include": "source.css#escapes"
-                    }
-                  ]
-                }
-              },
-              "match": "(?x)\n(\\.)?                                  # Valid class-name\n(\n  (?: [-a-zA-Z_0-9]|[^\\x00-\\x7F]     # Valid identifier characters\n    | \\\\(?:[0-9a-fA-F]{1,6}|.)       # Escape sequence\n  )+\n)                                      # Followed by either:\n(?= $                                  # - End of the line\n  | [\\s,.\\#)\\[:{>;+~|]               # - Another selector\n  | /\\*                               # - A block comment\n)",
-              "name": "entity.other.attribute-name.class.tailwind"
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "begin": "(?i)(?<![\\w-])(config|theme)(\\()",
-      "beginCaptures": {
-        "1": {
-          "name": "support.function.config.tailwind"
-        },
-        "2": {
-          "name": "punctuation.section.function.begin.bracket.round.tailwind"
-        }
-      },
-      "end": "\\)",
-      "endCaptures": {
-        "0": {
-          "name": "punctuation.section.function.end.bracket.round.tailwind"
-        }
-      },
-      "patterns": [
-        {
-          "include": "source.css#property-values"
-        }
-      ]
-    }
-  ]
-}

packages/vscode-tailwindcss/syntaxes/theme-fn.tmLanguage.json

@@ -0,0 +1,60 @@
+{
+  "scopeName": "tailwindcss.theme-fn.injection",
+  "fileTypes": [],
+  "injectionSelector": "L:meta.property-list.css -comment",
+  "name": "TailwindCSS",
+  "patterns": [
+    {
+      "begin": "(?i)(?<![\\w-])(config)(\\()",
+      "beginCaptures": {
+        "1": {
+          "name": "support.function.config.tailwind"
+        },
+        "2": {
+          "name": "punctuation.section.function.begin.bracket.round.css"
+        }
+      },
+      "end": "\\)",
+      "endCaptures": {
+        "0": {
+          "name": "punctuation.section.function.end.bracket.round.css"
+        }
+      },
+      "patterns": [
+        {
+          "include": "source.css#string"
+        },
+        {
+          "match": "[^\\s\\)]+",
+          "name": "variable.parameter.screen.tailwind"
+        }
+      ]
+    },
+    {
+      "begin": "(?i)(?<![\\w-])(theme)(\\()",
+      "beginCaptures": {
+        "1": {
+          "name": "support.function.theme.tailwind"
+        },
+        "2": {
+          "name": "punctuation.section.function.begin.bracket.round.css"
+        }
+      },
+      "end": "\\)",
+      "endCaptures": {
+        "0": {
+          "name": "punctuation.section.function.end.bracket.round.css"
+        }
+      },
+      "patterns": [
+        {
+          "include": "source.css#string"
+        },
+        {
+          "match": "[^\\s\\)]+",
+          "name": "variable.parameter.screen.tailwind"
+        }
+      ]
+    }
+  ]
+}