Support completion of HTML tags in CSS selectors

* lisp/textmodes/css-mode.el (css--html-tags): New variable holding a
list of HTML tags for completion.
(css--nested-selectors-allowed): New variable for determining whether
nested selectors are allowed in the current mode.
(css--complete-selector): New function for completing part of a CSS
selector.
(css-completion-at-point): Support completion of selectors.
(scss-mode): Allow nested selectors.

2 files changed, 33 insertions, 5 deletions

diff --git a/etc/NEWS b/etc/NEWS
index 21602ff954c..e2026121b95 100644
--- a/etc/NEWS
+++ b/etc/NEWS
@@ -282,8 +282,8 @@ different group ID.
 ** CSS mode
 
 ---
-*** Support for completing attribute values and bang-rules using the
-'completion-at-point' command.
+*** Support for completing attribute values, at-rules, bang-rules, and
+HTML tags using the 'completion-at-point' command.
 
 +++
 ** Emacs now supports character name escape sequences in character and
diff --git a/lisp/textmodes/css-mode.el b/lisp/textmodes/css-mode.el
index e30fb3e6d14..cf407effa7e 100644
--- a/lisp/textmodes/css-mode.el
+++ b/lisp/textmodes/css-mode.el
@@ -30,10 +30,12 @@
 ;; - electric ; and }
 ;; - filling code with auto-fill-mode
 ;; - fix font-lock errors with multi-line selectors
+;; - support completion of user-defined classes names and IDs
 
 ;;; Code:
 
 (require 'seq)
+(require 'sgml-mode)
 (require 'smie)
 
 (defgroup css nil
@@ -824,15 +826,40 @@ the string PROPERTY."
           (list (point) end
                 (cons "inherit" (css--property-values property))))))))
 
+(defvar css--html-tags (mapcar #'car html-tag-alist)
+  "List of HTML tags.
+Used to provide completion of HTML tags in selectors.")
+
+(defvar css--nested-selectors-allowed nil
+  "Non-nil if nested selectors are allowed in the current mode.")
+(make-variable-buffer-local 'css--nested-selectors-allowed)
+
+;; TODO: Currently only supports completion of HTML tags.  By looking
+;; at open HTML mode buffers we should be able to provide completion
+;; of user-defined classes and IDs too.
+(defun css--complete-selector ()
+  "Complete part of a CSS selector at point."
+  (when (or (= (nth 0 (syntax-ppss)) 0) css--nested-selectors-allowed)
+    (save-excursion
+      (let ((end (point)))
+        (skip-chars-backward "-[:alnum:]")
+        (list (point) end css--html-tags)))))
+
 (defun css-completion-at-point ()
   "Complete current symbol at point.
 Currently supports completion of CSS properties, property values,
 pseudo-elements, pseudo-classes, at-rules, and bang-rules."
-  (or (css--complete-property)
-      (css--complete-bang-rule)
+  (or (css--complete-bang-rule)
       (css--complete-property-value)
       (css--complete-pseudo-element-or-class)
-      (css--complete-at-rule)))
+      (css--complete-at-rule)
+      (seq-let (prop-beg prop-end prop-table) (css--complete-property)
+        (seq-let (sel-beg sel-end sel-table) (css--complete-selector)
+          (when (or prop-table sel-table)
+            `(,@(if prop-table
+                    (list prop-beg prop-end)
+                  (list sel-beg sel-end))
+              ,(completion-table-merge prop-table sel-table)))))))
 
 ;;;###autoload
 (define-derived-mode css-mode prog-mode "CSS"
@@ -990,6 +1017,7 @@ pseudo-elements, pseudo-classes, at-rules, and bang-rules."
   (setq-local comment-end-skip "[ \t]*\\(?:\n\\|\\*+/\\)")
   (setq-local css--at-ids (append css-at-ids scss-at-ids))
   (setq-local css--bang-ids (append css-bang-ids scss-bang-ids))
+  (setq-local css--nested-selectors-allowed t)
   (setq-local font-lock-defaults
               (list (scss-font-lock-keywords) nil t)))