Item {item}
+
defmodule SyntaxHighlight do
@behaviour Phoenix.Component.MacroComponent
@@ -159,6 +171,17 @@ defmodule Phoenix.LiveViewTest.E2E.ColocatedLive do
push_event(socket, "js:exec", %{cmd: Phoenix.json_library().encode!(ops)})
end
+ defp scoped_css_component(assigns) do
+ ~H"""
+
+ Scoped CSS Div
+ """
+ end
+
defp lv_code_sample(assigns) do
~H'''
diff --git a/test/e2e/test_helper.exs b/test/e2e/test_helper.exs
index a282529bda..d52e102846 100644
--- a/test/e2e/test_helper.exs
+++ b/test/e2e/test_helper.exs
@@ -275,6 +275,10 @@ defmodule Phoenix.LiveViewTest.E2E.Endpoint do
from: Path.join(Mix.Project.build_path(), "phoenix-colocated/phoenix_live_view"),
at: "/assets/colocated"
+ plug Plug.Static,
+ from: Path.join(Mix.Project.build_path(), "phoenix-colocated-css/phoenix_live_view"),
+ at: "/assets/colocated_css"
+
plug Plug.Static, from: System.tmp_dir!(), at: "/tmp"
plug :health_check
@@ -314,8 +318,9 @@ end
IO.puts("Starting e2e server on port #{Phoenix.LiveViewTest.E2E.Endpoint.config(:http)[:port]}")
-# we need to manually compile the colocated hooks / js
+# we need to manually compile the colocated hooks, js, and css
Phoenix.LiveView.ColocatedJS.compile()
+Phoenix.LiveView.ColocatedCSS.compile()
if not IEx.started?() do
# when running the test server manually, we halt after
diff --git a/test/e2e/tests/colocated.spec.js b/test/e2e/tests/colocated.spec.js
index b0d6e1c672..5e82c27ba6 100644
--- a/test/e2e/tests/colocated.spec.js
+++ b/test/e2e/tests/colocated.spec.js
@@ -30,6 +30,40 @@ test("colocated JS works", async ({ page }) => {
await expect(page.locator("#hello")).toBeVisible();
});
+test("global colocated CSS works", async ({ page }) => {
+ await page.goto("/colocated");
+ await syncLV(page);
+
+ // the colocated CSS should apply to both elements regardless of the fact
+ // that they are not in the sample template
+ await expect(page.locator(".test-in-page.test-colocated-css")).toHaveCSS(
+ "background-color",
+ "rgb(102, 51, 153)",
+ );
+
+ await expect(page.locator(".test-in-component.test-colocated-css")).toHaveCSS(
+ "background-color",
+ "rgb(102, 51, 153)",
+ );
+});
+
+test("scoped colocated CSS works", async ({ page }) => {
+ await page.goto("/colocated");
+ await syncLV(page);
+
+ // the colocated CSS should only to the element in the component it is
+ // scoped to
+ await expect(page.locator(".test-in-page.test-colocated-css")).not.toHaveCSS(
+ "width",
+ "175px",
+ );
+
+ await expect(page.locator(".test-in-component.test-colocated-css")).toHaveCSS(
+ "width",
+ "175px",
+ );
+});
+
test("custom macro component works (syntax highlighting)", async ({ page }) => {
await page.goto("/colocated");
await syncLV(page);
diff --git a/test/phoenix_live_view/colocated_css_test.exs b/test/phoenix_live_view/colocated_css_test.exs
new file mode 100644
index 0000000000..d3a88e6ced
--- /dev/null
+++ b/test/phoenix_live_view/colocated_css_test.exs
@@ -0,0 +1,142 @@
+defmodule Phoenix.LiveView.ColocatedCSSTest do
+ # we set async: false because we call the colocated CSS compiler
+ # and it reads / writes to a shared folder
+ use ExUnit.Case, async: false
+
+ test "simple global style is extracted and available under manifest import" do
+ defmodule TestGlobalComponent do
+ use Phoenix.Component
+ alias Phoenix.LiveView.ColocatedCSS, as: Colo
+
+ def fun(assigns) do
+ ~H"""
+
+ """
+ end
+ end
+
+ assert module_folders =
+ File.ls!(
+ Path.join(Mix.Project.build_path(), "phoenix-colocated-css/phoenix_live_view")
+ )
+
+ assert folder =
+ Enum.find(module_folders, fn folder ->
+ folder =~ ~r/#{inspect(__MODULE__)}\.TestGlobalComponent$/
+ end)
+
+ assert [style] =
+ Path.wildcard(
+ Path.join(
+ Mix.Project.build_path(),
+ "phoenix-colocated-css/phoenix_live_view/#{folder}/*.css"
+ )
+ )
+
+ assert File.read!(style) == "\n .sample-class {\n background-color: #FFFFFF;\n }\n"
+
+ # now write the manifest manually as we are in a test
+ Phoenix.LiveView.ColocatedCSS.compile()
+
+ assert manifest =
+ File.read!(
+ Path.join(
+ Mix.Project.build_path(),
+ "phoenix-colocated-css/phoenix_live_view/colocated.css"
+ )
+ )
+
+ path =
+ Path.relative_to(
+ style,
+ Path.join(Mix.Project.build_path(), "phoenix-colocated-css/phoenix_live_view/")
+ )
+
+ # style is in manifest
+ assert manifest =~ ~s[@import "./#{path}";\n]
+ after
+ :code.delete(__MODULE__.TestGlobalComponent)
+ :code.purge(__MODULE__.TestGlobalComponent)
+ end
+
+ test "simple scoped style is extracted and available under manifest import" do
+ defmodule TestScopedComponent do
+ use Phoenix.Component
+ alias Phoenix.LiveView.ColocatedCSS, as: Colo
+
+ def fun(assigns) do
+ ~H"""
+
+ """
+ end
+ end
+
+ assert module_folders =
+ File.ls!(
+ Path.join(Mix.Project.build_path(), "phoenix-colocated-css/phoenix_live_view")
+ )
+
+ assert folder =
+ Enum.find(module_folders, fn folder ->
+ folder =~ ~r/#{inspect(__MODULE__)}\.TestScopedComponent$/
+ end)
+
+ assert [style] =
+ Path.wildcard(
+ Path.join(
+ Mix.Project.build_path(),
+ "phoenix-colocated-css/phoenix_live_view/#{folder}/*.css"
+ )
+ )
+
+ file_contents = File.read!(style)
+
+ file_contents =
+ Regex.replace(~r/data-phx-css=".+"/, file_contents, "data-phx-css=\"SCOPE_HERE\"")
+
+ # The scope is a generated value, so for testing reliability we just replace it with a known
+ # value to assert against.
+ assert file_contents ==
+ "@scope ([data-phx-css=\"SCOPE_HERE\"]) to ([data-phx-css]) { \n .sample-class {\n background-color: #FFFFFF;\n }\n }"
+
+ # now write the manifest manually as we are in a test
+ Phoenix.LiveView.ColocatedCSS.compile()
+
+ assert manifest =
+ File.read!(
+ Path.join(
+ Mix.Project.build_path(),
+ "phoenix-colocated-css/phoenix_live_view/colocated.css"
+ )
+ )
+
+ path =
+ Path.relative_to(
+ style,
+ Path.join(Mix.Project.build_path(), "phoenix-colocated-css/phoenix_live_view/")
+ )
+
+ # style is in manifest
+ assert manifest =~ ~s[@import "./#{path}";\n]
+ after
+ :code.delete(__MODULE__.TestScopedComponent)
+ :code.purge(__MODULE__.TestScopedComponent)
+ end
+
+ test "writes empty colocated.css when no colocated styles exist" do
+ manifest =
+ Path.join(Mix.Project.build_path(), "phoenix-colocated-css/phoenix_live_view/colocated.css")
+
+ Phoenix.LiveView.ColocatedCSS.compile()
+ assert File.exists?(manifest)
+ assert File.read!(manifest) == ""
+ end
+end
diff --git a/test/phoenix_live_view/html_engine_test.exs b/test/phoenix_live_view/html_engine_test.exs
index ce9bbbf50a..81d730090b 100644
--- a/test/phoenix_live_view/html_engine_test.exs
+++ b/test/phoenix_live_view/html_engine_test.exs
@@ -1,4 +1,6 @@
defmodule Phoenix.LiveView.HTMLEngineTest do
+ # async: false due to manipulation of the Application
+ # env for :apply_css_scope_attribute
use ExUnit.Case, async: true
import ExUnit.CaptureIO
@@ -2290,4 +2292,431 @@ defmodule Phoenix.LiveView.HTMLEngineTest do
assert meta[:column] == 10
end
end
+
+ describe "data-phx-css attribute" do
+ test "is correctly applied to a single self-closing tag" do
+ enable_apply_css_scope_attribute()
+
+ source = ""
+ scope = Phoenix.LiveView.TagEngine.generate_scope(source)
+
+ rendered =
+ source
+ |> render()
+ |> normalize_whitespace()
+
+ expected = ~s()
+
+ assert rendered == normalize_whitespace(expected)
+ after
+ disable_apply_css_scope_attribute()
+ end
+
+ test "is correctly applied to a single tag with body" do
+ enable_apply_css_scope_attribute()
+
+ source = "Test"
+ scope = Phoenix.LiveView.TagEngine.generate_scope(source)
+
+ rendered =
+ source
+ |> render()
+ |> normalize_whitespace()
+
+ expected = ~s(Test)
+
+ assert rendered == normalize_whitespace(expected)
+ after
+ disable_apply_css_scope_attribute()
+ end
+
+ test "is correctly applied to multiple self-closing tags" do
+ enable_apply_css_scope_attribute()
+
+ source = """
+
+
+
+ """
+
+ scope = Phoenix.LiveView.TagEngine.generate_scope(source)
+
+ rendered =
+ source
+ |> render()
+ |> normalize_whitespace()
+
+ expected = """
+
+
+
+ """
+
+ assert rendered == normalize_whitespace(expected)
+ after
+ disable_apply_css_scope_attribute()
+ end
+
+ test "is correctly applied to multiple tags with bodies" do
+ enable_apply_css_scope_attribute()
+
+ source = """
+ Test1
+ Test2
+ Test3
+ """
+
+ scope = Phoenix.LiveView.TagEngine.generate_scope(source)
+
+ rendered =
+ source
+ |> render()
+ |> normalize_whitespace()
+
+ expected = """
+ Test1
+ Test2
+ Test3
+ """
+
+ assert rendered == normalize_whitespace(expected)
+ after
+ disable_apply_css_scope_attribute()
+ end
+
+ test "is correctly applied to all outermost tags, but not nested tags" do
+ enable_apply_css_scope_attribute()
+
+ source = """
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ """
+
+ scope = Phoenix.LiveView.TagEngine.generate_scope(source)
+
+ rendered =
+ source
+ |> render()
+ |> normalize_whitespace()
+
+ expected = """
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ """
+
+ assert rendered == normalize_whitespace(expected)
+ after
+ disable_apply_css_scope_attribute()
+ end
+
+ test "is correctly applied to contents of component inner_blocks" do
+ enable_apply_css_scope_attribute()
+
+ source = """
+
+
+
+
+
+ Inner Block 1
+
+
+
+
+
+
+ Inner Block 2
+
+
+
+
+
+ """
+
+ scope = Phoenix.LiveView.TagEngine.generate_scope(source)
+
+ pattern =
+ """
+
+
+
+
+
+ Inner Block 1
+
+
+
+
+
+
+ Inner Block 2
+
+
+
+
+
+ """
+ |> normalize_whitespace()
+ |> Regex.compile!()
+
+ rendered =
+ source
+ |> render()
+ |> normalize_whitespace()
+
+ [inner_block_and_slot_scope, inner_block_and_slot_scope] =
+ Regex.run(pattern, rendered, capture: :all_but_first)
+
+ refute scope == inner_block_and_slot_scope
+ after
+ disable_apply_css_scope_attribute()
+ end
+
+ test "is correctly applied to contents of component named slots" do
+ enable_apply_css_scope_attribute()
+
+ source = """
+
+
+
+ <:test>
+
+
+ Inner Block 1
+
+
+
+
+
+ <:test>
+
+
+ Inner Block 2
+
+
+
+
+
+
+ """
+
+ scope = Phoenix.LiveView.TagEngine.generate_scope(source)
+
+ pattern =
+ """
+
+
+
+
+
+
+
+
+
+
+ """
+ |> normalize_whitespace()
+ |> Regex.compile!()
+
+ rendered =
+ source
+ |> render()
+ |> normalize_whitespace()
+
+ [inner_block_and_slot_scope, inner_block_and_slot_scope] =
+ Regex.run(pattern, rendered, capture: :all_but_first)
+
+ refute scope == inner_block_and_slot_scope
+ after
+ disable_apply_css_scope_attribute()
+ end
+
+ test "is correctly applied to nested component calls with inner_blocks and slots" do
+ enable_apply_css_scope_attribute()
+
+ source = """
+
+
+
+
+
+
+
+
+ <:test>
+
+
+
+
+
+
+
+
+
+ """
+
+ scope = Phoenix.LiveView.TagEngine.generate_scope(source)
+
+ pattern =
+ """
+
+
+
+
+
+
+ Simple
+
+
+
+
+
+
+
+
+ """
+ |> normalize_whitespace()
+ |> Regex.compile!()
+
+ rendered =
+ source
+ |> render()
+ |> normalize_whitespace()
+
+ [
+ inner_block_and_slot_scope,
+ inner_block_and_slot_scope,
+ simple_scope,
+ simple_scope,
+ inner_block_and_slot_scope,
+ simple_scope,
+ simple_scope
+ ] = Regex.run(pattern, rendered, capture: :all_but_first)
+
+ refute scope == inner_block_and_slot_scope
+ refute scope == simple_scope
+ refute inner_block_and_slot_scope == simple_scope
+ after
+ disable_apply_css_scope_attribute()
+ end
+ end
+
+ defp normalize_whitespace(string) do
+ # Eliminate all newlines and space between tags to make
+ # assertions more resilient against irrelevant whitespace differences
+ string
+ |> String.replace("\n", "")
+ |> String.replace(~r/> +<")
+ end
+
+ defp enable_apply_css_scope_attribute() do
+ Application.put_env(:phoenix_live_view, :apply_css_scope_attribute, true)
+
+ # It is mportant that this module is defined and compiled
+ # after the Application env is updated so that the contents
+ # of this module are also scoped
+ defmodule CSSScope do
+ use Phoenix.Component
+
+ slot :inner_block, required: true
+ slot :test
+
+ def inner_block_and_slot(assigns) do
+ ~H"""
+
+ {render_slot(@inner_block)}
+
+
+ """
+ end
+
+ def simple(assigns) do
+ ~H"""
+ Simple
+ """
+ end
+ end
+ end
+
+ defp disable_apply_css_scope_attribute() do
+ Application.put_env(:phoenix_live_view, :apply_css_scope_attribute, false)
+
+ :code.delete(__MODULE__.CSSScope)
+ :code.purge(__MODULE__.CSSScope)
+ end
end