feat: add support for top-level @utility

.github/workflows/ci-syntax-tests.yml

@@ -27,18 +27,12 @@ jobs:
     strategy:
       matrix:
         include:
-          - build: 4107
-            default_packages: v4107
-          - build: 4126
-            default_packages: v4126
-          - build: 4143
-            default_packages: v4143
-          - build: 4152
-            default_packages: v4152
-          - build: 4169
-            default_packages: v4169
-          - build: 4173
-            default_packages: v4173
+          - build: 4174  # first supported build
+            default_packages: v4174
+          - build: 4180  # first stable build
+            default_packages: v4180
+          - build: latest
+            default_packages: master
     steps:
       - name: Checkout Default Packages
         uses: actions/checkout@v4

README.md

@@ -22,14 +22,106 @@ _Requires ST 4092 or higher._
 
 ## Usage
 
+### CSS
+
 This syntax is assigned to files which end with `tailwind.css` by default.
 
-You need to assign it to ordinary `*.css` files manually.
+To use it for ordinary `*.css` files manual assignment is needed.
 
 1. Click onto the syntax name in the status bar
 2. Navigate to the sub menu `Open all with current extension as...`
 3. Click on `Tailwind CSS`.
 
+To add highlighting for Tailwind @-rules to CSS in a way they are also supported within component syntaxes like [Svelte](https://packagecontrol.io/packages/Svelte) or [VueJS](https://packagecontrol.io/packages/Vue%20Syntax%20Highlight)...
+
+1. create a custom _Packages/User/CSS (Tailwind).sublime-syntax_
+2. paste the following content:
+
+   ```yml
+   %YAML 1.2
+   ---
+   name: CSS (Tailwind)
+   scope: source.css
+   version: 2
+
+   extends:
+     - Packages/Tailwind CSS/Tailwind CSS.sublime-syntax
+   ```
+
+> [!WARNING]
+>
+> By assigning `source.css` main scope original PostCSS syntax is augmented.
+> 
+> 1. Augmenting syntax must be loaded after CSS in order for this trick to work.
+> 2. Only a single augmenting syntax may exist.
+> 3. Syntaxes, which extend core CSS to add their own rules can't be augmented this way.
+
+### PostCSS
+
+To add highlighting for Tailwind @-rules to PostCSS in a way they are also supported within component syntaxes like [Svelte](https://packagecontrol.io/packages/Svelte) or [VueJS](https://packagecontrol.io/packages/Vue%20Syntax%20Highlight)...
+
+1. create a custom _Packages/User/PostCSS (Tailwind).sublime-syntax_
+2. paste the following content:
+
+   ```yml
+   %YAML 1.2
+   ---
+   name: PostCSS (Tailwind)
+   scope: source.postcss
+   version: 2
+
+   extends:
+     - Packages/Tailwind CSS/Tailwind CSS.sublime-syntax
+     # - ... maybe more additions
+     - Packages/PostCSS/PostCSS.sublime-syntax
+   ```
+
+> [!WARNING]
+>
+> By assigning `source.postcss` main scope original PostCSS syntax is augmented.
+> 
+> 1. Augmenting syntax must be loaded after PostCSS in order for this trick to work.
+> 2. Only a single augmenting syntax may exist.
+
+> [!NOTE]
+>
+> requires:
+> - [Sublime Text build 4152+](https://www.sublimetext.com/download)
+> - [PostCSS 3.0.0+](https://packagecontrol.io/packages/PostCSS)
+
+### SCSS
+
+To add highlighting for Tailwind @-rules to SCSS in a way they are also supported within component syntaxes like [Svelte](https://packagecontrol.io/packages/Svelte) or [VueJS](https://packagecontrol.io/packages/Vue%20Syntax%20Highlight)...
+
+1. create a custom _Packages/User/SCSS (Tailwind).sublime-syntax_
+2. paste the following content:
+
+   ```yml
+   %YAML 1.2
+   ---
+   name: SCSS (Tailwind)
+   scope: source.scss
+   version: 2
+
+   extends:
+     - Packages/Tailwind CSS/Tailwind CSS.sublime-syntax
+     # - ... maybe more additions
+     - Packages/Sass/Syntaxes/SCSS.sublime-syntax
+   ```
+
+> [!WARNING]
+>
+> By assigning `source.scss` main scope original PostCSS syntax is augmented.
+> 
+> 1. Augmenting syntax must be loaded after PostCSS in order for this trick to work.
+> 2. Only a single augmenting syntax may exist.
+
+> [!NOTE]
+>
+> requires:
+> - [Sublime Text build 4152+](https://www.sublimetext.com/download)
+> - [Sass 4.0.0+](https://packagecontrol.io/packages/PostCSS)
+
 ## Related Extensions
 
 - [LSP-tailwindcss](https://github.com/sublimelsp/LSP-tailwindcss)

Tailwind CSS.sublime-syntax

@@ -9,39 +9,13 @@ extends: Packages/CSS/CSS.sublime-syntax
 file_extensions:
   - tailwind.css
 
-variables:
-
-  # Block punctuations
-  #  Provides an easy and safe interface for template syntaxes to override
-  #  block punctuation patterns to prevent ambiguities with interpolations.
-  #  It helps to correctly highlight {{ tag }} { {{prop}}: {{value}} }
-  block_start: \{
-  block_end: \}
-
-  # Properties and Selectors
-  property_or_selector_begin: (?={{ident_begin}}|{{selector_start}})
-  property_end: (?=[;@)}])
-
-  selector_start: '[[:alpha:].:#&*\[{{combinator_char}}]'
-  selector_end: (?=[;@(){}])
-
 contexts:
 
-  stylesheet:
-    # relaxed properties vs. selectors
-    - meta_include_prototype: false
-    - include: comments
-    - include: properties-or-selectors
-    - include: at-rules
-    - include: property-lists
-    - include: rule-terminators
-    - include: illegal-commas
-    - include: illegal-groups
-
 ###[ CSS AT RULES ]############################################################
 
   at-other:
     - meta_prepend: true
+    - include: tailwind-at-utility
     - include: tailwind-at-apply
     - include: tailwind-at-config
     - include: tailwind-at-responsive
@@ -51,66 +25,6 @@ contexts:
     - include: tailwind-at-plugin
     - include: tailwind-at-source
 
-###[ CSS SELECTORS ]###########################################################
-
-  properties-or-selectors:
-    # required until ST4174 (PR #3898)
-    - match: '{{property_or_selector_begin}}'
-      branch_point: property-or-selector
-      branch:
-        - maybe-property
-        - selector-body
-
-  maybe-property:
-    # required until ST4174 (PR #3898)
-    - meta_include_prototype: false
-    - include: property-end
-    - include: property-identifiers
-    - match: ''
-      fail: property-or-selector
-
-  property-end:
-    # required until ST4174 (PR #3898)
-    - match: '{{property_end}}'
-      pop: 1
-
-  selector-variables:
-    # required until ST4174 (PR #3898)
-    - meta_prepend: true
-    - match: \&
-      scope: variable.language.parent.css
-
-###[ CSS STYLESHEET BLOCKS ]####################################################
-
-  maybe-stylesheet-block:
-    # required until ST4174 (PR #3831)
-    - meta_include_prototype: false
-    - match: '{{block_start}}'
-      scope: punctuation.section.block.begin.css
-      set: stylesheet-block-body
-    - include: comments
-    - include: else-pop
-
-  stylesheet-block-body:
-    # required until ST4174 (PR #3831)
-    - meta_include_prototype: false
-    - meta_scope: meta.block.css
-    - include: block-end
-    - include: stylesheet
-
-###[ CSS PROPERTY LISTS ]######################################################
-
-  property-list-body:
-    # relaxed properties vs. selectors
-    - meta_scope: meta.property-list.css meta.block.css
-    - include: block-end
-    - include: stylesheet
-
-  illegal-commas:
-    # required until ST4174 (PR #3831)
-    - match: ','
-      scope: invalid.illegal.unexpected-token.css
-
 ###[ TAILWIND INLINE AT RULES ]################################################
 
   tailwind-at-apply:
@@ -131,6 +45,32 @@ contexts:
 
 ###[ TAILWIND TOPLEVEL AT RULES ]##############################################
 
+  tailwind-at-utility:
+    - match: (@)utility{{break}}
+      captures:
+        0: keyword.control.directive.css.tailwind
+        1: punctuation.definition.keyword.css.tailwind
+      push:
+        - tailwind-at-utility-meta
+        - maybe-stylesheet-block
+        - tailwind-at-utility-name
+
+  tailwind-at-utility-meta:
+    - meta_include_prototype: false
+    - meta_scope: meta.at-rule.utility.css.tailwind
+    - include: immediately-pop
+
+  tailwind-at-utility-name:
+    - meta_include_prototype: false
+    - match: '{{ident_begin}}'
+      set: tailwind-at-utility-name-content
+    - include: comments
+    - include: else-pop
+
+  tailwind-at-utility-name-content:
+    - meta_scope: entity.other.utility-name.css.tailwind
+    - include: identifier-content
+
   # @config "./tailwind.config.js"
   tailwind-at-config:
     - match: (@)(?i:config){{break}}