From ad299f6b6d55561ba006525b77101cff6b9cbc67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anders=20Fredrik=20Ki=C3=A6r?= <akia@statoil.com>
Date: Fri, 7 Feb 2020 16:10:44 +0100
Subject: [PATCH] Separate CSS file on build

---
 MANIFEST.in                           |  1 +
 dash_core_components_base/__init__.py | 10 +++++++++-
 package.json                          |  4 +++-
 webpack.config.js                     | 20 +++++++++++++-------
 4 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/MANIFEST.in b/MANIFEST.in
index 31a1634fd..ed2745fe8 100644
--- a/MANIFEST.in
+++ b/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
diff --git a/dash_core_components_base/__init__.py b/dash_core_components_base/__init__.py
index 12bea5315..2689a19f3 100644
--- a/dash_core_components_base/__init__.py
+++ b/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)
\ No newline at end of file
+    setattr(locals()[_component], '_js_dist', _js_dist)
+    setattr(locals()[_component], '_css_dist', _css_dist)
diff --git a/package.json b/package.json
index 3f2b3c6b5..cf8f0942c 100644
--- a/package.json
+++ b/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",
diff --git a/webpack.config.js b/webpack.config.js
index 166cc0450..f2f11e1d5 100644
--- a/webpack.config.js
+++ b/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']
             })
         ]
     }
-};
\ No newline at end of file
+};