Fork me on GitHub
#girouette
<
2021-04-12
>
West09:04:09

Is there any way to try to make girouette a drop-in replacement for tailwind? What I mean is, I'd like be able to write {:class (css ["inline-block" "underline"])} like {:class '[inline-block underline]}.

3
Vincent Cantin10:04:59

I think it is already the case, except that it currently takes strings and not symbols.

West10:04:25

hmmmm, let me test

Vincent Cantin10:04:51

Take a look at the example project in the repository.

West10:04:06

Alright, following the above example, it looks like I can do {class '["inline-block" "underline"]}.

West10:04:55

So what's the most difficult part about making the tool consume symbols?

West10:04:32

I'm looking through the codebase to find out what step the conversion happens.

Vincent Cantin10:04:16

It's not difficult to change. It's probably in the preprocessor project.

West11:04:57

I found it, working on implementing it.

West13:04:03

Perhaps you can point me in the right direction. I'm trying to get symbols to work, but I don't know what other steps in the chain I should look at. This is my progress so far. I also did a bit of refactoring as I saw fit, but feel free to ignore those changes if you think your way was more readable. https://github.com/wildwestrom/girouette/blob/develop/lib/processor/src/girouette/processor.clj

Vincent Cantin13:04:48

Sorry, the analyzer is not so easy to use.

Vincent Cantin13:04:24

I cannot look at it at the moment because I am still working.

Vincent Cantin14:04:09

I noticed that keywords are supported. Would that work for you?

West14:04:39

They do work, and under certain circumstances I'll use them, but I still want to make this work. I'll keep at it.

Vincent Cantin14:04:24

I think that I did not support symbols by design, thinking that string and keywords would be good enough.

Jacob O'Bryant16:04:00

+1 for symbols. it's a small thing, but imo it adds up

👌 3
West21:04:46

Maybe I have to edit this function?

(def hiccup-tag-grammar "
  hiccup-tag = html-tag (<'#'> id | (<'.'> class-name))*
  html-tag = segment
  id = segment
  class-name = segment
  <segment> = #'[^\\.#]+'
  ")

West07:04:16

Well, I'm a little stumped, I gotta say. It was certainly fun refactoring the processor. I'm gonna sleep on this one and maybe I'll figure out how instaparse works.

Vincent Cantin07:04:12

Hi. The hiccup-tag-grammar is for parsing the keywords inside a hiccup structure. You probably don't need to touch it.

West07:04:07

I see. So right now I'm trying to figure out where exactly the program takes in the strings. It seems like cljs.analyzer.api is the library in gather-css-classes that does the parsing. I found that it does something called passes after taking in the whole file. So each of these passes has some regex and destructuring for keywords and strings, it would seem that all I need to do is add some regex or something to take symbols in. That's where I'm stuck.

Vincent Cantin07:04:36

> Sorry, the analyzer is not so easy to use. Yes ..

West08:04:30

I got it!!

West08:04:12

Now I just gotta get the regex to work right.

West08:04:15

(def receive-hook-fn
  {:keyword #(->> (name %)
                  (re-seq #"\.[^\.#]+")
                  (map (fn [s] (subs s 1))))
   :string  #(->> (str/split % #" ")
                  (remove str/blank?))
   :symbol  #(->> (name %)
                  (re-seq #"[\S]+"))})

West08:04:12

I think this does it though, maybe there's a more elegant way to do that.

Vincent Cantin08:04:33

I may have time to take a look tonight.

Vincent Cantin03:04:56

Merged. Thank you !

West03:04:11

Excellent. I'll be working on some documentation.

West07:04:22

I just realized that this processor will take in strings, keywords, and symbols, however it does so indiscriminately. I guess that's why there was so much red text after the processor did its thing. How did you test the analyzer so you could see the AST of whatever file was put in?

West08:04:04

Nevermind, I got the hang of it. You were certainly right that it's difficult, but it's better than trying to use bean on Java classes and methods.

Vincent Cantin10:04:59

There are plans to rewrite the processor at some point, using rewrite-clj, so no need to spend too much time on it.

West10:04:20

The whole reason I'm working on this is because I want to use it on my website. I really want to get this working properly.

Vincent Cantin12:04:02

The "false positives" you are getting when gathering the symbols should not stop you in your process. I wouldn't worry about it if I was you. In the worse case, some of the symbols will match the grammar used by Girouette and your CSS file will be slighly bigger .. you might not even feel it.

West23:04:33

Awww damn, I think I introduced a bunch of bugs into the program with this change. Not only is it detecting false positives, but it's also detecting false negatives.

West23:04:23

I think I'll just have to convert all my classes to strings after all.

Vincent Cantin02:04:05

Should I revert the commit?

West07:04:28

Yeah, it's probably for the best. Sorry I didn't test more.