Remove non-pure css selectors from scss modules (#145)

Author: colbychaskell

next.config.js

@@ -11,28 +11,6 @@ const {
 
 const scenariosFilePath = path.join(".", "scenarios.json");
 
-// See https://github.com/vercel/next.js/issues/10142#issuecomment-648974042
-const hackStylesToSupportNonPureDeclarations = (config) => {
-    const oneOf = config.module.rules.find((rule) => typeof rule.oneOf === "object");
-
-    const fixUse = (use) => {
-        const { loader, options } = use;
-        if (options && options.modules && loader && loader.indexOf("css-loader") >= 0) {
-            options.modules.mode = "local";
-        }
-    };
-
-    if (oneOf) {
-        oneOf.oneOf.forEach((rule) => {
-            if (Array.isArray(rule.use)) {
-                rule.use.map(fixUse);
-            } else if (rule.use && rule.use.loader) {
-                fixUse(rule.use);
-            }
-        });
-    }
-};
-
 const loadScenariosJsonStringFromFile = () => {
     return fs.readFileSync(scenariosFilePath);
 };
@@ -79,7 +57,6 @@ module.exports = (phase) => {
             if (shouldWriteScenariosWithWebpack) {
                 config.plugins.push(createWriteScenariosPlugin());
             }
-            hackStylesToSupportNonPureDeclarations(config);
             return config;
         },
     };

package-lock.json

@@ -50,6 +50,7 @@
     "@types/heap": "^0.2.34",
     "@types/node": "^22.10.2",
     "@types/react": "^18.0.0",
+    "@types/smoothscroll-polyfill": "^0.3.4",
     "@typescript-eslint/eslint-plugin": "^7.3.0",
     "@typescript-eslint/parser": "^7.3.0",
     "ajv": "^7.2.4",

package.json

@@ -4,6 +4,7 @@
     display: flex;
     flex-direction: column;
     min-height: 100vh;
+
     @include mobile {
         font-size: 15px;
     }
@@ -18,6 +19,7 @@
     color: white;
     overflow: hidden;
     z-index: 2;
+
     @include mobile {
         flex-direction: column;
         align-items: flex-start;
@@ -30,12 +32,15 @@
     display: flex;
     align-items: center;
     font-size: 16px;
+
     a,
     a:hover {
         color: white;
     }
+
     a {
         text-decoration: none;
+
         &:hover {
             text-decoration: underline;
         }
@@ -45,7 +50,8 @@
 .breadcrumb {
     display: flex;
     align-items: center;
-    > span {
+
+    >span {
         line-height: 1em;
         margin: 0 10px;
     }

src/components/AppFrame/AppFrame.module.scss

@@ -1,16 +1,7 @@
 @import '../../styles/base.scss';
 
-:root {
-    --arrival-width: 8px;
-}
-
-@include mobile {
-    :root {
-        --arrival-width: 6px;
-    }
-}
-
-$arrival-width: var(--arrival-width);
+$arrival-width: 8px;
+$mobile-arrival-width: 6px;
 
 .timeline {
     display: flex;
@@ -30,12 +21,14 @@ $arrival-width: var(--arrival-width);
     top: 0;
     height: 60%;
     transform: translateX(-1px);
+
     :global(.hairline) {
         position: relative;
         height: 100%;
         width: 1px;
         border-right: 1px solid #ddd;
     }
+
     :global(.label) {
         position: absolute;
         bottom: -5px;
@@ -44,6 +37,7 @@ $arrival-width: var(--arrival-width);
         color: #999;
         white-space: nowrap;
         user-select: none;
+
         @include mobile {
             font-size: 10px;
         }
@@ -67,6 +61,11 @@ $arrival-width: var(--arrival-width);
     border-radius: $arrival-width;
     margin-bottom: 5px;
     box-sizing: border-box;
+
+    @include mobile {
+        width: $mobile-arrival-width;
+        height: $mobile-arrival-width;
+    }
 }
 
 .baselineArrival {

src/components/FrequencyTimeline/FrequencyTimeline.module.scss

@@ -66,6 +66,7 @@
 .subtitle {
     font-style: italic;
     text-align: center;
+
     @include mobile {
         font-size: 14px;
     }
@@ -75,6 +76,7 @@
     height: 30px;
     z-index: 1;
     margin-bottom: 20px;
+
     @include mobile {
         margin-bottom: 0;
         height: 20px;
@@ -98,7 +100,8 @@
     font-weight: bold;
     letter-spacing: 0.01em;
 
-    &:hover, &:active {
+    &:hover,
+    &:active {
         background: white;
         color: $darker-rr-purple;
     }
@@ -122,6 +125,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+
     @include mobile {
         width: 100%;
         margin: 10px 0;
@@ -132,6 +136,7 @@
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     column-gap: 60px;
+
     @include mobile {
         display: flex;
         flex-direction: column;
@@ -173,6 +178,7 @@
         margin: 0;
         line-height: 1.5em;
         text-align: center;
+
         @include mobile {
             font-size: 14px;
         }
@@ -185,4 +191,4 @@
 
 .scrollSnapEnd {
     scroll-snap-align: end;
-}
+}

src/components/Home/Home.module.scss

@@ -4,6 +4,7 @@ import { Button } from "@ariakit/react/button";
 import { GiElectric } from "react-icons/gi";
 import { IoMdTimer } from "react-icons/io";
 import { MdGridOn } from "react-icons/md";
+import { CgChevronDoubleDown } from "react-icons/cg";
 import smoothscroll from "smoothscroll-polyfill";
 
 import { useAppContext, useViewport } from "hooks";
@@ -12,7 +13,6 @@ import { LiveNetworkVisualizer, PowerText, SuggestedJourneys } from "components"
 import OverviewCircle from "./OverviewCircle";
 
 import styles from "./Home.module.scss";
-import { CgChevronDoubleDown } from "react-icons/cg";
 
 const Home = () => {
     const { viewportHeight } = useViewport();

src/components/Home/Home.tsx

@@ -65,7 +65,7 @@ const getJourneyDuration = (journey: JourneyInfo) => {
 };
 
 const Text = (props) => {
-    return <text fontFamily="Helvetica,sans-serif" fill="white" {...props} />;
+    return <text fill="white" {...props} />;
 };
 
 const JourneySummaryCard = (props: Props) => {

src/components/JourneySummaryCard/JourneySummaryCard.tsx

@@ -8,7 +8,8 @@ $expand-control-size: 30px;
 $start-end-point-size: 16px;
 
 @mixin circle-on-line-with-label($circle-size) {
-    $circle-left: ($travel-transfer-station-size - $circle-size) / 2;
+    $circle-left: (
+        $travel-transfer-station-size - $circle-size) / 2;
     display: flex;
     align-items: center;
 
@@ -31,33 +32,38 @@ $start-end-point-size: 16px;
 
 .journeyTimeline {
     position: relative;
+
     @include mobile {
         font-size: 13px;
     }
+
+    @include line-colors;
 }
 
 .travelSegment {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     position: relative;
+
     :global(.stem) {
         position: absolute;
-        height: calc(100% - #{$travel-transfer-station-size});
-        top: $travel-transfer-station-size / 2;
-        left: $travel-transfer-station-size / 2;
-        transform: translateX(-50%);
-        width: $stem-width;
-        background: currentColor;
-    }
+        height: calc(100% - #{$travel-transfer-station-size}
+    );
+    top: $travel-transfer-station-size / 2;
+    left: $travel-transfer-station-size / 2;
+    transform: translateX(-50%);
+    width: $stem-width;
+    background: currentColor;
+}
 
-    :global(.inner) {
-        padding: 10px 0;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-around;
-        flex-grow: 1;
-    }
+:global(.inner) {
+    padding: 10px 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    flex-grow: 1;
+}
 }
 
 .travelSegmentPassedStation {
@@ -98,6 +104,7 @@ $start-end-point-size: 16px;
 
     &:hover {
         cursor: pointer;
+
         :global(.label) {
             text-decoration: underline;
         }
@@ -132,6 +139,7 @@ $start-end-point-size: 16px;
             font-weight: normal;
             margin-left: 0.5em;
             white-space: nowrap;
+
             @include mobile {
                 margin-left: auto;
             }
@@ -158,14 +166,17 @@ $start-end-point-size: 16px;
 
     :global(.start-end-point) {
         @include circle-on-line-with-label($start-end-point-size);
+
         :global(.circle) {
             box-sizing: border-box;
             background: white;
             border: 2px solid cornflowerblue;
         }
+
         :global(.label) {
             font-weight: bold;
             display: flex;
+
             :global(.time) {
                 font-weight: normal;
                 margin-left: 0.5em;
@@ -183,7 +194,7 @@ $start-end-point-size: 16px;
         border: 1px dashed cornflowerblue;
     }
 
-    & > :global(.label) {
+    &> :global(.label) {
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -197,6 +208,7 @@ $start-end-point-size: 16px;
 a.stationName {
     color: inherit;
     text-decoration: none;
+
     &:hover {
         text-decoration: underline;
     }

src/components/JourneyTimeline/JourneyTimeline.module.scss

@@ -106,7 +106,7 @@ const TravelSegment = (props: { segment: JourneyTravelSegment }) => {
 
     return (
         <div className={classNames(styles.travelSegment, textColor(color))}>
-            <div className="stem" />
+            <div className={"stem"} />
             {renderEndpoint(startStation, startTime)}
             <div className="inner" style={expanded ? { minHeight: height } : { height }}>
                 {renderInnerContents()}