reagent

itaied 2023-09-18T09:59:45.077599Z

Hi all, does reagent filters out invalid CSS values or keys? For example, I have given a component the following CSS attribute but it didn't render to the screen:

:app-test :value-2

itaied 2023-09-19T09:43:22.388879Z

thanks, ill dig into react to understand it, because it's not the browser (using hoplon i could write random attributes)

p-himik 2023-09-19T10:42:55.002299Z

Just in case - attributes are different from CSS properties. I don't know for sure, but it might very well be that you can write random attribute but not random CSS properties (I just tried dynamically setting elem.style.flex1 = 'x' via plain JS, didn't work).

➕ 2
p-himik 2023-09-18T10:02:28.132779Z

It's either React doing that or your browser ignoring them.

2023-09-18T10:35:05.305439Z

I taught its a map like :style {:key "value"

p-himik 2023-09-18T10:36:17.991429Z

Yeah, I was assuming the OP meant something like [:div {:style {:app-test :value-2}}].

2023-09-18T11:26:03.936569Z

I think :value-2 is either a function that returns a string or a string instead of a key

p-himik 2023-09-18T11:39:10.623779Z

:value-2 is a regular keyword, which Reagent will turn into a string. I use things like {:background-color :red} all the time.

2023-09-18T11:39:54.439969Z

Oh. OK. Maybe he's not using a reagent recognised keyword then

p-himik 2023-09-18T11:42:47.704989Z

As I said at the start - Reagent does not check the keyword. It just converts it and passes forward. So it's either React removing the value altogether, or the browser not displaying it because it's invalid.

2023-09-18T11:44:06.916509Z

Valid

p-himik 2023-09-18T11:48:14.965389Z

Also, just as an advice: Reagent's source code is less than 2k loc - anyone can read it all in an evening. Not saying, of course, that an evening would be nearly enough to understand it all, especially given its long history and compatibility with different versions of React, but even just reading it will give a much better understanding of many things.