Separate CSS file on build

Author: Anders Fredrik Kiær

MANIFEST.in

@@ -1,3 +1,4 @@
+include dash_core_components/dash_core_components.css
 include dash_core_components/dash_core_components.min.js
 include dash_core_components/dash_core_components.min.js.map
 include dash_core_components/dash_core_components-shared.js

dash_core_components_base/__init__.py

@@ -135,5 +135,13 @@
     },
 ])
 
+_css_dist = [
+    {
+        'relative_package_path': '{}.css'.format(__name__),
+        'namespace': 'dash_core_components',
+    }
+]
+
 for _component in __all__:
-    setattr(locals()[_component], '_js_dist', _js_dist)
+    setattr(locals()[_component], '_js_dist', _js_dist)
+    setattr(locals()[_component], '_css_dist', _css_dist)

package.json

@@ -78,13 +78,15 @@
     "exec-sh": "^0.3.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.5.0",
+    "mini-css-extract-plugin": "^0.9.0",
     "npm-run-all": "^4.1.5",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
     "prettier": "^1.14.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-jsx-parser": "^1.21.0",
     "react-resize-detector": "^4.2.1",
-    "style-loader": "^0.23.1",
+    "style-loader": "^1.0.0",
     "styled-jsx": "^3.1.1",
     "terser-webpack-plugin": "^2.3.0",
     "webpack": "^4.37.0",

webpack.config.js

@@ -1,5 +1,7 @@
 const path = require('path');
 const TerserPlugin = require('terser-webpack-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 const webpack = require('webpack');
 const WebpackDashDynamicImport = require('@plotly/webpack-dash-dynamic-import');
 
@@ -82,10 +84,10 @@ module.exports = (env, argv) => {
                     test: /\.css$/,
                     use: [
                         {
-                            loader: 'style-loader',
-                            options: {
-                                insertAt: 'top'
-                            }
+                            loader:
+                                mode === "production"
+                                    ? MiniCssExtractPlugin.loader
+                                    : "style-loader",
                         },
                         {
                             loader: 'css-loader',
@@ -109,7 +111,8 @@ module.exports = (env, argv) => {
                         warnings: false,
                         ie8: false
                     }
-                })
+                }),
+                new OptimizeCSSAssetsPlugin({})
             ],
             splitChunks: {
                 name: true,
@@ -131,11 +134,14 @@ module.exports = (env, argv) => {
             }
         },
         plugins: [
-            new WebpackDashDynamicImport(),
+            new MiniCssExtractPlugin({
+                filename: `${dashLibraryName}.css`,
+            }),
+            //new WebpackDashDynamicImport(),
             new webpack.SourceMapDevToolPlugin({
                 filename: '[file].map',
                 exclude: ['async~plotlyjs']
             })
         ]
     }
-};
+};