update packages, format css

.prettierrc

@@ -1,6 +1,7 @@
 {
  "plugins": ["prettier-plugin-jsdoc", "@ianvs/prettier-plugin-sort-imports"],
  "importOrder": ["^react", "^[a-zA-Z]", "^@[a-zA-Z]", "^@/", "^./"],
+ "order": "smacss",
  "jsdocCapitalizeDescription": false,
  "overrides": [
  {

package.json

@@ -13,32 +13,34 @@
  "@fortawesome/free-brands-svg-icons": "^6.4.0",
  "@fortawesome/free-solid-svg-icons": "^6.4.0",
  "@fortawesome/react-fontawesome": "^0.2.0",
- "@zip.js/zip.js": "^2.7.17",
- "jotai": "^2.2.1",
+ "@zip.js/zip.js": "^2.7.20",
+ "jotai": "^2.2.2",
  "lodash": "^4.17.21",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "tippy.js": "^6.3.7"
  },
  "devDependencies": {
- "@ianvs/prettier-plugin-sort-imports": "^4.0.0-alpha.7",
+ "@ianvs/prettier-plugin-sort-imports": "^4.1.0",
  "@types/lodash": "^4.14.195",
- "@types/node": "^20.2.5",
- "@types/react": "^18.0.28",
- "@types/react-dom": "^18.0.11",
- "@typescript-eslint/eslint-plugin": "^5.57.1",
- "@typescript-eslint/parser": "^5.57.1",
- "@vitejs/plugin-react": "^4.0.0",
- "eslint": "^8.38.0",
+ "@types/node": "^20.4.2",
+ "@types/react-dom": "^18.2.7",
+ "@types/react": "^18.2.15",
+ "@typescript-eslint/eslint-plugin": "^6.1.0",
+ "@typescript-eslint/parser": "^6.1.0",
+ "@vitejs/plugin-react": "^4.0.3",
  "eslint-config-prettier": "^8.8.0",
  "eslint-plugin-import": "^2.27.5",
  "eslint-plugin-jsx-a11y": "^6.7.1",
- "eslint-plugin-prettier": "^4.2.1",
+ "eslint-plugin-prettier": "^5.0.0",
  "eslint-plugin-react-hooks": "^4.6.0",
- "eslint-plugin-react-refresh": "^0.3.4",
- "prettier": "^2.8.8",
- "prettier-plugin-jsdoc": "^0.4.2",
- "typescript": "^5.0.2",
- "vite": "^4.3.2"
+ "eslint-plugin-react-refresh": "^0.4.3",
+ "eslint": "^8.45.0",
+ "postcss": "^8.4.26",
+ "prettier-plugin-css-order": "^1.3.1",
+ "prettier-plugin-jsdoc": "^1.0.1",
+ "prettier": "^3.0.0",
+ "typescript": "^5.1.6",
+ "vite": "^4.4.5"
  }
 }

src/App.css

@@ -34,22 +34,22 @@ body {
 }
 
 main {
- flex-grow: 1;
  display: flex;
+ flex-grow: 1;
  flex-direction: column;
 }
 
 header,
 footer {
  display: flex;
- justify-content: center;
- align-items: center;
  flex-wrap: wrap;
- gap: 10px 40px;
+ align-items: center;
+ justify-content: center;
  padding: 40px;
- text-align: center;
+ gap: 10px 40px;
  background: var(--primary);
  color: var(--white);
+ text-align: center;
 }
 
 header a,
@@ -66,39 +66,39 @@ section {
  display: flex;
  flex-direction: column;
  align-items: center;
- gap: 40px;
  width: 100%;
  padding: 40px max(40px, (100% - 1200px) / 2);
+ gap: 40px;
 }
 
 h1 {
  display: inline-flex;
- justify-content: center;
  align-items: center;
- gap: 20px;
+ justify-content: center;
  margin: 0;
+ gap: 20px;
  font: inherit;
  font-size: 1.5rem;
 }
 
 h2 {
  display: flex;
- justify-content: center;
  align-items: center;
- gap: 20px;
+ justify-content: center;
  width: 100%;
  margin: 0;
- text-align: center;
+ gap: 20px;
  font: inherit;
  font-size: 1.2rem;
+ text-align: center;
 }
 
 h2:before,
 h2:after {
- content: "";
  flex-grow: 1;
  height: 1px;
  background: var(--mid-gray);
+ content: "";
 }
 
 a {
@@ -122,8 +122,8 @@ button,
 select,
 input,
 textarea {
- font: inherit;
  color: inherit;
+ font: inherit;
 }
 
 button,
@@ -173,20 +173,20 @@ svg + span {
  padding: 10px 15px;
  border-radius: var(--rounded);
  background: var(--dark-gray);
- font-size: 1rem;
  box-shadow: var(--shadow);
+ font-size: 1rem;
 }
 
 .tippy-content {
  display: flex;
  flex-direction: column;
- gap: 10px;
  padding: 0;
+ gap: 10px;
 }
 
 .tippy-arrow {
- color: var(--dark-gray);
  z-index: 99;
+ color: var(--dark-gray);
 }
 
 .tippy-content > * {
@@ -202,8 +202,8 @@ svg + span {
 }
 
 .tippy-content td:first-child {
- padding-left: 0;
  padding-right: 1em;
+ padding-left: 0;
  text-align: left;
 }
 

src/components/Button.module.css

@@ -1,14 +1,16 @@
 .button {
  display: inline-flex;
- justify-content: center;
  align-items: center;
- gap: 0.5em;
+ justify-content: center;
  min-height: 40px;
  padding: 10px 20px;
+ gap: 0.5em;
  border: none;
  border-radius: var(--rounded);
  background: var(--light-gray);
- transition: background var(--fast), color var(--fast);
+ transition:
+ background var(--fast),
+ color var(--fast);
 }
 
 .button:hover {

src/components/Checkbox.module.css

@@ -1,8 +1,8 @@
 .input {
- margin: 0;
  width: 20px;
  height: 20px;
+ margin: 0;
  border-radius: var(--rounded);
- accent-color: var(--primary);
  border-color: var(--gray);
+ accent-color: var(--primary);
 }

src/components/Select.module.css

@@ -3,6 +3,7 @@
 }
 
 .select {
+ appearance: none;
  min-width: 0;
  min-height: 40px;
  padding: 5px 30px 5px 10px;
@@ -11,7 +12,6 @@
  border-radius: var(--rounded);
  background: var(--off-white);
  transition: box-shadow var(--fast);
- appearance: none;
 }
 
 .select:hover {

src/components/Textbox.module.css

@@ -6,8 +6,8 @@
  width: 150px;
  min-width: 100px;
  max-width: 300px;
- resize: horizontal;
  overflow: hidden;
+ resize: horizontal;
 }
 
 .input {

src/main.tsx

@@ -5,5 +5,5 @@ import App from "@/App";
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
  <App />
- </React.StrictMode>
+ </React.StrictMode>,
 );

src/sections/Canvas.module.css

@@ -4,10 +4,10 @@
  max-height: calc(100vh - 80px);
  overflow-x: auto;
  overflow-y: auto;
+ outline: solid 1px var(--gray);
  background-image: url("/checkers-light.svg");
  background-size: 3vmin;
  background-attachment: fixed;
- outline: solid 1px var(--gray);
 }
 
 .container[data-dark="true"] {

src/sections/Input.module.css

@@ -1,15 +1,15 @@
 .overlay {
- position: fixed;
- inset: 0;
  display: flex;
- justify-content: center;
+ z-index: 99;
+ position: fixed;
  align-items: center;
- color: var(--white);
+ justify-content: center;
+ inset: 0;
  background: #000c;
- opacity: 0;
+ color: var(--white);
  font-size: 1.2rem;
+ opacity: 0;
  pointer-events: none;
- z-index: 99;
  transition: opacity var(--fast);
 }
 
@@ -20,29 +20,29 @@
 
 .buttons {
  display: flex;
- justify-content: center;
  flex-wrap: wrap;
+ justify-content: center;
  gap: 20px;
 }
 
 .grid {
  display: flex;
  flex-wrap: wrap;
- gap: 40px;
  width: 100%;
+ gap: 40px;
 }
 
 .cell {
  display: flex;
  flex-direction: column;
- gap: 10px;
  width: calc(100% / 2 - 40px / 2);
- height: 150px;
- max-width: 100%;
  min-width: 200px;
+ max-width: 100%;
+ height: 150px;
  min-height: 100px;
- resize: both;
  overflow: hidden;
+ gap: 10px;
+ resize: both;
 }
 
 .cell:only-child {

src/sections/Input.tsx

@@ -26,7 +26,7 @@ const Input = () => {
  Array.from(files).map(async (file) => ({
  filename: file.name,
  source: await file.text(),
- }))
+ })),
  );
 
  /** add files to list */

src/sections/Options.tsx

@@ -122,7 +122,7 @@ const Options = () => {
  }
  tooltip={`Default from SVG: ${toFixed(
  image.inferred.width || 0,
- 2
+ 2,
  )}`}
  aria-label="Width, in pixels"
  />
@@ -137,7 +137,7 @@ const Options = () => {
  }
  tooltip={`Default from SVG: ${toFixed(
  image.inferred.height || 0,
- 2
+ 2,
  )}`}
  aria-label="Height, in pixels"
  />
@@ -150,7 +150,7 @@ const Options = () => {
  setImage(
  getAll ? -1 : index,
  "aspectLock",
- image.aspectLock ? 0 : Infinity
+ image.aspectLock ? 0 : Infinity,
  )
  }
  data-tooltip={

src/sections/Output.module.css

@@ -1,29 +1,29 @@
 .grid {
  display: flex;
- justify-content: center;
- align-items: flex-end;
  flex-wrap: wrap;
+ align-items: flex-end;
+ justify-content: center;
  gap: 40px;
 }
 
 .cell {
  display: flex;
- align-items: center;
  flex-direction: column;
+ align-items: center;
  gap: 10px;
  text-align: center;
 }
 
 .actions {
  display: flex;
- justify-content: center;
  flex-wrap: wrap;
+ justify-content: center;
  gap: 10px;
 }
 
 .buttons {
  display: flex;
- justify-content: center;
  flex-wrap: wrap;
+ justify-content: center;
  gap: 20px;
 }

src/sections/Output.tsx

@@ -64,7 +64,7 @@ const Output = () => {
  setImage(
  getAll ? -1 : index,
  "darkCheckers",
- !image.darkCheckers
+ !image.darkCheckers,
  )
  }
  data-tooltip={`Show ${