Highlight two additional SCSS keywords

* lisp/textmodes/css-mode.el (css-bang-ids): New defconst holding CSS
identifiers on the form !foo.
(scss-bang-ids): New defconst holding SCSS identifiers on the form
!foo.
(css--font-lock-keywords): Highlight the new SCSS bang identifiers in
`font-lock-builtin-face'.

* test/indent/css-mode.css: Add bang rule test case.

* test/indent/scss-mode.css: Add test cases for the introduced bang
rules.

3 files changed, 21 insertions, 4 deletions

diff --git a/lisp/textmodes/css-mode.el b/lisp/textmodes/css-mode.el
index 96a82baa56c..b3a41d3822c 100644
--- a/lisp/textmodes/css-mode.el
+++ b/lisp/textmodes/css-mode.el
@@ -54,6 +54,14 @@
   '("charset" "font-face" "import" "media" "namespace" "page")
   "Identifiers that appear in the form @foo.")
 
+(defconst css-bang-ids
+  '("important")
+  "Identifiers that appear in the form !foo.")
+
+(defconst scss-bang-ids
+  '("default" "global" "optional")
+  "Additional identifiers that appear in the form !foo in SCSS.")
+
 (defconst css-descriptor-ids
   '("ascent" "baseline" "bbox" "cap-height" "centerline" "definition-src"
     "descent" "font-family" "font-size" "font-stretch" "font-style"
@@ -236,8 +244,8 @@
 
 (defun css--font-lock-keywords (&optional sassy)
   `((,(concat "!\\s-*"
-              (regexp-opt (append (if sassy '("global"))
-                                  '("important"))))
+              (regexp-opt (append (if sassy scss-bang-ids)
+                                  css-bang-ids)))
      (0 font-lock-builtin-face))
     ;; Atrules keywords.  IDs not in css-at-ids are valid (ignored).
     ;; In fact the regexp should probably be
diff --git a/test/indent/css-mode.css b/test/indent/css-mode.css
index 24166b00282..3a00739bfc4 100644
--- a/test/indent/css-mode.css
+++ b/test/indent/css-mode.css
@@ -9,7 +9,7 @@ article[role="main"] {
 }
 
 a, b:hover, c {
-    color: black;
+    color: black !important;
 }
 
 a, b:hover {                    /* bug:20282 */
diff --git a/test/indent/scss-mode.scss b/test/indent/scss-mode.scss
index 02a4a98a8c5..e1ec90a5299 100644
--- a/test/indent/scss-mode.scss
+++ b/test/indent/scss-mode.scss
@@ -40,11 +40,20 @@ p.#{$name} var
 }
 article[role="main"] {
     $toto: 500 !global;
-    float: left;
+    $var-with-default: 300 !default;
+    float: left !important;
     width: 600px / 888px * 100%;
     height: 100px / 888px * 100%;
 }
 
+%placeholder {
+    color: #f0f0f0;
+}
+
+button {
+    @extend %placeholder !optional;
+}
+
 @import 'reset';
 
 @mixin border-radius($radius) {