Added postcss-loader to provide fallbacks for older browsers

Gruntfile.js

@@ -182,14 +182,18 @@ module.exports = function (grunt) {
                         {
                             test: /\.css$/,
                             use: ExtractTextPlugin.extract({
-                                use: "css-loader?minimize"
+                                use: [
+                                    { loader: "css-loader?minimize" },
+                                    { loader: "postcss-loader" },
+                                ]
                             })
                         },
                         {
                             test: /\.less$/,
-                            loader: ExtractTextPlugin.extract({
+                            use: ExtractTextPlugin.extract({
                                 use: [
                                     { loader: "css-loader?minimize" },
+                                    { loader: "postcss-loader" },
                                     { loader: "less-loader" }
                                 ]
                             })

package.json

@@ -55,6 +55,9 @@
     "jsdoc-babel": "^0.3.0",
     "less": "^2.7.2",
     "less-loader": "^4.0.3",
+    "postcss-css-variables": "^0.7.0",
+    "postcss-import": "^10.0.0",
+    "postcss-loader": "^2.0.5",
     "style-loader": "^0.15.0",
     "url-loader": "^0.5.8",
     "web-resource-inliner": "^4.1.0",

src/web/index.js

@@ -5,7 +5,7 @@
  */
 
 // Styles
-import "./stylesheets/main.js";
+import "./stylesheets/index.js";
 
 // Libs
 import "babel-polyfill";

src/web/stylesheets/index.js

@@ -0,0 +1,18 @@
+/**
+ * Styles index
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+/* Libraries */
+import "google-code-prettify/src/prettify.css";
+
+/* Frameworks */
+import "./vendors/bootstrap.less";
+import "bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css";
+import "bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css";
+
+/* CyberChef styles */
+import "./index.css";

src/web/stylesheets/main.js

@@ -1,44 +0,0 @@
-/**
- * Styles index
- *
- * @author n1474335 [n1474335@gmail.com]
- * @copyright Crown Copyright 2017
- * @license Apache-2.0
- */
-
-/* Libraries */
-import "google-code-prettify/src/prettify.css";
-
-/* Frameworks */
-import "./vendors/bootstrap.less";
-import "bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css";
-import "bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css";
-
-
-/* CyberChef styles */
-/* Themes */
-import "./themes/_classic.css";
-import "./themes/_dark.css";
-
-/* Utilities */
-import "./utils/_overrides.css";
-import "./utils/_general.css";
-
-/* Preloader styles */
-import "./preloader.css";
-
-/* Components */
-import "./components/_alert.css";
-import "./components/_button.css";
-import "./components/_list.css";
-import "./components/_operation.css";
-import "./components/_pane.css";
-
-/* Layout */
-import "./layout/_banner.css";
-import "./layout/_controls.css";
-import "./layout/_io.css";
-import "./layout/_modals.css";
-import "./layout/_operations.css";
-import "./layout/_recipe.css";
-import "./layout/_structure.css";

src/web/stylesheets/themes/_classic.css

@@ -6,6 +6,7 @@
  * @license Apache-2.0
  */
 
+:root,
 :root.classic {
     --primary-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     --primary-font-colour: #333;