Add self-closing tags style customization

People use different styles in different projects.  Allow user to
customize it.

4 files changed, 71 insertions, 2 deletions

diff --git a/emmet-mode.el b/emmet-mode.el
index 6cf6bd1..5c2bdee 100644
--- a/emmet-mode.el
+++ b/emmet-mode.el
@@ -207,6 +207,25 @@ to provide proper CSS abbreviations completion."
   :type 'boolean
   :group 'emmet)
 
+(defcustom emmet-self-closing-tag-style "/"
+  "Self-closing tags style.
+
+This determines how Emmet expands self-closing tags.
+
+E.g., FOO is a self-closing tag.  When expanding \"FOO\":
+
+When \" /\", the expansion is \"<FOO />\".
+When \"/\", the expansion is \"<FOO/>\".
+When \"\", the expansion is \"<FOO>\".
+
+Default value is \"/\".
+
+NOTE: only \" /\", \"/\" and \"\" are valid."
+  :type '(choice (const :tag " />" " /")
+                 (const :tag "/>" "/")
+                 (const :tag ">" ""))
+  :group 'emmet)
+
 (defvar emmet-use-css-transform nil
   "When true, transform Emmet snippets into CSS, instead of the usual HTML.")
 (make-variable-buffer-local 'emmet-use-css-transform)
@@ -3467,7 +3486,8 @@ tbl))
 	  (block-indentation? (or content-multiline? (and block-tag? content)))
           (lf                 (if block-indentation? "\n")))
      (concat "<" tag-name id classes props
-             (if self-closing? "/>"
+             (if self-closing?
+                 (concat emmet-self-closing-tag-style ">")
                (concat ">"
                        (if tag-txt
                            (if block-indentation?
diff --git a/src/html-abbrev.el b/src/html-abbrev.el
index 6686bea..ad53474 100644
--- a/src/html-abbrev.el
+++ b/src/html-abbrev.el
@@ -572,7 +572,8 @@
 	  (block-indentation? (or content-multiline? (and block-tag? content)))
           (lf                 (if block-indentation? "\n")))
      (concat "<" tag-name id classes props
-             (if self-closing? "/>"
+             (if self-closing?
+                 (concat emmet-self-closing-tag-style ">")
                (concat ">"
                        (if tag-txt
                            (if block-indentation?
diff --git a/src/mode-def.el b/src/mode-def.el
index e7ee679..104ace2 100644
--- a/src/mode-def.el
+++ b/src/mode-def.el
@@ -54,6 +54,25 @@ to provide proper CSS abbreviations completion."
   :type 'boolean
   :group 'emmet)
 
+(defcustom emmet-self-closing-tag-style "/"
+  "Self-closing tags style.
+
+This determines how Emmet expands self-closing tags.
+
+E.g., FOO is a self-closing tag.  When expanding \"FOO\":
+
+When \" /\", the expansion is \"<FOO />\".
+When \"/\", the expansion is \"<FOO/>\".
+When \"\", the expansion is \"<FOO>\".
+
+Default value is \"/\".
+
+NOTE: only \" /\", \"/\" and \"\" are valid."
+  :type '(choice (const :tag " />" " /")
+                 (const :tag "/>" "/")
+                 (const :tag ">" ""))
+  :group 'emmet)
+
 (defvar emmet-use-css-transform nil
   "When true, transform Emmet snippets into CSS, instead of the usual HTML.")
 (make-variable-buffer-local 'emmet-use-css-transform)
diff --git a/src/test.el b/src/test.el
index 40f255a..05f7a24 100644
--- a/src/test.el
+++ b/src/test.el
@@ -701,5 +701,34 @@
   #'emmet-expand-jsx-className?-test
   '(((".jsx>ul.lis>li.itm{x}*2") . "<div className=\"jsx\">\n  <ul className=\"lis\">\n    <li className=\"itm\">x</li>\n    <li className=\"itm\">x</li>\n  </ul>\n</div>")))
 
+(defun emmet-self-closing-tag-style-test (lis)
+  (let ((es (car lis))
+        (emmet-preview-default nil))
+    (with-temp-buffer
+      (emmet-mode 1)
+      (insert es)
+      (emmet-expand-line nil)
+      (buffer-string))))
+
+;; By default, `emmet-self-closing-tag-style' must not break any test code.
+(emmet-run-test-case "Self closing tag style 1"
+  #'emmet-self-closing-tag-style-test
+  '((("meta") . "<meta/>")))
+
+(let ((emmet-self-closing-tag-style "/"))
+  (emmet-run-test-case "Self closing tag style 2"
+    #'emmet-self-closing-tag-style-test
+    '((("meta") . "<meta/>"))))
+
+(let ((emmet-self-closing-tag-style " /"))
+  (emmet-run-test-case "Self closing tag style 3"
+    #'emmet-self-closing-tag-style-test
+    '((("meta") . "<meta />"))))
+
+(let ((emmet-self-closing-tag-style ""))
+  (emmet-run-test-case "Self closing tag style 4"
+    #'emmet-self-closing-tag-style-test
+    '((("meta") . "<meta>"))))
+
 ;; start
 (emmet-test-cases)