refactor(web/ui): Drop dependency on Sass

This change updates the OpenDC web UI to not rely on Sass for
stylesheets. CSS in combination with PostCSS has become powerful enough
for our use-cases as indicated by the small differences between the CSS
and SCSS versions of our files.

By switching to CSS, we can make use of Turbopack to build the project,
which is a re-implementation of Webppack in Rust and is able to build
projects much faster.

22 files changed, 93 insertions, 101 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/AppHeader.js b/opendc-web/opendc-web-ui/src/components/AppHeader.js
index c046f9c7..514dce2a 100644
--- a/opendc-web/opendc-web-ui/src/components/AppHeader.js
+++ b/opendc-web/opendc-web-ui/src/components/AppHeader.js
@@ -37,7 +37,7 @@ import AppHeaderTools from './AppHeaderTools'
 import AppHeaderUser from './AppHeaderUser'
 import ProjectSelector from './context/ProjectSelector'
 
-import styles from './AppHeader.module.scss'
+import styles from './AppHeader.module.css'
 
 export default function AppHeader({ nav }) {
     return (
diff --git a/opendc-web/opendc-web-ui/src/components/AppHeader.module.scss b/opendc-web/opendc-web-ui/src/components/AppHeader.module.css
index 73ef553c..9d5dbed1 100644
--- a/opendc-web/opendc-web-ui/src/components/AppHeader.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/AppHeader.module.css
@@ -28,17 +28,15 @@
     --pf-c-masthead--c-context-selector--Width: 200px;
 }
 
-.logo {
-    span {
-        margin-left: 8px;
-        color: #fff;
-        align-self: center;
-        font-weight: 600;
-        font-size: 0.9rem;
-    }
+.logo > span {
+    margin-left: 8px;
+    color: #fff;
+    align-self: center;
+    font-weight: 600;
+    font-size: 0.9rem;
+}
 
-    &:hover,
-    &:focus {
-        text-decoration: none;
-    }
+.logo:hover,
+.logo:focus > span {
+    --pf-global--link--TextDecoration: none;
 }
diff --git a/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.js b/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.js
index 5d3a6441..f3c25b79 100644
--- a/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.js
+++ b/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.js
@@ -21,7 +21,7 @@
  */
 
 import PropTypes from 'prop-types'
-import { contextSelectionSection } from './ContextSelectionSection.module.scss'
+import { contextSelectionSection } from './ContextSelectionSection.module.css'
 
 function ContextSelectionSection({ children }) {
     return <section className={contextSelectionSection}>{children}</section>
diff --git a/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.module.scss b/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.module.css
index 0e902af0..0e902af0 100644
--- a/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.module.css
diff --git a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js
index 059cfea8..d2601008 100644
--- a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js
+++ b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js
@@ -24,7 +24,7 @@ import PropTypes from 'prop-types'
 import { ContextSelector as PFContextSelector, ContextSelectorItem } from '@patternfly/react-core'
 import { useMemo, useState } from 'react'
 
-import styles from './ContextSelector.module.scss'
+import styles from './ContextSelector.module.css'
 
 function ContextSelector({ id, type = 'page', toggleText, items, onSelect, onToggle, isOpen, isFullHeight }) {
     const [searchValue, setSearchValue] = useState('')
diff --git a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.css
index 4f86ac64..7662d00c 100644
--- a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.css
@@ -21,7 +21,7 @@
  */
 
 .pageSelector.pageSelector {
-    // Ensure this selector has precedence over the default one
+    /* Ensure this selector has precedence over the default one */
     margin-right: 20px;
 
     --pf-c-context-selector__menu--ZIndex: var(--pf-global--ZIndex--lg);
@@ -31,16 +31,14 @@
     --pf-c-context-selector__toggle--PaddingLeft: 0;
     --pf-c-context-selector__toggle--BorderWidth: 0;
     --pf-c-context-selector__toggle-text--FontSize: var(--pf-global--FontSize--sm);
+}
 
-    & :global(.pf-c-context-selector__toggle) {
-        &:active,
-        &:focus-within,
-        &:global(.pf-m-active) {
-            --pf-c-context-selector__toggle--after--BorderBottomWidth: 0;
-        }
-    }
+.pageSelector.pageSelector :global(.pf-c-context-selector__toggle):active,
+.pageSelector.pageSelector :global(.pf-c-context-selector__toggle):focus-within,
+.pageSelector.pageSelector :global(.pf-c-context-selector__toggle):global(.pf-m-active) {
+    --pf-c-context-selector__toggle--after--BorderBottomWidth: 0;
+}
 
-    &:global(.pf-m-expanded) > :global(.pf-c-context-selector__toggle) {
-        --pf-c-context-selector__toggle--after--BorderBottomWidth: 0;
-    }
+.pageSelector.pageSelector:global(.pf-m-expanded) > :global(.pf-c-context-selector__toggle) {
+    --pf-c-context-selector__toggle--after--BorderBottomWidth: 0;
 }
diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js
index 7c6d129c..5aaa56ac 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core'
-import { filterPanel } from './FilterPanel.module.scss'
+import { filterPanel } from './FilterPanel.module.css'
 
 export const FILTERS = { SHOW_ALL: 'All Projects', SHOW_OWN: 'My Projects', SHOW_SHARED: 'Shared with me' }
 
diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.css b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.css
new file mode 100644
index 00000000..15c36821
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.css
@@ -0,0 +1,7 @@
+.filterPanel {
+    display: flex;
+}
+
+.filterPanel > button {
+    flex: 1 !important;
+}
diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.scss b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.scss
deleted file mode 100644
index 79cdf81a..00000000
--- a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.filterPanel {
-    display: flex;
-
-    button {
-        flex: 1 !important;
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js
index 8bf529b2..1b9fff72 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js
@@ -5,7 +5,7 @@ import { Stage } from 'react-konva'
 import { MAP_MAX_SCALE, MAP_MIN_SCALE, MAP_MOVE_PIXELS_PER_EVENT, MAP_SCALE_PER_EVENT } from './MapConstants'
 import { ReactReduxContext } from 'react-redux'
 import useResizeObserver from 'use-resize-observer'
-import { mapContainer } from './MapStage.module.scss'
+import { mapContainer } from './MapStage.module.css'
 import MapLayer from './layers/MapLayer'
 import RoomHoverLayer from './layers/RoomHoverLayer'
 import ObjectHoverLayer from './layers/ObjectHoverLayer'
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.css
index 47c3dde2..47c3dde2 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.css
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.js b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.js
index f54b7c84..931ded94 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.js
@@ -22,7 +22,7 @@
 
 import PropTypes from 'prop-types'
 import { ChevronLeftIcon } from '@patternfly/react-icons'
-import { collapseContainer } from './Collapse.module.scss'
+import { collapseContainer } from './Collapse.module.css'
 import { Button } from '@patternfly/react-core'
 
 function Collapse({ onClick }) {
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.module.css
index 0c1fac94..70fd465f 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.module.css
@@ -27,29 +27,29 @@
     bottom: 10%;
     margin: auto 0;
     height: 50px;
+}
 
-    button:global(.pf-m-tertiary) {
-        height: 100%;
-        padding: 2px;
+.collapseContainer > button:global(.pf-m-tertiary) {
+    height: 100%;
+    padding: 2px;
 
-        margin-right: var(--pf-global--spacer--xs);
-        margin-top: var(--pf-global--spacer--xs);
-        background-color: var(--pf-global--BackgroundColor--100);
-        border: none;
-        border-radius: var(--pf-global--BorderRadius--sm);
-        box-shadow: var(--pf-global--BoxShadow--sm);
+    margin-right: var(--pf-global--spacer--xs);
+    margin-top: var(--pf-global--spacer--xs);
+    background-color: var(--pf-global--BackgroundColor--100);
+    border: none;
+    border-radius: var(--pf-global--BorderRadius--sm);
+    box-shadow: var(--pf-global--BoxShadow--sm);
+}
 
-        &:not(:global(.pf-m-disabled)) {
-            background-color: var(--pf-global--BackgroundColor--100);
-        }
+.collapseContainer > button:global(.pf-m-tertiary):not(:global(.pf-m-disabled)) {
+    background-color: var(--pf-global--BackgroundColor--100);
+}
 
-        &:after {
-            display: none;
-        }
+.collapseContainer > button:global(.pf-m-tertiary):after {
+    display: none;
+}
 
-        &:hover {
-            border: none;
-            box-shadow: var(--pf-global--BoxShadow--md);
-        }
-    }
+.collapseContainer > button:global(.pf-m-tertiary):hover {
+    border: none;
+    box-shadow: var(--pf-global--BoxShadow--md);
 }
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.js b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.js
index 58d2ccc9..3ec893fb 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
-import { scaleIndicator } from './ScaleIndicator.module.scss'
+import { scaleIndicator } from './ScaleIndicator.module.css'
 
 function ScaleIndicator({ scale }) {
     return (
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.module.css
index f19e0ff2..f19e0ff2 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.module.css
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.js b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.js
index e7dc57c3..00aaf3e1 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { control, toolBar } from './Toolbar.module.scss'
+import { control, toolBar } from './Toolbar.module.css'
 import { Button } from '@patternfly/react-core'
 import { SearchPlusIcon, SearchMinusIcon, CameraIcon } from '@patternfly/react-icons'
 
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.css b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.css
new file mode 100644
index 00000000..007389da
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.css
@@ -0,0 +1,27 @@
+.toolBar {
+    position: absolute;
+    bottom: var(--pf-global--spacer--md);
+    left: var(--pf-global--spacer--xl);
+}
+
+.control:global(.pf-m-tertiary) {
+    margin-right: var(--pf-global--spacer--xs);
+    margin-top: var(--pf-global--spacer--xs);
+    background-color: var(--pf-global--BackgroundColor--100);
+    border: none;
+    border-radius: var(--pf-global--BorderRadius--sm);
+    box-shadow: var(--pf-global--BoxShadow--sm);
+}
+
+.control:global(.pf-m-tertiary):not(:global(.pf-m-disabled)) {
+    background-color: var(--pf-global--BackgroundColor--100);
+}
+
+.control:global(.pf-m-tertiary):after {
+    display: none;
+}
+
+.control:global(.pf-m-tertiary):hover {
+    border: none;
+    box-shadow: var(--pf-global--BoxShadow--md);
+}
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.scss
deleted file mode 100644
index 0d505acc..00000000
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.toolBar {
-    position: absolute;
-    bottom: var(--pf-global--spacer--md);
-    left: var(--pf-global--spacer--xl);
-}
-
-.control {
-    &:global(.pf-m-tertiary) {
-        margin-right: var(--pf-global--spacer--xs);
-        margin-top: var(--pf-global--spacer--xs);
-        background-color: var(--pf-global--BackgroundColor--100);
-        border: none;
-        border-radius: var(--pf-global--BorderRadius--sm);
-        box-shadow: var(--pf-global--BoxShadow--sm);
-
-        &:not(:global(.pf-m-disabled)) {
-            background-color: var(--pf-global--BackgroundColor--100);
-        }
-
-        &:after {
-            display: none;
-        }
-
-        &:hover {
-            border: none;
-            box-shadow: var(--pf-global--BoxShadow--md);
-        }
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.js
index 5d9340b2..5aaa7834 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.js
@@ -14,7 +14,7 @@ import {
 } from '@patternfly/react-core'
 import { AngleLeftIcon } from '@patternfly/react-icons'
 import { useDispatch } from 'react-redux'
-import { backButton } from './TopologySidebar.module.scss'
+import { backButton } from './TopologySidebar.module.css'
 import RoomSidebar from './room/RoomSidebar'
 import RackSidebar from './rack/RackSidebar'
 import MachineSidebar from './machine/MachineSidebar'
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.css
index 45dc98da..3853c625 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.css
@@ -20,18 +20,16 @@
  * SOFTWARE.
  */
 
-.backButton {
-    &:global(.pf-c-button) {
-        align-self: center;
-        --pf-c-button--after--BorderColor: var(--pf-global--BorderColor--light-100);
-        color: var(--pf-global--Color--400);
+.backButton:global(.pf-c-button) {
+    align-self: center;
+    --pf-c-button--after--BorderColor: var(--pf-global--BorderColor--light-100);
+    color: var(--pf-global--Color--400);
 
-        --pf-c-button--PaddingRight: var(--pf-global--spacer--sm);
-        --pf-c-button--PaddingLeft: var(--pf-global--spacer--sm);
+    --pf-c-button--PaddingRight: var(--pf-global--spacer--sm);
+    --pf-c-button--PaddingLeft: var(--pf-global--spacer--sm);
+}
 
-        &:hover,
-        &:focus {
-            --pf-c-button--after--BorderColor: var(--pf-global--BorderColor--100);
-        }
-    }
+.backButton:hover,
+.backButton:global(.pf-c-button):focus {
+    --pf-c-button--after--BorderColor: var(--pf-global--BorderColor--100);
 }
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js
index 8f6ff135..cb7d3b68 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { machineListContainer, sidebarContainer } from './RackSidebar.module.scss'
+import { machineListContainer, sidebarContainer } from './RackSidebar.module.css'
 import RackNameContainer from './RackNameContainer'
 import AddPrefab from './AddPrefab'
 import DeleteRackContainer from './DeleteRackContainer'
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.css
index f4c8829f..f4c8829f 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.css