Fix highlighting of CSS selectors with double hyphens

* lisp/textmodes/css-mode.el (css--font-lock-keywords): Fix
highlighting of selectors that contain double hyphens.  They would be
mistaken for a variable.

2 files changed, 7 insertions, 2 deletions

diff --git a/lisp/textmodes/css-mode.el b/lisp/textmodes/css-mode.el
index 45d750af755..0beaaaa32f1 100644
--- a/lisp/textmodes/css-mode.el
+++ b/lisp/textmodes/css-mode.el
@@ -852,8 +852,6 @@ cannot be completed sensibly: `custom-ident',
     ;; 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 font-lock-variable-name-face))
     ;; Selectors.
     ;; Allow plain ":root" as a selector.
     ("^[ \t]*\\(:root\\)\\(?:[\n \t]*\\)*{" (1 'css-selector keep))
@@ -898,6 +896,8 @@ cannot be completed sensibly: `custom-ident',
                                         'font-lock-multiline t)
                      ;; No face.
                      nil)))
+    ;; Variables.
+    (,(concat "--" css-ident-re) (0 font-lock-variable-name-face))
     ;; Properties.  Again, we don't limit ourselves to css-property-ids.
     (,(concat "\\(?:[{;]\\|^\\)[ \t]*\\("
               "\\(?:\\(" css-proprietary-nmstart-re "\\)\\|"
diff --git a/test/manual/indent/css-mode.css b/test/manual/indent/css-mode.css
index 79b082188f5..bf612b53a14 100644
--- a/test/manual/indent/css-mode.css
+++ b/test/manual/indent/css-mode.css
@@ -77,3 +77,8 @@ div::before {
         url("Sans-Regular.eot") format("eot"),
         url("Sans-Regular.woff") format("woff");
 }
+
+.foo-bar--baz {
+    --foo-variable: 5px;
+    margin: var(--foo-variable);
+}