Load CSS in webpack with style-loader and css-loader

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.38.0] - 2018-11-07
+### Fixed
+- Changed the way the default CSS files for some components are loaded to being loaded with webpack instead of as dependencies.
+
 ## [0.37.2] - 2018-11-07
 ### Changed
 - Updated `react-select` to version `2.1.0`
@@ -399,6 +403,7 @@ As part of the plotly.js upgrade:
 - Broken sourcemaps for debugging.
 ### Added
 - Testing configuration for CHROMEPATH and SERVER_PROCESSES
+
 ## [0.22.1] - 2018-04-09
 ### Fixed
 - Various bugs with the `ohlc` and `candlestick` chart type in the `dcc.Graph`

dash_core_components/__init__.py

@@ -50,28 +50,5 @@
     }
 ]
 
-
-_css_dist = [
-    {
-        'relative_package_path': [
-            '[email protected]',
-            '[email protected]',
-            '[email protected]',
-            '[email protected]',
-            '[email protected]'
-        ],
-        'external_url': [
-            'https://unpkg.com/[email protected]/dist/react-select.min.css',
-            'https://unpkg.com/[email protected]/styles.css',
-            'https://unpkg.com/[email protected]/styles.css',
-            'https://unpkg.com/[email protected]/assets/index.css',
-            'https://unpkg.com/dash-core-components@{}/dash_core_components/[email protected]'.format(__version__)
-        ],
-        'namespace': 'dash_core_components'
-    }
-]
-
-
 for _component in __all__:
     setattr(locals()[_component], '_js_dist', _js_dist)
-    setattr(locals()[_component], '_css_dist', _css_dist)

dash_core_components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-core-components",
-  "version": "0.37.2",
+  "version": "0.38.0",
   "description": "Core component suite for Dash",
   "repository": {
     "type": "git",

dash_core_components/version.py

@@ -1 +1 @@
-__version__ = '0.37.2'
+__version__ = '0.38.0'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-core-components",
-  "version": "0.37.2",
+  "version": "0.38.0",
   "description": "Core component suite for Dash",
   "repository": {
     "type": "git",

src/components/DatePickerRange.react.js

@@ -3,6 +3,7 @@ import moment from 'moment';
 import PropTypes from 'prop-types';
 import R from 'ramda';
 import React, {Component} from 'react';
+import './css/[email protected]';
 
 /**
  * DatePickerRange is a tailor made component designed for selecting

src/components/Dropdown.react.js

@@ -3,6 +3,8 @@ import R, {omit} from 'ramda';
 import React, {Component} from 'react';
 import ReactDropdown from 'react-virtualized-select';
 import createFilterOptions from 'react-select-fast-filter-options';
+import './css/[email protected]';
+import './css/[email protected]';
 
 // Custom tokenizer, see https://github.com/bvaughn/js-search/issues/43
 // Split on spaces

src/components/RadioItems.react.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
+import './css/[email protected]';
 
 /**
  * RadioItems is a component that encapsulates several radio item inputs.

src/components/Slider.react.js

@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import ReactSlider from 'rc-slider';
 import PropTypes from 'prop-types';
 import {omit} from 'ramda';
+import './css/[email protected]';
 
 /**
  * A slider component with a single handle.