Extraxt css into a file (#3412)

superdesk · Apr 14, 2020 · e580f9b · e580f9b
1 parent fbe7966
commit e580f9b
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 22 deletions.
diff --git a/index.html.js b/index.html.js
@@ -10,6 +10,7 @@ module.exports = function buildIndex(o) {
             <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
             ${o.qumu ? '<script src="https://video.fidelity.tv/widgets/1/application.js"></script>' : ''}
             <link rel="icon" type="image/x-icon" href="images/favicon.ico" />
+            <link rel="stylesheet" type="text/css" href="app.bundle.css">
           </head>
           <body ng-class="config.bodyClass">
             <div sd-superdesk-view></div>

diff --git a/package.json b/package.json
@@ -64,6 +64,7 @@
     "end-to-end-testing-helpers": "^1.0.5",
     "eslint": "6.6.0",
     "eslint-plugin-react": "7.16.0",
+    "extract-text-webpack-plugin": "3.0.2",
     "file-loader": "1.1.11",
     "git-rev-sync": "1.10.0",
     "gridster": "0.5.6",

diff --git a/scripts/index.ts b/scripts/index.ts
@@ -1,4 +1,16 @@
+// extract-text-webpack-plugin messes up the import order
+// when importing from SCSS files, but it works when importing from js
+// if you need some styles to go at the top/bottom, import it here
+
 import 'app.scss'; // styles
+
+import 'jquery-jcrop/css/jquery.Jcrop.css';
+import 'jquery-ui/themes/smoothness/jquery-ui.css';
+import 'medium-editor/dist/css/medium-editor.css';
+import 'medium-editor-tables/dist/css/medium-editor-tables.css';
+import 'owl.carousel/dist/assets/owl.carousel.min.css';
+import 'superdesk-ui-framework/dist/superdesk-ui.bundle.css';
+
 import 'vendor';
 import 'core';
 import 'templates-cache.generated'; // generated by grunt 'ngtemplates' task

diff --git a/spec/_unstable-tests.txt b/spec/_unstable-tests.txt
@@ -1,3 +1,6 @@
 content can open package using hotkey ctrl+0
+authoring can send and publish
 editor3 ctrl+z on tables mantains cursor position in the middle
 monitoring can close already opened preview on an item action
+editor3 can edit body with toolbar
+monitoring can display the item in Desk Output when it's published in a production desk
diff --git a/styles/sass/app.scss b/styles/sass/app.scss
@@ -1,4 +1,6 @@
-// NOTE: file extension is not needed for importing .scss files
+// extract-text-webpack-plugin messes up the import order
+// when importing from SCSS files, but it works when importing from js
+// if you need some styles to go at the top/bottom, import it from index.ts
 
 // Roboto font import
 @import url(//fonts.googleapis.com/css?family=Roboto+Mono:400,300,500,700,300italic,400italic,500italic,700italic&subset=latin,latin-ext);
@@ -52,14 +54,6 @@
 // Components: Misc
 @import 'labels';
 
-// Vendor
-@import '~jquery-jcrop/css/jquery.Jcrop.css';
-@import '~jquery-ui/themes/smoothness/jquery-ui.css';
-@import '~medium-editor/dist/css/medium-editor.css';
-@import '~medium-editor-tables/dist/css/medium-editor-tables.css';
-@import '~owl.carousel/dist/assets/owl.carousel.min.css';
-@import '~superdesk-ui-framework/dist/superdesk-ui.bundle.css';
-
 @import 'medium-editor'; // custom skin for medium-editor
 @import 'sf-additional';
 @import 'sf-icons';

diff --git a/tasks/options/filerev.js b/tasks/options/filerev.js
@@ -8,4 +8,8 @@ module.exports = {
         src: '<%= distDir %>/*.js',
         dest: '<%= distDir %>/',
     },
+    css: {
+        src: '<%= distDir %>/*.css',
+        dest: '<%= distDir %>/',
+    },
 };
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,6 +1,7 @@
 var path = require('path');
 var webpack = require('webpack');
 var lodash = require('lodash');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 function countOccurences(_string, substring) {
     return _string.split(substring).length - 1;
@@ -51,6 +52,9 @@ module.exports = function makeConfig(grunt) {
             new webpack.DefinePlugin({
                 __SUPERDESK_CONFIG__: JSON.stringify(sdConfig),
             }),
+            new ExtractTextPlugin({
+                filename: '[name].bundle.css',
+            }),
         ],
 
         resolve: {
@@ -107,19 +111,29 @@ module.exports = function makeConfig(grunt) {
                     loader: 'html-loader',
                 },
                 {
-                    test: /\.css$/,
-                    use: [
-                        'style-loader',
-                        'css-loader',
-                    ],
-                },
-                {
-                    test: /\.scss$/,
-                    use: [
-                        'style-loader',
-                        'css-loader',
-                        'sass-loader',
-                    ],
+                    test: /\.(css|scss)$/i,
+                    use: ExtractTextPlugin.extract({
+                        fallback: [{
+                            loader: 'style-loader',
+                            options: {
+                                sourceMap: true,
+                            },
+                        }],
+                        use: [
+                            {
+                                loader: 'css-loader',
+                                options: {
+                                    sourceMap: true,
+                                },
+                            },
+                            {
+                                loader: 'sass-loader',
+                                options: {
+                                    sourceMap: true,
+                                },
+                            },
+                        ],
+                    }),
                 },
                 {
                     test: /\.json$/,