Subject: [PATCH] Add a face for CSS/SCSS variables
From: Simen Heggestøyl <[email-masked]>
To: [email-masked]
Cc: Stefan Monnier <[email-masked]>
Date: Sat, 19 Dec 2015 12:12:25 +0100
List-Id: <debbugs-submit.debbugs.gnu.org>

Hi,

I'd like to propose the following patch, which introduces a new face
to be used commonly for CSS and SCSS variable names.

-- Simen

 From dd89467a604d85d7fd2194bfd1a97c6834806727 Mon Sep 17 00:00:00 2001
 From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?= <[email-masked]>
Date: Fri, 18 Dec 2015 22:38:08 +0100
Subject: [PATCH] Add a face for CSS/SCSS variables

* lisp/textmodes/css-mode.el (css-nmstart-re): Don't match variables.
(css-variable): New face for variables.
(css--font-lock-keywords): Highlight variables.
(scss-font-lock-keywords): Use the new variable face.
---
 lisp/textmodes/css-mode.el | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/lisp/textmodes/css-mode.el b/lisp/textmodes/css-mode.el
index 3e84b43..8c20df7 100644
--- a/lisp/textmodes/css-mode.el
+++ b/lisp/textmodes/css-mode.el
@@ -215,7 +215,7 @@ css-syntax-propertize-function
 (defconst css-escapes-re
   "\\\\\\(?:[^\000-\037\177]\\|[0-9a-fA-F]+[ \n\t\r\f]?\\)")
 (defconst css-nmchar-re (concat "\\(?:[-[:alnum:]]\\|" css-escapes-re 
"\\)"))
-(defconst css-nmstart-re (concat "\\(?:--\\)?\\(?:[[:alpha:]]\\|" 
css-escapes-re "\\)"))
+(defconst css-nmstart-re (concat "\\(?:[[:alpha:]]\\|" css-escapes-re 
"\\)"))
 (defconst css-ident-re ;; (concat css-nmstart-re css-nmchar-re "*")
   ;; Apparently, "at rules" names can start with a dash, e.g. 
@-moz-keyframes.
   (concat css-nmchar-re "+"))
@@ -233,6 +233,8 @@ css-property
   :group 'css)
 (defface css-proprietary-property '((t :inherit (css-property italic)))
   "Face to use for vendor-specific properties.")
+(defface css-variable '((t :inherit font-lock-variable-name-face))
+  "Face to use for variables.")

 (defun css--font-lock-keywords (&optional sassy)
   `((,(concat "!\\s-*"
@@ -246,6 +248,8 @@ css--font-lock-keywords
     ;; Since "An at-rule consists of everything up to and including 
the next
     ;; semicolon (;) or the next block, whichever comes first."
     (,(concat "@" css-ident-re) (0 font-lock-builtin-face))
+    ;; Variables.
+    (,(concat "--" css-ident-re) (0 'css-variable))
     ;; Selectors.
     ;; FIXME: attribute selectors don't work well because they may 
contain
     ;; strings which have already been highlighted as f-l-string-face 
and
@@ -525,7 +529,7 @@ scss-mode-syntax-table
     st))

 (defvar scss-font-lock-keywords
-  (append `((,(concat "$" css-ident-re) (0 
font-lock-variable-name-face)))
+  (append `((,(concat "$" css-ident-re) (0 'css-variable)))
           (css--font-lock-keywords 'sassy)
           `((,(concat "@mixin[ \t]+\\(" css-ident-re "\\)[ \t]*(")
              (1 font-lock-function-name-face)))))
-- 
2.6.4