New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hashtag (#) breaks standard HTML/CSS #11

rugaard opened this Issue Sep 1, 2016 · 4 comments


None yet
4 participants
Copy link

rugaard commented Sep 1, 2016

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 :(


This comment has been minimized.

Copy link

rugaard commented Sep 1, 2016

Okay, so I figured out (by re-reading the 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="" xmlns:xlink="" xmlns:sketch="">
        <linearGradient x1="0%" y1="100%" x2="100%" y2="0%">
            <stop offset="0%"></stop>
            <stop stop-color="#()37EF81" offset="100%"></stop>
    <!-- ......... -->

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.

This was referenced Sep 1, 2016


This comment has been minimized.

Copy link

loganwright commented Oct 24, 2016

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


This comment has been minimized.

Copy link

dennishn commented Dec 22, 2016

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:, 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: (Reserved Characters) (Syntax Components)


This comment has been minimized.

Copy link

tanner0101 commented Jan 16, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment