Marker class generation for contextual selectors.

Markers are special CSS classes used with LiveStyle.When to create contextual selectors that style elements based on ancestor, descendant, or sibling state.

Usage

Use LiveStyle.default_marker/0 or LiveStyle.marker/1 from the main LiveStyle module.

Example

defmodule MyComponent do
  use Phoenix.Component
  use LiveStyle
  alias LiveStyle.When

  class :card,
    transform: [
      {:default, "translateX(0)"},
      {When.ancestor(":hover"), "translateX(10px)"}
    ]

  def render(assigns) do
    ~H"""
    <div {css([default_marker()])}>
      <div {css(:card)}>Hover parent to move me</div>
    </div>
    """
  end
end

Custom Markers

For multiple independent sets of contextual selectors, use custom markers:

class :cell,
  background: [
    {:default, "transparent"},
    {When.ancestor(":hover", marker(:row)), "#eee"}
  ]

# In template:
<tr {css([marker(:row)])}>
  <td {css(:cell)}>...</td>
</tr>

Cross-Module Markers

Use {Module, :name} syntax to reference markers from other modules:

# In template:
<tr {css([marker({OtherModule, :row})])}>

Different modules using the same marker name get independent markers:

# In ComponentA
marker(:row)  # Different from ComponentB's :row

# In ComponentB
marker(:row)  # Different from ComponentA's :row