diff --git a/.github/workflows/ci-syntax-tests.yml b/.github/workflows/ci-syntax-tests.yml index b32e1c9..e1f0e36 100644 --- a/.github/workflows/ci-syntax-tests.yml +++ b/.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 diff --git a/README.md b/README.md index 4c08689..8deffa5 100644 --- a/README.md +++ b/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) diff --git a/Tailwind CSS.sublime-syntax b/Tailwind CSS.sublime-syntax index a8ff655..6a8df61 100644 --- a/Tailwind CSS.sublime-syntax +++ b/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}}