replace mix dog.modifiers with mix dog.classes

CHANGELOG.md

@@ -4,6 +4,10 @@
 
 ### Changed
 
+- Rename `Doggo.modifier_classes/1` to `Doggo.classes/1` and `mix dog.modifiers`
+  to `mix dog.classes`. The function and mix task return all base classes,
+  nested classes, and additional customizable classes in addition to the
+  modifier classes now.
 - Wrap inner block of `box` component into `div`.
 - Add example styles for box and tag components.
 

README.md

@@ -126,19 +126,14 @@ mix dog.gen.stories -m MyAppWeb.CoreComponents -o storybook -c button
 
 ### PurgeCSS
 
-If you use PurgeCSS, you will need to add `deps/doggo/lib/doggo.ex` to your
-PurgeCSS configuration.
-
-Doggo also uses modifier CSS classes to alter the appearance of components. The
-class names are generated dynamically, which means PurgeCSS won't be able to
-find them in the source code. You can use `mix dog.modifiers` to save a
-list of all modifier class names to a file:
+If you use PurgeCSS, you can get a list of CSS class names of all configured
+components:
 
 ```bash
-mix dog.modifiers -m MyAppWeb.CoreComponents -o assets/modifiers.txt
+mix dog.classes -m MyAppWeb.CoreComponents -o assets/modifiers.txt
 ```
 
-Add the generated file to your PurgeCSS configuration as well.
+Add the generated file to your PurgeCSS configuration.
 
 ## Design decisions
 

lib/doggo.ex

@@ -252,27 +252,41 @@ defmodule Doggo do
   def modifier_class_name(_, value) when is_binary(value), do: "is-#{value}"
 
   @doc """
-  Returns all modifier classes defined in the given components module.
+  Returns all component classes used in the given components module.
+
+  This includes the base classes, nested classes (based on the base class)
+  and modifier classes.
 
   ## Usage
 
-      iex> modifier_classes(MyAppWeb.CoreComponents)
+      iex> classes(MyAppWeb.CoreComponents)
       [
+        "button",
         "is-large",
         "is-medium",
         "is-primary",
         "is-secondary",
         "is-small"
       ]
   """
-  @spec modifier_classes(module) :: [String.t()]
-  def modifier_classes(module) when is_atom(module) do
-    module.__dog_components__()
-    |> Enum.flat_map(&get_modifier_classes/1)
+  @spec classes(module) :: [String.t()]
+  def classes(module) when is_atom(module) do
+    components = module.__dog_components__()
+    base_classes = Enum.map(components, &get_base_class/1)
+    modifier_classes = Enum.flat_map(components, &get_modifier_classes/1)
+    nested_classes = Enum.flat_map(components, &get_nested_classes/1)
+    extra_classes = Enum.flat_map(components, &get_extra_classes/1)
+
+    (base_classes ++ modifier_classes ++ nested_classes ++ extra_classes)
+    |> Enum.reject(&is_nil/1)
     |> Enum.uniq()
     |> Enum.sort()
   end
 
+  defp get_base_class({_, info}) do
+    Keyword.get(info, :base_class)
+  end
+
   defp get_modifier_classes({_, info}) do
     class_name_fun = Keyword.fetch!(info, :class_name_fun)
 
@@ -286,6 +300,25 @@ defmodule Doggo do
     end)
   end
 
+  defp get_nested_classes({_, info}) do
+    base_class = Keyword.get(info, :base_class)
+    component_module = info |> Keyword.fetch!(:component) |> component_module()
+    component_module.nested_classes(base_class)
+  end
+
+  defp get_extra_classes({_, info}) do
+    info
+    |> Keyword.fetch!(:extra)
+    |> Enum.map(fn {key, value} ->
+      if key |> to_string() |> String.ends_with?("_class"), do: value
+    end)
+  end
+
+  defp component_module(name) when is_atom(name) do
+    module_name = name |> Atom.to_string() |> Macro.camelize()
+    Module.safe_concat([Doggo.Components, module_name])
+  end
+
   @doc false
   def ensure_label!(%{label: s, labelledby: nil}, _, _) when is_binary(s) do
     :ok

lib/doggo/component.ex

@@ -32,6 +32,11 @@ defmodule Doggo.Component do
   """
   @callback config() :: keyword
 
+  @doc """
+  Returns a list of all nested classes used by the component.
+  """
+  @callback nested_classes(base_class :: String.t() | nil) :: [String.t()]
+
   @doc """
   Returns a quoted block with the attributes and slots.
   """

lib/doggo/components/accordion.ex

@@ -50,6 +50,11 @@ defmodule Doggo.Components.Accordion do
     ]
   end
 
+  @impl true
+  def nested_classes(_) do
+    []
+  end
+
   @impl true
   def attrs_and_slots do
     quote do

lib/doggo/components/action_bar.ex

@@ -53,6 +53,11 @@ defmodule Doggo.Components.ActionBar do
     ]
   end
 
+  @impl true
+  def nested_classes(_) do
+    []
+  end
+
   @impl true
   def attrs_and_slots do
     quote do

lib/doggo/components/alert.ex

@@ -56,6 +56,16 @@ defmodule Doggo.Components.Alert do
     ]
   end
 
+  @impl true
+  def nested_classes(base_class) do
+    [
+      "#{base_class}-icon",
+      "#{base_class}-body",
+      "#{base_class}-title",
+      "#{base_class}-message"
+    ]
+  end
+
   @impl true
   def attrs_and_slots do
     quote do

lib/doggo/components/alert_dialog.ex

@@ -85,6 +85,15 @@ defmodule Doggo.Components.AlertDialog do
     ]
   end
 
+  @impl true
+  def nested_classes(base_class) do
+    [
+      "#{base_class}-close",
+      "#{base_class}-container",
+      "#{base_class}-content"
+    ]
+  end
+
   @impl true
   def attrs_and_slots do
     quote do

lib/doggo/components/app_bar.ex

@@ -42,6 +42,14 @@ defmodule Doggo.Components.AppBar do
     ]
   end
 
+  @impl true
+  def nested_classes(base_class) do
+    [
+      "#{base_class}-actions",
+      "#{base_class}-navigation"
+    ]
+  end
+
   @impl true
   def attrs_and_slots do
     quote do

lib/doggo/components/avatar.ex

@@ -57,6 +57,11 @@ defmodule Doggo.Components.Avatar do
     ]
   end
 
+  @impl true
+  def nested_classes(_) do
+    []
+  end
+
   @impl true
   def attrs_and_slots do
     quote do

lib/doggo/components/badge.ex

@@ -49,6 +49,11 @@ defmodule Doggo.Components.Badge do
     ]
   end
 
+  @impl true
+  def nested_classes(_) do
+    []
+  end
+
   @impl true
   def attrs_and_slots do
     quote do

lib/doggo/components/bottom_navigation.ex

@@ -53,6 +53,11 @@ defmodule Doggo.Components.BottomNavigation do
     ]
   end
 
+  @impl true
+  def nested_classes(base_class) do
+    ["#{base_class}-icon"]
+  end
+
   @impl true
   def attrs_and_slots do
     quote do

lib/doggo/components/box.ex

@@ -60,6 +60,15 @@ defmodule Doggo.Components.Box do
     ]
   end
 
+  @impl true
+  def nested_classes(base_class) do
+    [
+      "#{base_class}-actions",
+      "#{base_class}-banner",
+      "#{base_class}-body"
+    ]
+  end
+
   @impl true
   def attrs_and_slots do
     quote do

lib/doggo/components/breadcrumb.ex

@@ -35,6 +35,11 @@ defmodule Doggo.Components.Breadcrumb do
     ]
   end
 
+  @impl true
+  def nested_classes(_) do
+    []
+  end
+
   @impl true
   def attrs_and_slots do
     quote do

lib/doggo/components/button.ex

@@ -77,6 +77,11 @@ defmodule Doggo.Components.Button do
     ]
   end
 
+  @impl true
+  def nested_classes(_) do
+    []
+  end
+
   @impl true
   def attrs_and_slots do
     quote do

lib/doggo/components/button_link.ex

@@ -77,6 +77,11 @@ defmodule Doggo.Components.ButtonLink do
     ]
   end
 
+  @impl true
+  def nested_classes(_) do
+    []
+  end
+
   @impl true
   def attrs_and_slots do
     quote do

lib/doggo/components/callout.ex

@@ -61,6 +61,16 @@ defmodule Doggo.Components.Callout do
     ]
   end
 
+  @impl true
+  def nested_classes(base_class) do
+    [
+      "#{base_class}-body",
+      "#{base_class}-icon",
+      "#{base_class}-message",
+      "#{base_class}-title"
+    ]
+  end
+
   @impl true
   def attrs_and_slots do
     quote do

lib/doggo/components/card.ex

@@ -45,6 +45,11 @@ defmodule Doggo.Components.Card do
     ]
   end
 
+  @impl true
+  def nested_classes(_) do
+    []
+  end
+
   @impl true
   def attrs_and_slots do
     quote do

lib/doggo/components/carousel.ex

@@ -72,6 +72,19 @@ defmodule Doggo.Components.Carousel do
     ]
   end
 
+  @impl true
+  def nested_classes(base_class) do
+    [
+      "#{base_class}-controls",
+      "#{base_class}-inner",
+      "#{base_class}-item",
+      "#{base_class}-items",
+      "#{base_class}-next",
+      "#{base_class}-pagination",
+      "#{base_class}-previous"
+    ]
+  end
+
   @impl true
   def attrs_and_slots do
     quote do

lib/doggo/components/cluster.ex

@@ -42,6 +42,11 @@ defmodule Doggo.Components.Cluster do
     ]
   end
 
+  @impl true
+  def nested_classes(_) do
+    []
+  end
+
   @impl true
   def attrs_and_slots do
     quote do

lib/doggo/components/combobox.ex

@@ -91,6 +91,14 @@ defmodule Doggo.Components.Combobox do
     ]
   end
 
+  @impl true
+  def nested_classes(base_class) do
+    [
+      "#{base_class}-option-description",
+      "#{base_class}-option-label"
+    ]
+  end
+
   @impl true
   def attrs_and_slots do
     quote do

lib/doggo/components/date.ex

@@ -101,6 +101,11 @@ defmodule Doggo.Components.Date do
     ]
   end
 
+  @impl true
+  def nested_classes(_) do
+    []
+  end
+
   @impl true
   def attrs_and_slots do
     quote do

lib/doggo/components/datetime.ex

@@ -110,6 +110,11 @@ defmodule Doggo.Components.Datetime do
     ]
   end
 
+  @impl true
+  def nested_classes(_) do
+    []
+  end
+
   @impl true
   def attrs_and_slots do
     quote do

lib/doggo/components/disclosure_button.ex

@@ -82,6 +82,11 @@ defmodule Doggo.Components.DisclosureButton do
     ]
   end
 
+  @impl true
+  def nested_classes(_) do
+    []
+  end
+
   @impl true
   def attrs_and_slots do
     quote do