From 4fa1ef2a804b52bda94addd5344ed87275168b73 Mon Sep 17 00:00:00 2001
From: Koen Lagveen <koen.lageveen@me.com>
Date: Sun, 4 Feb 2024 17:32:37 +0100
Subject: [PATCH] add placeholder selectors

---
 Syntaxes/SCSS.sublime-syntax | 13 +++++++++++++
 Tests/syntax_test_scss.scss  | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 46 insertions(+)

diff --git a/Syntaxes/SCSS.sublime-syntax b/Syntaxes/SCSS.sublime-syntax
index 7147fbde..091a372e 100644
--- a/Syntaxes/SCSS.sublime-syntax
+++ b/Syntaxes/SCSS.sublime-syntax
@@ -24,6 +24,7 @@ variables:
   tag_name_begin: (?=[[:alpha:]]|@+{)
 
   property_or_selector_begin: (?={{selector_start}}|[-&]|{{ident_start}})
+  nested_selector_start: '[%.:#&*\[{{combinator_char}}]'
 
 ###############################################################################
 
@@ -117,6 +118,10 @@ contexts:
     - match: (?=[;)}])
       pop: 1
 
+  selector-body:
+    - meta_append: true
+    - include: scss-placeholder-selector
+
 ###[ CSS PROPERTY LISTS ]######################################################
 
   property-list-body:
@@ -130,6 +135,14 @@ contexts:
     - meta_append: true
     - include: scss-expression
 
+###[ SCSS PLACEHOLDER SELECTOR ]###############################################
+
+  scss-placeholder-selector:
+    - match: \%
+      scope: entity.other.attribute-name.class.css punctuation.definition.entity.placeholder.scss
+      # has same basic properties as a classname
+      push: selector-class-identifier
+
 ###[ SCSS EXPRESSIONS ]########################################################
 
   scss-expression:
diff --git a/Tests/syntax_test_scss.scss b/Tests/syntax_test_scss.scss
index ee656761..4bbc67d1 100644
--- a/Tests/syntax_test_scss.scss
+++ b/Tests/syntax_test_scss.scss
@@ -292,3 +292,36 @@ $warn: #dfa612;
   }
 }
 
+//=============================================================================
+// Placeholder Selectors
+// https://sass-lang.com/documentation/style-rules/placeholder-selectors/
+//=============================================================================
+.alert:hover, %strong-alert {
+//            ^^^^^^^^^^^^^ entity.other.attribute-name.class.css
+//            ^             punctuation.definition.entity.placeholder.scss
+  font-weight: bold;
+}
+
+%strong-alert:hover {
+//^^^^^^^^^^^ entity.other.attribute-name.class.css
+//<-          punctuation.definition.entity.placeholder.scss
+  color: red;
+}
+
+%toolbelt {
+//^^^^^^^ entity.other.attribute-name.class.css
+//<-      punctuation.definition.entity.placeholder.scss
+  box-sizing: border-box;
+  border-top: 1px rgba(#000, .12) solid;
+  padding: 16px 0;
+  width: 100%;
+
+  &:hover { border: 2px rgba(#000, .5) solid; }
+}
+
+.action-buttons {
+  @extend %toolbelt;
+//        ^^^^^^^^^ entity.other.attribute-name.class.css
+//        ^         punctuation.definition.entity.placeholder.scss
+  color: #4285f4;
+}