Allow underscores in CSS variable names

* lisp/textmodes/css-mode.el (css-nmchar-re): Allow underscores in
variable names (and in identifiers in general).

* test/manual/indent/css-mode.css: Add some examples of variable names
with underscores in them.

* test/manual/indent/less-css-mode.less: Add some examples of variable
names with underscores in them.

* test/manual/indent/scss-mode.scss: Add some examples of variable
names with underscores in them.

4 files changed, 19 insertions, 1 deletions

diff --git a/lisp/textmodes/css-mode.el b/lisp/textmodes/css-mode.el
index ab9e2dc35ec..0035c5e7b05 100644
--- a/lisp/textmodes/css-mode.el
+++ b/lisp/textmodes/css-mode.el
@@ -886,7 +886,7 @@ cannot be completed sensibly: `custom-ident',
 
 (defconst css-escapes-re
   "\\\\\\(?:[^\000-\037\177]\\|[[:xdigit:]]+[ \n\t\r\f]?\\)")
-(defconst css-nmchar-re (concat "\\(?:[-[:alnum:]]\\|" css-escapes-re "\\)"))
+(defconst css-nmchar-re (concat "\\(?:[-_[:alnum:]]\\|" 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.
diff --git a/test/manual/indent/css-mode.css b/test/manual/indent/css-mode.css
index ecf6c3c0ca5..041aeec1b15 100644
--- a/test/manual/indent/css-mode.css
+++ b/test/manual/indent/css-mode.css
@@ -92,5 +92,9 @@ div::before {
 
 .foo-bar--baz {
     --foo-variable: 5px;
+    --_variable_with_underscores: #fff;
+    --_variable-starting-with-underscore: none;
     margin: var(--foo-variable);
+    color: var(--_variable_with_underscores);
+    display: var(--_variable-starting-with-underscore);
 }
diff --git a/test/manual/indent/less-css-mode.less b/test/manual/indent/less-css-mode.less
index 36c037450cc..b40a2362e28 100644
--- a/test/manual/indent/less-css-mode.less
+++ b/test/manual/indent/less-css-mode.less
@@ -1,3 +1,13 @@
+@var-with-dashes: #428bca;
+@var_with_underscores: 10px;
+@_var-starting-with-underscore: none;
+
+body {
+    background: @var-with-dashes;
+    padding: @var_with_underscores;
+    display: @_var-starting-with-underscore;
+}
+
 .desktop-and-old-ie(@rules) {
     @media screen and (min-width: 1200) { @rules(); }
     html.lt-ie9 &                       { @rules(); }
diff --git a/test/manual/indent/scss-mode.scss b/test/manual/indent/scss-mode.scss
index a3dd41eeb47..189ec4e22ac 100644
--- a/test/manual/indent/scss-mode.scss
+++ b/test/manual/indent/scss-mode.scss
@@ -41,9 +41,13 @@ p.#{$name} var
 article[role="main"] {
     $toto: 500 !global;
     $var-with-default: 300 !default;
+    $var_with_underscores: #fff;
+    $_var-starting-with-underscore: none;
     float: left !important;
     width: 600px / 888px * 100%;
     height: 100px / 888px * 100%;
+    color: $var_with_underscores;
+    display: $_var-starting-with-underscore;
 }
 
 %placeholder {