add css-modules support

https://github.com/css-modules
danro · Nov 10, 2020 · a2eae04 · a2eae04
1 parent ab88631
commit a2eae04
Show file tree

Hide file tree

Showing 2 changed files with 133 additions and 0 deletions.
diff --git a/Syntaxes/LESS.sublime-syntax b/Syntaxes/LESS.sublime-syntax
@@ -173,6 +173,7 @@ contexts:
     - include: less-map-values
     - include: at-rules
     - include: curly-braces
+    - include: css-modules
     - match: '\s*(,)\s*'
       captures:
         1: punctuation.separator.css
@@ -578,6 +579,27 @@ contexts:
       captures:
         1: punctuation.definition.entity.css
 
+    - match: '\s*(:)(local|global)(?=\()'
+      scope: meta.selector.css entity.other.pseudo-class.css-modules.css
+      captures:
+        1: punctuation.definition.entity.css
+      push:
+        - meta_scope: meta.selector.css meta.function-call.css
+        - match: '\('
+          scope: punctuation.definition.group.begin.css
+          push:
+            - meta_scope: meta.group.css
+            - match: '\)'
+              scope: punctuation.definition.group.end.css
+              pop: true
+            - include: selectors
+            - include: literal-string
+        - match: ''
+          pop: true
+    - match: '\s*(:)(local|global)'
+      scope: meta.selector.css entity.other.pseudo-class.css-modules.css
+      captures:
+        1: punctuation.definition.entity.css
 
 
   properties:
@@ -650,6 +672,10 @@ contexts:
         5: punctuation.definition.string.end.less
       push:
         - include: property-value-wrapper
+    - match: '\b(composes)\b'
+      scope: meta.property-name.css-modules.css support.type.property-name
+      push:
+        - include: property-value-wrapper
 
   property-value-wrapper:
     - match: '(\s*)(;)'
@@ -666,6 +692,8 @@ contexts:
         - meta_content_scope: meta.property-value.css
         - match: '(?=\s*[;})])'
           pop: true
+        - match: '\bfrom\b'
+          scope: keyword.control.import.from.css-modules.css
         - include: property-values
         - match: '(?={)'
           pop: true
@@ -2622,3 +2650,42 @@ contexts:
         - match: \n
           pop: true
 
+  css-modules:
+    - match: '\s*(:)(import|export)'
+      scope: meta.selector.css entity.other.pseudo-class.css-modules.css
+      captures:
+        1: punctuation.definition.entity.css
+      push:
+        - meta_scope: meta.selector.css meta.function-call.css
+        - match: '\('
+          scope: punctuation.definition.group.begin.css
+          push:
+            - meta_scope: meta.group.css
+            - match: '\)'
+              scope: punctuation.definition.group.end.css
+              pop: true
+            - include: selectors
+            - include: literal-string
+        - match: '\s*(\{)'
+          scope: punctuation.section.property-list.begin.css
+          push:
+            - meta_scope: meta.group.css-modules.css
+            - match: '\}'
+              scope: punctuation.section.property-list.end.css
+              pop: true
+            - include: comment-line
+            - include: comment-block
+            - match: '([a-zA-Z0-9_-]+)\s*(:)'
+              captures:
+                1: meta.property-name.css-modules.css support.type.property-name.css-modules.css
+                2: punctuation.separator.key-value.css
+                3: variable.other.css-modules.css
+              push:
+                - match: '(;|\s*(?=$))'
+                  captures:
+                    1: punctuation.terminator.rule.css
+                  pop: true
+                - include: literal-string
+                - include: unquoted-string
+        - match: ''
+          pop: true
diff --git a/Tests/syntax_test_less.less b/Tests/syntax_test_less.less
@@ -291,6 +291,72 @@ http://lesscss.org/features/#variables-feature-variable-interpolation
 }
 
 
+/* CSS Modules
+
+   Interoperable CSS: https://github.com/css-modules/icss#specification
+   localAlias is basically any string inside a CSS file,
+   that will be replaced with the value stored as keyFromDep
+   keys must be a single term, consisting of only alphanumeric characters, underscores and dashes
+*/
+:import("path/to/dep.css") {
+// ^^^^ entity.other.pseudo-class.css-modules.css
+//     ^ punctuation.definition.group.begin.css
+//      ^^^^ string
+//                       ^ punctuation.definition.group.end.css
+//                         ^ punctuation.section.property-list.begin.css
+  localAlias: keyFromDep;
+// ^^^^^^^^^ meta.property-name.css-modules.css
+//            ^^^^^^^^^^ string
+   blababla : "keyFromDep";
+// ^^^^^^^^ meta.property-name.css-modules.css
+//          ^ punctuation
+//            ^^^^^^^^^^ string
+//                        ^ punctuation
+}
+// an exportedKey exposes a specific value (a selector, a value, anything really)
+:export {
+// ^^^^ entity.other.pseudo-class.css-modules.css
+  exportedKey: exportedValue;
+// ^^^^^^^^^ meta.property-name.css-modules.css
+//           ^ punctuation
+//             ^^^^^^^^^^ string
+//                          ^ punctuation
+}
+/* CSS Modules
+   Composing selectors: https://github.com/css-modules/css-modules#css-modules
+*/
+.otherClassName {
+  composes: className from "./style.css";  // from filename
+  composes: classNameA classNameB;         // multiple classnames
+  composes: globalClassName from global;   // from global classnames
+// ^^^^^^^ meta.property-name.css-modules.css
+//        ^ punctuation
+//                          ^^^^ keyword.control.import.from.css-modules.css
+//                                     ^ punctuation
+}
+/* CSS Modules
+   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.definition.group.begin.css
+//                                         ^^^^^^^^^^^^^^^^^^^^^^ meta.selector
+//                                                               ^ punctuation.definition.group.end.css
+:global {  // global blocks
+// ^^^^ entity.other.pseudo-class.css-modules
+  .global-class-name {
+    color: green;
+  }
+}
+:local {  // local blocks
+// ^^^ entity.other.pseudo-class.css-modules
+  .global-class-name {
+    color: green;
+  }
+}
+
+
 /*
   Support property values after a line break
 */