Insert style-loader loaded CSS at top of <head/>

[valentijnnieman]

This fixes and closes #380 by inserting the default CSS loaded by style-loader at the top of <head/>, so that user loaded CSS will be below it, allowing users to overwrite the default CSS.

[chriddyp]

Could we add an integration test with percy here? Something that mimics the user code by supplying some CSS in the assets/ folder that overrides a dash core component style.

[valentijnnieman]

@chriddyp Good point - I've added one. I tried to do some assertions on the CSS being set, but couldn't get it to work. The suggested value_of_css_property() returned incorrect values - rgb(0,0,0) for colors and 1184px for widths - no matter what it was.

Edit: Ok, seems the Percy snapshot isn't picking up the CSS changes either - even though running the test locally you can see them be set.

[chriddyp]

Seems the Percy snapshot isn't picking up the CSS changes either

With percy, you need to explicitly set the CSS folder and CSS URL. From #312:

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 . Percy won't download these links, it needs us to supply their location on the filesystem (a mapping between the URL and the filenames).

See the percy Setup docs here: https://docs.percy.io/docs/python-selenium

You can also reach out to the percy team if you can't get those settings to work.

[valentijnnieman]

@chriddyp Is it working in the main dash repo? I see that in Dash there's a test/assets folder, https://github.com/plotly/dash/tree/master/tests/assets but I can't figure out how that's working / what the set up is.

[chriddyp]

Is it working in the main dash repo?

Not sure off the top of my head. You might be able to check out the Percy snapshots in that repo and see they look like they have custom css applied.

[chriddyp]

Also, looking at git blame, @T4rk1n was the last one to work in the dash/tests/assets folder, so he can help answer your questions about that part of the code

[T4rk1n]

Just tested and it doesn't load the assets in the dash tests percy snapshots.

[valentijnnieman]

Just tested and it doesn't load the assets in the dash tests percy snapshots.

Ah too bad. Thanks for taking a look!

[T4rk1n]

But I got them to load with this config:

loader = percy.ResourceLoader(
            webdriver=cls.driver,
            base_url='/assets',
            root_dir='tests/assets'
        )

https://percy.io/plotly/dash/builds/1182426?utm_campaign=plotly&utm_content=dash&utm_source=github_status

[valentijnnieman]

@T4rk1n Anything else you've changed? I still can't get them to load.

[T4rk1n]

No only thing I see different is the root_dir is relative 'test/assets'.

[T4rk1n]

Here you can see the whole changes:

plotly/dash#461

[valentijnnieman]

@T4rk1n That was it - removing the root_static_dir suggested by the Percy docs and having the root_dir relative fixed it. Thanks for your help!

[T4rk1n]

Great, look like it worked 💃

You can review plotly/dash#461 while you are at it ?