Add runtime compile of tailwind css

[ryanwinchester]

This adds Beacon.RuntimeCSS.recompile!/1

It recompiles and minifies/purges Tailwind CSS based on layout and pages from the DB.

TODO (and to discuss):

• Double check reading of templates/views in release (i.e. make sure the directories are correct)
• Unit Test

NOTE: This adds the CSS to assigns in the module loader but not to any rendered pages. My main goal was getting CSS that could compile/recompile at runtime.

Also, there are also probably better ways to handle custom tailwind configs, but this is a starting point?

[bcardarella]

@ryanwinchester we're starting to review this PR. Can you swap mimic our for mox as this is our preferred mocking library

[TheFirstAvenger]

To avoid changing application env vars on the fly, and also retain async on the tests, we should be able to set the :css_compiler mock in test.exs and then we can call the real Beacon.CSSCompiler directly in the test to test it. If we need to test it inline in another test, we can then @runtime_css and expect it in that specific test, maintaining async and with no env vars changing.

[ryanwinchester]

To avoid changing application env vars on the fly, and also retain async on the tests, we should be able to set the :css_compiler mock in test.exs and then we can call the real Beacon.CSSCompiler directly in the test to test it. If we need to test it inline in another test, we can then @runtime_css and expect it in that specific test, maintaining async and with no env vars changing.

Yeah, thanks. That's a lot better. I never use Mox because I don't like all the extra ceremonial code just to be able to write some tests, and was just following along with their docs.

[leandrocp]

Hey @ryanwinchester an initial review to help getting the PR done.

/edit you could also add tailwind.install in the setup alias

beacon/mix.exs

Line 50 in 5a169f6

setup: ["deps.get", "ecto.setup"],

[leandrocp]

Hey @ryanwinchester seems like it's missing the loading of runtime_css in root.html.heex. The beacon.css file is compiled and then injected into layout_assigns but seems like it's never loaded in the generated template. I was assuming it would be injected like the other components here:

beacon/lib/beacon_web/templates/layout/root.html.heex

Lines 7 to 9 in d0a75a5

	<%= meta_tags(assigns) %>
	<%= linked_stylesheets(assigns) %>
	<%= stylesheet_tag(assigns) %>

[ryanwinchester]

Hey @ryanwinchester seems like it's missing the loading of runtime_css in root.html.heex.

@leandrocp Yeah I had mentioned in previous discussions that I was adding the compiled CSS to the assigns but didn't know where those were being used and how to get the CSS into the actual rendered layout, but never really got an answer. So, just assumed it would be resolved later 😂.

[leandrocp]

Hey @ryanwinchester seems like it's missing the loading of runtime_css in root.html.heex.

@leandrocp Yeah I had mentioned in previous discussions that I was adding it to the assigns but didn't know where those were being used and how to get the CSS into the actual rendered layout, but never really got an answer. So, just assumed it would be resolved later 😂.

Ohh gotcha 😂
Yeah IMO that would be in root.html.heex but it's fine to add it in a following PR

[leandrocp]

I'm not sure about #30 (comment) but it LGTM.

Great work!

[leandrocp]

Thanks!!