CSS mode won't indent values across multiple lines

Question

When a line in my CSS file appears to be too long (typically a property followed by a bunch of values), I want to split them in to several new lines like this:

But I have to manually enter spaces before the lines to achieve that. In reality, when I hit TAB with my cursor on the url line, what I get is this:

The worst thing is that, after manually inserting the spaces, when I hit TAB again on the same line, it goes back to the ugly format.

This is not a significant issue but it really pains me and I really hope we can have a decent solution here. Thanks in advance!

M-x version:

GNU Emacs 25.1.1 (x86_64-apple-darwin16.1.0, NS appkit-1504.60 Version 10.12.1 (Build 16B2555)) of 2016-11-27

Answer 1

Insert below code into your emacs setup:

(defadvice smie-indent-line (after smie-indent-line-after-hack activate)
  "Customize your own css coding style."
  (if (eq major-mode 'css-mode)
      (let* ((cur-line (buffer-substring-no-properties
                        (line-beginning-position)
                        (line-end-position))))
        (if (string-match "^\\( +\\)url" cur-line)
            (let* ((empty-spaces (match-string 1 cur-line)))
              (replace-regexp empty-spaces
                              (make-string (+ (length empty-spaces) css-indent-offset) 32)
                              nil
                              (line-beginning-position) (line-end-position)))))))

My code is copied from http://blog.binchen.org/posts/indent-jsx-in-emacs.html with a little modification.

I will show you how to solve similar problems for other languages:

• Learn Emacs lisp
• Press C-h k ENTER and read documentation. In my case, it's documentation of newline-and-indent. It says "Indentation is done using the value of `indent-line-function'."
• Press C-h v indent-line-function. Now you know you need hack smie-indent-line
• Done

Answer 2

I just committed a fix to CSS mode, so it should hopefully work as you describe out of the box in the next Emacs release. (Or you could always fetch the latest version from the master branch if you don't want to wait for a release.)