oh I know, these are seperate layers of management arent they

the actual team say Fully remote

but HR says "not on your nelly"

and the recruiter doesn't care and just quotes verbatim

That's a bizarre email

I think they try to convey the office culture in this email and make clear that they actually have no sense what they are doing. :thinking_face:

The team are fully remote from all the systems, which are in the cloud. Therefore it is a remote role that you can do from anywhere. But we still expect you to come into the office 😉

If I rewrite the first 2 lines as

(.log js/console "Example i)")
           (js/console.log js/emotion)

main.js:1552 ReferenceError: emotion is not defined

I can invoke that function like

((.-css emotion) (clj->js css))

I'm also importing a bunch of material-ui libraries that seem much easier to use

perhaps its an end of the day thing...

oh I think (:require ["@emotion/css" :as emotion] may be occluding the js/emotion? is that possible?

nah changing the name of the alias doesnt seem to make any difference

sorry ... I'm very rusty with npm/cljs, but isn't require ["@emotion/css" :as emotion] equivalent to import emotion from '@emotion/css' in js? ... so wouldn't import { css, cx } from '@emotion/css' mean that after the require you'd have an emotion/css function available in your namespace?

Well that is what I was hoping

But cannot seem to get working as (emotion/css ...)

Only as ((.-css emotion) ...)

Which seems a bit weird

Couple thoughts here. iv/v don't work because: js/emotion.css is referring to the "global" (which is window in your case most likely) meaning you're actually doing window.emotion.css which probably doesn't exist unless you've injected it there. Not in actuality, but that's the mental model for it you should have. emotion.css doesn't work for the same reason it doesn't in Clojure.

Lemme read the docs on @emotion/css and get back to you on what you need to do to get this working.

https://github.com/emotion-js/emotion/blob/main/packages/css/src/index.js looking at this, and at the emotion quickstart, you're doing the right thing as there's no default export

(emotion/css #js {}) works for me with ClojureScript 844. Are you on the latest version of everything @U793EL04V?

And, have you refreshed the page with your devtools open & cache disabled?

(fwiw, I'm not using shadow so this could be a shadow bug. I know how to get npm+cljs up quicker w/o shadow than with.)

I believe so

(emotion/css #js {}) works for me as well now you mention it ...

perhaps this is my confusion... when to use slash and when to use dot

emotion is a JS Object that looks like it has css as a member function

so... why would (emotion/css work and (emotion.css` not work

If you require then you should use /

Like any namespace.

Well, for the same reason in clj this doesn't work:

(ns foo (require [clojure.core :as c]))

(c.inc 1)

and why does js/emotion not work at all? because I required?

js/ looks in the "global" space, which for browsers is the window object.

It's not local to the namespace (with your requires)

js/ is a magical place, really.

but (js/console.log is dot notation

does the dot notation only work with js/ ?

Yep! js/ is magical

Actually, I lied 😄

so if I didn't do the

["@emotion/css" :as emotion]

No

because it would need two slashs?

emotion/css.prototype returns something, so . is just a weird cljs-ism, but it has to follow a namespace alias.

When you do a require, ClojureScript checks the node_modules folder, and if it's present there it does some magic and makes it available to you in the current namespace. Unless it can statically analyze to know ahead of time to do that, it can't load the namespace.

Actually, the static part of that isn't required.

It's like in Clojure, how you can't use a namespace until you've done a require somewhere. Except way more strict.

but when I do have a namespace alias, I cannot use the dot

The clojurescript dot stuff has to come after a /

and I cannot use js/ neither

js/ is not going to work for you here. That's a shorthand for accessing the global object.

What's the JVM equivalent of the global object :thinking_face: I guess there isn't one.

not in the same way

js/ isn't for "javascript interop" exactly. It isn't aware of your namespace alias scope at all.

because the browser is all about building one page

So it runs in a different scope.

You can technically get at it by doing something horrible like js/my.current.ns.node$module$circa$emotion$css.css but I wouldn't recommend that.

you answered my question so thankyou very much

OK 😄 Sorry I don't know how to more clearly explain the js/ thing.

I had a sort of an idea that all js libraries that were imported were available globally

Ah, that's incorrect. They get locally assigned.

I think cljsjs worked like that.

cljsjs basically did window.emotion = require('@emotion/css') and then ran it through webpack and included that in your javascript build.

I see where the confusion came from now 😄

ah right.

I never understood why cljsjs seemed so magical

never trusted it really

as a result

thanks that is really helpful