-
-
Notifications
You must be signed in to change notification settings - Fork 143
Load CSS in webpack with style-loader and css-loader #330
Conversation
Ok, that does do something. I guess to really know if this is a suitable solution I'd need to also add the |
|
Alright, well, the Percy snapshots show it's working. They just look a little odd. Will check it out more tomorrow! |
Note that we'll always have some artifacts in the rendering. Percy needs for all of the styles to be present on the page (in the actual DOM) so if any of the components update the styles through JS in a way that doesn't persist the styles inline (i.e. the style is only in memory), then the styles won't appear in the image diff (since percy just downloads the HTML on the page). For example, these icons in the corner are from plotly.js's modebar. If you inspect-element these icons, you'll see that their styles aren't persisted in the SVG in the DOM, and so in the screenshot they're just jumbled in the corner. |
@chriddyp Interesting, I always wondered about those icons in the corner :) in this setup, if you run the gallery test as a standalone Dash app, it still looks different from the Percy snapshots. here's the gallery as a Dash app code for convenience:
@wbrgss Do you have any insights into what's going on here? |
@valentijnnieman Looks good to me now that I know webpack.config.js already has a rule for css files! As for when the styles get loaded, except if you have lazy execution, they should be loaded into the DOM shortly after the bundle was added as the entire dependency chain will be evaluated upon download by the browser. |
42f661d
to
5b9bb5b
Compare
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.
Overall a clean and sensible import pattern that makes a net improvement to the Percy diffs, so 💃 from me. Especially as style-loader
and css-loader
are already there, as @Marc-Andre-Rivet pointed out.
I'd like to get @chriddyp's thoughts on standardising this pattern. To quote a comment in #312:
|
95794bf
to
6581c37
Compare
6581c37
to
73f8fe3
Compare
Remove external css_dist refs to moved css files Add react-virtualized css to Dropdown and remove css_dist dep Version bump to 0.38.0 Load CSS in webpack with style-loader and css-loader Remove external css_dist refs to moved css files Add react-virtualized css to Dropdown and remove css_dist dep Version bump to 0.38.0
73f8fe3
to
105a418
Compare
@chriddyp Here's a little test to see what happens in Percy when we load the CSS using Webpack plugins
style-loader
andcss-loader
. These plugins take the CSS we require in JS usingimport './filename.css';
and injects it into the HTML.Edit: as talked about in #312