Fork me on GitHub
#reagent
<
2023-09-18
>
itaied09:09:45

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

p-himik10:09:28

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

Nasiru Ibrahim10:09:05

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

p-himik10:09:17

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

Nasiru Ibrahim11:09:03

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

p-himik11:09:10

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

Nasiru Ibrahim11:09:54

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

p-himik11:09:47

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.

p-himik11:09:14

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.

itaied09:09:22

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

p-himik10:09:55

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