Upgrade to Tailwindcss 3 and use via play cdn #36

zampino · 2021-12-16T17:39:21Z

Upgrade tailwind to version 3 and switch to using the tailwind play cdn.

Also copy the viewer stylesheet in the resource path so it's available with the default deps (the viewers module is only a dev-time dependency).

use tailwind from CDN
copy viewer.css from viewers in classpath when bb dev starts locally

zampino · 2021-12-16T18:11:05Z

deps.edn

+
+        ;; needed for CSS jit pass
+        babashka/process {:mvn/version "0.0.2"}
+        io.github.nextjournal/cas {:git/url "git@github.com:nextjournal/cas"


Damn, this is a private repo :-( It can't be added to main deps.

Don’t understand why we would need that. Think we should just have the css locally, and uploading it should be an independent concern, same as we don’t upload the html files.

mk · 2021-12-16T18:39:45Z

src/nextjournal/clerk.clj

+        (when-not (fs/exists? (fs/parent "build/viewer.js"))
+          (fs/create-dirs (fs/parent "build/viewer.js")))
+        (spit "build/viewer.js" ;; slurp latest build from CAS as configured in n.clerk.view
+              (slurp (-> (io/file "src/nextjournal/clerk/view.clj")


There’s a much easier way to get to this, isn’t there? 😜

this assumes push rights to nextjournal CAS and a node environment capable of running tailwindcss. Also downloads js build from CAS as it's needed for tailwind to purge unused classes.

philippamarkovics · 2021-12-17T10:35:17Z

There seems to be styles missing when running bb dev and looking at the devcards. Am I holding it wrong?

philippamarkovics · 2021-12-17T10:39:16Z

I tested static builds with and without purge and the results look good. @mk I see what you mean with the waiting times now when purge-css? is enabled. I talked with @kommen about this but we both don’t see a way right now to make this more performant.

mk · 2021-12-17T11:03:49Z

Devcards look good here. yarn install to the rescue?

zampino · 2022-01-03T10:43:18Z

Just a side note on

Consolidate into one tailwind config

in principle, now that we use tailwind from CDN, we'll only need a config in the invocation

npx tailwindcss --input stylesheets/app.css --config tailwind-jit.config.js --output public/build/clerk.css -m

within build-static-app!. We can move such a config into resources and interpolate its absolute path in the command. Same could happen for the --input I guess, after @joe-loco refactoring of viewer.css.

use stdin in tailwind cli for reading input from resource. Cleanup unused bb tasks.

if we use the same name the update will never take place since `viwer-css-path` will point at clerk's own resource.

zampino · 2022-01-13T13:34:17Z

This .not-prose stuff is biting us here a bit (but not so crucial), if we use clerk/html to render hiccup which actually contains prose (as build from markdown ->hiccup) the container is assigned a not-prose class and this now happens:

while it was like this before:

zampino · 2022-01-13T14:01:31Z

Some styles are off wrt to main from the tailwind rework but we can maybe fix them in later steps? (left demo on main / right against this branch)

Maybe I can try to fix results to clerk/code which now get no background.

avoid repeating not-prose / fix result inner viewer class

zampino marked this pull request as ready for review December 16, 2021 17:56

zampino marked this pull request as draft December 16, 2021 18:10

zampino commented Dec 16, 2021

View reviewed changes

mk reviewed Dec 16, 2021

View reviewed changes

zampino added 5 commits December 16, 2021 22:01

Add a separate Tailwind JIT config and a new babashka task

94966ce

Use tailwind 3 from CDN

fbb805a

Upgrade tailwind to v3

a058232

Opt in for purging CSS of unused stylesheets within build-static-app!

b233a06

this assumes push rights to nextjournal CAS and a node environment capable of running tailwindcss. Also downloads js build from CAS as it's needed for tailwind to purge unused classes.

Fix stylesheets in the unpurged case

2a76fe5

mk force-pushed the tailwind-jit branch from d700316 to 2a76fe5 Compare December 16, 2021 21:01

mk added 2 commits December 16, 2021 22:14

Simplify

01365cb

Fix css for bundled case by inlining it

46970c7

Merge branch 'main' into tailwind-jit

8637948

mk mentioned this pull request Dec 21, 2021

Local deps? #30

Closed

mk changed the title ~~Optional Tailwind JIT~~ Upgrade to Tailwindcss 3 via play cdn & enable optional css purging Dec 21, 2021

mk mentioned this pull request Dec 21, 2021

Support dark mode and/or custom user styling? #29

Closed

philippamarkovics and others added 3 commits January 7, 2022 12:08

Use tailwind 3.0.9 and add typography plugin

07d2b31

Upgrade viewers & css setup

02bfa72

Fix missing fonts in notebooks

bdb09ea

mk force-pushed the tailwind-jit branch from c58e857 to bdb09ea Compare January 7, 2022 14:43

Switch back to using tailwind cdn & simplify

3185209

mk force-pushed the tailwind-jit branch from b1c8213 to 3185209 Compare January 7, 2022 15:56

mk and others added 4 commits January 7, 2022 17:19

Merge branch 'main' into tailwind-jit and fix static build

cc57083

Use clojure.java.shell for tailwind command

40b70f8

Fix indent

ff926ec

Fix table viewer and code viewer insets

0d9f9d6

philippamarkovics and others added 2 commits January 10, 2022 14:57

Bump viewers

90bba17

Copy viewer css and tw config from class path into resources

914c310

use stdin in tailwind cli for reading input from resource. Cleanup unused bb tasks.

zampino changed the title ~~Upgrade to Tailwindcss 3 via play cdn & enable optional css purging~~ Upgrade to Tailwindcss 3 and use via play cdn Jan 13, 2022

zampino added 3 commits January 13, 2022 11:55

Merge remote-tracking branch 'origin/main' into tailwind-jit

84ae426

Fix resource path to viewer stylesheet

eddcfe3

if we use the same name the update will never take place since `viwer-css-path` will point at clerk's own resource.

Use viewers with backticks fix for code element

82e4240

zampino force-pushed the tailwind-jit branch 2 times, most recently from 5104436 to 659b3e6 Compare January 13, 2022 12:59

zampino added 3 commits January 13, 2022 14:13

Remove purge-css? option

72f7272

cleanup

efc9d10

Bump js

95fcf65

zampino force-pushed the tailwind-jit branch from 659b3e6 to 95fcf65 Compare January 13, 2022 13:14

Fix class assignments

7680161

avoid repeating not-prose / fix result inner viewer class

zampino marked this pull request as ready for review January 13, 2022 15:04

Merge branch 'main' into tailwind-jit

af2f399

mk merged commit 68fda01 into main Jan 13, 2022

mk deleted the tailwind-jit branch January 13, 2022 20:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade to Tailwindcss 3 and use via play cdn #36

Upgrade to Tailwindcss 3 and use via play cdn #36

zampino commented Dec 16, 2021 •

edited by mk

zampino Dec 16, 2021 •

edited

mk Dec 16, 2021

mk Dec 16, 2021

philippamarkovics commented Dec 17, 2021

philippamarkovics commented Dec 17, 2021

mk commented Dec 17, 2021

zampino commented Jan 3, 2022

zampino commented Jan 13, 2022

zampino commented Jan 13, 2022 •

edited

Upgrade to Tailwindcss 3 and use via play cdn #36

Upgrade to Tailwindcss 3 and use via play cdn #36

Conversation

zampino commented Dec 16, 2021 • edited by mk

zampino Dec 16, 2021 • edited

Choose a reason for hiding this comment

mk Dec 16, 2021

Choose a reason for hiding this comment

mk Dec 16, 2021

Choose a reason for hiding this comment

philippamarkovics commented Dec 17, 2021

philippamarkovics commented Dec 17, 2021

mk commented Dec 17, 2021

zampino commented Jan 3, 2022

zampino commented Jan 13, 2022

zampino commented Jan 13, 2022 • edited

zampino commented Dec 16, 2021 •

edited by mk

zampino Dec 16, 2021 •

edited

zampino commented Jan 13, 2022 •

edited