From deb238a68a2aa3acde45235339fb9c251286bda7 Mon Sep 17 00:00:00 2001 From: Adam Kudrna Date: Mon, 23 Nov 2020 21:07:44 +0100 Subject: [PATCH] SCSS: Added support for Sass modules (#2643) --- components/prism-scss.js | 6 +++++- components/prism-scss.min.js | 2 +- tests/languages/scss/keyword_feature.test | 4 ++-- .../languages/scss/module-modifier_feature.test | 17 +++++++++++++++++ 4 files changed, 25 insertions(+), 4 deletions(-) create mode 100644 tests/languages/scss/module-modifier_feature.test diff --git a/components/prism-scss.js b/components/prism-scss.js index a92baa90e2..a3ed7475d6 100644 --- a/components/prism-scss.js +++ b/components/prism-scss.js @@ -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 @@ -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' diff --git a/components/prism-scss.min.js b/components/prism-scss.min.js index 0e106784b4..7f54c3b1d0 100644 --- a/components/prism-scss.min.js +++ b/components/prism-scss.min.js @@ -1 +1 @@ -Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},atrule:{pattern:/@[\w-]+(?:\([^()]+\)|[^(])*?(?=\s+[{;])/,inside:{rule:/@[\w-]+/}},url:/(?:[-a-z]+-)?url(?=\()/i,selector:{pattern:/(?=\S)[^@;{}()]?(?:[^@;{}()]|#\{\$[-\w]+\})+(?=\s*\{(?:\}|\s|[^}]+[:{][^}]+))/m,inside:{parent:{pattern:/&/,alias:"important"},placeholder:/%[-\w]+/,variable:/\$[-\w]+|#\{\$[-\w]+\}/}},property:{pattern:/(?:[-\w]|\$[-\w]|#\{\$[-\w]+\})+(?=\s*:)/,inside:{variable:/\$[-\w]+|#\{\$[-\w]+\}/}}}),Prism.languages.insertBefore("scss","atrule",{keyword:[/@(?:if|else(?: if)?|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)/i,{pattern:/( +)(?:from|through)(?= )/,lookbehind:!0}]}),Prism.languages.insertBefore("scss","important",{variable:/\$[-\w]+|#\{\$[-\w]+\}/}),Prism.languages.insertBefore("scss","function",{placeholder:{pattern:/%[-\w]+/,alias:"selector"},statement:{pattern:/\B!(?:default|optional)\b/i,alias:"keyword"},boolean:/\b(?:true|false)\b/,null:{pattern:/\bnull\b/,alias:"keyword"},operator:{pattern:/(\s)(?:[-+*\/%]|[=!]=|<=?|>=?|and|or|not)(?=\s)/,lookbehind:!0}}),Prism.languages.scss.atrule.inside.rest=Prism.languages.scss; \ No newline at end of file +Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},atrule:{pattern:/@[\w-]+(?:\([^()]+\)|[^(])*?(?=\s+[{;])/,inside:{rule:/@[\w-]+/}},url:/(?:[-a-z]+-)?url(?=\()/i,selector:{pattern:/(?=\S)[^@;{}()]?(?:[^@;{}()]|#\{\$[-\w]+\})+(?=\s*\{(?:\}|\s|[^}]+[:{][^}]+))/m,inside:{parent:{pattern:/&/,alias:"important"},placeholder:/%[-\w]+/,variable:/\$[-\w]+|#\{\$[-\w]+\}/}},property:{pattern:/(?:[-\w]|\$[-\w]|#\{\$[-\w]+\})+(?=\s*:)/,inside:{variable:/\$[-\w]+|#\{\$[-\w]+\}/}}}),Prism.languages.insertBefore("scss","atrule",{keyword:[/@(?:if|else(?: if)?|forward|for|each|while|import|use|extend|debug|warn|mixin|include|function|return|content)\b/i,{pattern:/( +)(?:from|through)(?= )/,lookbehind:!0}]}),Prism.languages.insertBefore("scss","important",{variable:/\$[-\w]+|#\{\$[-\w]+\}/}),Prism.languages.insertBefore("scss","function",{"module-modifier":{pattern:/\b(?:as|with|show|hide)\b/i,alias:"keyword"},placeholder:{pattern:/%[-\w]+/,alias:"selector"},statement:{pattern:/\B!(?:default|optional)\b/i,alias:"keyword"},boolean:/\b(?:true|false)\b/,null:{pattern:/\bnull\b/,alias:"keyword"},operator:{pattern:/(\s)(?:[-+*\/%]|[=!]=|<=?|>=?|and|or|not)(?=\s)/,lookbehind:!0}}),Prism.languages.scss.atrule.inside.rest=Prism.languages.scss; \ No newline at end of file diff --git a/tests/languages/scss/keyword_feature.test b/tests/languages/scss/keyword_feature.test index 90ca11d519..be6eadd81e 100644 --- a/tests/languages/scss/keyword_feature.test +++ b/tests/languages/scss/keyword_feature.test @@ -1,6 +1,6 @@ @if @else if @else @for @each @while -@import @extend +@import @extend @use @forward @debug @warn @mixin @include @function @return @content @@ -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"], diff --git a/tests/languages/scss/module-modifier_feature.test b/tests/languages/scss/module-modifier_feature.test new file mode 100644 index 0000000000..1aa8615380 --- /dev/null +++ b/tests/languages/scss/module-modifier_feature.test @@ -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