Fork me on GitHub
#reagent
<
2018-06-26
>
zalky14:06:38

Hi all: does anyone have an approach that works and they like for dealing with CSS and semantic-ui-react? I've tried a couple of approaches that integrate and compile the semantic-ui less source, but the less4j compiler (via less4clj, via boot-less) produces incorrect css and does not look like it will be fixed any time soon. Is there some other approach that folks have tried? Not really feeling optimistic about just overriding vanilla css.

crinklywrappr15:06:58

I think I will be good-to-go if I knew how to place the datepicker component on a page.

crinklywrappr15:06:05

I've tried [:> date-picker], [date-picker], and [:> js/DatePicker]

justinlee15:06:34

@zalky i use sass instead of less, but i basically just use unix style tools to watch the css and put it in the right place. i’m using shadow, so that’s easier, because i just launch everything using npm. i actually prefer this because you don’t have to keep cramming stuff into a build tool like lein. i personally am super happy to use standard tools rather than a big opaque monolith

pesterhazy15:06:36

@doubleagent I'd start by figuring out where DatePicker is available on the page. In the chrome devtools, see if window.DatePicker gives you anything

pesterhazy15:06:29

if the readme is correct, [:> js/DatePicker] should work. What error do you see?

justinlee15:06:34

it’s a default import. i wonder if that’s an issue

justinlee15:06:03

in shadow, this works:

(defn app []
  [:div
   [:> DatePicker {:selected (moment)}]])

justinlee15:06:28

but the import in shadow is importing the default symbol

zalky15:06:56

Yeah, i had to do something like (.-default js/Component) to get it work in the past for default components

zalky15:06:29

@doubleagent, try [:> (.-default js/DatePicker)]

pesterhazy16:06:46

try console.log(window.DatePicker)

pesterhazy16:06:56

see what it returns. You'll see if it has a default export

crinklywrappr16:06:59

Thanks @zalky, that worked!

pesterhazy16:06:01

some libs do, others don't

pesterhazy16:06:16

would be a good PR for the cljsjs readme

crinklywrappr16:06:16

@pesterhazy a substantial number of those libs need a basic usage example. 😄

justinlee16:06:59

you need to include the css

justinlee16:06:19

datapicker has its own styling

crinklywrappr16:06:19

i'm not sure how to do that in my project.

justinlee16:06:42

just script tag include it. no need to be complicated

crinklywrappr16:06:42

with semantic ui i just linked to the cdn

crinklywrappr16:06:09

but the css on github looks like sass

crinklywrappr16:06:56

dude, that's awesome

justinlee16:06:39

i don’t understand the economics of these CDNs but they sure are nice

crinklywrappr16:06:22

@lee.justin.m you need a btc tipjar or something

zalky16:06:44

@lee.justin.m, thanks for the response! I use boot so I do have some flexibility in how I pull in stuff. I'd also prefer sass, and looked around to find if there was a sass version, found this (https://github.com/doabit/semantic-ui-sass). Are you using something similar?

justinlee16:06:25

@doubleagent no tips needed! i’ve relied on a ton of patient help from people here

justinlee16:06:14

@zalky i’m not using semantic myself, but i think the issue of how to deal with compiled css is the same

justinlee16:06:08

in a webpack tool chain there was a more obvious way of how to do it. lein, in my opinion, does too many things and does them poorly, and i’ve realized that there’s no benefit to cramming everything into there. much nicer to just write some simple build scripts and use the standard tools. i just have a node-sass -w src/sass/site.scss -o public/css in my start scripts

justinlee16:06:05

(well, okay there are some benefits, but not enough to make it worth it)