Added JSX's test and document.

4 files changed, 31 insertions, 4 deletions

diff --git a/README.md b/README.md
index 4abf11b..0ea6ded 100644
--- a/README.md
+++ b/README.md
@@ -65,6 +65,10 @@ Or if you don't want to move cursor after expanding:
 
     (setq emmet-move-cursor-after-expanding nil) ;; default t
 
+If you want to use emmet with react-js's JSX, you probably want emmet to expand 'className="..."' instead of 'class="..."':
+
+    (setq emmet-expand-jsx-className? t) ;; default nil
+
 ## Usage
 
 Place point in a emmet snippet and press C-j to expand it (or alternatively,
diff --git a/emmet-mode.el b/emmet-mode.el
index 36929b8..2473028 100644
--- a/emmet-mode.el
+++ b/emmet-mode.el
@@ -3320,6 +3320,9 @@ tbl))
   "Function to execute when expanding a leaf node in the
   Emmet AST.")
 
+(defvar emmet-expand-jsx-className? nil
+  "Wether to use `className' when expanding `.classes'")
+
 (emmet-defparameter
  emmet-tag-settings-table
  (gethash "tags" (gethash "html" emmet-preferences)))
@@ -3443,7 +3446,8 @@ tbl))
        (puthash tag-name fn emmet-tag-snippets-table)))
 
    (let* ((id           (emmet-concat-or-empty " id=\"" tag-id "\""))
-          (classes      (emmet-mapconcat-or-empty " class=\"" tag-classes " " "\""))
+          (class-attr  (if emmet-expand-jsx-className? " className=\"" " class=\""))
+          (classes      (emmet-mapconcat-or-empty class-attr tag-classes " " "\""))
           (props        (let* ((tag-props-default
                                 (and settings (gethash "defaultAttr" settings)))
                                (merged-tag-props
diff --git a/src/html-abbrev.el b/src/html-abbrev.el
index bb2b122..6686bea 100644
--- a/src/html-abbrev.el
+++ b/src/html-abbrev.el
@@ -550,9 +550,7 @@
        (puthash tag-name fn emmet-tag-snippets-table)))
 
    (let* ((id           (emmet-concat-or-empty " id=\"" tag-id "\""))
-          (class-attr  (if emmet-expand-jsx-className?
-                           " className=\""
-                         " class=\""))
+          (class-attr  (if emmet-expand-jsx-className? " className=\"" " class=\""))
           (classes      (emmet-mapconcat-or-empty class-attr tag-classes " " "\""))
           (props        (let* ((tag-props-default
                                 (and settings (gethash "defaultAttr" settings)))
diff --git a/src/test.el b/src/test.el
index 4677be4..40f255a 100644
--- a/src/test.el
+++ b/src/test.el
@@ -680,5 +680,26 @@
 (define-emmet-transform-html-test-case regression-61-bracket-escapes
   "div{\\}\\}\\}}" ("<div>}}}</div>"))
 
+(defun emmet-expand-jsx-className?-test (lis)
+  (let ((es (car lis))
+        (indent-tabs-mode nil)
+        (tab-width 2)
+        (standard-indent 2)
+        (emmet-expand-jsx-className? t))
+    (with-temp-buffer
+      (emmet-mode 1)
+      (sgml-mode)
+      (insert es)
+      (emmet-expand-line nil)
+      (buffer-string))))
+
+(emmet-run-test-case "JSX's className 1"
+  #'emmet-expand-jsx-className?-test
+  '(((".jsx") . "<div className=\"jsx\"></div>")))
+
+(emmet-run-test-case "JSX's className 2"
+  #'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>")))
+
 ;; start
 (emmet-test-cases)