From a418f63a44599addc5990f3a353dae51f17fdcc3 Mon Sep 17 00:00:00 2001
From: n1474335 <n1474335@gmail.com>
Date: Thu, 18 May 2017 23:24:24 +0100
Subject: [PATCH] Added postcss-loader to provide fallbacks for older browsers

---
 Gruntfile.js                            |  8 +++--
 package.json                            |  3 ++
 src/web/index.js                        |  2 +-
 src/web/stylesheets/index.js            | 18 ++++++++++
 src/web/stylesheets/main.js             | 44 -------------------------
 src/web/stylesheets/themes/_classic.css |  1 +
 6 files changed, 29 insertions(+), 47 deletions(-)
 create mode 100644 src/web/stylesheets/index.js
 delete mode 100644 src/web/stylesheets/main.js

diff --git a/Gruntfile.js b/Gruntfile.js
index 142e642..8512a9b 100755
--- a/Gruntfile.js
+++ b/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" }
                                 ]
                             })
diff --git a/package.json b/package.json
index dc62df7..d7b07f9 100644
--- a/package.json
+++ b/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",
diff --git a/src/web/index.js b/src/web/index.js
index d0894e9..0de4520 100755
--- a/src/web/index.js
+++ b/src/web/index.js
@@ -5,7 +5,7 @@
  */
 
 // Styles
-import "./stylesheets/main.js";
+import "./stylesheets/index.js";
 
 // Libs
 import "babel-polyfill";
diff --git a/src/web/stylesheets/index.js b/src/web/stylesheets/index.js
new file mode 100644
index 0000000..8e5bbc8
--- /dev/null
+++ b/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";
diff --git a/src/web/stylesheets/main.js b/src/web/stylesheets/main.js
deleted file mode 100644
index e99946a..0000000
--- a/src/web/stylesheets/main.js
+++ /dev/null
@@ -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";
diff --git a/src/web/stylesheets/themes/_classic.css b/src/web/stylesheets/themes/_classic.css
index 96684a3..9aa9acd 100755
--- a/src/web/stylesheets/themes/_classic.css
+++ b/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;