hotfix for sass-variable-import-into-js breakage as part of our depen…

…dency upgrades -- see facebook/create-react-app#10047 for details

src/common/styles/_layout.scss

@@ -15,19 +15,3 @@ $lg-height-min: 48.875rem;
 $whenPageIsMediumHeightAndWidth: '(min-height: #{$md-height-min}) and (min-width: #{$md-layout-width-min})';
 $whenPageIsTallAndMediumWidth: '(min-width: #{$md-layout-width-min}) and (min-height: #{$lg-height-min})';
 $whenPageIsIsTallAndWide: '(min-width: #{$lg-layout-width-min}) and (min-height: #{$lg-height-min})';
-
-
-/* webpack export statement exposes these variables to our JS files */
-:export {
-  extraLargeWidthMin: $xl-layout-width-min;
-  largeHeightMin: $lg-height-min;
-  largeWidthMin: $lg-layout-width-min;
-  mediumHeightMax: $md-height-max;
-  mediumHeightMin: $md-height-min;
-  mediumWidthMin: $md-layout-width-min;
-  mediumWidthMax: $md-layout-width-max;
-  pageIsAtMediumHeightAndWidth: $whenPageIsMediumHeightAndWidth;
-  pageIsTallAndMediumWidth: $whenPageIsTallAndMediumWidth;
-  pageIsTallAndWide: $whenPageIsIsTallAndWide;
-  smallHeightMax: $sm-height-max;
-}

src/common/styles/layout.module.scss

@@ -0,0 +1,17 @@
+@import './_layout.scss';
+
+/* webpack export statement exposes these variables to our JS files */
+/* we have to do this in a separate *.module.scss file because of this bug https://github.com/facebook/create-react-app/issues/10047 */
+:export {
+  extraLargeWidthMin: $xl-layout-width-min;
+  largeHeightMin: $lg-height-min;
+  largeWidthMin: $lg-layout-width-min;
+  mediumHeightMax: $md-height-max;
+  mediumHeightMin: $md-height-min;
+  mediumWidthMin: $md-layout-width-min;
+  mediumWidthMax: $md-layout-width-max;
+  pageIsAtMediumHeightAndWidth: $whenPageIsMediumHeightAndWidth;
+  pageIsTallAndMediumWidth: $whenPageIsTallAndMediumWidth;
+  pageIsTallAndWide: $whenPageIsIsTallAndWide;
+  smallHeightMax: $sm-height-max;
+}

src/constants/index.js

@@ -3,7 +3,7 @@ import { toast } from 'react-toastify';
 import { buildbranch, buildnum } from '../../package.json';
 import { INITIAL_FILTER_STATE } from '../ducks/event-filter';
 
-import layoutVariables from '../common/styles/_layout.scss';
+import layoutVariables from '../common/styles/layout.module.scss';
 
 const { POSITION: TOAST_POSITIONS } = toast;