Merge pull request #335 from plotly/css-include-order

CSS/JS external resources loaded before the assets

Author: T4rk1n

.circleci/config.yml

@@ -10,8 +10,13 @@ jobs:
 
     steps:
       - checkout
+
+      - run:
+          name: Write deps cache key
+          command: cat "$REQUIREMENTS_FILE" > reqs.txt
+
       - restore_cache:
-          key: deps1-{{ .Branch }}-{{ checksum "dev-requirements.txt" }}
+          key: deps1-{{ .Branch }}-{{ checksum "reqs.txt" }}
 
       - run:
           name: Install dependencies
@@ -22,7 +27,7 @@ jobs:
               pip install -r $REQUIREMENTS_FILE
 
       - save_cache:
-          key: deps1-{{ .Branch }}-{{ checksum "dev-requirements.txt" }}
+          key: deps1-{{ .Branch }}-{{ checksum "reqs.txt" }}
           paths:
               - "venv"
 

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.25.1 - 2018-08-20
+## Fixed
+- Ensure CSS/JS external resources are loaded before the assets. [#335](https://github.com/plotly/dash/pull/335)
+
 ## 0.25.0 - 2018-08-14
 ## Added
 - Take configs values from init or environ variables (Prefixed with `DASH_`). [#322](https://github.com/plotly/dash/pull/322)

dash/dash.py

@@ -331,9 +331,8 @@ def _relative_url_path(relative_package_path='', namespace=''):
         return srcs
 
     def _generate_css_dist_html(self):
-        links = self._collect_and_register_resources(
-            self.css.get_all_css()
-        ) + self._external_stylesheets
+        links = self._external_stylesheets + \
+                self._collect_and_register_resources(self.css.get_all_css())
 
         return '\n'.join([
             _format_tag('link', link, opened=True)
@@ -353,13 +352,11 @@ def _generate_scripts_html(self):
         srcs = self._collect_and_register_resources(
             self.scripts._resources._filter_resources(
                 dash_renderer._js_dist_dependencies
-            ) +
-            self.scripts.get_all_scripts() +
-            self.scripts._resources._filter_resources(
-                dash_renderer._js_dist
-            )
-        )
-        srcs = srcs[:-1] + self._external_scripts + [srcs[-1]]
+            )) + self._external_scripts + self._collect_and_register_resources(
+                self.scripts.get_all_scripts() +
+                self.scripts._resources._filter_resources(
+                    dash_renderer._js_dist
+                ))
 
         return '\n'.join([
             _format_tag('script', src)

dash/version.py

@@ -1 +1 @@
-__version__ = '0.25.0'
+__version__ = '0.25.1'

dev-requirements.txt

@@ -1,4 +1,4 @@
-dash_core_components>=0.4.0
+dash_core_components>=0.27.1
 dash_html_components>=0.12.0rc3
 dash_flow_example==0.0.3
 dash-dangerously-set-inner-html

tests/assets/load_first.js

@@ -1 +1,7 @@
-window.tested = ['load_first'];
+window.tested = ['load_first'];
+var ramdaTest = document.getElementById('ramda-test');
+if (ramdaTest) {
+    ramdaTest.innerHTML = R.join(' ', R.concat(['hello'], ['world']).map(function(x) {
+        return _.capitalize(x);
+    }));
+}

tests/assets/reset.css

@@ -1 +1,2 @@
 body {margin: 0;}
+button {height: 18px}

tests/test_integration.py

@@ -452,11 +452,17 @@ def test_external_files_init(self):
             'https://www.google-analytics.com/analytics.js',
             {'src': 'https://cdn.polyfill.io/v2/polyfill.min.js'},
             {
-                'src': 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.core.js',
-                'integrity': 'sha256-Qqd/EfdABZUcAxjOkMi8eGEivtdTkh3b65xCZL4qAQA=',
+                'src': 'https://cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js',
+                'integrity': 'sha256-YN22NHB7zs5+LjcHWgk3zL0s+CRnzCQzDOFnndmUamY=',
+                'crossorigin': 'anonymous'
+            },
+            {
+                'src': 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js',
+                'integrity': 'sha256-VKITM616rVzV+MI3kZMNUDoY5uTsuSl1ZvEeZhNoJVk=',
                 'crossorigin': 'anonymous'
             }
         ]
+
         css_files = [
             'https://codepen.io/chriddyp/pen/bWLwgP.css',
             {
@@ -467,8 +473,30 @@ def test_external_files_init(self):
             }
         ]
 
-        app = dash.Dash(
-            external_scripts=js_files, external_stylesheets=css_files)
+        app = dash.Dash(__name__,
+                        external_scripts=js_files,
+                        external_stylesheets=css_files)
+
+        app.index_string = '''
+        <!DOCTYPE html>
+        <html>
+            <head>
+                {%metas%}
+                <title>{%title%}</title>
+                {%css%}
+            </head>
+            <body>
+                <div id="tested"></div>
+                <div id="ramda-test"></div>
+                <button type="button" id="btn">Btn</button>
+                {%app_entry%}
+                <footer>
+                    {%config%}
+                    {%scripts%}
+                </footer>
+            </body>
+        </html>
+        '''
 
         app.layout = html.Div()
 
@@ -482,3 +510,13 @@ def test_external_files_init(self):
                 (("//script[@src='{}']", x) for x in js_urls),
                 (("//link[@href='{}']", x) for x in css_urls)):
             self.driver.find_element_by_xpath(fmt.format(url))
+
+        # Ensure the button style was overloaded by reset (set to 38px in codepen)
+        btn = self.driver.find_element_by_id('btn')
+        btn_height = btn.value_of_css_property('height')
+
+        self.assertEqual('18px', btn_height)
+
+        # ensure ramda was loaded before the assets so they can use it.
+        lo_test = self.driver.find_element_by_id('ramda-test')
+        self.assertEqual('Hello World', lo_test.text)