Proposal: Support multiple stylesheets in the same LiveView

[BrooklinJazz]

I'd love to be able to separate my stylesheets and use them within the same module like so:

defmodule Server.CustomUserFormLive do
  use Phoenix.LiveView
  use LiveViewNative.LiveView
  use KeyboardStylesheet
  use ErrorStylesheet

  @impl true
  def render(%{format: :swiftui} = assigns) do
    ~SWIFTUI"""
      <TextField name="age" class="keyboard-numberPad">Enter your age</TextField>
      <Text class="error">Can't be blank</Text>
    """
  end
end

However, currently this results in not finding the corresponding function in the stylesheet:

14:53:36.419 [error] #PID<0.6775.0> running Server.Endpoint (connection #PID<0.6746.0>, stream id 2) terminated
Server: localhost:4000 (http)
Request: GET //?_lvn%5Bformat%5D=swiftui
** (exit) an exception was raised:
    ** (FunctionClauseError) no function clause matching in ErrorStylesheet.class/2
        guides/notebooks/forms-and-validation.livemd#cell:xkumpcpbhddqgbdg:4: ErrorStylesheet.class("keyboard-numberPad", [target: :all])
        guides/notebooks/forms-and-validation.livemd#cell:xkumpcpbhddqgbdg:2: anonymous fn/3 in ErrorStylesheet.compile_ast/2
        (elixir 1.15.6) lib/enum.ex:2510: Enum."-reduce/3-lists^foldl/2-0-"/3
        (live_view_native 0.2.0) lib/live_view_native/stylesheets.ex:40: anonymous fn/3 in LiveViewNative.Stylesheets.reduce_stylesheets/2
        (elixir 1.15.6) lib/enum.ex:2510: Enum."-reduce/3-lists^foldl/2-0-"/3
        /Users/brooklin/Library/Caches/mix/installs/elixir-1.15.6-erts-14.1/4e4813372200b35af3da6255d0f413d0/deps/live_view_native/lib/live_view_native/extensions/stylesheets.ex:19: Server.CustomUserFormLive.__compiled_stylesheet__/1
        guides/notebooks/forms-and-validation.livemd#cell:bfjjwzxodu4mtjxv:15: anonymous fn/2 in Server.CustomUserFormLive.render/1
        (phoenix_live_view 0.20.2) lib/phoenix_live_view/diff.ex:393: Phoenix.LiveView.Diff.traverse/7

[bcardarella]

So the nature of this is completely changing in v0.3.0. Instead of per-component or per-liveview stylesheets you have one global stylsheet for the entire app. It is now a function component:

defmodule MyAppWeb.Layouts.SwiftUI do
  use LiveViewNative.Component

  embed_templates "layouts_swiftui/**/*"
  embed_stylesheet MyAppWeb.AppStyles
end

this embeds the compiled stylesheet into the module as a function component:

# function component
MyAppWeb.Layouts.SwiftUI.stylesheet(%{})

# debug purposes structured AST
MyAppWeb.Layouts.SwiftUI.__stylesheet_ast__()