Skip to content

Commit

Permalink
SCSS: Add support for Sass modules
Browse files Browse the repository at this point in the history
  • Loading branch information
adamkudrna committed Nov 23, 2020
1 parent 8bfcc81 commit 9336cf7
Show file tree
Hide file tree
Showing 4 changed files with 25 additions and 4 deletions.
6 changes: 5 additions & 1 deletion components/prism-scss.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ Prism.languages.scss = Prism.languages.extend('css', {

Prism.languages.insertBefore('scss', 'atrule', {
'keyword': [
/@(?:if|else(?: if)?|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)/i,
/@(?:if|else(?: if)?|forward|for|each|while|import|use|extend|debug|warn|mixin|include|function|return|content)\b/i,
{
pattern: /( +)(?:from|through)(?= )/,
lookbehind: true
Expand All @@ -55,6 +55,10 @@ Prism.languages.insertBefore('scss', 'important', {
});

Prism.languages.insertBefore('scss', 'function', {
'module-modifier': {
pattern: /\b(?:as|with|show|hide)\b/i,
alias: 'keyword'
},
'placeholder': {
pattern: /%[-\w]+/,
alias: 'selector'
Expand Down
2 changes: 1 addition & 1 deletion components/prism-scss.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions tests/languages/scss/keyword_feature.test
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@if @else if @else
@for @each @while
@import @extend
@import @extend @use @forward
@debug @warn @mixin
@include @function
@return @content
Expand All @@ -12,7 +12,7 @@
[
["keyword", "@if"], ["keyword", "@else if"], ["keyword", "@else"],
["keyword", "@for"], ["keyword", "@each"], ["keyword", "@while"],
["keyword", "@import"], ["keyword", "@extend"],
["keyword", "@import"], ["keyword", "@extend"], ["keyword", "@use"], ["keyword", "@forward"],
["keyword", "@debug"], ["keyword", "@warn"], ["keyword", "@mixin"],
["keyword", "@include"], ["keyword", "@function"],
["keyword", "@return"], ["keyword", "@content"],
Expand Down
17 changes: 17 additions & 0 deletions tests/languages/scss/module-modifier_feature.test
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
@use "foo" as bar;
@use "foo" with ($color: blue);
@forward "foo" show bar;
@forward "foo" hide baz;

----------------------------------------------------

[
["keyword", "@use"], ["string", "\"foo\""], ["module-modifier", "as"], " bar", ["punctuation", ";"],
["keyword", "@use"], ["string", "\"foo\""], ["module-modifier", "with"], ["punctuation", "("], ["property", [["variable", "$color"]]], ["punctuation", ":"], " blue", ["punctuation", ")"], ["punctuation", ";"],
["keyword", "@forward"], ["string", "\"foo\""], ["module-modifier", "show"], " bar", ["punctuation", ";"],
["keyword", "@forward"], ["string", "\"foo\""], ["module-modifier", "hide"], " baz", ["punctuation", ";"]
]

----------------------------------------------------

Checks for Sass module modifiers

0 comments on commit 9336cf7

Please sign in to comment.