LiveStyle.Dev (LiveStyle v0.13.0)

Development helpers for inspecting and debugging LiveStyle classes.

Note: Functions use show instead of inspect to avoid conflicts with Kernel.inspect/2.

This module provides IEx-friendly functions for exploring style definitions, understanding how classes merge, and viewing generated CSS.

Usage in IEx

iex> LiveStyle.Dev.show(MyAppWeb.Button, :primary)
:primary
class: x1234 x5678

  background-color: x1234
  color: x5678

iex> LiveStyle.Dev.diff(MyAppWeb.Button, [:base, :primary])
:base
  display: x9abc
  padding: xdef0

:primary
  background-color: x1234
  color: x5678

Merged:
  class: x9abc xdef0 x1234 x5678

iex> LiveStyle.Dev.css(MyAppWeb.Button, [:primary])
".x1234:not(#\\#){background-color:blue}
.x5678:not(#\\#){color:white}"

iex> LiveStyle.Dev.list(MyAppWeb.Button)
[:base, :primary, :secondary, :dynamic_opacity]

Note

These functions read from the compiled manifest. Make sure your modules are compiled before using these helpers.

Summary

Functions

css(module, class_atoms)

Returns the generated CSS for the given classes.

diff(module, class_refs)

Shows what each class contributes and the merged result.

list(module)

Lists all class names defined in a module.

pp(module, class_name)

Pretty-prints a class to the console.

show(module, class_name)

Shows a single class definition, displaying its properties and generated CSS.

Functions

css(module, class_atoms)

@spec css(module(), [atom()]) :: String.t()

Returns the generated CSS for the given classes.

Returns the raw CSS rules as a string, useful for debugging what CSS is actually generated for your styles.

Example

iex> LiveStyle.Dev.css(MyAppWeb.Button, [:primary])
".x1234:not(#\\#){background-color:blue}
.x5678:not(#\\#){color:white}"

diff(module, class_refs)

@spec diff(module(), [atom() | {atom(), any()}]) :: :ok

Shows what each class contributes and the merged result.

Useful for understanding how multiple classes combine and which properties override others.

Example

iex> LiveStyle.Dev.diff(MyAppWeb.Button, [:base, :primary])
:base
  display: x9abc
  padding: xdef0

:primary
  background-color: x1234
  color: x5678

Merged:
  class: x9abc xdef0 x1234 x5678

list(module)

@spec list(module()) :: [atom()]

Lists all class names defined in a module.

Returns a list of atoms representing the class names.

Example

iex> LiveStyle.Dev.list(MyAppWeb.Button)
[:base, :primary, :secondary]

pp(module, class_name)

@spec pp(module(), atom()) :: :ok

Pretty-prints a class to the console.

Alias for show/2 for convenience.

show(module, class_name)

@spec show(module(), atom()) :: :ok

Shows a single class definition, displaying its properties and generated CSS.

Prints formatted output to the console showing:

The generated class string
Each CSS property and its atomic class name
Whether the class is dynamic

Example

iex> LiveStyle.Dev.show(MyAppWeb.Button, :primary)
:primary
class: x1234 x5678

  background-color: x1234
  color: x5678