Hashtag (#) breaks standard HTML/CSS

[rugaard]

I'm not sure using the # as a token is wise. Trying it out I hit quite a few cases where it completely standard HTML/CSS was interpreted as Leaf methods.

---

Two quick examples

A common way to "pop" modals is using an <a> where the href is just a #.

<a href="#" class="btn btn-primary" data-toggle="modal">

(I know you could just use <button> instead of <a> but not everybody do that)

You also won't be able to use inline hex-colors, which is also something a lot of people are doing (at least the lazy ones).

<h1 style="color: #ff0000">This heading is red</h1>

---

There are probably a lot more cases, where the # would make Leaf conflict with normal standard HTML/CSS. So maybe it would be better/wiser to use a different token?

Or maybe change it to a double ##? I don't know. All I know is a single # unfortunately causes quite the trouble :(

[rugaard]

Okay, so I figured out (by re-reading the README.md) that you can use#(). But imho this is not a very good way. People are starting to use SVG images more and more and in those you often end up using HEX colors. Which would result in this:

<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <defs>
        <linearGradient x1="0%" y1="100%" x2="100%" y2="0%">
            <stop offset="0%"></stop>
            <stop stop-color="#()37EF81" offset="100%"></stop>
        </linearGradient>
    </defs>
    <!-- ......... -->
</svg>

Also - returning to my "popping a modal" example - people who are using Bootstrap (which is quite a lot) are used to reference modals by their ID's.

<button type="button" data-toggle="modal" data-modal="#()modal"></button>
<div id="modal">This is a modal</div>

Having worked a lot with HTML/CSS and knowing others who do, turning every # into #() is something that will annoy them very very much.

Personal opinion is still that the token should either change to ## or a completely different token which doesn't conflict with ordinary HTML/CSS.

[loganwright]

Closing after a lot of discussion around this just to start some cleanup. Let's revisit if we need to 👍

[dennishn]

I am not sure if this is the correct issue to resurrect this topic in, but here goes.

Unfortunately it is currently not possible to reference fragment identifiers in leaf templates. Example:

<a href=“#fooBarHeading”>Scroll the fooBarHeading into view</a>
…further down the doc…
<h1 id=“fooBarHeading”>fooBarHeading</h1>

As stated here: https://tools.ietf.org/html/rfc3986#section-2.2, the # (amongst others) is a reserved URI character and is used in URLs to reference fragments of a page.

A solution could be to make the token symbol customizable - but it would require configuration from developers if the default is kept as #.

Resources:
https://en.wikipedia.org/wiki/Fragment_identifier
https://tools.ietf.org/html/rfc3986#section-2.2 (Reserved Characters)
https://tools.ietf.org/html/rfc3986#section-3 (Syntax Components)

[tanner0101]

@dennishn you can use #() to output a # in Leaf or use #raw() { } inside of which you can freely use #.