For example
if I do div#this_is_id.a-class.another-one[data-name=cool]
should result in <div id="this_is_id" class="a-class another-one" data-name="cool"></div>

I used to be able to use tab completion for snippets inside of html tags, however a recent change has impacted that ability. When you have your cursor inside of a tag (<div |>`) and hit tab, nothing happens. Your package is trying to solve a tag when instead it should be passing the keystroke to snippets.

Is there anything I need to do for this to work?

Do I need to create the TAB shortcut myself?

Thanks!
Yonatan

If you press TAB with nothing in front of the cursor, a div is created if option "Solve Tags" is enabled.

Pressing tab in the following scenario will result in solving a tag "type" in the middle of tag input:

<input type="button[[cursor]]" name="name" value="">

Note: [[cursor]] indicates the position of the cursor

I remember using JetBrains products, and there you could do something like this:

input[type=checkbox][placeholder=test]TAB

Which would complete to:

<input type="checkbox" placeholder="test" />

I think it could be really useful here.

div.test expands to
<div class="test"></div>
I'd prefer

<div class="test">
  |
</div>

It'll save me time by removing extra key presses (enter, shift-enter).

After a block selector is solved, place the cursor ready to type attributes for the just solved tag and after you press tab again jump to tag content:

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

Where | indicates the cursor position.

I'm not sure if this is a bug, but it is something I wanted to bring to your attention. If the snippet ends with a dot, I get a empty class. However, if it ends in a hash, it doesn't add an empty id. I think either it should not expand (like if the snippets ends in a dash) or it should not add the class attribute.

Actual
div. -> <div class="">|</div>
div# -> <div>|</div>

Expected
div. -> <div>|</div>
or
div. -> div. |

when i use this for jsx, many tags starts with upper case, like View or Button. but it always get lower case tags when i type Button+tab. T_T

[Enter steps to reproduce below:]

1. ...
2. ...

Atom Version: 1.0.19
System: Microsoft Windows 8.1 Enterprise
Thrown From: selector-to-tag package, v0.4.1

Stack Trace

Uncaught InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('3') is not a valid name.

At C:\Users\e.kool\.atom\packages\selector-to-tag\lib\selector-solver.js:52

Error: Failed to execute 'createElement' on 'Document': The tag name provided ('3') is not a valid name.
    at Error (native)
    at Object.SelectorSolver.solveSelector (C:\Users\e.kool\.atom\packages\selector-to-tag\lib\selector-solver.js:52:27)
    at atom-text-editor.SelectorSolver.handleCommand (C:\Users\e.kool\.atom\packages\selector-to-tag\lib\selector-solver.js:96:34)
    at atom-text-editor.<anonymous> (C:\Users\e.kool\.atom\packages\selector-to-tag\lib\utils.js:38:7)
    at CommandRegistry.module.exports.CommandRegistry.handleCommandEvent (C:\Users\e.kool\AppData\Local\atom\app-1.0.19\resources\app.asar\src\command-registry.js:245:29)
    at C:\Users\e.kool\AppData\Local\atom\app-1.0.19\resources\app.asar\src\command-registry.js:3:61
    at KeymapManager.module.exports.KeymapManager.dispatchCommandEvent (C:\Users\e.kool\AppData\Local\atom\app-1.0.19\resources\app.asar\node_modules\atom-keymap\lib\keymap-manager.js:524:16)
    at KeymapManager.module.exports.KeymapManager.handleKeyboardEvent (C:\Users\e.kool\AppData\Local\atom\app-1.0.19\resources\app.asar\node_modules\atom-keymap\lib\keymap-manager.js:347:22)
    at HTMLDocument.module.exports.WindowEventHandler.onKeydown (C:\Users\e.kool\AppData\Local\atom\app-1.0.19\resources\app.asar\src\window-event-handler.js:184:20)

Commands

     -4:36.4.0 snippets:expand (atom-text-editor.editor.is-focused)
     -4:36.4.0 editor:indent (atom-text-editor.editor.is-focused)
     -4:03.7.0 find-and-replace:show (atom-text-editor.editor.is-focused)
     -3:58.5.0 core:save (atom-text-editor.editor.is-focused)
  2x -3:45.2.0 core:backspace (atom-text-editor.editor.is-focused)
     -3:26 core:save (atom-text-editor.editor.is-focused)
     -2:47.5.0 selector-to-tag:solve-selector (atom-text-editor.editor.is-focused)
     -2:47.5.0 snippets:next-tab-stop (atom-text-editor.editor.is-focused)
     -2:47.5.0 snippets:expand (atom-text-editor.editor.is-focused)
     -2:47.5.0 editor:indent (atom-text-editor.editor.is-focused)
     -2:32.7.0 core:save (atom-text-editor.editor.is-focused)
     -1:26.1.0 core:paste (atom-text-editor.editor.is-focused)
     -1:25.4.0 core:save (atom-text-editor.editor.is-focused)
     -0:59 core:backspace (atom-text-editor.editor.is-focused)
     -0:57.7.0 core:save (atom-text-editor.editor.is-focused)
     -0:04.2.0 selector-to-tag:solve-selector (atom-text-editor.editor.is-focused)

Config

{
  "core": {}
}

Installed Packages

# User
atom-beautify, v0.28.14
autoclose-html, v0.19.0
color-picker, v2.0.13
compare-files, v0.6.2
file-icons, v1.6.11
minimap, v4.13.4
open-recent, v2.3.0
pigments, v0.18.0
selector-to-tag, v0.4.1
set-syntax, v0.3.0

# Dev
No dev packages

The solution found for #14 now prevents valid tag selectors to be solved if anything precedes the selector, like maybe another tag like <span>.

Another solution should be found to not solve selectors if inside an HTML attributes area only.

For example prefix:Element should be allow as the tag <prefix:Element></prefix:Element>

In .vue files, markup is mixed with javascript which lives inside <script> tags.
It would be great if this was auto-disabled within <script> tags

Hi this is not an issue but I am new to github so I didn't know where to put this.

I wanted to suggest the option to make multiple tags at once. For instance

foo.bar*3

would make (3) elements.

Is this something that is being worked on or thought of? I just think that would be awesome. especially for things like the

tags. tags and so forth

I would have contributed myself but I don't know much about json

Thanks for listening,

Is it possible to expand a period to a div tag? So: .my-class -> <div class="my-class">...

Love the concept! Small feature request...I work a lot with handlebars templates (which currently aren't supported). It would be awesome if you did something similar to what emmet does:

1. Use Open Your Keymap menu item to open your custom keymap.cson file.
2. Add the following section into it:

atom-text-editor[data-grammar="YOUR GRAMMAR HERE"]:not([mini])':
    'tab': 'emmet:expand-abbreviation-with-tab'

Replace YOUR GRAMMAR HERE with actual grammar attribute value. The easiest way to get grammar name of currently opened editor is to open DevTools and find corresponding element: it will contain data-grammar attribute with value you need. For example, for HTML syntax it’s a text html basic.

Hey! Thanks for developing this awesome tool. I just had a thought of an efficient way of adding custom selectors.

The syntax could be like this:
div#exampleId.exampleClass1.exampleClass2{layout:column}

Which would translate to this:
div id="exampleId" class="exampleClass1 exampleClass2" layout="column"

(I couldn't write the full html in this comment for some reason)

What do you think?

selector-to-tag not working in Atom 1.24.0 x64 version

foo[name=bar] solves to <foo name="bar"></foo>

It would be great to be able to use the > CSS selector to create nested elements. For example div>div would result in one div nested in another. And the + selector can create siblings.

Also,
I saw a previous issue where you thought saying div[template=test] wouldn't be helpful, but why? Its quicker than writing

Anyway, big fan of this package, so thanks!

Do you know Emmet http://emmet.io/ ?

It does this and much more... You even can write something like nav>ul>li*7>a[#x$]{link $$}.

So ... isn't this kind of redundant?