Values that include color-names are rewritten to have hex-codes in them

[fangel]

Hi,

I have a font with a -black variation that I load through a @font-face. E.g.

@font-face {
  font-family: 'alrightsanslp-black';
  src: url('../fonts/alrightsanslp-black.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.font-black {
  font-family: alrightsanslp-black, 'helvetica neue', helvetica, arial, sans-serif;
}

However, because alightsanslp-black matches the regexp in /lib/colors/hex-name-shortener.js, this will get optimised into (white-space added back in, to look like the input-file)

@font-face{
  font-family:alrightsanslp-black;
  src:url(../fonts/alrightsanslp-black.woff) format('woff');
  font-weight:400;
  font-style:normal
}

.font-black{
  font-family:alrightsanslp-#000,'helvetica neue',helvetica,arial,sans-serif
}

That is, the font-family in .font-black is now alrightsanslp-#000 instead of alrightsanslp-black, because the hex-name-shortener replace black with #000.

The pattern is:

var toHexPattern = new RegExp('(' + Object.keys(toHex).join('|') + ')( |,|\\)|$)', 'ig');

In my opinion the pattern should have some sort of guard in front of it, so that -black or similar isn't converted.

Kind regards
Morten

[jakubpawlowicz]

Good catch @fangel! It sneaked into 3.x as it was fine in <= 2.2. Please quote the value for the time being, i.e.: font-family:'alrightsanslp-black';, until it's fixed!

[fangel]

Using quotes is a much better fix than the kludge I snuck into my Grunt build-process - namely doing string-replace post-processing, hahaha.

But thanks for looking at this issue, and thanks for a great library!

[jakubpawlowicz]

I'll fix it soon. Cheers!

[jakubpawlowicz]

@fangel Fixed in 3.0.8!