Emacs jump to css declaration from html file

Question

I have been looking around the internets and have not come up with a solution. Does anyone know how to jump to a css declaration inside an html file and have a new buffer open with point at or close to that declaration?

Edit

After more searching I decided to go with a search open buffers for string approach.

;; CSS search open buffers
(defun search-open-css-buffers-for-region-or-word ()
  "Use the current region/point and search open css buffers"
  (interactive)
  (let (searchTerm)
    (setq searchTerm
          (if (region-active-p)
              (buffer-substring-no-properties (region-beginning) (region-end))
            (thing-at-point 'symbol)))
    (multi-occur (mapcar (lambda (buf)
                           (if (string-match "\w*.css" (buffer-name buf))
                               buf)) (buffer-list))
                 searchTerm 5)))

(global-set-key (kbd "M-s-.") 'search-open-css-buffers-for-region-or-word)

It feels like this is a hack though.

Answer 1

There's a couple of things that make this non-generic:

• depending on what HTML mode you use you might need different ways of detecting what is at point
• where are your CSS files? people have all sorts of different project structures
• how do you want the output to look?

Having said that, here's an example, for nxml-mode (though it could easily be adapted).

(defun find-css-defun ()
  (interactive)
  (when (memq 'nxml-attribute-value
              (get-text-property (point) 'face))
    (let ((css-buffers
           (mapcar
            (lambda (file)
              (find-file-noselect file))
            (directory-files default-directory t ".*\\.css$"))))
      (multi-occur css-buffers
                   (thing-at-point 'symbol)))))

• answer to first point, we're using nxml so that's how we detect whether we're on a CSS attribute or not
• answer to second point, we just scan through all CSS files in the same directory as the HTML, css-buffers is a list of opened CSS files; clearly this is adaptable
• we use multi-occur to present the results

It works ok.

PS it requires thing-at-point which is in emacs by default these days