Integrate daisyui

Cargo.toml

@@ -52,7 +52,7 @@ reload-port = 3001
 browserquery = "defaults"
 
 tailwind-input-file = "crates/site-app/style/main.scss"
-tailwind-config-file = "crates/site-app/style/tailwind.config.js"
+tailwind-config-file = "crates/site-app/style/tailwind/tailwind.config.js"
 
 # set by cargo-leptos
 watch = false

crates/site-app/src/lib.rs

@@ -55,6 +55,9 @@ fn ClickMeButton() -> impl IntoView {
   let on_click = move |_| set_count.update(|count| *count += 1);
 
   view! {
-    <button on:click=on_click>"Click Me: " {count}</button>
+    <button
+      on:click=on_click
+      class="d-btn"
+    >"Click Me: " {count}</button>
   }
 }

crates/site-app/style/tailwind/.gitignore

@@ -0,0 +1 @@
+node_modules/

crates/site-app/style/tailwind/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "tailwind",
+  "version": "1.0.0",
+  "main": "tailwind.config.js",
+  "dependencies": {
+    "daisyui": "^4.6.2",
+    "postcss": "^8.4.35"
+  }
+}

crates/site-app/style/tailwind/tailwind.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  content: {
+    files: ["crates/site-app/src/**/*.rs"],
+  },
+  plugins: [require("daisyui")],
+  daisyui: {
+    themes: false,
+    prefix: "d-",
+  },
+};

crates/site-app/style/tailwind/yarn.lock

@@ -0,0 +1,72 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+camelcase-css@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
+  integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
+
+css-selector-tokenizer@^0.8:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz#88267ef6238e64f2215ea2764b3e2cf498b845dd"
+  integrity sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==
+  dependencies:
+    cssesc "^3.0.0"
+    fastparse "^1.1.2"
+
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
+culori@^3:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/culori/-/culori-3.3.0.tgz#e33530adbd124d53bd6550394397e695eaaed739"
+  integrity sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==
+
+daisyui@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/daisyui/-/daisyui-4.6.2.tgz#f21f9200617a9202cf71ceafc264658ee1dcea6e"
+  integrity sha512-LBIbI76wVVRCQt1Uis2Y2/PRdGfMkNMFsHOjfpav8n7SamwRwPOCiNUClIrnX2jerWW3mLZlzRMCnQfxmGEjow==
+  dependencies:
+    css-selector-tokenizer "^0.8"
+    culori "^3"
+    picocolors "^1"
+    postcss-js "^4"
+
+fastparse@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
+  integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
+
+nanoid@^3.3.7:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
+  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
+
+picocolors@^1, picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
+postcss-js@^4:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
+  integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
+  dependencies:
+    camelcase-css "^2.0.1"
+
+postcss@^8.4.35:
+  version "8.4.35"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.35.tgz#60997775689ce09011edf083a549cea44aabe2f7"
+  integrity sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
+source-map-js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==

flake.nix

@@ -27,6 +27,8 @@
           (craneLib.filterCargoSources path type)
             || (filterGenerator ".*css$" path type)
             || (filterGenerator ".*js$" path type)
+            || (filterGenerator ".*json$" path type)
+            || (filterGenerator ".*lock$" path type)
             || (filterGenerator ".*ttf$" path type)
             || (filterGenerator ".*woff2$" path type)
             || (filterGenerator ".*webp$" path type)
@@ -56,9 +58,13 @@
             cargo-leptos
             pkgs.cargo-generate
             pkgs.binaryen
+            pkgs.clang
+
+            # for styling
             pkgs.dart-sass
             pkgs.tailwindcss
-            pkgs.clang
+            pkgs.yarn
+            pkgs.yarn2nix-moretea.fixup_yarn_lock
           ] ++ pkgs.lib.optionals pkgs.stdenv.isDarwin [
             # Additional darwin specific inputs can be set here
             pkgs.libiconv
@@ -77,13 +83,31 @@
           doCheck = false;
         });
 
+        # an offline yarn registry for the tailwind packages
+        style-js-packages-yarn-registry = pkgs.fetchYarnDeps {
+          yarnLock = ./crates/site-app/style/tailwind/yarn.lock;
+          hash = "sha256-nqOJBcjX+dFl/XkBH+HfRO6Ce+CErm3YkQjG1W+aUPw=";
+          # hash = "";
+        };
+
         # Build the actual crate itself, reusing the dependency
         # artifacts from above.
         site-server = craneLib.buildPackage (common_args // {
-          buildPhaseCargoCommand = "cargo leptos build --release -vvv";
+          buildPhaseCargoCommand = ''
+            # install the yarn packages so `cargo-leptos` can build the styles
+            export HOME=$(mktemp -d)
+            cd crates/site-app/style/tailwind
+            yarn config --offline set yarn-offline-mirror ${style-js-packages-yarn-registry}
+            fixup_yarn_lock yarn.lock
+            yarn install --offline --frozen-lockfile
+            cd ../../../..
+
+            # build the application
+            cargo leptos build --release -vvv
+          '';
           installPhaseCommand = ''
             mkdir -p $out/bin
-            cp target/release/site-server $out/bin/site-server
+            cp target/release/site-server $out/bin/
             cp -r target/site $out/bin/
           '';
           # Prevent cargo test and nextest from duplicating tests