feat: Introduce an API for Percy Specific CSS

[Robdel12]

What is this?

This PR introduces first class support for providing CSS specific to only Percy's rendering environment though the SDKs. Now users will be able to provide a new option called percyCSS with our SDKs. This can be set globally and on a per-snapshot basis.

Approach

Initially the implementation of this was going to be fairly easy. We would take a new snapshot option and then serialize that CSS into the DOM when we're serializing inputs and what not. It turns out, CSP can block this injected CSS (thank you SDK test site!).

To work around CSP issues, we instead now take that CSS and create a new resource for this snapshot which contains the CSS. If you have global CSS, we'll concat that with the per-snapshot CSS. This file is named with the current time stamp + percy-specific.css. It does not use the @percy media query since this CSS can only ever exist in Percy)

This CSS will be applied at the very bottom of their DOM snapshot, before the closing </body> tag. This hopefully will ensure the cascade will do its job and !important won't be needed often.

Usage

Now there's a simple API for providing Percy only CSS. For snapshot specific css:

await percySnapshot('Home page', { percyCSS: `iframe { display: none; }` })

For global CSS in the .percy.yml file:

version: 1
snapshot:
  widths: [375, 1280]
  percy-css: | 
    iframe { 
      display none; 
    }

TODOs once this ships

• Update SDK config docs
• Update Percy specific CSS docs
• Ensure all SDKs are passing options correctly.

[Robdel12]

I'm not crazy about this, but it's needed because adding a .percy.yml file breaks the unit tests.

This can go away once you can pass a custom file path for the .yml file. Then the unit tests can have their own mocked & static .yml file.

[wwilsman]

Haven't reviewed yet, but I just wanted to add that the yml option might be nice to document like this so it's clear how multiple rules might look:

version: 1
snapshot:
  widths: [375, 1280]
  percy-css: |
    iframe {
      display none;
    }