Use tailwindcss with standalone CLI

.gitignore

@@ -1 +1,2 @@
 .qlot
+src/assets/css/dist.css

Makefile

@@ -1,6 +1,9 @@
 install: ## Install dependencies
 	@qlot install
 
+dev: ## Run dev mode
+	@tailwindcss -i ./src/assets/css/global.css -o ./src/assets/css/dist.css --watch
+
 help: ## Show options
 	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | \
 		awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-20s\033[0m %s\n", $$1, $$2}'

src/app.lisp

@@ -24,8 +24,7 @@
   (fbr:assign-routes *app*
                      :system "hp"
                      :directory "src/routes")
-  (jg:static-path *app* "/scripts/" "src/scripts/")
-  (jg:static-path *app* "/styles/" "src/styles/")
+  (jg:static-path *app* "/assets/" "src/assets/")
   (jg:install-middleware *app* mw:*public-files*)
   (jg:install-middleware *app* mw:*normalize-path*))
 

src/assets/css/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/routes/about.lisp

@@ -11,7 +11,7 @@
 
 (pi:define-element page ()
   (pi:h
-    (section :data-scope "pages/about"
+    (section
       (h1 "About")
       (a :href "/" :hx-boost "true"
         "top"))))

src/routes/index.lisp

@@ -7,8 +7,9 @@
 
 (pi:define-element page ()
   (pi:h
-    (section :data-scope "pages/index"
-      (h1 "Hello, World!")
+    (section
+      (h1 :class "text-red-400"
+        "Hello, World!")
       (a :href "/about" :hx-boost "true"
         "About"))))
 

src/styles/global.css

@@ -1,8 +0,0 @@
-@charset "utf-8";
-
-body {
-  font-family: "Noto Sans JP", sans-serif;
-  font-optical-sizing: auto;
-  font-weight: 400;
-  font-style: normal;
-}

src/styles/pages/about.css

@@ -1,8 +0,0 @@
-@scope ([data-scope='pages/about']) {
-  :scope {
-    height: 100svh;
-    background-color: thistle;
-    display: grid;
-    place-content: center;
-  }
-}

src/styles/pages/index.css

@@ -1,8 +0,0 @@
-@scope ([data-scope='pages/index']) {
-  :scope {
-    height: 100svh;
-    background-color: aliceblue;
-    display: grid;
-    place-content: center;
-  }
-}

src/styles/ress.css

@@ -1 +0,0 @@
-html{-webkit-text-size-adjust:100%;box-sizing:border-box;-moz-tab-size:4;tab-size:4;word-break:normal}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{margin:0;padding:0}hr{color:inherit;height:0;overflow:visible}details,main{display:block}summary{display:list-item}small{font-size:80%}[hidden]{display:none}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}a{background-color:transparent}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}pre{font-size:1em}b,strong{font-weight:bolder}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:inherit;text-indent:0}iframe{border-style:none}input{border-radius:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}button,select{text-transform:none}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,input,select,textarea{background-color:transparent;border-style:none}a:focus,button:focus,input:focus,select:focus,textarea:focus{outline-width:0}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;color:inherit;font:inherit}[disabled]{cursor:default}img{border-style:none}progress{vertical-align:baseline}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true]{cursor:default}

src/view/optimizer.lisp

@@ -1,18 +0,0 @@
-(defpackage #:hp/view/optimizer
-  (:use #:cl)
-  (:local-nicknames (#:re #:cl-ppcre))
-  (:export #:collect-style-links))
-(in-package #:hp/view/optimizer)
-
-(defun detect-scopes (html-str)
-  (remove-duplicates (re:all-matches-as-strings "(?<=data-scope=\")[^\"]*(?=\")"
-                                                html-str)
-                     :test #'string=))
-
-(defun scopes->stylesheets (scopes)
-  (mapcar (lambda (scope)
-            (concatenate 'string "/styles/" scope ".css"))
-          scopes))
-
-(defun collect-style-links (html-str)
-  (scopes->stylesheets (detect-scopes html-str)))

src/view/renderer.lisp

@@ -2,51 +2,30 @@
   (:use #:cl)
   (:local-nicknames (#:jg #:jingle))
   (:local-nicknames (#:pi #:piccolo))
-  (:local-nicknames (#:opt #:hp/view/optimizer))
   (:export #:render
            #:partial-render))
 (in-package #:hp/view/renderer)
 
-(pi:define-element stylesheets (hrefs)
-  (pi:h
-    (<>
-      (mapcar (lambda (href)
-                (link :rel "stylesheet" :type "text/css" :href href))
-              hrefs))))
-
 (pi:define-element document (title description)
-  (let* ((children-str (pi:elem-str pi:children))
-         (style-links (opt:collect-style-links children-str)))
-    (pi:h
-      (html :lang "ja"
-        (head
-          (meta :charset "UTF-8")
-          (script :src "/scripts/htmx.js")
-          (script :src "/scripts/htmx-ext/head-support.js")
-          (script :src "/scripts/alpine.js" :defer t)
-          (link :rel "stylesheet" :type "text/css" :href "/styles/ress.css")
-          (link :rel "stylesheet" :type "text/css" :href "/styles/global.css")
-          (link :rel "preconnect" :href "https://fonts.googleapis.com")
-          (link :rel "preconnect" :href "https://fonts.gstatic.com" :crossorigin t)
-          (link 
-            :rel "stylesheet"
-            :href "https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap")
-          (title (format nil "~@[~a - ~]skyizwhite.dev" title))
-          (meta
-            :name "description"
-            :content (or description "pakuの個人サイト"))
-          (stylesheets :hrefs style-links))
-        (body :hx-ext "head-support"
-          (main pi:children))))))
-
-(pi:define-element assets-provider ()
-  (let* ((child-str (pi:elem-str pi:children))
-         (style-links (opt:collect-style-links child-str)))
-    (pi:h
-      (<>
-        (head :hx-head "append"
-          (stylesheets :hrefs style-links))
-        pi:children))))
+  (pi:h
+    (html :lang "ja"
+      (head
+        (meta :charset "UTF-8")
+        (script :src "/assets/js/htmx.js")
+        (script :src "/assets/js/htmx-ext/head-support.js")
+        (script :src "/assets/js/alpine.js" :defer t)
+        (link :rel "stylesheet" :type "text/css" :href "/assets/css/dist.css")
+        (link :rel "preconnect" :href "https://fonts.googleapis.com")
+        (link :rel "preconnect" :href "https://fonts.gstatic.com" :crossorigin t)
+        (link 
+          :rel "stylesheet"
+          :href "https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap")
+        (title (format nil "~@[~a - ~]skyizwhite.dev" title))
+        (meta
+          :name "description"
+          :content (or description "pakuの個人サイト")))
+      (body :hx-ext "head-support"
+        (main pi:children)))))
 
 (defun render (page &key status metadata)
   (jg:with-html-response
@@ -56,4 +35,4 @@
 (defun partial-render (component &key status)
   (jg:with-html-response
     (and status (jg:set-response-status status))
-    (pi:elem-str (assets-provider component))))
+    (pi:elem-str component)))

tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/routes/**/*.lisp",
+    "./src/components/**/*.lisp"
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+