Add support for square brackets

[lloeki]

With Slim, using CSS-style square brackets is useful to disambiguate between content and empty attributes.

This is extremely useful in some situations such as using web components (e.g with Polymer).

Example in Slim ported from the Polymer tutorial:

body[unresolved]
  core-header-panel

  core-toolbar
    paper-tabs[id="tabs" selected="all" self-end]
      paper-tab[name="all"] All
      paper-tab[name="favorites"] Favorites

  .container[layout vertical center]

This code in Ace currently generates e.g acontainer[layout tag and center] as content.

Current, ugly workaround is to use empty equals to force Ace to recognise the attributes as such instead of outputting layout vertical center as content:

body unresolved=""
  core-header-panel

  core-toolbar
    paper-tabs id="tabs" selected="all" self-end=""
      paper-tab name="all" All
      paper-tab name="favorites" Favorites

  .container layout="" vertical="" center=""

[yosssi]

I see. Please give me time to think about this.

[matejkramny]

@lloeki amber (https://github.com/eknkc/amber) does square brackets, maybe that would suit you more?

[jf]

@matejkramny amber looks interesting. But the square brackets seem mandatory: am I right? Not putting it down, btw. But I'd like to know.

@lloeki I've encountered the same problem u have with empty attributes. You dont actually need to specify the "" at the end. So the .container, for instance, can just simply be

.container layout= vertical= center=

Would be nice to have them be recognized as attributes still without the equal (tough request, yes I know!), but definitely still better than what you're doing now!

[matejkramny]

@jf yes correct, square brackets are necessary for attributes.

Looking at it now, it may not be optimal since square brackets are valid xml characters. If you need an attribute that needs square brackets, it sort of gets confusing rather quickly. eg: a[href="yeah" [ng-click="doYeah()"]]