Add support for PostCSS nesting

SublimeText · Jan 28, 2022 · 5d6b429 · 5d6b429
1 parent 1fda1fd
commit 5d6b429
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git a/Tailwind CSS.sublime-syntax b/Tailwind CSS.sublime-syntax
@@ -24,6 +24,7 @@ contexts:
   rule-list-body:
     - meta_prepend: true
     - include: tailwind-at-apply
+    - include: postcss-nested-selectors
 
 ###[ TAILWIND INLINE AT RULES ]################################################
 
@@ -109,3 +110,18 @@ contexts:
     - include: at-rule-end
     - match: '{{ident}}'
       scope: entity.other.variant-name.css.tailwind
+
+###[ POSTCSS NESTED SELECTORS ]################################################
+
+  postcss-nested-selectors:
+    - match: \&
+      scope: keyword.operator.selector.css
+      push:
+        - postcss-nested-property-list
+        - selector-content
+
+  postcss-nested-property-list:
+    - match: \{
+      scope: punctuation.section.block.begin.css
+      set: property-list-content
+    - include: else-pop
diff --git a/tests/syntax_test.tailwind.css b/tests/syntax_test.tailwind.css
@@ -83,6 +83,16 @@
     .bg {
         @apply font-bold py-2 px-4 rounded !important;
 /*      ^^^^^^ meta.at-rule.apply.css.tailwind keyword.control.directive.apply.css.tailwind */
+
+        & tr:hover {
+/*      ^^^^^^^^^^ meta.at-rule.screen.css.tailwind meta.block.css meta.property-list.css meta.block.css meta.selector.css */
+/*                ^ meta.at-rule.screen.css.tailwind meta.block.css meta.property-list.css meta.block.css - meta.selector - meta.property-list meta.property-list */
+/*                 ^^ meta.at-rule.screen.css.tailwind meta.block.css meta.property-list.css meta.block.css meta.property-list.css meta.block.css */
+
+            @apply font-bold py-2 px-4 rounded !important;
+/*          ^^^^^^ meta.at-rule.apply.css.tailwind keyword.control.directive.apply.css.tailwind */
+        }
+/*      ^ punctuation.section.block.end.css */
     }
 /*  ^ punctuation.section.block.end.css */
 }