A bunch more CSS modules conversions

app/components/ClueMode.module.css

@@ -0,0 +1,30 @@
+.fixedCell {
+  width: 1px;
+  padding-right: 1em;
+  padding-bottom: 1em;
+  text-align: right;
+}
+
+.clueCell {
+  display: flex;
+  padding-bottom: 1em;
+}
+
+.suggestCell {
+  width: 1px;
+  padding-bottom: 1em;
+  padding-left: 1em;
+}
+
+.metadata {
+  padding: 1em;
+}
+
+.contestError {
+  margin: auto 0.5em;
+  color: var(--error);
+}
+
+.alternate + .alternate::before {
+  content: ', ';
+}

app/components/ClueMode.tsx

@@ -34,6 +34,7 @@ import {
 import { PuzzleAction } from '../reducers/commonActions';
 import { AlternateSolutionEditor } from './AlternateSolutionEditor';
 import { Button, ButtonAsLink } from './Buttons';
+import styles from './ClueMode.module.css';
 import { DateTimePicker } from './DateTimePicker';
 import { GridContext } from './GridContext';
 import { SpinnerFinished } from './Icons';
@@ -83,33 +84,19 @@ const ClueRow = (props: {
   return (
     <>
       <tr>
-        <td
-          css={{
-            paddingRight: '1em',
-            paddingBottom: '1em',
-            textAlign: 'right',
-            width: '1px',
-          }}
-        >
+        <td className={styles.fixedCell}>
           {props.entry.labelNumber}
           {props.entry.direction === Direction.Down ? 'D' : 'A'}
         </td>
-        <td
-          css={{
-            paddingRight: '1em',
-            paddingBottom: '1em',
-            textAlign: 'right',
-            width: '1px',
-          }}
-        >
+        <td className={styles.fixedCell}>
           <label
             className="marginBottom0"
             htmlFor={props.entry.completedWord + '-' + props.idx + '-input'}
           >
             {props.entry.completedWord}
           </label>
         </td>
-        <td css={{ paddingBottom: '1em', display: 'flex' }}>
+        <td className={styles.clueCell}>
           <LengthLimitedInput
             id={props.entry.completedWord + '-' + props.idx + '-input'}
             spellCheck="true"
@@ -135,7 +122,7 @@ const ClueRow = (props: {
             hideUntilWithin={30}
           />
         </td>
-        <td css={{ width: '1px', paddingLeft: '1em', paddingBottom: '1em' }}>
+        <td className={styles.suggestCell}>
           <ButtonAsLink
             onClick={() => {
               setShowSuggestions(true);
@@ -358,7 +345,7 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
           ''
         )}
 
-        <div css={{ padding: '1em' }}>
+        <div className={styles.metadata}>
           {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
           <label className="width100">
             <h2>Title</h2>
@@ -467,7 +454,7 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
                 <code>||like this||</code>.
               </p>
               <LengthLimitedTextarea
-                css={{ width: '100%', display: 'block' }}
+                className="width100 displayBlock"
                 placeholder="Your post text (markdown format)"
                 value={props.blogPost}
                 maxLength={MAX_BLOG_LENGTH}
@@ -537,7 +524,7 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
             </label>
           </div>
           {props.guestConstructor !== null ? (
-            <div css={{ marginLeft: '1.5em', marginBottom: '1em' }}>
+            <div className="marginLeft1-5em marginBottom1em">
               <LengthLimitedInput
                 type="text"
                 className="width100"
@@ -586,7 +573,7 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
             </label>
           </div>
           {state.isContestPuzzle ? (
-            <div css={{ marginLeft: '1.5em', marginBottom: '1em' }}>
+            <div className="marginLeft1-5em marginBottom1em">
               <h4>Contest prompt (required):</h4>
               <p>
                 Use the notes field above to give solvers a prompt for the
@@ -646,7 +633,7 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
                   hideUntilWithin={30}
                 />
                 {contestAnswerError ? (
-                  <span css={{ color: 'var(--error)', margin: 'auto 0.5em' }}>
+                  <span className={styles.contestError}>
                     {contestAnswerError}
                   </span>
                 ) : (
@@ -769,7 +756,7 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
               />
             </label>
             {privateUntil ? (
-              <p css={{ marginLeft: '1.5em' }}>
+              <p className="marginLeft1-5em">
                 Visible after {lightFormat(privateUntil, "M/d/y' at 'h:mma")} (
                 {
                   privateUntil
@@ -865,10 +852,7 @@ export const ClueMode = ({ state, ...props }: ClueModeProps) => {
                   {state.alternates.map((a, i) => (
                     <li key={i}>
                       {Object.entries(a).map(([pos, str]) => (
-                        <span
-                          css={{ '& + &:before': { content: '", "' } }}
-                          key={pos}
-                        >
+                        <span className={styles.alternate} key={pos}>
                           Cell {pos}: &quot;{str}&quot;
                         </span>
                       ))}{' '}

app/components/ClueSuggestionOverlay.module.css

@@ -0,0 +1,13 @@
+.table {
+  background-color: var(--overlay-inner) !important;
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
+.table :global(.row-container) {
+  cursor: pointer;
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
+.table :global(.row-container):hover {
+  background-color: var(--secondary);
+}

app/components/ClueSuggestionOverlay.tsx

@@ -4,6 +4,7 @@ import { Table } from 'react-fluid-table';
 import { FaCheck } from 'react-icons/fa';
 import { ClueEntryT, ClueListT, parseClueList } from '../lib/ginsbergCommon';
 import { logAsyncErrors } from '../lib/utils';
+import styles from './ClueSuggestionOverlay.module.css';
 import { Overlay } from './Overlay';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -139,15 +140,7 @@ export const SuggestOverlay = (props: SuggestOverlayProps) => {
                 props.select(clicked.c);
               }
             }}
-            css={{
-              backgroundColor: 'var(--overlay-inner) !important',
-              '& .row-container': {
-                cursor: 'pointer',
-              },
-              '& .row-container:hover': {
-                backgroundColor: 'var(--secondary)',
-              },
-            }}
+            className={styles.table}
           />
           <h3 className="marginTop1em">External Sources</h3>
           <ul>

app/components/ConstructorPage.module.css

@@ -0,0 +1,66 @@
+@value huge-and-up from '../lib/definitions.module.css';
+@value max-width from '../lib/definitions.module.css';
+
+.baseurl {
+  margin-right: 0.15em;
+  font-weight: bold;
+}
+
+.followersList {
+  width: 100%;
+  max-width: 40em;
+  margin: auto;
+  padding: 0;
+
+  text-align: left;
+  list-style-type: none;
+}
+
+.follower {
+  cursor: pointer;
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+
+  padding: 1.5em 1em;
+}
+
+.follower:hover {
+  background-color: var(--secondary);
+}
+
+.pageName {
+  font-size: 1.1em;
+}
+
+.pageName:hover {
+  text-decoration: underline;
+}
+
+.followBtn {
+  margin-left: auto;
+}
+
+.header {
+  margin: 2em 1em;
+}
+
+/* stylelint-disable-next-line media-feature-name-no-unknown */
+@media (huge-and-up) {
+  .header {
+    /* stylelint-disable-next-line declaration-property-value-no-unknown */
+    max-width: max-width;
+    margin: 2em auto;
+  }
+}
+
+.patronicon {
+  margin-right: 0.3em;
+}
+
+.byline {
+  margin-bottom: 0.25em;
+  font-size: 1em;
+  font-weight: normal;
+}

app/components/ConstructorPage.tsx

@@ -7,10 +7,10 @@ import { FormEvent, useCallback, useContext, useState } from 'react';
 import { FaInfoCircle } from 'react-icons/fa';
 import { ConstructorPageBase, ConstructorPageT } from '../lib/constructorPage';
 import { getDocRef } from '../lib/firebaseWrapper';
-import { HUGE_AND_UP, MAX_WIDTH } from '../lib/style';
 import { logAsyncErrors } from '../lib/utils';
 import { AuthContext } from './AuthContext';
 import { ButtonAsLink } from './Buttons';
+import styles from './ConstructorPage.module.css';
 import { ConstructorStats } from './ConstructorStats';
 import { FollowButton } from './FollowButton';
 import { I18nTags } from './I18nTags';
@@ -147,7 +147,7 @@ export const CreatePageForm = (props: { className?: string }) => {
   return (
     <div className={props.className}>
       <form onSubmit={logAsyncErrors(createPage)}>
-        <label css={{ width: '100%', margin: 0 }}>
+        <label className="width100 margin0">
           <p>
             Create a constructor blog to keep all of your public puzzles on one
             page.
@@ -157,9 +157,7 @@ export const CreatePageForm = (props: { className?: string }) => {
             later):
           </p>
           <p>
-            <span css={{ fontWeight: 'bold', marginRight: '0.15em' }}>
-              https://crosshare.org/
-            </span>
+            <span className={styles.baseurl}>https://crosshare.org/</span>
             <input
               type="text"
               value={username}
@@ -178,7 +176,7 @@ export const CreatePageForm = (props: { className?: string }) => {
             value="Create"
           />
           {showError ? (
-            <span css={{ color: 'var(--error)', marginLeft: '1em' }}>
+            <span className="colorError marginLeft1em">
               That username is unavailable. Please try something different.
             </span>
           ) : (
@@ -213,16 +211,7 @@ const FollowersList = ({
   close: () => void;
 }) => {
   return (
-    <ul
-      css={{
-        width: '100%',
-        maxWidth: '40em',
-        listStyleType: 'none',
-        padding: 0,
-        margin: 'auto',
-        textAlign: 'left',
-      }}
-    >
+    <ul className={styles.followersList}>
       {pages.map((f) => (
         <FollowersListItem key={f.i} page={f} close={close} />
       ))}
@@ -251,31 +240,17 @@ const FollowersListItem = ({
         role="button"
         onClick={logAsyncErrors(click)}
         onKeyPress={logAsyncErrors(click)}
-        css={{
-          padding: '1.5em 1em',
-          display: 'flex',
-          alignItems: 'flex-start',
-          flexWrap: 'wrap',
-          '&:hover': {
-            backgroundColor: 'var(--secondary)',
-          },
-          cursor: 'pointer',
-        }}
+        className={styles.follower}
       >
         <div className="marginRight1em">
           <div>
-            <b
-              css={{
-                fontSize: '1.1em',
-                '&:hover': { textDecoration: 'underline' },
-              }}
-            >
+            <b className={styles.pageName}>
               {page.isPatron ? <PatronIcon /> : ''} {page.n}
             </b>
           </div>
           <div>@{page.i}</div>
         </div>
-        <FollowButton css={{ marginLeft: 'auto' }} page={page} />
+        <FollowButton className={styles.followBtn} page={page} />
       </div>
     </li>
   );
@@ -378,22 +353,14 @@ export const ConstructorPage = (props: ConstructorPageProps) => {
       </Head>
       <DefaultTopBar />
       {coverPic ? <CoverPic coverPicture={coverPic} /> : ''}
-      <div
-        css={{
-          margin: '2em 1em',
-          [HUGE_AND_UP]: {
-            maxWidth: MAX_WIDTH,
-            margin: '2em auto',
-          },
-        }}
-      >
+      <div className={styles.header}>
         <ProfilePicAndName
           coverImage={coverPic}
           profilePic={profilePic}
           topLine={
             <>
               {props.isPatron ? (
-                <PatronIcon css={{ marginRight: '0.3em' }} linkIt={true} />
+                <PatronIcon className={styles.patronicon} linkIt={true} />
               ) : (
                 ''
               )}
@@ -402,13 +369,7 @@ export const ConstructorPage = (props: ConstructorPageProps) => {
           }
           byLine={
             <>
-              <h2
-                css={{
-                  fontSize: '1em',
-                  fontWeight: 'normal',
-                  marginBottom: '0.25em',
-                }}
-              >
+              <h2 className={styles.byline}>
                 <Link href={'/' + username}>@{username}</Link>
               </h2>
               {showOverlay ? (
@@ -490,7 +451,7 @@ export const ConstructorPage = (props: ConstructorPageProps) => {
             </>
           }
         />
-        <div css={{ textAlign: 'center', marginBottom: '1.5em' }}>
+        <div className="textAlignCenter marginBottom1-5em">
           <FollowButton page={props.constructorData} />
         </div>
         <div className="marginBottom1-5em">