Skip to content

Commit 6868229

Browse files
bradlcbradlc
authored
Fix @screen highlighting for Vetur SFC PostCSS styles (#538)
1 parent d28ebbc commit 6868229

File tree

2 files changed

+220
-1
lines changed

2 files changed

+220
-1
lines changed

‎packages/vscode-tailwindcss/package.json

+7-1
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,6 @@
7373
"path": "./syntaxes/at-rules.tmLanguage.json",
7474
"injectTo": [
7575
"source.css",
76-
"source.css.postcss",
7776
"source.vue",
7877
"source.svelte",
7978
"text.html"
@@ -86,6 +85,13 @@
8685
"source.css.scss"
8786
]
8887
},
88+
{
89+
"scopeName": "tailwindcss.at-rules.postcss.injection",
90+
"path": "./syntaxes/at-rules.postcss.tmLanguage.json",
91+
"injectTo": [
92+
"source.css.postcss"
93+
]
94+
},
8995
{
9096
"scopeName": "tailwindcss.at-apply.injection",
9197
"path": "./syntaxes/at-apply.tmLanguage.json",

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

+213
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
{
2+
"scopeName": "tailwindcss.at-rules.injection",
3+
"fileTypes": [],
4+
"injectionSelector": "L:source.css.postcss -comment",
5+
"name": "TailwindCSS",
6+
"patterns": [
7+
{
8+
"begin": "(?i)((@)tailwind)(?=\\s|/\\*|$)",
9+
"beginCaptures": {
10+
"1": {
11+
"name": "keyword.control.at-rule.tailwind.tailwind"
12+
},
13+
"2": {
14+
"name": "punctuation.definition.keyword.css"
15+
}
16+
},
17+
"end": ";",
18+
"endCaptures": {
19+
"0": {
20+
"name": "punctuation.terminator.tailwind.tailwind"
21+
}
22+
},
23+
"name": "meta.at-rule.tailwind.css",
24+
"patterns": [
25+
{
26+
"include": "source.css#comment-block"
27+
},
28+
{
29+
"include": "source.css.postcss#double-slash"
30+
},
31+
{
32+
"include": "source.css#escapes"
33+
},
34+
{
35+
"match": "[^\\s;]+?",
36+
"name": "variable.parameter.tailwind.tailwind"
37+
}
38+
]
39+
},
40+
{
41+
"begin": "(?i)((@)screen)(?=[\\s{]|/\\*|$)",
42+
"beginCaptures": {
43+
"1": {
44+
"name": "keyword.control.at-rule.screen.tailwind"
45+
},
46+
"2": {
47+
"name": "punctuation.definition.keyword.css"
48+
}
49+
},
50+
"end": "(?<=})(?!\\G)",
51+
"patterns": [
52+
{
53+
"include": "source.css#comment-block"
54+
},
55+
{
56+
"include": "source.css.postcss#double-slash"
57+
},
58+
{
59+
"match": "[^\\s{]+?",
60+
"name": "variable.parameter.screen.tailwind"
61+
},
62+
{
63+
"begin": "{",
64+
"beginCaptures": {
65+
"0": {
66+
"name": "punctuation.section.screen.begin.bracket.curly.tailwind"
67+
}
68+
},
69+
"end": "}",
70+
"endCaptures": {
71+
"0": {
72+
"name": "punctuation.section.screen.end.bracket.curly.tailwind"
73+
}
74+
},
75+
"name": "meta.at-rule.screen.body.tailwind",
76+
"patterns": [
77+
{
78+
"include": "source.css.postcss"
79+
}
80+
]
81+
}
82+
]
83+
},
84+
{
85+
"begin": "(?i)((@)layer)(?=[\\s{]|/\\*|$)",
86+
"beginCaptures": {
87+
"1": {
88+
"name": "keyword.control.at-rule.layer.tailwind"
89+
},
90+
"2": {
91+
"name": "punctuation.definition.keyword.css"
92+
}
93+
},
94+
"end": "(?<=})(?!\\G)",
95+
"patterns": [
96+
{
97+
"include": "source.css#comment-block"
98+
},
99+
{
100+
"include": "source.css.postcss#double-slash"
101+
},
102+
{
103+
"match": "[^\\s{]+?",
104+
"name": "variable.parameter.layer.tailwind"
105+
},
106+
{
107+
"begin": "{",
108+
"beginCaptures": {
109+
"0": {
110+
"name": "punctuation.section.layer.begin.bracket.curly.tailwind"
111+
}
112+
},
113+
"end": "}",
114+
"endCaptures": {
115+
"0": {
116+
"name": "punctuation.section.layer.end.bracket.curly.tailwind"
117+
}
118+
},
119+
"name": "meta.at-rule.layer.body.tailwind",
120+
"patterns": [
121+
{
122+
"include": "source.css.postcss"
123+
}
124+
]
125+
}
126+
]
127+
},
128+
{
129+
"begin": "(?i)((@)variants)(?=[\\s{]|/\\*|$)",
130+
"beginCaptures": {
131+
"1": {
132+
"name": "keyword.control.at-rule.variants.tailwind"
133+
},
134+
"2": {
135+
"name": "punctuation.definition.keyword.css"
136+
}
137+
},
138+
"end": "(?<=})(?!\\G)",
139+
"patterns": [
140+
{
141+
"include": "source.css#comment-block"
142+
},
143+
{
144+
"include": "source.css.postcss#double-slash"
145+
},
146+
{
147+
"match": "[^\\s{,]+?",
148+
"name": "variable.parameter.variants.tailwind"
149+
},
150+
{
151+
"begin": "{",
152+
"beginCaptures": {
153+
"0": {
154+
"name": "punctuation.section.variants.begin.bracket.curly.tailwind"
155+
}
156+
},
157+
"end": "}",
158+
"endCaptures": {
159+
"0": {
160+
"name": "punctuation.section.variants.end.bracket.curly.tailwind"
161+
}
162+
},
163+
"name": "meta.at-rule.variants.body.tailwind",
164+
"patterns": [
165+
{
166+
"include": "source.css.postcss"
167+
}
168+
]
169+
}
170+
]
171+
},
172+
{
173+
"begin": "(?i)((@)responsive)(?=[\\s{]|/\\*|$)",
174+
"beginCaptures": {
175+
"1": {
176+
"name": "keyword.control.at-rule.responsive.tailwind"
177+
},
178+
"2": {
179+
"name": "punctuation.definition.keyword.css"
180+
}
181+
},
182+
"end": "(?<=})(?!\\G)",
183+
"patterns": [
184+
{
185+
"include": "source.css#comment-block"
186+
},
187+
{
188+
"include": "source.css.postcss#double-slash"
189+
},
190+
{
191+
"begin": "{",
192+
"beginCaptures": {
193+
"0": {
194+
"name": "punctuation.section.responsive.begin.bracket.curly.tailwind"
195+
}
196+
},
197+
"end": "}",
198+
"endCaptures": {
199+
"0": {
200+
"name": "punctuation.section.responsive.end.bracket.curly.tailwind"
201+
}
202+
},
203+
"name": "meta.at-rule.responsive.body.tailwind",
204+
"patterns": [
205+
{
206+
"include": "source.css.postcss"
207+
}
208+
]
209+
}
210+
]
211+
}
212+
]
213+
}

0 commit comments

Comments
 (0)