Skip to content

Commit 87f5e04

Browse files
Fix highlighting when theme namespaces are used inside --value() and --modifier() (#1420)
Fixes #1419
1 parent ca1132f commit 87f5e04

File tree

3 files changed

+112
-1
lines changed

3 files changed

+112
-1
lines changed

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

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1007,6 +1007,102 @@ exports[`@utility 1`] = `
10071007
10081008
}
10091009
^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind punctuation.section.utility.end.bracket.curly.tailwind
1010+
1011+
1012+
^ 1: source.css.tailwind
1013+
1014+
@utility tab-* {
1015+
^^^^^^^^^^^^^^^^ 6: source.css.tailwind
1016+
^^^^^^^^ 2: keyword.control.at-rule.utility.tailwind
1017+
^ 1: punctuation.definition.keyword.css
1018+
^^^^^ 1: variable.parameter.utility.tailwind
1019+
^ 1: meta.at-rule.utility.body.tailwind punctuation.section.utility.begin.bracket.curly.tailwind
1020+
1021+
tab-size: --value(--);
1022+
^^^^^^^^^^^^^^^^^^^^^^^^ 9: source.css.tailwind meta.at-rule.utility.body.tailwind
1023+
^^^^^^^^ 1: meta.property-name.css support.type.property-name.css
1024+
^ 1: punctuation.separator.key-value.css
1025+
^^^^^^^^^^^ 4: meta.property-value.css
1026+
^^^^^^^ 1: support.function.value.tailwind
1027+
^ 1: punctuation.section.function.begin.bracket.round.css
1028+
^^ 1: variable.parameter.value.tailwind
1029+
^ 1: punctuation.section.function.end.bracket.round.css
1030+
^ 1: punctuation.terminator.rule.css
1031+
1032+
font-size: 12px;
1033+
^^^^^^^^^^^^^^^^^^ 7: source.css.tailwind meta.at-rule.utility.body.tailwind
1034+
^^^^^^^^^ 1: meta.property-name.css support.type.property-name.css
1035+
^ 1: punctuation.separator.key-value.css
1036+
^^^^ 2: meta.property-value.css constant.numeric.css
1037+
^^ 1: keyword.other.unit.px.css
1038+
^ 1: punctuation.terminator.rule.css
1039+
1040+
}
1041+
^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind punctuation.section.utility.end.bracket.curly.tailwind
1042+
1043+
1044+
^ 1: source.css.tailwind
1045+
1046+
@utility tab-* {
1047+
^^^^^^^^^^^^^^^^ 6: source.css.tailwind
1048+
^^^^^^^^ 2: keyword.control.at-rule.utility.tailwind
1049+
^ 1: punctuation.definition.keyword.css
1050+
^^^^^ 1: variable.parameter.utility.tailwind
1051+
^ 1: meta.at-rule.utility.body.tailwind punctuation.section.utility.begin.bracket.curly.tailwind
1052+
1053+
tab-size: --value(--tab-size);
1054+
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 9: source.css.tailwind meta.at-rule.utility.body.tailwind
1055+
^^^^^^^^ 1: meta.property-name.css support.type.property-name.css
1056+
^ 1: punctuation.separator.key-value.css
1057+
^^^^^^^^^^^^^^^^^^^ 4: meta.property-value.css
1058+
^^^^^^^ 1: support.function.value.tailwind
1059+
^ 1: punctuation.section.function.begin.bracket.round.css
1060+
^^^^^^^^^^ 1: variable.theme-namespace.css
1061+
^ 1: punctuation.section.function.end.bracket.round.css
1062+
^ 1: punctuation.terminator.rule.css
1063+
1064+
font-size: 12px;
1065+
^^^^^^^^^^^^^^^^^^ 7: source.css.tailwind meta.at-rule.utility.body.tailwind
1066+
^^^^^^^^^ 1: meta.property-name.css support.type.property-name.css
1067+
^ 1: punctuation.separator.key-value.css
1068+
^^^^ 2: meta.property-value.css constant.numeric.css
1069+
^^ 1: keyword.other.unit.px.css
1070+
^ 1: punctuation.terminator.rule.css
1071+
1072+
}
1073+
^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind punctuation.section.utility.end.bracket.curly.tailwind
1074+
1075+
1076+
^ 1: source.css.tailwind
1077+
1078+
@utility tab-* {
1079+
^^^^^^^^^^^^^^^^ 6: source.css.tailwind
1080+
^^^^^^^^ 2: keyword.control.at-rule.utility.tailwind
1081+
^ 1: punctuation.definition.keyword.css
1082+
^^^^^ 1: variable.parameter.utility.tailwind
1083+
^ 1: meta.at-rule.utility.body.tailwind punctuation.section.utility.begin.bracket.curly.tailwind
1084+
1085+
tab-size: --value(--tab-size-*);
1086+
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 9: source.css.tailwind meta.at-rule.utility.body.tailwind
1087+
^^^^^^^^ 1: meta.property-name.css support.type.property-name.css
1088+
^ 1: punctuation.separator.key-value.css
1089+
^^^^^^^^^^^^^^^^^^^^^ 4: meta.property-value.css
1090+
^^^^^^^ 1: support.function.value.tailwind
1091+
^ 1: punctuation.section.function.begin.bracket.round.css
1092+
^^^^^^^^^^^^ 1: variable.theme-namespace.css
1093+
^ 1: punctuation.section.function.end.bracket.round.css
1094+
^ 1: punctuation.terminator.rule.css
1095+
1096+
font-size: 12px;
1097+
^^^^^^^^^^^^^^^^^^ 7: source.css.tailwind meta.at-rule.utility.body.tailwind
1098+
^^^^^^^^^ 1: meta.property-name.css support.type.property-name.css
1099+
^ 1: punctuation.separator.key-value.css
1100+
^^^^ 2: meta.property-value.css constant.numeric.css
1101+
^^ 1: keyword.other.unit.px.css
1102+
^ 1: punctuation.terminator.rule.css
1103+
1104+
}
1105+
^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind punctuation.section.utility.end.bracket.curly.tailwind
10101106
"
10111107
`;
10121108

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,21 @@ test('@utility', async ({ expect }) => {
181181
@utility functional-* {
182182
width: calc(--value(number) * 1px);
183183
}
184+
185+
@utility tab-* {
186+
tab-size: --value(--);
187+
font-size: 12px;
188+
}
189+
190+
@utility tab-* {
191+
tab-size: --value(--tab-size);
192+
font-size: 12px;
193+
}
194+
195+
@utility tab-* {
196+
tab-size: --value(--tab-size-*);
197+
font-size: 12px;
198+
}
184199
`)
185200

186201
expect(result.toString()).toMatchSnapshot()

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@
147147
"name": "punctuation.separator.list.comma.css"
148148
},
149149
{
150-
"match": "(--[^,\\s]+)",
150+
"match": "(--[^,\\s)]+)",
151151
"name": "variable.theme-namespace.css"
152152
},
153153
{ "include": "#utility-data-type-bare" },

0 commit comments

Comments
 (0)