Css order

[jmercier-lbi]

Dear currently JBrowse seem to use extract-text-webpack-plugin line 3484 which is deprecated and do not follow a precise order to apply css files.

As exaplained here are a workaround: webpack-contrib/extract-text-webpack-plugin#200 (comment)

But as this plugin is deprecated it should be better to use: https://github.com/webpack-contrib/mini-css-extract-plugin

Thanks for your works

[cmdcolin]

I am not sure if we actually use extract-text-webpack-plugin at all in our codebase. We have it listed in our devDependencies but I'm not sure if it is ever actually invoked. Is there a concern that you have seen about style loading in your experience or is it this issue just to avoid the deprecated module?

[cmdcolin]

It's important in my view to use proper css classes to make sure your css is more specific instead of relying on the CSS order. I would do this by adding an extra class to the document.body and then making your derived css selectors more specific based on that extra class. Relying on css loading order is probably an antipattern in my view

[cmdcolin]

Note also some plugins for themes like the jbrowse dark theme were written before the addition of the .jbrowse class to the jbrowse div which makes all jbrowse CSS more specific in effect than that plugins CSS, the plugins need to have the .jbrowse prefix to maintain specificity

[cmdcolin]

The .jbrowse class was added to the jbrowse div in version 1.14.0 for reference

[cmdcolin]

@jmercier-lbi do my comments make sense?

[cmdcolin]

I will close for now. If interested please feel free to comment back but it's just not necessarily an active jbrowse issue

[jmercier-lbi]

thanks