Skip to content

Commit e8e2508

Browse files
thecrypticacethecrypticace
committed
Fix highlighting of @custom-variant 
1 parent 7ee0f78 commit e8e2508

File tree

2 files changed

+32
-22
lines changed

2 files changed

+32
-22
lines changed

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

Lines changed: 31 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -25,20 +25,30 @@ exports[`@config statement 1`] = `
2525
exports[`@custom-variant 1`] = `
2626
"
2727
@custom-variant dark (&:is(.dark, .dark *));
28-
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 4: source.css.tailwind meta.at-rule.header.css
29-
^^^^^^^^^^^^^^^ 2: keyword.control.at-rule.css
28+
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 21: source.css.tailwind
29+
^^^^^^^^^^^^^^^ 2: keyword.control.at-rule.variant.tailwind
3030
^ 1: punctuation.definition.keyword.css
31-
^ 1: punctuation.terminator.rule.css
31+
^^^^ 1: variable.parameter.variant.tailwind
32+
^^^^^^^^^^^^^^^^^^^^^^ 15: meta.selector.tailwind
33+
^ 1: punctuation.section.variant.begin.bracket.paren.tailwind
34+
^^^ 2: entity.other.attribute-name.pseudo-class.css
35+
^ ^ ^ 3: punctuation.definition.entity.css
36+
^ 1: punctuation.section.function.begin.bracket.round.css
37+
^^^^^ ^^^^^ 4: entity.other.attribute-name.class.css
38+
^ 1: punctuation.separator.list.comma.css
39+
^ 1: entity.name.tag.wildcard.css
40+
^ 1: punctuation.section.function.end.bracket.round.css
41+
^ 1: punctuation.section.variant.end.bracket.paren.tailwind
3242
3343
@custom-variant dark {
34-
^^^^^^^^^^^^^^^^^^^^^^ 5: source.css.tailwind
35-
^^^^^^^^^^^^^^^^^^^^ 3: meta.at-rule.header.css
36-
^^^^^^^^^^^^^^^ 2: keyword.control.at-rule.css
44+
^^^^^^^^^^^^^^^^^^^^^^ 6: source.css.tailwind
45+
^^^^^^^^^^^^^^^ 2: keyword.control.at-rule.variant.tailwind
3746
^ 1: punctuation.definition.keyword.css
38-
^ 1: meta.at-rule.body.css punctuation.section.begin.bracket.curly.css
47+
^^^^ 1: variable.parameter.variant.tailwind
48+
^ 1: meta.at-rule.variant.body.tailwind punctuation.section.variant.begin.bracket.curly.tailwind
3949
4050
&:is(.dark, .dark *) {
41-
^^^^^^^^^^^^^^^^^^^^^^^^ 15: source.css.tailwind meta.at-rule.body.css
51+
^^^^^^^^^^^^^^^^^^^^^^^^ 15: source.css.tailwind meta.at-rule.variant.body.tailwind
4252
^^^^^^^^^^^^^^^^^^^ 12: meta.selector.css
4353
^^^ 2: entity.other.attribute-name.pseudo-class.css
4454
^ ^ ^ 3: punctuation.definition.entity.css
@@ -50,52 +60,52 @@ exports[`@custom-variant 1`] = `
5060
^ 1: meta.property-list.css punctuation.section.property-list.begin.bracket.curly.css
5161
5262
@slot;
53-
^^^^^^^^^^ 3: source.css.tailwind meta.at-rule.body.css meta.property-list.css
63+
^^^^^^^^^^ 3: source.css.tailwind meta.at-rule.variant.body.tailwind meta.property-list.css
5464
^^^^ 1: meta.property-name.css
5565
^ 1: punctuation.terminator.rule.css
5666
5767
}
58-
^^^ 2: source.css.tailwind meta.at-rule.body.css meta.property-list.css
68+
^^^ 2: source.css.tailwind meta.at-rule.variant.body.tailwind meta.property-list.css
5969
^ 1: punctuation.section.property-list.end.bracket.curly.css
6070
6171
}
62-
^ 1: source.css.tailwind meta.at-rule.body.css punctuation.section.end.bracket.curly.css
72+
^ 1: source.css.tailwind meta.at-rule.variant.body.tailwind punctuation.section.variant.end.bracket.curly.tailwind
6373
6474
@custom-variant around {
65-
^^^^^^^^^^^^^^^^^^^^^^^^ 5: source.css.tailwind
66-
^^^^^^^^^^^^^^^^^^^^^^ 3: meta.at-rule.header.css
67-
^^^^^^^^^^^^^^^ 2: keyword.control.at-rule.css
75+
^^^^^^^^^^^^^^^^^^^^^^^^ 6: source.css.tailwind
76+
^^^^^^^^^^^^^^^ 2: keyword.control.at-rule.variant.tailwind
6877
^ 1: punctuation.definition.keyword.css
69-
^ 1: meta.at-rule.body.css punctuation.section.begin.bracket.curly.css
78+
^^^^^^ 1: variable.parameter.variant.tailwind
79+
^ 1: meta.at-rule.variant.body.tailwind punctuation.section.variant.begin.bracket.curly.tailwind
7080
7181
color: '';
72-
^^^^^^^^^^^^^ 2: source.css.tailwind meta.at-rule.body.css
82+
^^^^^^^^^^^^^ 2: source.css.tailwind meta.at-rule.variant.body.tailwind
7383
^^^^^^^^^^^ 1: meta.selector.css
7484
7585
&::before,
76-
^^^^^^^^^^^^ 4: source.css.tailwind meta.at-rule.body.css meta.selector.css
86+
^^^^^^^^^^^^ 4: source.css.tailwind meta.at-rule.variant.body.tailwind meta.selector.css
7787
^^^^^^^^ 2: entity.other.attribute-name.pseudo-element.css
7888
^^ 1: punctuation.definition.entity.css
7989
^ 1: punctuation.separator.list.comma.css
8090
8191
&::after {
82-
^^^^^^^^^^^^ 5: source.css.tailwind meta.at-rule.body.css
92+
^^^^^^^^^^^^ 5: source.css.tailwind meta.at-rule.variant.body.tailwind
8393
^^^^^^^^^^ 3: meta.selector.css
8494
^^^^^^^ 2: entity.other.attribute-name.pseudo-element.css
8595
^^ 1: punctuation.definition.entity.css
8696
^ 1: meta.property-list.css punctuation.section.property-list.begin.bracket.curly.css
8797
8898
@slot;
89-
^^^^^^^^^^ 3: source.css.tailwind meta.at-rule.body.css meta.property-list.css
99+
^^^^^^^^^^ 3: source.css.tailwind meta.at-rule.variant.body.tailwind meta.property-list.css
90100
^^^^ 1: meta.property-name.css
91101
^ 1: punctuation.terminator.rule.css
92102
93103
}
94-
^^^ 2: source.css.tailwind meta.at-rule.body.css meta.property-list.css
104+
^^^ 2: source.css.tailwind meta.at-rule.variant.body.tailwind meta.property-list.css
95105
^ 1: punctuation.section.property-list.end.bracket.curly.css
96106
97107
}
98-
^ 1: source.css.tailwind meta.at-rule.body.css punctuation.section.end.bracket.curly.css
108+
^ 1: source.css.tailwind meta.at-rule.variant.body.tailwind punctuation.section.variant.end.bracket.curly.tailwind
99109
"
100110
`;
101111

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -415,7 +415,7 @@
415415
]
416416
},
417417
{
418-
"begin": "(?i)((@)variant)(?=[\\s{(]|$)",
418+
"begin": "(?i)((@)(?:custom-)?variant)(?=[\\s{(]|$)",
419419
"beginCaptures": {
420420
"1": {
421421
"name": "keyword.control.at-rule.variant.tailwind"

0 commit comments

Comments
 (0)