From 061a0ff6bbf6cdb44cda956ea99c5353f458096e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tao=20Bojl=C3=A9n?= <git@btao.org>
Date: Sat, 20 Jun 2026 01:38:39 +0100
Subject: [PATCH] feat(styles): docs-build rendering +
 tw-animate-css/no-scrollbar deps + dogfood test

- gen.registry emits priv/styles/<style>.css aggregators; app.css imports nova so
  the dev/docs build renders the (markerless-in-repo) components.
- Add tw-animate-css import + no-scrollbar @utility to theme.css (consumers) and
  app.css (docs); sync missing sidebar tokens into app.css. Tailwind build now clean.
- Fix accordion CSS: drop un-@apply-able group/accordion-trigger marker.
- Dogfood test for colocated <style> injection + per-component style coverage.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 assets/css/app.css                        | 42 +++++++++++++++++++++
 assets/package-lock.json                  | 13 +++++++
 assets/package.json                       |  3 ++
 lib/mix/tasks/shadix.gen.registry.ex      | 21 +++++++++++
 priv/registry/accordion.json              |  4 +-
 priv/styles/nova.css                      | 45 +++++++++++++++++++++++
 priv/styles/nova/accordion.css            |  2 +-
 priv/styles/vega.css                      | 45 +++++++++++++++++++++++
 priv/styles/vega/accordion.css            |  2 +-
 priv/templates/theme.css                  | 12 ++++++
 test/shadix/colocated_generation_test.exs | 37 +++++++++++++++++++
 11 files changed, 222 insertions(+), 4 deletions(-)
 create mode 100644 priv/styles/nova.css
 create mode 100644 priv/styles/vega.css
 create mode 100644 test/shadix/colocated_generation_test.exs

diff --git a/assets/css/app.css b/assets/css/app.css
index 767401b..1e743eb 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -1,7 +1,25 @@
 @import "tailwindcss" source(none);
+/* Animation utilities (animate-in/out, fade, slide, zoom) used by ported component
+   skins — same dependency shadcn relies on. */
+@import "../node_modules/tw-animate-css/dist/tw-animate.css";
 @source "../../lib/shadix/components";
 @source "../../website";
 
+/* Custom utility shadcn defines in its base layer; used by ported sidebar/command skins. */
+@utility no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* shadix components are markerless in-repo (colocated CSS only materialises in a
+   consumer's app via `mix shadix.add`), so import the default-style skin here to
+   render them in the dev/docs build. Generated by `mix shadix.gen.registry`. */
+@import "../../priv/styles/nova.css";
+
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
@@ -24,6 +42,14 @@
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
@@ -51,6 +77,14 @@
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
 }
 
 .dark {
@@ -73,6 +107,14 @@
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.556 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
 }
 
 /* Flexoki syntax highlighting — https://stephango.com/flexoki
diff --git a/assets/package-lock.json b/assets/package-lock.json
index a1acedd..292fa9a 100644
--- a/assets/package-lock.json
+++ b/assets/package-lock.json
@@ -7,6 +7,9 @@
       "name": "shadix-assets",
       "dependencies": {
         "@floating-ui/dom": "^1.6.13"
+      },
+      "devDependencies": {
+        "tw-animate-css": "^1.4.0"
       }
     },
     "node_modules/@floating-ui/core": {
@@ -33,6 +36,16 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
       "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
       "license": "MIT"
+    },
+    "node_modules/tw-animate-css": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.4.0.tgz",
+      "integrity": "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Wombosvideo"
+      }
     }
   }
 }
diff --git a/assets/package.json b/assets/package.json
index 3eb0341..bd4b86b 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -3,5 +3,8 @@
   "private": true,
   "dependencies": {
     "@floating-ui/dom": "^1.6.13"
+  },
+  "devDependencies": {
+    "tw-animate-css": "^1.4.0"
   }
 }
diff --git a/lib/mix/tasks/shadix.gen.registry.ex b/lib/mix/tasks/shadix.gen.registry.ex
index 0c6bb25..23fb545 100644
--- a/lib/mix/tasks/shadix.gen.registry.ex
+++ b/lib/mix/tasks/shadix.gen.registry.ex
@@ -59,9 +59,30 @@ defmodule Mix.Tasks.Shadix.Gen.Registry do
       Mix.shell().info("Generated #{out_path}")
     end)
 
+    write_style_aggregators()
+
     Mix.shell().info("Done. #{length(sources)} manifest(s) written to #{out_dir}/")
   end
 
+  # Writes priv/styles/<style>.css aggregators that @import every component CSS for
+  # that style. Consumers use baked colocated CSS and never need these; they exist
+  # so shadix's own dev/docs Tailwind build can render the (markerless-in-repo)
+  # components by importing one style globally.
+  defp write_style_aggregators do
+    for style <- discovered_styles() do
+      files = Path.wildcard("priv/styles/#{style}/*.css") |> Enum.sort()
+
+      body =
+        files
+        |> Enum.map(fn path -> ~s(@import "./#{style}/#{Path.basename(path)}";) end)
+        |> Enum.join("\n")
+
+      out = "priv/styles/#{style}.css"
+      File.write!(out, "/* Generated by mix shadix.gen.registry. Do not edit. */\n#{body}\n")
+      Mix.shell().info("Generated #{out}")
+    end
+  end
+
   # The marker a converted component carries (first node of its template); its
   # presence switches the component into colocated-CSS mode.
   @marker "<%!-- shadix:colocated-css --%>"
diff --git a/priv/registry/accordion.json b/priv/registry/accordion.json
index ccc11e3..0ce527b 100644
--- a/priv/registry/accordion.json
+++ b/priv/registry/accordion.json
@@ -13,7 +13,7 @@
     "colocated_css"
   ],
   "styles": {
-    "nova": "@layer components {\n  [data-slot=\"accordion\"] {\n    @apply flex w-full flex-col;\n  }\n\n  [data-slot=\"accordion-item\"] {\n    @apply not-last:border-b;\n  }\n\n  [data-slot=\"accordion-trigger\"] {\n    @apply group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;\n  }\n\n  [data-slot=\"accordion-content\"] {\n    @apply text-sm;\n  }\n\n  [data-slot=\"accordion-content-inner\"] {\n    @apply pt-0 pb-2.5;\n  }\n}\n",
-    "vega": "@layer components {\n  [data-slot=\"accordion\"] {\n    @apply flex w-full flex-col;\n  }\n\n  [data-slot=\"accordion-item\"] {\n    @apply not-last:border-b;\n  }\n\n  [data-slot=\"accordion-trigger\"] {\n    @apply group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;\n  }\n\n  [data-slot=\"accordion-content\"] {\n    @apply text-sm;\n  }\n\n  [data-slot=\"accordion-content-inner\"] {\n    @apply pt-0 pb-4;\n  }\n}\n"
+    "nova": "@layer components {\n  [data-slot=\"accordion\"] {\n    @apply flex w-full flex-col;\n  }\n\n  [data-slot=\"accordion-item\"] {\n    @apply not-last:border-b;\n  }\n\n  [data-slot=\"accordion-trigger\"] {\n    @apply relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;\n  }\n\n  [data-slot=\"accordion-content\"] {\n    @apply text-sm;\n  }\n\n  [data-slot=\"accordion-content-inner\"] {\n    @apply pt-0 pb-2.5;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"accordion\"] {\n    @apply flex w-full flex-col;\n  }\n\n  [data-slot=\"accordion-item\"] {\n    @apply not-last:border-b;\n  }\n\n  [data-slot=\"accordion-trigger\"] {\n    @apply relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;\n  }\n\n  [data-slot=\"accordion-content\"] {\n    @apply text-sm;\n  }\n\n  [data-slot=\"accordion-content-inner\"] {\n    @apply pt-0 pb-4;\n  }\n}\n"
   }
 }
\ No newline at end of file
diff --git a/priv/styles/nova.css b/priv/styles/nova.css
new file mode 100644
index 0000000..614818f
--- /dev/null
+++ b/priv/styles/nova.css
@@ -0,0 +1,45 @@
+/* Generated by mix shadix.gen.registry. Do not edit. */
+@import "./nova/accordion.css";
+@import "./nova/alert.css";
+@import "./nova/alert_dialog.css";
+@import "./nova/avatar.css";
+@import "./nova/badge.css";
+@import "./nova/breadcrumb.css";
+@import "./nova/button.css";
+@import "./nova/card.css";
+@import "./nova/carousel.css";
+@import "./nova/checkbox.css";
+@import "./nova/combobox.css";
+@import "./nova/command.css";
+@import "./nova/context_menu.css";
+@import "./nova/dialog.css";
+@import "./nova/drawer.css";
+@import "./nova/dropdown_menu.css";
+@import "./nova/empty.css";
+@import "./nova/hover_card.css";
+@import "./nova/input.css";
+@import "./nova/input_otp.css";
+@import "./nova/kbd.css";
+@import "./nova/label.css";
+@import "./nova/menubar.css";
+@import "./nova/navigation_menu.css";
+@import "./nova/pagination.css";
+@import "./nova/popover.css";
+@import "./nova/progress.css";
+@import "./nova/radio_group.css";
+@import "./nova/resizable.css";
+@import "./nova/scroll_area.css";
+@import "./nova/select.css";
+@import "./nova/separator.css";
+@import "./nova/sheet.css";
+@import "./nova/sidebar.css";
+@import "./nova/skeleton.css";
+@import "./nova/slider.css";
+@import "./nova/sonner.css";
+@import "./nova/switch.css";
+@import "./nova/table.css";
+@import "./nova/tabs.css";
+@import "./nova/textarea.css";
+@import "./nova/toggle.css";
+@import "./nova/toggle_group.css";
+@import "./nova/tooltip.css";
diff --git a/priv/styles/nova/accordion.css b/priv/styles/nova/accordion.css
index d48189d..b065d57 100644
--- a/priv/styles/nova/accordion.css
+++ b/priv/styles/nova/accordion.css
@@ -8,7 +8,7 @@
   }
 
   [data-slot="accordion-trigger"] {
-    @apply group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;
+    @apply relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;
   }
 
   [data-slot="accordion-content"] {
diff --git a/priv/styles/vega.css b/priv/styles/vega.css
new file mode 100644
index 0000000..dafa823
--- /dev/null
+++ b/priv/styles/vega.css
@@ -0,0 +1,45 @@
+/* Generated by mix shadix.gen.registry. Do not edit. */
+@import "./vega/accordion.css";
+@import "./vega/alert.css";
+@import "./vega/alert_dialog.css";
+@import "./vega/avatar.css";
+@import "./vega/badge.css";
+@import "./vega/breadcrumb.css";
+@import "./vega/button.css";
+@import "./vega/card.css";
+@import "./vega/carousel.css";
+@import "./vega/checkbox.css";
+@import "./vega/combobox.css";
+@import "./vega/command.css";
+@import "./vega/context_menu.css";
+@import "./vega/dialog.css";
+@import "./vega/drawer.css";
+@import "./vega/dropdown_menu.css";
+@import "./vega/empty.css";
+@import "./vega/hover_card.css";
+@import "./vega/input.css";
+@import "./vega/input_otp.css";
+@import "./vega/kbd.css";
+@import "./vega/label.css";
+@import "./vega/menubar.css";
+@import "./vega/navigation_menu.css";
+@import "./vega/pagination.css";
+@import "./vega/popover.css";
+@import "./vega/progress.css";
+@import "./vega/radio_group.css";
+@import "./vega/resizable.css";
+@import "./vega/scroll_area.css";
+@import "./vega/select.css";
+@import "./vega/separator.css";
+@import "./vega/sheet.css";
+@import "./vega/sidebar.css";
+@import "./vega/skeleton.css";
+@import "./vega/slider.css";
+@import "./vega/sonner.css";
+@import "./vega/switch.css";
+@import "./vega/table.css";
+@import "./vega/tabs.css";
+@import "./vega/textarea.css";
+@import "./vega/toggle.css";
+@import "./vega/toggle_group.css";
+@import "./vega/tooltip.css";
diff --git a/priv/styles/vega/accordion.css b/priv/styles/vega/accordion.css
index 0581928..3acfcf2 100644
--- a/priv/styles/vega/accordion.css
+++ b/priv/styles/vega/accordion.css
@@ -8,7 +8,7 @@
   }
 
   [data-slot="accordion-trigger"] {
-    @apply group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;
+    @apply relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;
   }
 
   [data-slot="accordion-content"] {
diff --git a/priv/templates/theme.css b/priv/templates/theme.css
index eefdd79..1e94115 100644
--- a/priv/templates/theme.css
+++ b/priv/templates/theme.css
@@ -1,7 +1,19 @@
 @import "tailwindcss";
+/* Animation utilities used by shadix component skins. Install: npm i tw-animate-css */
+@import "tw-animate-css";
 
 @custom-variant dark (&:is(.dark *));
 
+/* Custom utility shadcn defines in its base layer; used by sidebar/command skins. */
+@utility no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
diff --git a/test/shadix/colocated_generation_test.exs b/test/shadix/colocated_generation_test.exs
new file mode 100644
index 0000000..3aab9bd
--- /dev/null
+++ b/test/shadix/colocated_generation_test.exs
@@ -0,0 +1,37 @@
+defmodule Shadix.ColocatedGenerationTest do
+  @moduledoc """
+  Dogfoods the colocated-CSS generation path end to end (the dev/docs build renders
+  via a global style import instead, so this is where we exercise the real injection).
+  """
+  use ExUnit.Case, async: true
+
+  test "rendering a component injects a well-formed colocated <style> as the first node" do
+    manifest = Shadix.Registry.load!("button")
+    [file] = manifest["files"]
+    out = Shadix.Generator.render_file(file["content"], manifest["styles"], "nova", "Demo.UI")
+
+    assert out =~ ~s(<style :type={Demo.UI.ColocatedCSS}>)
+    assert out =~ "@layer components"
+    assert out =~ ~s([data-slot="button"])
+    refute out =~ "shadix:colocated-css"
+    # the <style> must be the first node of the template (LV 1.2 requirement)
+    assert out =~ ~r/~H"""\n\s*<style :type=/
+  end
+
+  test "every converted component manifest carries nova and vega styles" do
+    converted =
+      "lib/shadix/components/*.ex"
+      |> Path.wildcard()
+      |> Enum.map(&Path.basename(&1, ".ex"))
+      |> Enum.filter(&(File.read!("lib/shadix/components/#{&1}.ex") =~ "shadix:colocated-css"))
+
+    for name <- converted do
+      m = Shadix.Registry.load!(name)
+      assert Enum.sort(Map.keys(m["styles"])) == ["nova", "vega"], "#{name} missing a style"
+      assert m["default_style"] == "nova"
+    end
+
+    # the bulk port converted the large majority of the catalog
+    assert length(converted) >= 40
+  end
+end
-- 
2.51.2