tiny-css-prefixer
tiny-css-prefixer copied to clipboard
0no-co
Broken value prefixing
When calling prefixValue("position", "sticky"), it returns with "-webkit-sticky, sticky" as a plain string.
The prefixValue function would return a false positive on parameters like prefixValue("content", "'Look, I am sticky like glue!'"), resulting in strings like 'Look, I am -webkit-sticky, sticky like glue!'.
As a solution, I would like to propose checking for trimmed values and requiring an exact match. An array should be returned as a result, instead of just a plain string, so that library authors can transform it as desired.
Oh I think my mistake is simply that the check for property being "position" is missing there. I'll add that in
Thank you! Also, please return the result in an other format (e.g. an array), as I cannot split strings at , safely without affecting properties other than position.
@kripod What's the interest in splitting here? In fact, it's a tiny function so you could in theory even just copy and modify it since it doesn't handle any other case than position: sticky
The interest comes from the fact that we cannot split the returned value safely, as seen in my example in the issue’s description. As a user of the library, I wouldn’t like to check if property === "position" prior to .split(", ").
@kripod What I mean though is that these are enhancement functions, hence the bitmap signals from prefixProperty. And since prefixValue only has one case, I'd recommend that if you always need to split the value that you implement this prefixing in your own code. 😅 Otherwise all this function would do anyway is return an array of two values or the original value... or an array of the original value, which then may also contain commas. And I find this to be a poor API choice.