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