Merge remote-tracking branch 'origin/master' into modules-select-feed…

…back

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/package.json

@@ -92,7 +92,7 @@
     "uglifyjs-webpack-plugin": "^1.1.4",
     "url-loader": "^0.5.9",
     "webpack": "^3.8.1",
-    "webpack-dev-server": "^2.9.4",
+    "webpack-dev-server": "^2.10.0",
     "webpack-merge": "^4.1.0",
     "workbox-webpack-plugin": "^2.1.0"
   },

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/js/views/venues/VenueList.jsx

@@ -12,16 +12,20 @@ type Props = {
   onSelect: (Venue, string, HTMLElement) => void, // Called with venue name and venue URL (/venues/<venue>)
 };
 
-// $FlowFixMe: Flow doesn't have Intl typedefs https://github.com/facebook/flow/issues/1270
-const collator = new Intl.Collator('en', { sensitivity: 'base', numeric: true });
+const stringCompare =
+  // Feature detect Intl API
+  window.Intl && typeof window.Intl === 'object'
+    ? // $FlowFixMe: Flow doesn't have Intl typedefs https://github.com/facebook/flow/issues/1270
+      new Intl.Collator('en', { sensitivity: 'base', numeric: true }).compare
+    : (a, b) => a.localeCompare(b);
 
 export default function VenueList(props: Props) {
   const rowRefs: { [Venue]: HTMLElement } = {};
   const { venues, expandedVenue, onSelect } = props;
   const lowercaseExpandedVenue = expandedVenue.toLowerCase();
 
   // Case-insensitive, natural sort of venue names
-  const sortedVenueNames = Object.keys(venues).sort(collator.compare);
+  const sortedVenueNames = Object.keys(venues).sort(stringCompare);
 
   return (
     <ul className={styles.venueList}>

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';