Kozea/tinycss2

Changing hex value when it starts with letter

vanjavk opened this issue · 4 comments

vanjavk commented

If you change hex value where first character is a number it will add "\3" and break parsing for most parsers.
image
I just used cssutils instead and had no issues anymore

liZe commented

Hello!

I don’t understand how you got the "\3" added, could you explain what you exactly did, please?

vanjavk commented

Hello!

I don’t understand how you got the "\3" added, could you explain what you exactly did, please?

Here is reproducible code that shows it:
image
image
using
tinycss2 1.1.0
https://gist.github.com/vanjavk/47c70e64e1481c461a06c52096368490

grewn0uille commented

Hi!

When you change values, you have to also change the other attributes.
In this case, you have to set is_identifier to False for the Node containing 000000 and True to the other one.

#000000 and #FFFFFF are parsed into HashToken. These token have a value and a is_identifier attribute.
is_identifier is set to True if the value is a valid identifier, which is the case of FFFFFF but not of 000000.
When you invert the value between the two HashToken, the value of is_identifier is then wrong.
After, when serialize is called, it looks if the token is an identifier to know how to serialize it. As the is_identifier is wrong, it doesn’t use the right serialization method and it serializes #000000 as it is a valid identifier. That’s why there is a \3 added.

  • 👍1
vanjavk commented

Hi!

When you change values, you have to also change the other attributes.
In this case, you have to set is_identifier to False for the Node containing 000000 and True to the other one.

#000000 and #FFFFFF are parsed into HashToken. These token have a value and a is_identifier attribute.
is_identifier is set to True if the value is a valid identifier, which is the case of FFFFFF but not of 000000.
When you invert the value between the two HashToken, the value of is_identifier is then wrong.
After, when serialize is called, it looks if the token is an identifier to know how to serialize it. As the is_identifier is wrong, it doesn’t use the right serialization method and it serializes #000000 as it is a valid identifier. That’s why there is a \3 added.

Well thank you for an explanation, I guess I now know how to make it work, however in the meantime I completely switched to cssutils.