Fix CSS Module support in Sass

1. fixes duplicate meta.selector scopes of :local and :global pseudo classes. 2. adds selector scoping within argument lists 3. removes `.css-modules` sub-scope name Note: Support for `:global()` and `:local()` in SCSS comes with CSS as of ST4180.
SublimeText · Oct 31, 2024 · 768ed86 · 768ed86
1 parent 2b024c2
commit 768ed86
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 15 deletions.
diff --git a/Syntaxes/Sass.sublime-syntax b/Syntaxes/Sass.sublime-syntax
@@ -1363,27 +1363,29 @@ contexts:
     - match: '{{combinators}}{2,}|\|{3,}'
       scope: invalid.illegal.combinator.css
 
-    # CSS modules
-    - match: '\s*(:)(local|global)(?=\()'
-      scope: meta.selector.css entity.other.pseudo-class.css-modules.css
+    # CSS modules: global, local
+    # also used by various other frameworks
+    - match: '\s*((:)(?i:global|local))(?=\()'
       captures:
-        1: punctuation.definition.entity.css
+        1: entity.other.pseudo-class.css
+        2: punctuation.definition.entity.css
       push:
-        - meta_scope: meta.selector.css meta.function-call.css
+        - meta_scope: meta.function-call.css
         - match: '\('
           scope: punctuation.section.group.begin.css
           push:
             - meta_scope: meta.group.css
+            - meta_content_scope: meta.selector.css
             - match: '\)'
               scope: punctuation.section.group.end.css
               pop: 1
-            - include: quoted-strings
+            - include: selector-content
         - match: ''
           pop: 1
-    - match: '\s*(:)(local|global)'
-      scope: meta.selector.css entity.other.pseudo-class.css-modules.css
+    - match: '\s*((:)(?i:global|local))\b'
       captures:
-        1: punctuation.definition.entity.css
+        1: entity.other.pseudo-class.css
+        2: punctuation.definition.entity.css
 
   selector-end:
     - match: (?=\s*[;@(){}]|$)

diff --git a/Tests/syntax_test_sass.sass b/Tests/syntax_test_sass.sass
@@ -276,17 +276,23 @@ input:not([type="radio"]):not(h1):not(custom-element):not(%placeholder), select,
      Global vs. local scope: https://github.com/css-modules/css-modules#exceptions
   */
   .localA :global .global-b .global-c :local(.localD.localE::before) .global-d
-  //      ^^^^^^^ entity.other.pseudo-class.css-modules
-  //                                  ^^^^^^ entity.other.pseudo-class.css-modules
-  //                                        ^ meta.function-call.css meta.group.css punctuation.section.group.begin.css
-  //                                         ^^^^^^^^^^^^^^^^^^^^^^ meta.selector
+  // <- meta.selector.css - meta.selector meta.selector
+  //^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.selector.css - meta.selector meta.selector
+  //                                         ^^^^^^^^^^^^^^^^^^^^^^ meta.selector.css meta.selector.css
+  //                                                               ^^^^^^^^^^^ meta.selector.css - meta.selector meta.selector
+  //      ^^^^^^^ entity.other.pseudo-class
+  //                                  ^^^^^^ entity.other.pseudo-class
+  //                                        ^ punctuation.section.group.begin.css
+  //                                         ^^^^^^^^^^^^^^ entity.other.attribute-name.class.css
+  //                                                       ^^ punctuation.definition.pseudo-element.css
+  //                                                         ^^^^^^ entity.other.pseudo-element.css
   //                                                               ^ punctuation.section.group.end.css
   :global  // global blocks
-  // ^^^^ entity.other.pseudo-class.css-modules
+  // ^^^^ entity.other.pseudo-class
     .global-class-name
       color: green
   :local  // local blocks
-  // ^^^ entity.other.pseudo-class.css-modules
+  // ^^^ entity.other.pseudo-class
     .global-class-name
       color: green