What is the preferred way to have dynamic styles?

Phoenix Forum Questions / Help
, ,
1

With a content security policy defined and upheld, it is no longer possible to use inline style attributes on elements.

I would still like to have some dynamic styling, so thought that it was enough to generate a stylesheet file upon handling certain events. With live_reload watching, I thought I was set:

config :my_app, MyAppWeb.Endpoint,
  ...
  live_reload: [
    notify: [
      live_view: [
        ~r"lib/my_app_web/components/core_components.ex$",
        ~r"lib/my_app_web/(live|components)/.*(ex|heex)$"
      ]
    ],
    patterns: [
      ~r{priv/static/.*(js|css|png|jpeg|jpg|gif)$},
      ...
    ]
  ]

And that works just fine running in development. In production, this doesn’t seem to work.

Another way would be to create a <style nonce={get_csp_nonce()}>...</style> block, but as this has to be in the header, it needs to go into the root.html.heex file, which is not a live layout, and is not reevaluated.

My question is, which is the best way to go? Is there a way to make live_reload work in production without massive performance penalties, or is it better to create an internal style block, and how would it best be updated?

2

Unless you use a workaround lib that is. See phoenix_live_head | Hex for manipulation and phoenix_live_favicon | Hex to see how one can build a lib on top. Although I think no lib abstraction in needed and Live Head will do.

Depending on the use case one might use CSS vars (custom properties) and only set the variable.