[wip] use package CSS in percy screenshot tests

[chriddyp]

Percy works by downloading the HTML on the page, sending that HTML to their server, and then re-rendering that HTML in different browsers and taking screenshots.

Our CSS isn't actually on the page - it's referenced by a <link ref="stylesheet">. Percy won't download these links, it needs us to supply their location on the filesystem (a mapping between the URL and the filenames). This PR adds this mapping to our percy setup. So, our screenshots should actually look like the real thing.

[valentijnnieman]

@chriddyp How about we include the CSS in the JS source code? Like in Tabs using styled-jsx (I noticed the Tabs component do render in Percy with styles on them), or styled-components a la DDK / Dash-Table? It's a bit more work but maybe it is better in the long run for Dash - no more external stylesheets to fetch etc. What do you think?

[valentijnnieman]

@chriddyp Hmm actually the external CSS is a bit more than I thought, might be slightly awkward to have that in a CSS-in-JS solution. But perhaps we can set up some sort of CSS loader to inject it from a .css file into our bundle.

[chriddyp]

How about we include the CSS in the JS source code?

Yeah, I guess this works. I think I'd prefer an example that could work with Dash's existing system so that we could recommend Percy as a good solution for all component authors, but if we made this the standard way to import CSS then maybe this is OK.

maybe it is better in the long run for Dash - no more external stylesheets to fetch etc

Yeah, I could see a few advantages:

1. We could do automatic CSS minifying through the loader
2. Users wouldn't have to import the CSS into the index.html for their demo environment
3. One step closer to better offline-by-default components
4. In some cases, it might be faster to load

If we figure how to do this, then I'd like to make it a standard so that this repo is following our own conventions. That is, I'd like for us to update our other repos with the same system, our dash-component-boilerplate project, and our plugin documentation.

Any other thoughts on this @plotly/dash?

[wbrgss]

I think the simplest way to include CSS in the JS source code would be adding something like css-loader plus style-loader to webpack. This would be a natural way to inject existing CSS into the DOM using <style> tags with a few lines in the webpack config.

However, I'm not sure CSS-in-JS is a solution that will really resolve our Percy problems. Percy seems to have just as much trouble loading JS as CSS, even with the somewhat hidden enable_javascript flag. Unless it's in a DOM <script> tag in an analogous manner to the injected <style> tags.

[wbrgss]

Also @chriddyp looking at your trial-and-error commits above — from my own experience I'm not entirely convinced it's percy.ResourceLoader doing the actual work, but rather @T4rk1n's /assets loader.

[valentijnnieman]

@wbrgss @chriddyp Yep, that's what I did here #330 :) it works pretty well, just have to make sure I include everything.

[wbrgss]

@chriddyp Is this PR something that could complement @valentijnnieman's #330? Or does using the css-loader/style-loader pattern solve this? In the latter case we could close this PR without merging.

[chriddyp]

Yeah, we can close this. I would've liked to know how to properly configure Percy with external, local CSS files since it might come up again in the future in a different project, but for now this gets the job done 🔧