Skip to content

Commit 1b46027

Browse files
thecrypticacethecrypticace
committed
Improve highlighting of --value(), --modifier(), and —alpha() 
1 parent 36aae5a commit 1b46027

File tree

2 files changed

+261
-40
lines changed

2 files changed

+261
-40
lines changed

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

Lines changed: 127 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -907,14 +907,16 @@ exports[`@utility 1`] = `
907907
^ 1: meta.at-rule.utility.body.tailwind punctuation.section.utility.begin.bracket.curly.tailwind
908908
909909
width: calc(--value(number) * 1px);
910-
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 13: source.css.tailwind meta.at-rule.utility.body.tailwind
910+
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 17: source.css.tailwind meta.at-rule.utility.body.tailwind
911911
^^^^^ 1: meta.property-name.css support.type.property-name.css
912912
^ 1: punctuation.separator.key-value.css
913-
^^^^^^^^^^^^^^^^^^^^^^^^^^ 7: meta.property-value.css
914-
^^^^^^^^^^^^^^^^^^^^ 4: meta.function.calc.css
913+
^^^^^^^^^^^^^^^^^^^^^^^^^^^ 12: meta.property-value.css meta.function.calc.css
915914
^^^^ 1: support.function.calc.css
916-
^ 1: punctuation.section.function.begin.bracket.round.css
917-
^ 1: punctuation.section.function.end.bracket.round.css
915+
^ ^ 2: punctuation.section.function.begin.bracket.round.css
916+
^^^^^^^ 1: support.function.value.tailwind
917+
^^^^^^ 1: support.constant.utility.data-type.css
918+
^ ^ 2: punctuation.section.function.end.bracket.round.css
919+
^ 1: keyword.operator.arithmetic.css
918920
^^^ 2: constant.numeric.css
919921
^^ 1: keyword.other.unit.px.css
920922
^ 1: punctuation.terminator.rule.css
@@ -984,95 +986,182 @@ exports[`@variant 1`] = `
984986
exports[`--value(…) 1`] = `
985987
"
986988
@utility functional-* {
987-
^^^^^^^^^^^^^^^^^^^^^^^ 17: source.css.tailwind
988-
^^^^^^^^ 2: keyword.control.at-rule.utility.tailwind
989-
^ 1: punctuation.definition.keyword.css
990-
^^^^^^^^^^^^ 12: variable.parameter.utility.tailwind
991-
^ 1: meta.at-rule.utility.body.tailwind punctuation.section.utility.begin.bracket.curly.tailwind
989+
^^^^^^^^^^^^^^^^^^^^^^^ 6: source.css.tailwind
990+
^^^^^^^^ 2: keyword.control.at-rule.utility.tailwind
991+
^ 1: punctuation.definition.keyword.css
992+
^^^^^^^^^^^^ 1: variable.parameter.utility.tailwind
993+
^ 1: meta.at-rule.utility.body.tailwind punctuation.section.utility.begin.bracket.curly.tailwind
992994
993995
width: --value(
994-
^^^^^^^^^^^^^^^^^^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind
996+
^^^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.utility.body.tailwind
997+
^^^^^ 1: meta.property-name.css support.type.property-name.css
998+
^ 1: punctuation.separator.key-value.css
999+
^^^^^^^^ 2: meta.property-value.css
1000+
^^^^^^^ 1: support.function.value.tailwind
1001+
^ 1: punctuation.section.function.begin.bracket.round.css
9951002
9961003
--size,
997-
^^^^^^^^^^^^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind
1004+
^^^^^^^^^^^ 3: source.css.tailwind meta.at-rule.utility.body.tailwind meta.property-value.css
1005+
^^^^^^ 1: variable.theme-namespace.css
1006+
^ 1: punctuation.separator.list.comma.css
9981007
9991008
'literal',
1000-
^^^^^^^^^^^^^^^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind
1009+
^^^^^^^^^^^^^^ 5: source.css.tailwind meta.at-rule.utility.body.tailwind meta.property-value.css
1010+
^^^^^^^^^ 3: string.quoted.single.css
1011+
^ 1: punctuation.definition.string.begin.css
1012+
^ 1: punctuation.definition.string.end.css
1013+
^ 1: punctuation.separator.list.comma.css
10011014
10021015
integer,
1003-
^^^^^^^^^^^^^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind
1016+
^^^^^^^^^^^^ 3: source.css.tailwind meta.at-rule.utility.body.tailwind meta.property-value.css
1017+
^^^^^^^ 1: support.constant.utility.data-type.css
1018+
^ 1: punctuation.separator.list.comma.css
10041019
10051020
number,
1006-
^^^^^^^^^^^^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind
1021+
^^^^^^^^^^^ 3: source.css.tailwind meta.at-rule.utility.body.tailwind meta.property-value.css
1022+
^^^^^^ 1: support.constant.utility.data-type.css
1023+
^ 1: punctuation.separator.list.comma.css
10071024
10081025
percentage,
1009-
^^^^^^^^^^^^^^^^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind
1026+
^^^^^^^^^^^^^^^ 3: source.css.tailwind meta.at-rule.utility.body.tailwind meta.property-value.css
1027+
^^^^^^^^^^ 1: support.constant.utility.data-type.css
1028+
^ 1: punctuation.separator.list.comma.css
10101029
10111030
ratio,
1012-
^^^^^^^^^^^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind
1031+
^^^^^^^^^^ 3: source.css.tailwind meta.at-rule.utility.body.tailwind meta.property-value.css
1032+
^^^^^ 1: support.constant.utility.data-type.css
1033+
^ 1: punctuation.separator.list.comma.css
10131034
10141035
[integer],
1015-
^^^^^^^^^^^^^^^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind
1036+
^^^^^^^^^^^^^^ 5: source.css.tailwind meta.at-rule.utility.body.tailwind meta.property-value.css
1037+
^ 1: punctuation.definition.arbitrary.begin.bracket.square.css
1038+
^^^^^^^ 1: support.constant.utility.data-type.css
1039+
^ 1: punctuation.definition.arbitrary.end.bracket.square.css
1040+
^ 1: punctuation.separator.list.comma.css
10161041
10171042
[number],
1018-
^^^^^^^^^^^^^^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind
1043+
^^^^^^^^^^^^^ 5: source.css.tailwind meta.at-rule.utility.body.tailwind meta.property-value.css
1044+
^ 1: punctuation.definition.arbitrary.begin.bracket.square.css
1045+
^^^^^^ 1: support.constant.utility.data-type.css
1046+
^ 1: punctuation.definition.arbitrary.end.bracket.square.css
1047+
^ 1: punctuation.separator.list.comma.css
10191048
10201049
[percentage],
1021-
^^^^^^^^^^^^^^^^^^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind
1050+
^^^^^^^^^^^^^^^^^ 5: source.css.tailwind meta.at-rule.utility.body.tailwind meta.property-value.css
1051+
^ 1: punctuation.definition.arbitrary.begin.bracket.square.css
1052+
^^^^^^^^^^ 1: support.constant.utility.data-type.css
1053+
^ 1: punctuation.definition.arbitrary.end.bracket.square.css
1054+
^ 1: punctuation.separator.list.comma.css
10221055
10231056
[ratio]
1024-
^^^^^^^^^^^^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind
1057+
^^^^^^^^^^^ 4: source.css.tailwind meta.at-rule.utility.body.tailwind meta.property-value.css
1058+
^ 1: punctuation.definition.arbitrary.begin.bracket.square.css
1059+
^^^^^ 1: support.constant.utility.data-type.css
1060+
^ 1: punctuation.definition.arbitrary.end.bracket.square.css
10251061
10261062
);
1027-
^^^^^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind
1063+
^^^^ 3: source.css.tailwind meta.at-rule.utility.body.tailwind
1064+
^^^ 2: meta.property-value.css
1065+
^ 1: punctuation.section.function.end.bracket.round.css
1066+
^ 1: punctuation.terminator.rule.css
10281067
10291068
1030-
^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind
1069+
^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind
10311070
10321071
height: --modifier(
1033-
^^^^^^^^^^^^^^^^^^^^^^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind
1072+
^^^^^^^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.utility.body.tailwind
1073+
^^^^^^ 1: meta.property-name.css support.type.property-name.css
1074+
^ 1: punctuation.separator.key-value.css
1075+
^^^^^^^^^^^ 2: meta.property-value.css
1076+
^^^^^^^^^^ 1: support.function.modifier.tailwind
1077+
^ 1: punctuation.section.function.begin.bracket.round.css
10341078
10351079
--size,
1036-
^^^^^^^^^^^^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind
1080+
^^^^^^^^^^^ 3: source.css.tailwind meta.at-rule.utility.body.tailwind meta.property-value.css
1081+
^^^^^^ 1: variable.theme-namespace.css
1082+
^ 1: punctuation.separator.list.comma.css
10371083
10381084
'literal',
1039-
^^^^^^^^^^^^^^^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind
1085+
^^^^^^^^^^^^^^ 5: source.css.tailwind meta.at-rule.utility.body.tailwind meta.property-value.css
1086+
^^^^^^^^^ 3: string.quoted.single.css
1087+
^ 1: punctuation.definition.string.begin.css
1088+
^ 1: punctuation.definition.string.end.css
1089+
^ 1: punctuation.separator.list.comma.css
10401090
10411091
integer,
1042-
^^^^^^^^^^^^^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind
1092+
^^^^^^^^^^^^ 3: source.css.tailwind meta.at-rule.utility.body.tailwind meta.property-value.css
1093+
^^^^^^^ 1: support.constant.utility.data-type.css
1094+
^ 1: punctuation.separator.list.comma.css
10431095
10441096
number,
1045-
^^^^^^^^^^^^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind
1097+
^^^^^^^^^^^ 3: source.css.tailwind meta.at-rule.utility.body.tailwind meta.property-value.css
1098+
^^^^^^ 1: support.constant.utility.data-type.css
1099+
^ 1: punctuation.separator.list.comma.css
10461100
10471101
percentage,
1048-
^^^^^^^^^^^^^^^^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind
1102+
^^^^^^^^^^^^^^^ 3: source.css.tailwind meta.at-rule.utility.body.tailwind meta.property-value.css
1103+
^^^^^^^^^^ 1: support.constant.utility.data-type.css
1104+
^ 1: punctuation.separator.list.comma.css
10491105
10501106
ratio,
1051-
^^^^^^^^^^^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind
1107+
^^^^^^^^^^ 3: source.css.tailwind meta.at-rule.utility.body.tailwind meta.property-value.css
1108+
^^^^^ 1: support.constant.utility.data-type.css
1109+
^ 1: punctuation.separator.list.comma.css
10521110
10531111
[integer],
1054-
^^^^^^^^^^^^^^^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind
1112+
^^^^^^^^^^^^^^ 5: source.css.tailwind meta.at-rule.utility.body.tailwind meta.property-value.css
1113+
^ 1: punctuation.definition.arbitrary.begin.bracket.square.css
1114+
^^^^^^^ 1: support.constant.utility.data-type.css
1115+
^ 1: punctuation.definition.arbitrary.end.bracket.square.css
1116+
^ 1: punctuation.separator.list.comma.css
10551117
10561118
[number],
1057-
^^^^^^^^^^^^^^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind
1119+
^^^^^^^^^^^^^ 5: source.css.tailwind meta.at-rule.utility.body.tailwind meta.property-value.css
1120+
^ 1: punctuation.definition.arbitrary.begin.bracket.square.css
1121+
^^^^^^ 1: support.constant.utility.data-type.css
1122+
^ 1: punctuation.definition.arbitrary.end.bracket.square.css
1123+
^ 1: punctuation.separator.list.comma.css
10581124
10591125
[percentage],
1060-
^^^^^^^^^^^^^^^^^^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind
1126+
^^^^^^^^^^^^^^^^^ 5: source.css.tailwind meta.at-rule.utility.body.tailwind meta.property-value.css
1127+
^ 1: punctuation.definition.arbitrary.begin.bracket.square.css
1128+
^^^^^^^^^^ 1: support.constant.utility.data-type.css
1129+
^ 1: punctuation.definition.arbitrary.end.bracket.square.css
1130+
^ 1: punctuation.separator.list.comma.css
10611131
10621132
[ratio]
1063-
^^^^^^^^^^^^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind
1133+
^^^^^^^^^^^ 4: source.css.tailwind meta.at-rule.utility.body.tailwind meta.property-value.css
1134+
^ 1: punctuation.definition.arbitrary.begin.bracket.square.css
1135+
^^^^^ 1: support.constant.utility.data-type.css
1136+
^ 1: punctuation.definition.arbitrary.end.bracket.square.css
10641137
10651138
);
1066-
^^^^^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind
1139+
^^^^ 3: source.css.tailwind meta.at-rule.utility.body.tailwind
1140+
^^^ 2: meta.property-value.css
1141+
^ 1: punctuation.section.function.end.bracket.round.css
1142+
^ 1: punctuation.terminator.rule.css
10671143
10681144
1069-
^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind
1145+
^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind
10701146
10711147
color: --alpha(--value([color]) / --modifier(number));
1072-
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind
1148+
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 21: source.css.tailwind meta.at-rule.utility.body.tailwind
1149+
^^^^^ 1: meta.property-name.css support.type.property-name.css
1150+
^ 1: punctuation.separator.key-value.css
1151+
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 16: meta.property-value.css
1152+
^^^^^^^ 1: support.function.alpha.tailwind
1153+
^ ^ ^ 3: punctuation.section.function.begin.bracket.round.css
1154+
^^^^^^^ 1: support.function.value.tailwind
1155+
^ 1: punctuation.definition.arbitrary.begin.bracket.square.css
1156+
^^^^^ ^^^^^^ 2: support.constant.utility.data-type.css
1157+
^ 1: punctuation.definition.arbitrary.end.bracket.square.css
1158+
^ ^^ 3: punctuation.section.function.end.bracket.round.css
1159+
^ 1: variable.parameter.alpha.tailwind
1160+
^^^^^^^^^^ 1: support.function.modifier.tailwind
1161+
^ 1: punctuation.terminator.rule.css
10731162
10741163
}
1075-
^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind punctuation.section.utility.end.bracket.curly.tailwind
1164+
^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind punctuation.section.utility.end.bracket.curly.tailwind
10761165
"
10771166
`;
10781167

0 commit comments

Comments
 (0)