Fix: web css modules tree shaking

web/src/App.css

@@ -1,16 +1,3 @@
-html {
-  font-size: 1em;
-}
-body {
-  margin: auto;
-  padding-top: 1rem;
-  max-width: unset;
-  min-height: 100vh;
-}
-#root {
-  display: flex;
-  justify-content: center;
-}
 .base {
   display: grid;
   grid-row-gap: 1em;
@@ -48,54 +35,10 @@ body {
   color: rgb(229, 232, 245);
   padding: 1em;
 }
-a.unset {
-  color: unset;
-  text-decoration: unset;
-}
-a.active {
-  color: deeppink;
-  background-color: lightgray;
-  border-radius: 0.39em 0.39em 0 0;
-}
 .audio-player {
   height: 39px;
   width: 100%;
 }
-td.clickable {
-  cursor: pointer;
-}
-div.clickable {
-  cursor: pointer;
-}
-div.page {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-div.search_toolbar {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  width: 100%;
-}
-div.feedback {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-button.refresh {
-  width: 100%;
-}
-td,
-th {
-  padding-bottom: 0.5em;
-  padding-top: 0.5em;
-}
-dialog {
-  border: solid;
-}
 .player-options {
   display: flex;
 }

web/src/index.css

@@ -1,13 +1,66 @@
+#root {
+  display: flex;
+  justify-content: center;
+}
+html {
+  font-size: 1em;
+}
 body {
-  margin: 0;
+  margin: auto;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  padding-top: 1rem;
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  max-width: none;
+  min-height: 100vh;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+a.unset {
+  color: unset;
+  text-decoration: unset;
+}
+a.active {
+  color: deeppink;
+  background-color: lightgray;
+  border-radius: 0.39em 0.39em 0 0;
+}
+td.clickable {
+  cursor: pointer;
+}
+div.clickable {
+  cursor: pointer;
+}
+div.page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+div.search_toolbar {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  width: 100%;
+}
+div.feedback {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+button.refresh {
+  width: 100%;
+}
+td,
+th {
+  padding-bottom: 0.5em;
+  padding-top: 0.5em;
+}
+dialog {
+  border: solid;
+}

web/src/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 import 'water.css';
+import './index.css';
 import App from './App';
 
 ReactDOM.render(