View Source Pyro.Component.CSS (Pyro v0.3.7)
Utilities for managing CSS.
Summary
Functions
Merges classes together, providing a few conveniences. It is similar to how Surface
merges class prop types or Tails
minus the Tailwind-aware smart merging. This is a key tool for conditional style and reusable components, allow for very granular style overrides.
Functions
Merges classes together, providing a few conveniences. It is similar to how Surface
merges class prop types or Tails
minus the Tailwind-aware smart merging. This is a key tool for conditional style and reusable components, allow for very granular style overrides.
- Includes keys of maps or keywords with a
true
value - Flattens nested lists
- Removes duplicate/empty classes
- Truncate all previous classes with
{:truncate, "new classes"}
- Remove specific previous classes with
{:remove, ["mb-2"]}
Examples
iex> classes("py-2 px-2")
"py-2 px-2"
iex> classes(["py-2", [" px-2"]])
"px-2 py-2"
iex> classes(["py-2", ["px-2", "ml-2"], {:truncate, "ml-1"}, :"mr-2"])
"mr-2 ml-1"
iex> classes(["py-2", ["px-2", "ml-2"], {:remove, "ml-2"}, :"mr-2"])
"mr-2 px-2 py-2"
iex> classes(["py-2", ["px-2", "ml-2"], {:remove, [:"px-2", "asdf", "ml-2"]}, :"mr-2"])
"mr-2 py-2"
Note:
Order is not preserved in the output. This doesn't matter in terms of class precedence, but it does improve merge performance slightly.
Bring Your Own Merger
You can also override this function with your own by setting the config option, e.g:
config :pyro, :css_class_merger, {Tails, :classes, 1}
# or
config :pyro, :css_class_merger, &Tails.classes/1