bug#23458: [PATCH] Support completion of HTML tags in CSS selectors

bug#23458: [PATCH] Support completion of HTML tags in CSS selectors

[Simen Heggestøyl]

[-- Attachment #1.1: Type: text/plain, Size: 111 bytes --]

The attached patch adds support for completion of HTML tags in CSS
selectors for CSS- and SCSS mode.

-- Simen

[-- Attachment #1.2: Type: text/html, Size: 155 bytes --]

[-- Warning: decoded text below may be mangled, UTF-8 assumed --]
[-- Attachment #2: 0001-Support-completion-of-HTML-tags-in-CSS-selectors.patch --]
[-- Type: text/x-patch, Size: 4791 bytes --]

From 4af469d4a67c020eef90e3c19ca9094bf7b59696 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?= <simenheg@gmail.com>
Date: Sun, 1 May 2016 14:59:11 +0200
Subject: [PATCH] Support completion of HTML tags in CSS selectors

* lisp/textmodes/css-mode.el (css--complete-property): Make completion
non-exclusive to allow mixing with selector completions.
(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): Removed in favor of adding several
completion functions to `completion-at-point-functions'.
(css-mode): Add each completion function to
`completion-at-point-functions' instead of using
`css-completion-at-point'.
(scss-mode): Allow nested selectors.
---
 etc/NEWS                   |  4 ++--
 lisp/textmodes/css-mode.el | 41 +++++++++++++++++++++++++++++------------
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/etc/NEWS b/etc/NEWS
index 21602ff..e202612 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 e30fb3e..77e2e77 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
@@ -747,7 +749,7 @@ css--complete-property
       (let ((start (point)))
         (skip-chars-backward " \t\r\n")
         (when (memq (char-before) '(?\{ ?\;))
-          (list start pos css-property-ids))))))
+          (list start pos css-property-ids :exclusive 'no))))))
 
 (defun css--complete-bang-rule ()
   "Complete bang-rule at point."
@@ -824,15 +826,24 @@ css--complete-property-value
           (list (point) end
                 (cons "inherit" (css--property-values property))))))))
 
-(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)
-      (css--complete-property-value)
-      (css--complete-pseudo-element-or-class)
-      (css--complete-at-rule)))
+(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)))))
 
 ;;;###autoload
 (define-derived-mode css-mode prog-mode "CSS"
@@ -852,8 +863,13 @@ css-mode
               :backward-token #'css-smie--backward-token)
   (setq-local electric-indent-chars
               (append css-electric-keys electric-indent-chars))
-  (add-hook 'completion-at-point-functions
-            #'css-completion-at-point nil 'local))
+  (dolist (func (list #'css--complete-bang-rule
+                      #'css--complete-property-value
+                      #'css--complete-pseudo-element-or-class
+                      #'css--complete-at-rule
+                      #'css--complete-property
+                      #'css--complete-selector))
+    (add-hook 'completion-at-point-functions func t 'local)))
 
 (defvar comment-continue)
 
@@ -990,6 +1006,7 @@ scss-mode
   (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)))
 
-- 
2.8.1

bug#23458: [PATCH] Support completion of HTML tags in CSS selectors

[Stefan Monnier]

> @@ -747,7 +749,7 @@ css--complete-property
>        (let ((start (point)))
>          (skip-chars-backward " \t\r\n")
>          (when (memq (char-before) '(?\{ ?\;))
> -          (list start pos css-property-ids))))))
> +          (list start pos css-property-ids :exclusive 'no))))))
> 
>  (defun css--complete-bang-rule ()
>    "Complete bang-rule at point."

It'd be better to avoid the :exclusive thingy, and use something like
completion-table-merge instead.

:exclusive basically prevents any completion style other than prefix
completion, so it's better avoid it when possible.  This said, it's not
a real objection.


        Stefan

bug#23458: [PATCH] Support completion of HTML tags in CSS selectors

[Simen Heggestøyl]

[-- Attachment #1.1: Type: text/plain, Size: 399 bytes --]

On Thu, May 5, 2016 at 5:02 PM, Stefan Monnier 
<monnier@IRO.UMontreal.CA> wrote:
> It'd be better to avoid the :exclusive thingy, and use something like
> completion-table-merge instead.
> 
> :exclusive basically prevents any completion style other than prefix
> completion, so it's better avoid it when possible.  This said, it's 
> not
> a real objection.

Something along these lines?

-- Simen

[-- Attachment #1.2: Type: text/html, Size: 525 bytes --]

[-- Warning: decoded text below may be mangled, UTF-8 assumed --]
[-- Attachment #2: 0001-Support-completion-of-HTML-tags-in-CSS-selectors.patch --]
[-- Type: text/x-patch, Size: 3907 bytes --]

From 1fcc84e66167d464194716e05994706742184155 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?= <simenheg@gmail.com>
Date: Sun, 1 May 2016 14:59:11 +0200
Subject: [PATCH] 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.
---
 etc/NEWS                   |  4 ++--
 lisp/textmodes/css-mode.el | 34 +++++++++++++++++++++++++++++++---
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/etc/NEWS b/etc/NEWS
index 21602ff..e202612 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 e30fb3e..cf407ef 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 @@ css--complete-property-value
           (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 @@ scss-mode
   (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)))
 
-- 
2.8.1

bug#23458: [PATCH] Support completion of HTML tags in CSS selectors

[Stefan Monnier]

> Something along these lines?

Yes.


        Stefan

bug#23458: [PATCH] Support completion of HTML tags in CSS selectors

[Simen Heggestøyl]

[-- Attachment #1: Type: text/plain, Size: 303 bytes --]

On Thu, May 5, 2016 at 6:59 PM, Stefan Monnier 
<monnier@IRO.UMontreal.CA> wrote:
>>  Something along these lines?
> 
> Yes.

Good, thanks for taking a look.

I've installed the patch in master.

I think that by this, CSS mode's completion has finally reached
feature parity with company-css.

-- Simen

[-- Attachment #2: Type: text/html, Size: 532 bytes --]

bug#23458: [PATCH] Support completion of HTML tags in CSS selectors

[Stefan Monnier]

> Good, thanks for taking a look.

> I've installed the patch in master.

> I think that by this, CSS mode's completion has finally reached
> feature parity with company-css.

Great, thanks,


        Stefan

bug#23458: [PATCH] Support completion of HTML tags in CSS selectors

[Dmitry Gutov]

On 05/05/2016 10:24 PM, Simen Heggestøyl wrote:

> I've installed the patch in master.
>
> I think that by this, CSS mode's completion has finally reached
> feature parity with company-css.

Great!

I'll have to remember to update the company-backends initvalue form when 
we finally decide which Emacs version the master will be released in.