Merge pull request #382 from plotly/hotfix-style-loader

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

Author: valentijnnieman

CHANGELOG.md

@@ -5,6 +5,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ## [0.38.1] - 2018-11-21
 ### Fixed
 - Refactored the way the Graph component would generate an unique id if none provided.
+- Default CSS imported via `style-loader` is now placed at top, so that user supplied CSS can overwrite it, fixes [#380](https://github.com/plotly/dash-core-components/issues/380)
 
 ## [0.38.0] - 2018-11-07
 ### Fixed

dash_core_components/dash_core_components.dev.js

@@ -25,7 +25,11 @@ def setUpClass(cls):
             options.binary_location = os.environ['DASH_TEST_CHROMEPATH']
 
         cls.driver = webdriver.Chrome(chrome_options=options)
-        loader = percy.ResourceLoader(webdriver=cls.driver)
+        loader = percy.ResourceLoader(
+            webdriver=cls.driver,
+            base_url='/assets',
+            root_dir='test/assets'
+        )
         cls.percy_runner = percy.Runner(loader=loader)
         cls.percy_runner.initialize_build()
 

dash_core_components/dash_core_components.min.js

@@ -0,0 +1,4 @@
+.test-input-css input {
+    width: 420px;
+    border-color: hotpink;
+}

test/IntegrationTests.py

@@ -1320,3 +1320,13 @@ def on_ts(ts, data):
         list_btn.click()
         time.sleep(1)
         self.wait_for_text_to_equal('#output', json.dumps(nested_list))
+
+    def test_user_supplied_css(self):
+        app = dash.Dash(assets_folder='test/assets')
+
+        app.layout = html.Div(className="test-input-css", children=[dcc.Input()])
+
+        self.startServer(app)
+
+        self.wait_for_element_by_css_selector('.test-input-css')
+        self.snapshot('styled input - width: 100%, border-color: hotpink')

test/assets/testing.css

@@ -66,6 +66,9 @@ module.exports = (env, argv) => {
                     use: [
                         {
                             loader: 'style-loader',
+                            options: {
+                                insertAt: 'top'
+                            }
                         },
                         {
                             loader: 'css-loader',