diff --git a/Syntaxes/LESS.sublime-syntax b/Syntaxes/LESS.sublime-syntax index a86325a..0c1d588 100644 --- 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 index 0f342dd..75552cc 100755 --- 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 */