Release 0.4.2

Author: dannote

.gitignore

@@ -26,6 +26,4 @@ volt-*.tar
 /node_modules/
 /npm.lock
 
-# Generated Tailwind runtime (regenerate with: mix volt.vendor.tailwind)
-/priv/tailwind.js
 

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.4.2
+
+- Fix fresh installs for Tailwind support by removing the generated `priv/tailwind.js` workflow
+- Assemble the Tailwind runtime on first use from the `tailwindcss` package in the `npm_ex` cache
+- Bump QuickBEAM to 0.8.0 and npm_ex to 0.5.1
+
 ## 0.4.1
 
 ### TypeScript Assets
@@ -12,13 +18,10 @@ inline Elixir heredocs to separate TypeScript files in `priv/ts/`.
 
 - `mix volt.js.check` — run oxfmt format check and oxlint via npx
 - `mix volt.js.fmt` — format TypeScript assets via npx
-- `mix volt.npm` — install JS tooling deps (tailwindcss, etc.) via npm_ex
-- `mix volt.vendor.tailwind` — regenerate `priv/tailwind.js` from installed tailwindcss
 
 ### Tailwind Vendoring
 
-`priv/tailwind.js` is now generated from the `tailwindcss` npm package by
-`mix volt.vendor.tailwind` instead of being maintained by hand. The runtime
+The Tailwind runtime is now assembled from the `tailwindcss` npm package at runtime using the npm_ex cache. The runtime
 shows a clear error if the file is missing.
 
 ### Build Improvements

README.md

@@ -68,8 +68,6 @@ CLI flags override config values for one-off use.
 Install maintainer JS tooling when needed:
 
 ```bash
-mix volt.npm
-mix volt.vendor.tailwind
 mix volt.js.check
 mix volt.js.fmt
 ```
@@ -242,7 +240,7 @@ Hooks: `resolve/2`, `load/1`, `transform/2`, `render_chunk/2` — all optional.
 
 ## Tailwind CSS
 
-Volt compiles Tailwind CSS natively at runtime. The vendored runtime at `priv/tailwind.js` is generated with `mix volt.vendor.tailwind` and should not be edited by hand.
+Volt compiles Tailwind CSS natively at runtime and installs the Tailwind compiler into the npm_ex cache on first use.
 
 [Oxide](https://hex.pm/packages/oxide_ex) scans your source files in parallel for candidate class names, then the Tailwind v4 compiler (running in [QuickBEAM](https://hex.pm/packages/quickbeam)) generates the CSS. [LightningCSS](https://hex.pm/packages/vize) handles minification.
 

lib/mix/tasks/volt.vendor.tailwind.ex

@@ -20,7 +20,7 @@ defmodule Volt.Tailwind do
 
   use GenServer
 
-  defp bundle_path, do: Application.app_dir(:volt, "priv/tailwind.js")
+  @tailwind_version "^4.2.2"
 
   def start_link(opts \\ []) do
     GenServer.start_link(__MODULE__, opts, name: __MODULE__)
@@ -69,7 +69,7 @@ defmodule Volt.Tailwind do
   defp ensure_runtime(%{runtime: nil} = state) do
     {:ok, rt} = QuickBEAM.start()
     {:ok, _} = QuickBEAM.eval(rt, "globalThis.process = {env: {NODE_ENV: 'production'}};")
-    {:ok, _} = QuickBEAM.eval(rt, read_bundle!())
+    {:ok, _} = QuickBEAM.eval(rt, runtime_source())
 
     scanner =
       if state.sources != [] do
@@ -149,6 +149,7 @@ defmodule Volt.Tailwind do
 
   @impl true
   def terminate(_reason, %{runtime: nil}), do: :ok
+
   def terminate(_reason, %{runtime: rt}) do
     QuickBEAM.stop(rt)
     :ok
@@ -192,25 +193,74 @@ defmodule Volt.Tailwind do
     }
   end
 
-  defp read_bundle! do
-    path = bundle_path()
-
-    case File.read(path) do
-      {:ok, contents} ->
-        contents
-
-      {:error, :enoent} ->
-        raise """
-        Missing generated Tailwind runtime at #{path}.
+  defp runtime_source do
+    NPM.install(%{"tailwindcss" => @tailwind_version}, __skip_project_check__: true)
 
-        Regenerate it with:
+    nm_dir = NPM.node_modules_dir!()
+    tw_dir = Path.join(nm_dir, "tailwindcss")
+    source = File.read!(Path.join([tw_dir, "dist", "lib.js"]))
+    theme = File.read!(Path.join(tw_dir, "theme.css"))
+    preflight = File.read!(Path.join(tw_dir, "preflight.css"))
+    utilities = File.read!(Path.join(tw_dir, "utilities.css"))
 
-            mix volt.npm
-            mix volt.vendor.tailwind
-        """
+    wrap_runtime(source, theme, preflight, utilities)
+  end
 
-      {:error, reason} ->
-        raise File.Error, reason: reason, action: "read file", path: path
-    end
+  defp wrap_runtime(source, theme, preflight, utilities) do
+    """
+    var TW = (() => {
+      var module = { exports: {} };
+      var exports = module.exports;
+      #{source}
+      return {
+        compileCss: async function(inputCss, candidates) {
+          var css = inputCss == null ? '@import "tailwindcss";' : inputCss;
+          var compiler = await module.exports.compile(css, {
+            from: 'app.css',
+            loadStylesheet: async function(id) {
+              if (id === 'tailwindcss') {
+                return {
+                  base: '.',
+                  content: '@import "tailwindcss/theme.css" layer(theme);\\n@import "tailwindcss/preflight.css" layer(base);\\n@import "tailwindcss/utilities.css" layer(utilities);'
+                };
+              }
+
+              if (id === 'tailwindcss/theme.css') {
+                return { base: '.', content: module.exports.Features ? requireAsset('theme') : '' };
+              }
+
+              if (id === 'tailwindcss/preflight.css') {
+                return { base: '.', content: requireAsset('preflight') };
+              }
+
+              if (id === 'tailwindcss/utilities.css') {
+                return { base: '.', content: requireAsset('utilities') };
+              }
+
+              throw new Error('Unsupported stylesheet: ' + id);
+            }
+          });
+
+          return compiler.build(candidates || []);
+        }
+      };
+
+      function requireAsset(kind) {
+        if (kind === 'theme') {
+          return #{Jason.encode!(theme)};
+        }
+
+        if (kind === 'preflight') {
+          return #{Jason.encode!(preflight)};
+        }
+
+        if (kind === 'utilities') {
+          return #{Jason.encode!(utilities)};
+        }
+
+        return '';
+      }
+    })();
+    """
   end
 end

lib/volt/tailwind.ex

@@ -1,7 +1,7 @@
 defmodule Volt.MixProject do
   use Mix.Project
 
-  @version "0.4.1"
+  @version "0.4.2"
   @source_url "https://github.com/elixir-volt/volt"
 
   def project do
@@ -10,7 +10,6 @@ defmodule Volt.MixProject do
       version: @version,
       elixir: "~> 1.17",
       start_permanent: Mix.env() == :prod,
-
       deps: deps(),
       aliases: aliases(),
       dialyzer: [plt_add_apps: [:mix]],
@@ -61,7 +60,7 @@ defmodule Volt.MixProject do
         "ex_dna",
         "dialyzer"
       ],
-      setup: ["deps.get", "volt.vendor.tailwind"],
+      setup: ["deps.get"],
       ci: ["lint", "cmd MIX_ENV=test mix test"]
     ]
   end
@@ -70,7 +69,7 @@ defmodule Volt.MixProject do
     [
       licenses: ["MIT"],
       links: %{"GitHub" => @source_url},
-      files: ~w[lib priv/tailwind.js mix.exs README.md LICENSE]
+      files: ~w[lib mix.exs README.md LICENSE]
     ]
   end