-
Notifications
You must be signed in to change notification settings - Fork 25
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: Introduce an API for Percy Specific CSS #346
Conversation
Ideally the unit tests wouldn't be impacted by a real `.percy.yml` file. But this is easier than refactoring the commands test suite.
@@ -36,6 +36,9 @@ jobs: | |||
- run: | |||
name: Client tests | |||
command: $NYC yarn test-client --singleRun | |||
- run: | |||
name: Setup integration test .percy.yml | |||
command: mv .ci.percy.yml .percy.yml |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Haven't reviewed yet, but I just wanted to add that the version: 1
snapshot:
widths: [375, 1280]
percy-css: |
iframe {
display none;
} |
95466d6
to
7a458d2
Compare
# [0.13.0](v0.12.2...v0.13.0) (2019-09-17) ### Features * Introduce an API for Percy Specific CSS ([#346](#346)) ([6158f57](6158f57))
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:
For global CSS in the
.percy.yml
file:TODOs once this ships
options
correctly.