[build] update mini-css-extract-plugin dependencies

.gitignore

@@ -55,9 +55,6 @@ npm-debug.log
 yarn-error.log
 yarn-debug.log
 
-# Ignore yarn state file
-.yarn/install-state.gz
-
 # Ignore vagrant log files
 *-cloudimg-console.log
 

.nvmrc

@@ -0,0 +1 @@
+20.8

.woodpecker/lint.yaml

@@ -1,23 +1,23 @@
 steps:
   lint:
-    image: docker.io/superseriousbusiness/masto-fe-standalone-woodpecker-build:0.1.0
+    image: node:22-alpine
     pull: true
-
+    
     # https://woodpecker-ci.org/docs/usage/volumes
     volumes:
       - /woodpecker/masto-fe-standalone/node_modules:/woodpecker/src/codeberg.org/superseriousbusiness/masto-fe-standalone/node_modules
       - /woodpecker/masto-fe-standalone/.eslintcache:/woodpecker/src/codeberg.org/superseriousbusiness/masto-fe-standalone/.eslintcache
-
+    
     # https://woodpecker-ci.org/docs/administration/configuration/backends/docker#run-user
     backend_options:
       docker:
         user: 1000:1000
-
+    
     # https://woodpecker-ci.org/docs/usage/workflow-syntax#commands
     commands:
       - yarn
       - yarn lint:js
-
+    
     # https://woodpecker-ci.org/docs/usage/workflow-syntax#when---conditional-execution
     when:
       - event: pull_request

.yarnrc.yml

@@ -1 +0,0 @@
-nodeLinker: node-modules

CONTRIBUTING.md

@@ -4,11 +4,7 @@
 
 ## Dependencies
 
-To work on the code, you must have Node installed.
-
-To avoid fuckery, Node Version Manager is **highly recommended**: https://github.com/nvm-sh/nvm. You can then install the latest `lts` version of node with `nvm install --lts && nvm use --lts`.
-
-You should install yarn as described [here](https://yarnpkg.com/getting-started/install) and/or [here](https://yarnpkg.com/migration/guide).
+To work on the code decently, you should have Node and Yarn installed. To avoid fuckery, Node Version Manager is **highly recommended**: https://github.com/nvm-sh/nvm.
 
 ## Testing Locally
 

Dockerfile

@@ -1,5 +1,5 @@
 ### BUILDER IMAGE ###
-FROM docker.io/superseriousbusiness/masto-fe-standalone-woodpecker-build:0.1.0 AS builder
+FROM node:lts-alpine AS builder
 
 # Prepare the build directory, copy
 # relevant source + config files over.

app/javascript/flavours/glitch/actions/server.js

@@ -21,20 +21,17 @@ export const fetchServer = () => (dispatch, getState) => {
 
   dispatch(fetchServerRequest());
 
-  /* global data */
   try {
     api(getState)
-      .get('/api/v2/instance').then({ data }).catch(error => {
-        console.error(error);
-      });
-    if (data.contact.account) dispatch(importFetchedAccount(data.contact.account));
-    dispatch(fetchServerSuccess(data));
+      .get('/api/v2/instance').then({ data })
+        if (data.contact.account) dispatch(importFetchedAccount(data.contact.account));
+        dispatch(fetchServerSuccess(data));
   } catch (e) {
     api(getState)
       .get('/api/v1/instance').then(({ data }) => {
         if (data.contact_account) dispatch(importFetchedAccount(data.contact_account));
         dispatch(fetchServerSuccess(data));
-      }).catch(err => dispatch(fetchServerFail(err)));
+    }).catch(err => dispatch(fetchServerFail(err)));
   }
 };
 

app/javascript/flavours/glitch/features/ui/components/focal_point_modal.jsx

@@ -24,8 +24,9 @@ import CharacterCounter from 'flavours/glitch/features/compose/components/charac
 import UploadProgress from 'flavours/glitch/features/compose/components/upload_progress';
 import { Tesseract as fetchTesseract } from 'flavours/glitch/features/ui/util/async-components';
 import Video, { getPointerPosition } from 'flavours/glitch/features/video';
-import { me , maxMediaDescChars } from 'flavours/glitch/initial_state';
+import { me } from 'flavours/glitch/initial_state';
 import { assetHost } from 'flavours/glitch/utils/config';
+import { maxMediaDescChars } from 'flavours/glitch/initial_state';
 
 import { changeUploadCompose, uploadThumbnail, onChangeMediaDescription, onChangeMediaFocus } from '../../../actions/compose';
 

app/javascript/flavours/glitch/styles/_mixins.scss

@@ -52,6 +52,7 @@
 }
 
 @mixin search-input() {
+  outline: 0;
   box-sizing: border-box;
   width: 100%;
   border: 0;

app/javascript/flavours/glitch/styles/basics.scss

@@ -164,6 +164,10 @@ body {
 button {
   font-family: inherit;
   cursor: pointer;
+
+  &:focus {
+    outline: none;
+  }
 }
 
 .app-holder {
@@ -174,6 +178,7 @@ button {
     width: 100%;
     align-items: center;
     justify-content: center;
+    outline: 0 !important;
   }
 
   & > noscript {
@@ -245,6 +250,7 @@ button {
     margin: 0;
     line-height: inherit;
     cursor: pointer;
+    outline: 0;
     transition: color 300ms linear;
     text-decoration: underline;
 

app/javascript/flavours/glitch/styles/components/accounts.scss

@@ -753,6 +753,7 @@
       font-size: 14px;
       resize: none;
       border: 0;
+      outline: 0;
       border-radius: 4px;
 
       &::placeholder {

app/javascript/flavours/glitch/styles/components/columns.scss

@@ -260,6 +260,10 @@ $ui-header-height: 55px;
     background: lighten($ui-base-color, 11%);
   }
 
+  &:focus {
+    outline: 0;
+  }
+
   &--transparent {
     background: transparent;
     color: $ui-secondary-color;
@@ -346,6 +350,7 @@ $ui-header-height: 55px;
   cursor: pointer;
   position: relative;
   z-index: 2;
+  outline: 0;
   overflow: hidden;
 
   & > button {
@@ -372,6 +377,11 @@ $ui-header-height: 55px;
       text-shadow: 0 0 10px rgba($ui-highlight-color, 0.4);
     }
   }
+
+  &:focus,
+  &:active {
+    outline: 0;
+  }
 }
 
 .column {
@@ -733,6 +743,10 @@ $ui-header-height: 55px;
     input {
       width: 100%;
       margin-bottom: 6px;
+
+      &:focus {
+        outline: 0;
+      }
     }
   }
 
@@ -772,6 +786,16 @@ $ui-header-height: 55px;
         color: lighten($darker-text-color, 4%);
       }
 
+      &::-moz-focus-inner {
+        border: 0;
+      }
+
+      &::-moz-focus-inner,
+      &:focus,
+      &:active {
+        outline: 0 !important;
+      }
+
       &:focus {
         background: lighten($ui-base-color, 4%);
       }

app/javascript/flavours/glitch/styles/components/compose_form.scss

@@ -50,6 +50,7 @@
     border-radius: 4px;
     padding: 10px;
     width: 100%;
+    outline: 0;
     color: $inverted-text-color;
     background: $simple-background-color;
     font-size: 14px;
@@ -60,6 +61,9 @@
       color: $dark-text-color;
     }
 
+    &:focus {
+      outline: 0;
+    }
     @include single-column('screen and (max-width: 630px)') {
       font-size: 16px;
     }
@@ -216,6 +220,7 @@
       padding: 10px 32px 0 10px;
       width: 100%;
       min-height: 100px;
+      outline: 0;
       color: $inverted-text-color;
       background: $simple-background-color;
       font-size: 14px;
@@ -231,6 +236,10 @@
         all: unset;
       }
 
+      &:focus {
+        outline: 0;
+      }
+
       @include single-column('screen and (max-width: 630px)') {
         font-size: 16px;
       }
@@ -661,6 +670,7 @@
         &.active {
           background: $ui-highlight-color;
           color: $primary-text-color;
+          outline: 0;
 
           .language-dropdown__dropdown__results__item__common-name {
             color: $secondary-text-color;

app/javascript/flavours/glitch/styles/components/drawer.scss

@@ -77,6 +77,7 @@
 
     &:focus,
     &:hover {
+      outline: none;
       background: lighten($ui-base-color, 3%);
       transition: background 200ms ease-out;
     }

app/javascript/flavours/glitch/styles/components/emoji.scss

@@ -76,8 +76,14 @@
   padding-bottom: 2px;
   padding-inline-start: 2px;
   padding-inline-end: 5px;
+  outline: 0;
   cursor: pointer;
 
+  &:active,
+  &:focus {
+    outline: 0 !important;
+  }
+
   img {
     filter: grayscale(100%);
     opacity: 0.8;

app/javascript/flavours/glitch/styles/components/emoji_picker.scss

@@ -123,6 +123,16 @@
     border: 1px solid $ui-secondary-color;
     border-radius: 4px;
 
+    &::-moz-focus-inner {
+      border: 0;
+    }
+
+    &::-moz-focus-inner,
+    &:focus,
+    &:active {
+      outline: 0 !important;
+    }
+
     &::-webkit-search-cancel-button {
       display: none;
     }

app/javascript/flavours/glitch/styles/components/local_settings.scss

@@ -60,6 +60,7 @@
   border-bottom: 1px $ui-secondary-color solid;
   cursor: pointer;
   text-decoration: none;
+  outline: none;
   transition: background 0.3s;
   box-sizing: border-box;
   width: 100%;

app/javascript/flavours/glitch/styles/components/media.scss

@@ -454,6 +454,10 @@
     height: 100% !important;
   }
 
+  &:focus {
+    outline: 0;
+  }
+
   .detailed-status & {
     width: 100%;
     height: 100%;
@@ -479,6 +483,7 @@
       max-height: 100% !important;
       width: 100% !important;
       height: 100% !important;
+      outline: 0;
     }
   }
 
@@ -585,6 +590,7 @@
 
     .player-button {
       display: inline-block;
+      outline: 0;
       flex: 0 0 auto;
       background: transparent;
       padding: 5px;

app/javascript/flavours/glitch/styles/components/misc.scss

@@ -198,6 +198,16 @@
     transition: none;
   }
 
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  &::-moz-focus-inner,
+  &:focus,
+  &:active {
+    outline: 0 !important;
+  }
+
   &.inverted {
     color: $lighter-text-color;
 
@@ -272,6 +282,7 @@
   cursor: pointer;
   padding: 0 3px;
   white-space: nowrap;
+  outline: 0;
   transition: all 100ms ease-in;
   transition-property: background-color, color;
 
@@ -297,6 +308,16 @@
   &.active {
     color: $highlight-text-color;
   }
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  &::-moz-focus-inner,
+  &:focus,
+  &:active {
+    outline: 0 !important;
+  }
 }
 
 body > [data-popper-placement] {
@@ -602,6 +623,7 @@ body > [data-popper-placement] {
     &:hover,
     &:active {
       background: var(--dropdown-border-color);
+      outline: 0;
     }
   }
 }
@@ -1016,6 +1038,7 @@ body > [data-popper-placement] {
   background: transparent;
   border: 0;
   border-bottom: 2px solid $ui-primary-color;
+  outline: 0;
   box-sizing: border-box;
   display: block;
   font-family: inherit;
@@ -1172,8 +1195,12 @@ button.icon-button.active i.fa-retweet {
     align-items: center;
   }
 
-  &:focus.ckbox {
-    box-shadow: 0 0 1px 1px $ui-highlight-color;
+  &:focus {
+    outline: 0 !important;
+
+    .ckbox {
+      box-shadow: 0 0 1px 1px $ui-highlight-color;
+    }
   }
 }
 
@@ -1496,6 +1523,7 @@ button.icon-button.active i.fa-retweet {
 
   &:focus {
     background: lighten($ui-base-color, 2%);
+    outline: 0;
   }
 
   &__avatar {

app/javascript/flavours/glitch/styles/components/modal.scss

@@ -693,12 +693,17 @@
     line-height: 22px;
     resize: vertical;
     border: 0;
+    outline: 0;
     border-radius: 4px;
     margin: 20px 0;
 
     &::placeholder {
       color: $dark-text-color;
     }
+
+    &:focus {
+      outline: 0;
+    }
   }
 
   &__toggle {
@@ -816,6 +821,7 @@
     font-family: inherit;
     font-size: 14px;
     resize: none;
+    outline: 0;
     border-radius: 4px;
     border: 1px solid $ui-secondary-color;
     min-height: 100px;
@@ -1013,6 +1019,7 @@
     color: $inverted-text-color;
     display: inline-block;
     width: auto;
+    outline: 0;
     font-family: inherit;
     background: $simple-background-color
       url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>")
@@ -1121,6 +1128,7 @@
     }
 
     .embed-modal__html {
+      outline: 0;
       box-sizing: border-box;
       display: block;
       width: 100%;
@@ -1134,6 +1142,16 @@
       margin-bottom: 15px;
       border-radius: 4px;
 
+      &::-moz-focus-inner {
+        border: 0;
+      }
+
+      &::-moz-focus-inner,
+      &:focus,
+      &:active {
+        outline: 0 !important;
+      }
+
       &:focus {
         background: lighten($ui-base-color, 4%);
       }
@@ -1359,6 +1377,10 @@ img.modal-warning {
         &::placeholder {
           color: lighten($darker-text-color, 4%);
         }
+
+        &:focus {
+          outline: 0;
+        }
       }
 
       .button {
@@ -1455,6 +1477,7 @@ img.modal-warning {
     overflow: hidden;
 
     &:focus {
+      outline: 0;
       background: darken($ui-base-color, 4%);
     }
   }

app/javascript/flavours/glitch/styles/components/search.scss

@@ -107,17 +107,37 @@
     color: lighten($darker-text-color, 4%);
   }
 
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  &::-moz-focus-inner,
+  &:focus,
+  &:active {
+    outline: 0 !important;
+  }
+
   &:focus {
     background: lighten($ui-base-color, 4%);
   }
 }
 
 .search__icon {
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  &::-moz-focus-inner,
+  &:focus {
+    outline: 0 !important;
+  }
+
   .fa {
     position: absolute;
     top: 16px;
     inset-inline-end: 10px;
     display: inline-block;
+    opacity: 0;
     transition: all 100ms linear;
     transition-property: color, transform, opacity;
     font-size: 18px;

app/javascript/flavours/glitch/styles/components/status.scss

@@ -57,6 +57,10 @@
   padding-top: 5px;
   clear: both;
 
+  &:focus {
+    outline: 0;
+  }
+
   .emojione {
     width: 20px;
     height: 20px;
@@ -209,6 +213,7 @@
 
 .focusable {
   &:focus {
+    outline: 0;
     background: lighten($ui-base-color, 4%);
 
     &.status.status-direct {

app/javascript/flavours/glitch/styles/containers.scss

@@ -27,6 +27,7 @@
       align-items: center;
       color: $primary-text-color;
       text-decoration: none;
+      outline: 0;
       padding: 12px 16px;
       line-height: 32px;
       font-weight: 500;

app/javascript/flavours/glitch/styles/forms.scss

@@ -432,6 +432,7 @@ code {
     color: $primary-text-color;
     display: block;
     width: 100%;
+    outline: 0;
     font-family: inherit;
     resize: vertical;
     background: darken($ui-base-color, 10%);
@@ -534,6 +535,7 @@ code {
     box-sizing: border-box;
     cursor: pointer;
     font-weight: 500;
+    outline: 0;
     margin-bottom: 10px;
     margin-inline-end: 10px;
 
@@ -579,6 +581,7 @@ code {
     color: $primary-text-color;
     display: block;
     width: 100%;
+    outline: 0;
     font-family: inherit;
     resize: vertical;
     background: darken($ui-base-color, 10%)
@@ -699,6 +702,7 @@ code {
   }
 
   .oauth-code {
+    outline: 0;
     box-sizing: border-box;
     display: block;
     width: 100%;
@@ -710,6 +714,16 @@ code {
     font-size: 14px;
     margin: 0;
 
+    &::-moz-focus-inner {
+      border: 0;
+    }
+
+    &::-moz-focus-inner,
+    &:focus,
+    &:active {
+      outline: 0 !important;
+    }
+
     &:focus {
       background: lighten($ui-base-color, 4%);
     }

app/javascript/flavours/glitch/styles/login.scss

@@ -5,7 +5,7 @@
 @import 'basics';
 
 body {
-    font-family: ui-rounded, mastodon-font-sans-serif, sans-serif;
+    font-family: ui-rounded, 'mastodon-font-sans-serif', sans-serif;
     font-size: 1rem;
     line-height: 1.5;
 }
@@ -88,7 +88,7 @@ button {
 
 input[type='text'] {
     display: block;
-    margin: 0;
+    marhing: 0;
     padding: 15px;
     border: 1px solid lighten(#282c37, 7%);
     border-radius: 4px;
@@ -102,7 +102,7 @@ input[type='text'] {
 }
 
 .content {
-    padding: 20px 15px;
+    padding: 20px 15px 20px;
     border-radius: 4px;
     border: 1px solid lighten(#39404f, 7%);
     color: #fff;

app/javascript/flavours/glitch/styles/polls.scss

@@ -85,6 +85,7 @@
       width: 100%;
       font-size: 14px;
       color: $inverted-text-color;
+      outline: 0;
       font-family: inherit;
       background: $simple-background-color;
       border: 1px solid darken($simple-background-color, 14%);
@@ -138,6 +139,16 @@
       border-color: $valid-value-color;
     }
 
+    &::-moz-focus-inner {
+      outline: 0 !important;
+      border: 0;
+    }
+
+    &:focus,
+    &:active {
+      outline: 0 !important;
+    }
+
     &.disabled {
       border-color: $dark-text-color;
 
@@ -274,6 +285,7 @@
     color: $inverted-text-color;
     display: inline-block;
     width: auto;
+    outline: 0;
     font-family: inherit;
     background: $simple-background-color
       url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>")

app/javascript/flavours/glitch/styles/variables.scss

@@ -96,8 +96,7 @@ $dismiss-overlay-width: 4rem;
 :root {
   --dropdown-border-color: #{lighten($ui-base-color, 12%)};
   --dropdown-background-color: #{lighten($ui-base-color, 4%)};
-  --dropdown-shadow:
-    0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
+  --dropdown-shadow: 0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
     0 8px 10px -6px #{rgba($base-shadow-color, 0.25)};
   --modal-background-color: #{darken($ui-base-color, 4%)};
   --modal-border-color: #{lighten($ui-base-color, 4%)};

app/javascript/mastodon/actions/server.js

@@ -17,20 +17,17 @@ export const fetchServer = () => (dispatch, getState) => {
 
   dispatch(fetchServerRequest());
 
-  /* global data */
   try {
     api(getState)
-      .get('/api/v2/instance').then({ data }).catch(error => {
-        console.error(error);
-      });
-    if (data.contact.account) dispatch(importFetchedAccount(data.contact.account));
-    dispatch(fetchServerSuccess(data));
+      .get('/api/v2/instance').then({ data });
+        if (data.contact.account) dispatch(importFetchedAccount(data.contact.account));
+        dispatch(fetchServerSuccess(data));
   } catch (e) {
     api(getState)
       .get('/api/v1/instance').then(({ data }) => {
         if (data.contact_account) dispatch(importFetchedAccount(data.contact_account));
         dispatch(fetchServerSuccess(data));
-      }).catch(err => dispatch(fetchServerFail(err)));
+    }).catch(err => dispatch(fetchServerFail(err)));
   }
 };
 

app/javascript/mastodon/features/ui/components/focal_point_modal.jsx

@@ -23,8 +23,9 @@ import Audio from 'mastodon/features/audio';
 import CharacterCounter from 'mastodon/features/compose/components/character_counter';
 import UploadProgress from 'mastodon/features/compose/components/upload_progress';
 import { Tesseract as fetchTesseract } from 'mastodon/features/ui/util/async-components';
-import { me , maxMediaDescChars } from 'mastodon/initial_state';
+import { me } from 'mastodon/initial_state';
 import { assetHost } from 'mastodon/utils/config';
+import { maxMediaDescChars } from 'mastodon/initial_state';
 
 import { changeUploadCompose, uploadThumbnail, onChangeMediaDescription, onChangeMediaFocus } from '../../../actions/compose';
 import Video, { getPointerPosition } from '../../video';

app/javascript/styles/mastodon/variables.scss

@@ -96,8 +96,7 @@ $font-monospace: 'mastodon-font-monospace' !default;
 :root {
   --dropdown-border-color: #{lighten($ui-base-color, 12%)};
   --dropdown-background-color: #{lighten($ui-base-color, 4%)};
-  --dropdown-shadow:
-    0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
+  --dropdown-shadow: 0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
     0 8px 10px -6px #{rgba($base-shadow-color, 0.25)};
   --modal-background-color: #{darken($ui-base-color, 4%)};
   --modal-border-color: #{lighten($ui-base-color, 4%)};

package.json

@@ -208,7 +208,7 @@
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "lint-staged": "^13.2.2",
-    "prettier": "3.6.2",
+    "prettier": "^3.0.0",
     "react-test-renderer": "^18.2.0",
     "stylelint": "^15.10.1",
     "stylelint-config-standard-scss": "^11.0.0",
@@ -230,6 +230,5 @@
     "Capfile|Gemfile|*.{rb,ruby,ru,rake}": "bundle exec rubocop --force-exclusion -a",
     "*.{js,jsx,ts,tsx}": "eslint --fix",
     "*.{css,scss}": "stylelint --fix"
-  },
-  "packageManager": "yarn@4.10.3"
+  }
 }