Why?

It's coupled to webpack or some other specific build tool

CSS-in-JS is build-tool agnostic

Ah, I misunderstood "css loader". 🙂

Webpack now is almost a de-facto standard.

yeah but I don't want none 😛

I think that CSS-in-JS is more portable. between languages, frameworks, build tools. you shouldn't curse people with webpack if it's not already part of their stack

CLJSS says it supports media queries, but I did not try it. So does Stylefy and Garden.

media queries work in emotion 😉

The challenge in my case is media-queries server-side. The server has no explicit knowledge of the client’s window dimensions etc. There’s a good thread about it here: https://github.com/reactjs/react-future/issues/8 In my case, I don’t even have any dynamism on the server (eg for reponding to the user agent), since it’s just html stored in an s3 bucket.

if you use an actual CSS-in-Js library, instead of inline styles, you can use media queries

we do server rendering of emotion styles and they just get injected as a <style> tag on the page, media queries and all

Ah, ok, I need to look into that

Still magic to me - how will the server know what to inject? How does it know what device it responds to?

(looking at https://emotion.sh/docs/media-queries)

For example, http://cssinjs.org/benefits?v=v9.8.7

1. Module scoped CSS written close to the component that uses it 2. Write styling in a language I'm already familiar with (JS or CLJS vs Sass or Less) 3. Isn't coupled to a specific build tool pipeline.

Thanks :)

Love this

What surprises you? 🙂

That is terrible advice and I argued for its removal. There is no reason whatsoever to suggest that users call components using function invocation

It is true that it will sometimes work but there is never a reason to do it and if you get in the habit of mixing in direct function invocations the code will not only be confusing but will be bug prone

Maybe it's just a poor choice of words? I always thought of the phrase above not as an advice but as caveat emptor, or something like "that fact that it works doesn't mean you should use it".

The advice should be “don’t call components with parenthesis” and doesn’t need a whole confusing paragraph.

Agreed

No, no, no! AAAARGH! 🙂

Wait, I need a better emoji….🤯 I guess emojis cannot have hands so there is no :pulling-hair-out

Do I have to explain why differentiating to wholly different software behaviors by their punctuation is almost guaranteed to prevent noobs fron learning what is going on?

“one way to make sure you have no duplicates is to use an octothorpe before the braces of your literal”

“if the two sides of the equation are separated by a slice of pizza, reverse the direction of the pizza slice when multiplying by a negative”

well what language doesn’t differentiate behavior based on punctuation? () [] and {} are all different in clojure. you need to differentiate, i just think that you need to give clear advice on what to do because reagent’s treatment of vectors is not obvious to the beginner

Why did you say “vector” instead of “square brackets”? The punctuation we deal with on page one, from then on we talk about vectors. In the case of Reagent, we should not even talk about vectors, we should talk about immediate evaluation vs deferred. Form-N is OK I guess as a shorthand, as long as the shorthand is not defined according to punctuation.

I don’t really understand. They are hiccup vectors.

Wait. Is that how folks actually understand form-Ns? “with parentheses” or “with brackets”? Maybe I am too close to the domain and am assuming too much. (My framework has a somewhat similar issue that bites me when I happen not to wrap child elements in the necessary syntax.)

I mean (foo) calls foo now and evaluates to what foo returns. [foo] is just a literal vector holding a reference to the function foo. The Reagent framework will call the contents of the vector sometime later.

yes exactly. if you call the function, then that function just gets evaluated as a function. if you place the symbol in the first slot of the hiccup vector, then reagent will create a react component and will only invoke the render function when needed (i.e. when either the function arguments change or a watched ratom is updated)

so we should be telling people always to return a vector when referencing another component. no [] no component