Skip to content

Commit 4424796

Browse files
thecrypticacethecrypticace
authored
Fix variable, comment, and at-rule highlighting in @theme (#1409)
Fixes #1365 Fixes #1402
1 parent 5f179ab commit 4424796

File tree

5 files changed

+135
-20
lines changed

5 files changed

+135
-20
lines changed

‎.github/workflows/ci.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ jobs:
2424
- uses: actions/setup-node@v4
2525
with:
2626
cache: 'pnpm'
27-
node-version: ${{ matrix.node-version }}
27+
node-version: ${{ matrix.node }}
2828

2929
- name: Install dependencies
3030
run: pnpm install

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

Lines changed: 103 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -733,7 +733,7 @@ exports[`@theme 1`] = `
733733
734734
--color: red;
735735
^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.theme.body.tailwind
736-
^^^^^^^ 1: meta.property-name.css
736+
^^^^^^^ 1: variable.css
737737
^ 1: punctuation.separator.key-value.css
738738
^^^ 1: meta.property-value.css support.constant.color.w3c-standard-color-name.css
739739
^ 1: punctuation.terminator.rule.css
@@ -750,7 +750,7 @@ exports[`@theme 1`] = `
750750
751751
--color: red;
752752
^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.theme.body.tailwind
753-
^^^^^^^ 1: meta.property-name.css
753+
^^^^^^^ 1: variable.css
754754
^ 1: punctuation.separator.key-value.css
755755
^^^ 1: meta.property-value.css support.constant.color.w3c-standard-color-name.css
756756
^ 1: punctuation.terminator.rule.css
@@ -767,7 +767,7 @@ exports[`@theme 1`] = `
767767
768768
--color: red;
769769
^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.theme.body.tailwind
770-
^^^^^^^ 1: meta.property-name.css
770+
^^^^^^^ 1: variable.css
771771
^ 1: punctuation.separator.key-value.css
772772
^^^ 1: meta.property-value.css support.constant.color.w3c-standard-color-name.css
773773
^ 1: punctuation.terminator.rule.css
@@ -788,7 +788,7 @@ exports[`@theme 1`] = `
788788
789789
--color: red;
790790
^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.theme.body.tailwind
791-
^^^^^^^ 1: meta.property-name.css
791+
^^^^^^^ 1: variable.css
792792
^ 1: punctuation.separator.key-value.css
793793
^^^ 1: meta.property-value.css support.constant.color.w3c-standard-color-name.css
794794
^ 1: punctuation.terminator.rule.css
@@ -807,21 +807,21 @@ exports[`@theme 1`] = `
807807
808808
--spacing: initial;
809809
^^^^^^^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.theme.body.tailwind
810-
^^^^^^^^^ 1: meta.property-name.css
810+
^^^^^^^^^ 1: variable.css
811811
^ 1: punctuation.separator.key-value.css
812812
^^^^^^^ 1: meta.property-value.css support.constant.property-value.css
813813
^ 1: punctuation.terminator.rule.css
814814
815815
--color-*: initial;
816816
^^^^^^^^^^^^^^^^^^^^^ 7: source.css.tailwind meta.at-rule.theme.body.tailwind
817-
^^^^^^^^ 1: meta.property-name.css
817+
^^^^^^^^ 1: variable.css
818818
^ 1: punctuation.separator.key-value.css
819819
^^^^^^^ 1: meta.property-value.css support.constant.property-value.css
820820
^ 1: punctuation.terminator.rule.css
821821
822822
--animate-pulse: 1s pulse infinite;
823823
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 9: source.css.tailwind meta.at-rule.theme.body.tailwind
824-
^^^^^^^^^^^^^^^ 1: meta.property-name.css
824+
^^^^^^^^^^^^^^^ 1: variable.css
825825
^ 1: punctuation.separator.key-value.css
826826
^^^^^^^^^^^^^^^^^ 4: meta.property-value.css
827827
^^ 2: constant.numeric.css
@@ -833,46 +833,130 @@ exports[`@theme 1`] = `
833833
^ 1: source.css.tailwind meta.at-rule.theme.body.tailwind
834834
835835
@keyframes pulse {
836-
^^^^^^^^^^^^^^^^^^^^^ 5: source.css.tailwind meta.at-rule.theme.body.tailwind
837-
^^^^^^^^^ ^^^^^ 2: meta.property-name.css
836+
^^^^^^^^^^^^^^^^^^^^ 7: source.css.tailwind meta.at-rule.theme.body.tailwind
837+
^^^^^^^^^^^^^^^^ 4: meta.at-rule.keyframes.header.css
838+
^^^^^^^^^^ 2: keyword.control.at-rule.keyframes.css
839+
^ 1: punctuation.definition.keyword.css
840+
^^^^^ 1: variable.parameter.keyframe-list.css
841+
^ 1: meta.at-rule.keyframes.body.css punctuation.section.keyframes.begin.bracket.curly.css
838842
839843
0%,
840-
^^^^^^^^ 1: source.css.tailwind meta.at-rule.theme.body.tailwind
844+
^^^^^^^^ 3: source.css.tailwind meta.at-rule.theme.body.tailwind meta.at-rule.keyframes.body.css
845+
^^ 1: entity.other.keyframe-offset.percentage.css
841846
842847
100% {
843-
^^^^^^^^^^^ 1: source.css.tailwind meta.at-rule.theme.body.tailwind
848+
^^^^^^^^^^ 4: source.css.tailwind meta.at-rule.theme.body.tailwind meta.at-rule.keyframes.body.css
849+
^^^^ 1: entity.other.keyframe-offset.percentage.css
850+
^ 1: meta.property-list.css punctuation.section.property-list.begin.bracket.curly.css
844851
845852
opacity: 0;
846-
^^^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.theme.body.tailwind
853+
^^^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.theme.body.tailwind meta.at-rule.keyframes.body.css meta.property-list.css
847854
^^^^^^^ 1: meta.property-name.css support.type.property-name.css
848855
^ 1: punctuation.separator.key-value.css
849856
^ 1: meta.property-value.css constant.numeric.css
850857
^ 1: punctuation.terminator.rule.css
851858
852859
}
853-
^^^^^ 2: source.css.tailwind meta.at-rule.theme.body.tailwind
854-
^ 1: punctuation.section.theme.end.bracket.curly.tailwind
860+
^^^^^ 2: source.css.tailwind meta.at-rule.theme.body.tailwind meta.at-rule.keyframes.body.css meta.property-list.css
861+
^ 1: punctuation.section.property-list.end.bracket.curly.css
855862
856863
50% {
857-
^^^^^^^^^ 2: source.css.tailwind
864+
^^^^^^^^^ 4: source.css.tailwind meta.at-rule.theme.body.tailwind meta.at-rule.keyframes.body.css
865+
^^^ 1: entity.other.keyframe-offset.percentage.css
858866
^ 1: meta.property-list.css punctuation.section.property-list.begin.bracket.curly.css
859867
860868
opacity: 1;
861-
^^^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.property-list.css
869+
^^^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.theme.body.tailwind meta.at-rule.keyframes.body.css meta.property-list.css
862870
^^^^^^^ 1: meta.property-name.css support.type.property-name.css
863871
^ 1: punctuation.separator.key-value.css
864872
^ 1: meta.property-value.css constant.numeric.css
865873
^ 1: punctuation.terminator.rule.css
866874
867875
}
868-
^^^^^ 2: source.css.tailwind meta.property-list.css
876+
^^^^^ 2: source.css.tailwind meta.at-rule.theme.body.tailwind meta.at-rule.keyframes.body.css meta.property-list.css
869877
^ 1: punctuation.section.property-list.end.bracket.curly.css
870878
871879
}
872-
^^^^ 1: source.css.tailwind
880+
^^^ 2: source.css.tailwind meta.at-rule.theme.body.tailwind meta.at-rule.keyframes.body.css
881+
^ 1: punctuation.section.keyframes.end.bracket.curly.css
882+
883+
}
884+
^ 1: source.css.tailwind meta.at-rule.theme.body.tailwind punctuation.section.theme.end.bracket.curly.tailwind
885+
886+
887+
^ 1: source.css.tailwind
888+
889+
@theme {
890+
^^^^^^^^ 4: source.css.tailwind
891+
^^^^^^ 2: keyword.control.at-rule.theme.tailwind
892+
^ 1: punctuation.definition.keyword.css
893+
^ 1: meta.at-rule.theme.body.tailwind punctuation.section.theme.begin.bracket.curly.tailwind
894+
895+
/** Comment 0 */
896+
^^^^^^^^^^^^^^^^^^ 4: source.css.tailwind meta.at-rule.theme.body.tailwind
897+
^^^^^^^^^^^^^^^^ 3: comment.block.css
898+
^^ 1: punctuation.definition.comment.begin.css
899+
^^ 1: punctuation.definition.comment.end.css
900+
901+
902+
^ 1: source.css.tailwind meta.at-rule.theme.body.tailwind
903+
904+
/** Comment 1 */
905+
^^^^^^^^^^^^^^^^^^ 4: source.css.tailwind meta.at-rule.theme.body.tailwind
906+
^^^^^^^^^^^^^^^^ 3: comment.block.css
907+
^^ 1: punctuation.definition.comment.begin.css
908+
^^ 1: punctuation.definition.comment.end.css
909+
910+
--color-1: red;
911+
^^^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.theme.body.tailwind
912+
^^^^^^^^^ 1: variable.css
913+
^ 1: punctuation.separator.key-value.css
914+
^^^ 1: meta.property-value.css support.constant.color.w3c-standard-color-name.css
915+
^ 1: punctuation.terminator.rule.css
916+
917+
918+
^ 1: source.css.tailwind meta.at-rule.theme.body.tailwind
919+
920+
/** Comment 2 */
921+
^^^^^^^^^^^^^^^^^^ 4: source.css.tailwind meta.at-rule.theme.body.tailwind
922+
^^^^^^^^^^^^^^^^ 3: comment.block.css
923+
^^ 1: punctuation.definition.comment.begin.css
924+
^^ 1: punctuation.definition.comment.end.css
925+
926+
--color-2: green;
927+
^^^^^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.theme.body.tailwind
928+
^^^^^^^^^ 1: variable.css
929+
^ 1: punctuation.separator.key-value.css
930+
^^^^^ 1: meta.property-value.css support.constant.color.w3c-standard-color-name.css
931+
^ 1: punctuation.terminator.rule.css
932+
933+
934+
^ 1: source.css.tailwind meta.at-rule.theme.body.tailwind
935+
936+
/** Comment 3 */
937+
^^^^^^^^^^^^^^^^^^ 4: source.css.tailwind meta.at-rule.theme.body.tailwind
938+
^^^^^^^^^^^^^^^^ 3: comment.block.css
939+
^^ 1: punctuation.definition.comment.begin.css
940+
^^ 1: punctuation.definition.comment.end.css
941+
942+
--color-2: blue;
943+
^^^^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.theme.body.tailwind
944+
^^^^^^^^^ 1: variable.css
945+
^ 1: punctuation.separator.key-value.css
946+
^^^^ 1: meta.property-value.css support.constant.color.w3c-standard-color-name.css
947+
^ 1: punctuation.terminator.rule.css
948+
949+
950+
^ 1: source.css.tailwind meta.at-rule.theme.body.tailwind
951+
952+
/** Comment 4 */
953+
^^^^^^^^^^^^^^^^^^ 4: source.css.tailwind meta.at-rule.theme.body.tailwind
954+
^^^^^^^^^^^^^^^^ 3: comment.block.css
955+
^^ 1: punctuation.definition.comment.begin.css
956+
^^ 1: punctuation.definition.comment.end.css
873957
874958
}
875-
^^ 1: source.css.tailwind
959+
^ 1: source.css.tailwind meta.at-rule.theme.body.tailwind punctuation.section.theme.end.bracket.curly.tailwind
876960
"
877961
`;
878962

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,21 @@ test('@theme', async ({ expect }) => {
3636
}
3737
}
3838
}
39+
40+
@theme {
41+
/** Comment 0 */
42+
43+
/** Comment 1 */
44+
--color-1: red;
45+
46+
/** Comment 2 */
47+
--color-2: green;
48+
49+
/** Comment 3 */
50+
--color-2: blue;
51+
52+
/** Comment 4 */
53+
}
3954
`)
4055

4156
expect(result.toString()).toMatchSnapshot()

‎packages/vscode-tailwindcss/CHANGELOG.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@
77
## 0.14.22
88

99
- Fix matching files when config is not in the workspace root ([#1412](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1412))
10+
- Highlight CSS variables correctly inside `@theme` ([#1409](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1409))
11+
- Highlight comments inside `@theme` ([#1409](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1409))
12+
- Highlight at-rules inside `@theme` ([#1409](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1409))
1013

1114
## 0.14.21
1215

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -494,6 +494,16 @@
494494
"repository": {
495495
"property-list": {
496496
"patterns": [
497+
{
498+
"include": "source.css#comment-block"
499+
},
500+
{
501+
"include": "source.css#escapes"
502+
},
503+
{
504+
"match": "(?x) (?<![\\w-])\n--\n(?:[-a-zA-Z_] | [^\\x00-\\x7F]) # First letter\n(?:[-a-zA-Z0-9_] | [^\\x00-\\x7F] # Remainder of identifier\n |\\\\(?:[0-9a-fA-F]{1,6}|.)\n)*",
505+
"name": "variable.css"
506+
},
497507
{
498508
"begin": "(?<![-a-zA-Z])(?=[-a-zA-Z])",
499509
"end": "$|(?![-a-zA-Z])",
@@ -530,6 +540,9 @@
530540
{
531541
"match": ";",
532542
"name": "punctuation.terminator.rule.css"
543+
},
544+
{
545+
"include": "source.css#at-rules"
533546
}
534547
]
535548
},

0 commit comments

Comments
 (0)