Generate class lists about girouette HOT 3 CLOSED

What I would like to have is a way to create a css file based on possible combinations.

Hi, can you give an example of what you need?

from girouette.

Sure. So the app I am building is goldly. https://github.com/pink-gorilla/goldly
Goldly is liek a universal visualization platform. There is a clojurescript repl in the browser at runtime where users
can do evaluations. Additionally users can do clojure evaluations and sned the results to the browser for visualization.
Goldly allows users to add custom ui render components that get written with hiccup. So in goldly context it is not
possible at all to know which tailwind tags need to be in the css.

So it would be amazing, if I could generate a tailwind css file, similar to how tailwind + purge css work.
So I would liek to give it a config that it should generate, and then it will just generate it.

so say (girouette/generate {:colors ["blue" 50 100 500 900] :color-tags ["bg" "hover" "text-"]}) Of course the config
would be much bigger than that. But if I take this example, then you would generate
text-blue-50
text-blue-100
text-blue-500
text-blue-900
bg-blue-50
bg-blue-100
bg-blue-500
bg-blue-900
hover:bg-blue-50
hover:bg-blue-100
hover:bg-blue-500
hover:bg--blue-900
hover:text-blue-50
hover:text-blue-100
hover:text-blue-500
hover:text-blue-900
hover:bg-blue-50

Unfortunately I dont know enough about tailwind to understand which combinations it woul dneed to generate.
But I don think it is too complicated.

I forsee a two tier approach really.
First, ship a reasonable short tailwind-css that can be used as a default.
Second, give a clojure function that can generate a custom config.
Third, do something like you do in finding which classes are actually needed, and then generate just that css.

For the third option, I would need to create a custom class function that would enter all elements that are rendered
that way into the config of tags that are needed.

The reason why I cannot rely on the girouette approahc as it stands is that there is clojure and clojurescript code,
and notebooks that all could use tailwind tags. So it is not possible to find out via a simple scan as you do it.

I hae hacked something together for now here: https://github.com/pink-gorilla/webly/blob/master/frontend/src/frontend/tailwind/generator.clj

Even with just my 30 or so github repos, I cannot find all the tailwind tags that I have been using so far.

The rason why I go through this effort is, that I do not want to use a javascript tool when I can stay only on
clojure. Having to generate tailwind css files via node puts the requirement that my users have node installed, which
is not a requirement.

I have to stop using the big 1-3 megabyte tailwind css files, as they are too big for mobile phone to load the
page quickly. I fighre that this huge css files are the biggest performance killer.

Many thanks for your great work! You spent a lot of time on doing the parsers so you can parse the tags
that are used.

What I am trying to o is the sort of other approahc. Generate the tags. But I think it is not too difficult.
Becaus ewhen you wrote the (I think instaparse rules), you know which combinatory combionaitons tailwind can
do.

So all I would have to give some parameters which liit the scope of all possible combinations.

MANY THANKS!!

from girouette.

Girouette is a CLJC library, which means that it can run on the JVM and in browsers. In theory, you should be able to use it inside of your webapp to dynamically generate the CSS as you go, and feed the browser with the dynamic CSS stylesheets. Maybe that's what you need?

I will make a small demo about it in a couple of days. The related issue is #26

from girouette.