smihica/emmet-mode

emmet's support for emacs.

emmet-mode's Issues

HTML works fine, CSS not

Hello,

I need some help.

Emmet is working fine in HTML-Files, but not in CSS-Files.

When I type m plus C-j, the result is

I use emacs23 and i put the line
(add-hook 'css-mode-hook 'emmet-mode) ;; enable Emmet's css abbreviation.
in my .emacs-File.

Any help out there?
Thanks,
Zeg31

Intermittent breakage...

Infrequently, I've noticed that emmet-mode will get wedged in a state where:

1. Preview will trigger on expansion, regardless of whether the emmet-preview-default
2. The "preview" will consist of whatever is below the emmet expression - selecting the preview will do nothing.

Thus far, the only way I've managed to recover is by restarting my Emacs.

My emacs-version is GNU Emacs 24.3.1 (x86_64-apple-darwin, NS apple-appkit-1038.36) of 2013-03-13 on bob.porkrind.org

I'm working on trying to repro and diagnose, but I've thus far been unable to figure it out.

emmet-mode with jade-mode

Hi,

Great job. I want to use emmet-mode with .jade files but emmet-mode don't work. It expand html but not jade sintaxis.

Thank you.

Preview not working

I’m having some trouble getting emmet-mode to work. If I enable it via the hook or manually the emmet preview pops up, but it doesn’t show anything except “Emmet preview. Choose with …”. I installed zencoding from melpa to see if the same problem exists there and zencoding works fine. Also if I enable zencoding and disable it again. Emmet is working fine.

Numbering expressions are not evaluated inside attribute expressions.

This:

ul>li[id="thing-$"]*3

Should evaluate to:

<ul>
  <li id="thing-1"></li>
  <li id="thing-2"></li>
  <li id="thing-3"></li>
</ul>

But instead evaluates to:

<ul>
  <li id="thing-$"></li>
  <li id="thing-$"></li>
  <li id="thing-$"></li>
</ul>

I've verified that emmet does handle this case, so emmet-mode should.

CSS-filter (and hiccup filter) leave point in incorrect places.

In CSS-modes, expansions without values leave point after the semicolon, rather than before.

fw:|

Expands to:

font-weight: ;|

Should be:

font-weight: |;

Hiccup filter just leaves point at the end of the expanded expression, no matter what.

emmet-expand-yas does not create empty elements

When I expand

match/

with emmet-yas-expand, it becomes

<match></match>

However, when I do it with emmet-expand-line, it correctly expands to

<match/>

I am running emmet-mode 20140218.836 from MELPA.

emacs-version says

GNU Emacs 24.3.91.1 (i686-pc-mingw32) of 2014-05-12 on LEG570

Thanks for your time, and for emmet-mode.

abbreviation for html comment

is there no simple abbreviation for an html comment (i.e. )?

Can't expand css expression

It works with HTML like ul>li*3. But can't work with css like p1-2!+m10e+bd1#2s.
The expression is expanded like following.

<p1-2!></p1-2!>
<m10e></m10e>
<bd1></bd1>

How do I use with css?

End points of self-closing tags and populated content between tags are considered valid edit points on expansion.

Emmet-mode currently uses the function emmet-html-next-insert-point to choose where to leave point after expansion. As it stands now, the ends of self-closing tags are seen as valid places to leave point. This seems like a bug to me - I'd think that if you expanded:

div/+div|

You'd want to end up with:

<div/><div>|</div>

rather than:

<div/>|<div></div>

Likewise, this:

div{thing}+div[attr]|

Expands as:

<div>|Thing</div><div attr=""></div>

And should be

<div>Thing</div><div attr="|"></div>

If emmet-goto-edit-point operated on a string (rather than the buffer) and returned an index, and respected emmet-move-cursor-between-quotes, it might be make sense to just replace emmet-html-next-insert-point with it.

tag like p[title="hello"] doesn't work

when I execute d>(a>b)+c , here comes a error in emacs

scan error:"unbalanced parentheses"

location of "emmet-mode ends here" causes major problems with M-x package-install-file

As per title, the placement of the ;;; ememt-mode.el ends here tag causes problems when installing a package using M-x package-install-file.

Leaving directory `/home/cody/.emacs.d/elpa/emmet-mode-1.0.10'
Compiling file /home/cody/.emacs.d/elpa/emmet-mode-1.0.10/emmet-mode-autoloads.el at Sun Dec 13 04:55:56 2015
Entering directory `/home/cody/.emacs.d/elpa/emmet-mode-1.0.10/'
Compiling file /home/cody/.emacs.d/elpa/emmet-mode-1.0.10/emmet-mode-pkg.el at Sun Dec 13 04:55:56 2015
Compiling file /home/cody/.emacs.d/elpa/emmet-mode-1.0.10/emmet-mode.el at Sun Dec 13 04:55:56 2015
In end of data:
emmet-mode.el:642:1:Warning: the following functions are not known to be defined:
    emmet-css-transform, emmet-html-transform
Compiling no file at Sun Dec 13 04:56:46 2015
Leaving directory `/home/cody/.emacs.d/elpa/emmet-mode-1.0.10'
Compiling file /home/cody/.emacs.d/elpa/emmet-mode-1.0.10/emmet-mode-autoloads.el at Sun Dec 13 04:56:52 2015
Entering directory `/home/cody/.emacs.d/elpa/emmet-mode-1.0.10/'
Compiling file /home/cody/.emacs.d/elpa/emmet-mode-1.0.10/emmet-mode-pkg.el at Sun Dec 13 04:56:52 2015
Compiling file /home/cody/.emacs.d/elpa/emmet-mode-1.0.10/emmet-mode.el at Sun Dec 13 04:56:53 2015

In end of data:
emmet-mode.el:642:1:Warning: the following functions are not known to be defined:
    emmet-css-transform, emmet-html-transform

Melpa does not use package-install-file to install packages. However, users of Quelpa (and possibly el-get, I haven't tested it) will have problems installing the latest version of emmet-mode. The stable version(1.0.8) has ;;; ememt-mode.el ends here at the end of the file, allowing emmet-css-transform and emmet-html-transform to be compiled.

Correct me if I'm wrong but it seems to serve no apparent purpose being up there.

lorem ipsum generator

Any plan to support this?

http://docs.emmet.io/abbreviations/lorem-ipsum/

Preview always happens if there's an active region

Currently, if the user has an active region, preview is always triggered.

It seems that this can be fixed simply by changing beg to preview on this line: https://github.com/smihica/emmet-mode/blob/master/src/mode-def.el#L80

Extent of flash is wrong during expansion with simultaneous indentation

When doing an expansion with C-j in a line that is not already indented to the proper depth, the flash of green highlighting extends backwards past the region that should be highlighted, by the amount of indentation added.
To reproduce this, for example, start a new HTML document, expand html:5 and then a p inside the body. Then, on a new blank line between the p tags, type, unindented:

This is a test. a C-j

The flash will extend backwards to cover the word 'test'.

Emmet mode not enabled in html, is enabled in css.

Using emacs

GNU Emacs 25.1.50.2 (x86_64-pc-linux-gnu, GTK+ Version 3.10.8)
 of 2016-03-13

this is the section I have asked emmet to autoload, commented out smart-tab function i was worried might be interfering but no resolution.

(require 'smart-tab)
(global-smart-tab-mode 1)

;; (defun add-emmet-expand-to-smart-tab-completions ()
;;   ;; Add an entry for current major mode in
;;   ;; `smart-tab-completion-functions-alist' to use
;;   ;; `emmet-expand-line'.
;;   (add-to-list 'smart-tab-completion-functions-alist
;;                (cons major-mode #'emmet-expand-line)))   

;;; emmet
(require 'emmet-mode)
(add-hook 'sgml-mode-hook 'emmet-mode) ;; Auto-start on any markup modes
;;(add-hook 'sgml-mode-hook 'add-emmet-expand-to-smart-tab-completions) 
(add-hook 'css-mode-hook  'emmet-mode) ;; enable Emmet's css abbreviation.
;;(add-hook 'css-mode-hook 'add-emmet-expand-to-smart-tab-completions)

uninstalled and updated to latest emmet via melpa. css mode loads fine.

Change repo name from emmet to emmet-mode

Hi, thanks for your work.
Wondering if it is better to name the repo emmet-mode so that it can be cloned under .emacs.d and be coherent with syntax invocation and instructions without renaming the dir.
Thanks.

emmet-expand-yas cannot be undone with undo-tree

Reproduce steps:

1. web-mode
2. Type html:5
3. Hit TAB, confirm the snippet is expanded
4. Hit ESC to return to normal state
5. Hit u (undo-tree-undo)

Expected:
Snippet is deleted.

Actual:
Snippet stays.

Messages:

[yas] Snippet 2 exited.
Undo branch point!

undo-tree-visualize shows that two branches seemingly identical are created right after the snippet is expanded.

This is a issue reposted from:
syl20bnr/spacemacs#2351

install error

I use emacs -nw start my emacs, and i get this:
error: Invalid modifier in string

and emacs --debug-init log:
1Debugger entered--Lisp error: (error "Invalid modifier in string")
2 eval-buffer(#<buffer load<2>> nil "/Users/samleung/.emacs.d/plugins/emmet-mode/emmet-mode.el" nil t) ; Reading at buffer position 15964
3 load-with-code-conversion("/Users/samleung/.emacs.d/plugins/emmet-mode/emmet-mode.el" "/Users/samleung/.emacs.d/plugins/emmet-mode/emmet-mode.el" nil t)
4 require(emmet-mode)
5 eval-buffer(#<buffer load> nil "/Users/samleung/.emacs" nil t) ; Reading at buffer position 326
6 load-with-code-conversion("/Users/samleung/.emacs" "/Users/samleung/.emacs" t t)
7 load("~/.emacs" t t)
8 #[nil "^H\205\276^@ \306=\203^Q^@\307^H\310Q\202A^@ \311=\2033^@\312\307\313\314#\203#^@\315\202A^@\312\307\313\316#\203/^@\317\202A^@\315\202A^@ \32$
9 command-line()
10 normal-top-level()

by the way, i start my emacs with window, it work well. why?

Disabling C-j leaves RET bound to emmet-expand-line

I'm trying to replace C-j with C-m as seen in #2.

;; Emmet (https://github.com/smihica/emmet-mode)
(add-hook 'sgml-mode-hook 'emmet-mode)
(add-hook 'css-mode-hook 'emmet-mode)
(add-hook 'emmet-mode-hook
          (lambda ()
            (define-key emmet-mode-keymap (kbd "<C-return>") nil)
            (define-key emmet-mode-keymap (kbd "C-j") nil)
            (define-key emmet-mode-keymap (kbd "C-m") 'emmet-expand-line)
            (define-key emmet-mode-keymap (kbd "<M-left>") 'emmet-prev-edit-point)
            (define-key emmet-mode-keymap (kbd "<M-right>") 'emmet-next-edit-point)))
(setq emmet-preview-default nil)           ; Disable preview before expanding
(setq emmet-move-cursor-between-quotes t)  ; Move the cursor to next edit point

But with emmet-mode active, RET won't insert a new line.

RET (translated from <return>) runs the command autopair-newline,
which is an interactive Lisp function in `autopair.el'.

It is bound to RET.

(autopair-newline)

Do a smart newline when right between parenthesis.

In other words, insert an extra newline along with the one inserted normally
by this command. Then place point after the first, indented.

Works by scheduling possible autopair behaviour, then calls
original command as if autopair didn't exist, which in this case is `emmet-expand-line'.

Wrap with markup

I have a pretty functional wrap-with-markup for people to look at.

Right now, it token-replaces $ and }, so as to use bracket-parsing. This means it works with multipliers, but does not treat $s as special. This is by design. I figured it was pretty likely for someone to want to expand out something with literal dollar signs. It's also possible to treat them normally, of course - please let me know what you guys think.

How do you escape special characters? Pipe operator, curly braces, etc

If I want

<p> | </p>

(where | is the literal pipe operator, not the cursor position)

I cannot use p{|} because the pipe operator is part of emmet's syntax. Is there currently a way to escape special characters? I also cannot get <p>{</p>. Asterisk and square brackets seem fine.

Single line output

Hi, I want to output some tags in single line like:

<script src=""></script>

But this mode output in two lines like:

<script src=""> </script>

Is there way to do it?

Lack of release tag

Could you please tag release version 1.0.1 as mentioned in code header?

emmet-expand-yas doesn't seem to work immediately following a previous emmet-expand-yas

I am using emmet-mode within web-mode, and TAB is mapped to emmet-expand-yas

Reproduce steps:

1. Type div, hit TAB
2. Type span, hit TAB

Expected (| is cursor):

<div>
    <span>|</span>
</div>

Actual:

<div>
    span
</div>|

Expansion inside HTML forms contains unwanted indentation.

Buggy behavior is in f56174e.

The basic problem is that emmet-prettify gets called regardless of whether the emmet-expression is within HTML forms or not.

Can not work well with LESS : (

In LESS, "bd1" should be expanded into "border: 1px", but it was expanded into "<bd1></bd1>".

Chaning Preview Color

In my emacs emmet-mode's preview color is too bright. How can I change only preview color?

Proposed: Change default setting of emmet-preview-default to nil

So, I don't know about anyone else, but I dislike preview mode fairly intensely. I think we should change the default to no-preview, for the following reasons:

• Emmet doesn't preview before expansion.
• emmet-mode is awesome because it makes creating markup faster by reducing typing. No-preview is faster, and involves one less keystroke.
• Preview is available when disabled via C-u, and is equivalent (and no faster than) just expanding and hitting undo anyway.

Honestly, I'd be in support of ripping preview out entirely; it would simplify the insertion code. I do see that is has benefits for people just learning the syntax, but since one of the big draws of Emmet/emmet-mode is that Emmet syntax is is largely CSS selector syntax, which web devs are assumed to know, this seems like a marginal benefit.

I'll write the (trivial) code to change the setting, I just didn't want to do it if other people have objections, since it's not exactly a big deal. @smihica, @flyingleafe?

Obsolete macros (as of 24.3)

Hi,

Just noticed some warning upon Emacs 24.4 loading. The package works just fine apart from those warnings.

.emacs.d/elpa/emmet-mode-20141023.1332/emmet-mode.el: `labels' is an obsolete macro (as of 24.3); use `cl-labels' instead. [3 times]
.emacs.d/elpa/emmet-mode-20141023.1332/emmet-mode.el: `flet' is an obsolete macro (as of 24.3); use either `cl-flet' or `cl-letf'.

Not working

Hi. I've installed emmet-mode using the package repository on my emmacs, but I cant't expand it.

I've typed C-j, but nothing happens.

Could you help me? Thanks

I broke every HTML snippet and I'm sorry ;-)

Snippets (and possibly other things) haven't been updated to use new-style attributes.

I'm working on this now.

Expansion when following opening tags with attributes, spaces, broken.

This is a bad one.

  <div class="broken">span|</div>

expands to:

  <div <class></class></div>

The problem is how emmet-find-left-bound works. I think the easiest way to fix it is to start at beginning of line, skip all whole tags before point, and set a "minimum left bound" at the end of the last whole tag.

disabling preview

is there any way to disable preview when expanding an element?

set language variable

when expand html:5, there's a language attr:

<doctype html>
<html lang="en">

Want to change this, but cannot find how to set.

cursor position after expanding

Emacs noob here.
After expanding with C-j and RET the cursor is at the end of the closing tag, instead that in the middle between opening tag and closing one (much more useful, such in Sublime Text when using emmet).
Do you know how to change this behaviour?
Thanks.

Is there a way to expand `.any-class` into `className="any-class"` for React?

So this part of the code is the one responsible for that D: too bad it's like hardcoded :(

(defun emmet-make-html-tag (tag-name tag-has-body? tag-id tag-classes tag-props tag-txt settings content)
  "Create HTML markup string"
  (emmet-aif
   (gethash tag-name emmet-tag-snippets-table)

   (let ((fn (if (stringp it)
                 (emmet-html-snippets-instantiate-lambda it)
               it)))
     (prog1
         (funcall fn content)
       (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 " " "\""))
          (props        (let* ((tag-props-default
                                (and settings (gethash "defaultAttr" settings)))
                               (merged-tag-props
                                (emmet-merge-tag-props
                                 tag-props-default
                                 tag-props)))
                          (emmet-mapconcat-or-empty
                           " " merged-tag-props " " nil
                           (lambda (prop)
                             (let ((key (car prop)))
                               (concat (if (symbolp key) (symbol-name key) key)
                                       "=\"" (cadr prop) "\""))))))
          (content-multiline? (and content (string-match "\n" content)))
          (block-tag?         (and settings (gethash "block" settings)))
          (self-closing?      (and (not (or tag-txt content))
                                   (or (not tag-has-body?)
                                       (and settings (gethash "selfClosing" settings)))))
      (block-indentation? (or content-multiline? (and block-tag? content)))
          (lf                 (if block-indentation? "\n")))
     (concat "<" tag-name id classes props
             (if self-closing? "/>"
               (concat ">"
                       (if tag-txt
                           (if block-indentation?
                               (emmet-indent tag-txt)
                             tag-txt))
                       (if content
                           (if block-indentation?
                               (emmet-indent content)
                             content))
                       lf
                       "</" tag-name ">"))))))

Does emment-mode support css colorization?

rainbow-mode and web-mode support css colorization(displays strings representing colors with the color they represent as background.), check the image in those pages.

Does emment-mode support this feature? If yes, how to set in init.el? If no, is there any plan?

How to use tabs for indentation?

Hi, I want to use tabs for indentation, and I notice the variable emmet-indentation, but it is for the length of spaces. How do i config for tabs indentation?

Parts of expression descendant from paren expression are silently dropped.

When expanding an emmet expression, anything descendant of a parenthesized expression is discarded silently.

For example, this:

(div)>p|

expands to:

<div></div>

but should expand to:

<div>
  <p></p>
</div>

Hi where is the elisp code that specifies tabstop behavior?

like ${0} ${1} to specify tab stop, when i checked the emmet-mode source code i get lost.

Doesn't work on emmet-strings embedded in HTML

emmet-mode doesn't seem to allow for expanding emmet templates inside HTML tags.

Example:

  <ul>
    <li>span.info*3<!-- C-j --></li>
  ...

Warps the existing expansion, rather than tracking back to determine that <li> is a tag, and dropping it from consideration.

Basically, it would be nice if it could work like this: http://docs.emmet.io/abbreviations/syntax/#notes-on-abbreviation-formatting

Respect indent-tabs-mode

When expanding an abbreviation with emmet-mode, spaces are inserted, even if indent-tabs-mode is set to t.

I took a quick look at the function emmet-prettify which seems to do the work. I think it would make more sense if you just called indent-region or indent-according-to-mode in the inserted text. That way, the standard major and minor mode indentation settings would work.

Snippets.json hook

Is there a way to put snippets in init.el instead?

Customize the preview faces

The code

emmet-mode/emmet-mode.el

Line 558 in c1bd847

(propertize pretty 'face 'highlight))))

in emmet-update-preview function use the default highlight face. Customize face emmet-preview-output won't change the preview color.

The face of preview info https://github.com/smihica/emmet-mode/blob/c1bd847265799643ef6c98a5a6a91fd516bff159/emmet-mode.el#L498-#L499 is not customizable either.

Please check #19.

Change C-j to M-j

Hi,
I would like to request you to change C-j to M-j for emmet-expand-line.
Also can you please guide me how to do this in init.el. I am new to emacs.

Expanding CSS snippets inside HTML ("style" tags and attributes)

After using ST3 and JetBrains IDEs I got used to proper expanding of css snippets in style tags and attributes. It would be great to have it in emmet-mode, like this:

<div style="pt10|"></div>

C-RET:

<div style="padding-top: 10px;|"></div>

And like this:

<style>
    m30|
</style>

C-RET:

<style>
    margin: 30px;
</style>

Change this package to emmet-mode and put it con marmalade

zencoding seems to be taken on marmalade and others, it might be a good idea to change this package's name to emmet outright. This way you don't have to claim back the name and it reflects what this fork really is.

How can I move the cursor to proper position after expanding emmet snippets?

For example, after I expand "a" to , I want the cursor to be positioned between quotes. How to configure it to get this behavior?

Thanks.