Fix CSS variable fallback (#676)

* Fix conflict between CSS modules and postcss-custom-properties

* Fix bad layout on iOS Safari 9

* Fix postcss-single-root plugin

* Minor tweaks

www/.postcssrc.js

@@ -1,9 +1,12 @@
+/* eslint-disable global-require, import/no-extraneous-dependencies */
 module.exports = {
-  plugins: {
-    autoprefixer: {},
-    "postcss-custom-properties": {
+  plugins: [
+    require('autoprefixer'),
+    require('postcss-custom-properties')({
       preserve: true, // Preserve the original CSS variable declaration
       warnings: false, // Ignore warnings about variables declared on non-:root selectors
-    }
-  }
+    }),
+    // Custom plugin used to remove extra ':root' rules
+    require('./scripts/postcss-single-root'),
+  ],
 };

www/scripts/postcss-single-root.js

@@ -0,0 +1,41 @@
+/**
+ * A custom PostCSS plugin that strips away extra :root declarations
+ *
+ * We need this for postcss-custom-properties plugin and CSS modules
+ * to work together properly, the ':root' CSS variable declaration
+ * block need to be duplicated at the top of every CSS module's styles.
+ *
+ * This leads to a huge number of ':root' styles being emitted, which
+ * isn't a huge problem in production since gzip can compress duplicate
+ * text blocks for free, but does make development harder, so we strip
+ * the extra ':root' rules using a PostCSS plugin.
+ */
+
+const postcss = require('postcss'); // eslint-disable-line import/no-extraneous-dependencies
+
+const rootSelectors = [':root', 'body.mode-dark'];
+
+module.exports = postcss.plugin('postcss-single-root', () => (css) => {
+  let isMainCSS = false;
+
+  css.walkComments((comment) => {
+    // Because PostCSS is run before css-loader, this plugin will receive a new
+    // CSS object for every CSS module. This means that it needs to identify
+    // which is the 'main.scss' file which it can then ignore so that it won't
+    // drop the rules from the 'real' css-variables.scss file
+    if (comment.text.includes('@postcss-single-root-entry')) {
+      isMainCSS = true;
+      return false;
+    }
+
+    return true;
+  });
+
+  if (isMainCSS) return;
+
+  css.walkRules((rule) => {
+    if (rootSelectors.includes(rule.selector)) {
+      rule.remove();
+    }
+  });
+});

www/src/styles/bootstrap/style-override.scss

@@ -73,8 +73,6 @@ mark {
 }
 
 // Alerts
-$alert-override-themes: success, danger, warning;
-
 @mixin alert-colors($name) {
   .alert-#{$name} {
     color: var(--alert-#{$name}-color);

www/src/styles/constants.scss

@@ -26,6 +26,8 @@ $material-sharp-curve: cubic-bezier(0.4, 0, 0.6, 1);
 $page-entering-duration: $fullscreen-duration;
 $page-entering-animation: fadeIn;
 
+$alert-override-themes: success, danger, warning;
+
 // Workload colors map
 $workload-colors: (
   lecture: #bbdefb,

www/src/styles/layout/site.scss

@@ -1,12 +1,17 @@
 // This file contains the styles for the overall site
-html,
-body,
-#app,
-.app-container {
-  // Ensures the page always fill the height of the page. Combined with the
-  // flexbox on .app-container, this allows the footer to be aligned to the
-  // page bottom when there's insufficient page content
-  height: 100%;
+
+// HACK: Stops this rule from activating on small screens - mainly to stop
+// this from running on iOS Safari 9
+@media (min-height: 50rem) {
+  html,
+  body,
+  #app,
+  .app-container {
+    // Ensures the page always fill the height of the page. Combined with the
+    // flexbox on .app-container, this allows the footer to be aligned to the
+    // page bottom when there's insufficient page content
+    height: 100%;
+  }
 }
 
 body {

www/src/styles/main.scss

@@ -1,3 +1,5 @@
+/* @postcss-single-root-entry */
+
 // Define our own mixins, functions and constants first
 @import 'utils/mixins';
 @import 'utils/functions';
@@ -10,11 +12,11 @@
 @import "material/material";
 
 // Utils
+@import 'utils/css-variables';
 @import 'utils/animations';
 @import 'utils/workload';
 @import 'utils/themes';
 @import 'utils/scrollable';
-@import 'utils/css-variables';
 
 // Layout
 @import 'layout/site';

www/src/styles/utils/modules-entry.scss

@@ -8,3 +8,4 @@
 
 @import 'mixins';
 @import 'functions';
+@import 'css-variables';