Navigation link not highligthed when active URL

[maximeborges]

I'm really new to (p)react, and one of the first thing I noticed is that the Link to the active page is not highligthed as it should be seeing the code. I tried to investigate and I found out that the css classes generated for the client is suffixed with the hash of the current file to isolate class. The problem is that not only the 'root' class imported is suffixed, but the '.active' from '.header nav a.active' is also suffixed and that the activeClassName only append 'active' and not 'active__xxxxx' to the html tag.
CSS wanted to be applied:

.header nav a.active {
	background: rgba(255,255,255,0.4);
}

CSS generated for the client:

.header__3QGkI nav a.active__3gItZ {
	background: rgba(255,255,255,0.4);
}

Sample of jsx for the Link:
<Link activeClassName="active" href="/">Home</Link>
Generated HTML on an active page:
<a href="/" class="active">Home</a>

[lukeed]

Hi, thanks! It looks like #33 aims to fix this.

[developit]

Thanks for opening this issue thought @maximeborges - I think the fact that we ship demos using CSS Modules means we should include some explanations about how they work. It can be a little freaky to see the suffixed classNames first time around for sure. Perhaps it's time for a CLI section on the preact website :)

[thangngoc89]

@developit will you accept a PR to reduce those classnames to something like base64:5 in production?

[developit]

We've been pushing for dev/prod parity, so if you do a PR for base64:5 it would have to apply in development as well. That way if it produces a collision or something nasty, you find out before production :)

[thangngoc89]

@developit 🆒 . I just that I like my classnames to be short (more bytes to save)