Make screen.logTestingPlaygroundURL() work with document.head

Describe the feature you'd like:

Following on from #780, I think it would be helpful if screen.logTestingPlaygroundURL() created a URL that also contains the markup from the document head. This would allow a better debugging experience for CSS-in-JSS solutions, but I imagine it would also improve the behaviour for any styling that isn't defined inline.

Suggested implementation:

Looks like https://testing-playground.com itself would need to change, maybe accepting a hash along the lines of #body-markup=<encoded-body-markup>&head-markup=<encoded-head-markup>. I'll have a look through the code there and possibly open an issue in that repo too.

I've spent a little time exploring if this approach would be possible, using with the code below:

import React from "react";
import styled from "styled-components";
import { screen, render } from "@testing-library/react";

const StyledThing = styled.div`
  background: #f0f;
  color: #0f0;
`;

describe("test", () => {
  it("renders a styled thing", () => {
    const text = "I am a styled thing";
    const { getByText } = render(<StyledThing>{text}</StyledThing>);
    screen.logTestingPlaygroundURL();
    expect(getByText(text)).toBeInTheDocument();
  });
});

This outputs this url - which unfortunately does not have the beautiful colours I have defined. However, if I set a breakpoint on the line screen.logTestingPlaygroundURL(); and run window.document.head.innerHTML I get the output '<style data-styled="active" data-styled-version="5.2.1">.fUmfxz{background:#f0f;color:#0f0;}</style>'. So I am assuming it would be a matter of amending getPlaygroundUrl to output both the markup for the body and the head.

Describe alternatives you've considered:

I haven't considered any alternatives.

Teachability, Documentation, Adoption, Migration Strategy:

I am assuming no teaching or documentation would be required, as the usage would remain the same.

Start with getPlaygroundUrl and screen.logTestingPlaygroundURL(), then inspect how document.body markup is encoded and compare it with document.head.innerHTML. Review the testing-playground repository because the issue suggests its URL format may need to accept both body and head markup. Done means the generated URL preserves head-defined styles while retaining the existing usage.