1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

diff --git a/packages/vscode-tailwindcss/package.json b/packages/vscode-tailwindcss/package.json
index 343dc5b4fb0219aa25d4bf187be98c5fa7fd1d91..4a40a4275057be3e4638f66516a06f699935aef3 100755
--- a/packages/vscode-tailwindcss/package.json
+++ b/packages/vscode-tailwindcss/package.json
@@ -52,12 +52,50 @@       }
     ],
     "grammars": [
       {
-        "scopeName": "tailwindcss.injection",
-        "path": "./syntaxes/tailwind.tmLanguage.json",
+        "scopeName": "tailwindcss.at-rules.injection",
+        "path": "./syntaxes/at-rules.tmLanguage.json",
         "injectTo": [
           "source.css",
-          "source.css.scss",
-          "source.css.less",
+          "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.postcss",
           "source.vue",
           "source.svelte",

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

diff --git a/packages/vscode-tailwindcss/syntaxes/at-apply.tmLanguage.json b/packages/vscode-tailwindcss/syntaxes/at-apply.tmLanguage.json
new file mode 100644
index 0000000000000000000000000000000000000000..ce9f25eb7305637b3b8e4c4f122a747ab490a380
--- /dev/null
+++ b/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"
+        }
+      ]
+    }
+  ]
+}

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

diff --git a/packages/vscode-tailwindcss/syntaxes/at-rules.scss.tmLanguage.json b/packages/vscode-tailwindcss/syntaxes/at-rules.scss.tmLanguage.json
new file mode 100644
index 0000000000000000000000000000000000000000..f29de6489aff77b82c743e48eaca3c6ddfa7865c
--- /dev/null
+++ b/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"
+        }
+      ]
+    }
+  ]
+}

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207

diff --git a/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json b/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json
new file mode 100644
index 0000000000000000000000000000000000000000..5933e54ee4cca6135c9b6fab11446cb76958f923
--- /dev/null
+++ b/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"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

diff --git a/packages/vscode-tailwindcss/syntaxes/screen-fn.tmLanguage.json b/packages/vscode-tailwindcss/syntaxes/screen-fn.tmLanguage.json
new file mode 100644
index 0000000000000000000000000000000000000000..bf2f9293db2fd66c5672ddd4c88661f80fabd102
--- /dev/null
+++ b/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"
+        }
+      ]
+    }
+  ]
+}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

diff --git a/packages/vscode-tailwindcss/syntaxes/tailwind.tmLanguage.json b/packages/vscode-tailwindcss/syntaxes/tailwind.tmLanguage.json
deleted file mode 100644
index a4d6e83641cc8b313a216b9bd5b74c61d15b37c1..0000000000000000000000000000000000000000
--- a/packages/vscode-tailwindcss/syntaxes/tailwind.tmLanguage.json
+++ /dev/null
@@ -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"
-        }
-      ]
-    }
-  ]
-}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

diff --git a/packages/vscode-tailwindcss/syntaxes/theme-fn.tmLanguage.json b/packages/vscode-tailwindcss/syntaxes/theme-fn.tmLanguage.json
new file mode 100644
index 0000000000000000000000000000000000000000..e8404f640fdfbcf170bc5249350a880147055086
--- /dev/null
+++ b/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"
+        }
+      ]
+    }
+  ]
+}