Using @trivago/prettier-plugin-sort-imports

leaky-ships/.prettierrc.json

@@ -1,5 +1,8 @@
 {
   "semi": false,
-  "plugins": ["prettier-plugin-tailwindcss"],
+  "plugins": [
+    "prettier-plugin-tailwindcss",
+    "@trivago/prettier-plugin-sort-imports"
+  ],
   "pluginSearchDirs": false
 }

leaky-ships/components/Gamefield/BorderTiles.tsx

@@ -1,6 +1,6 @@
-import { CSSProperties, Dispatch, SetStateAction } from "react"
-import { borderCN, cornerCN, fieldIndex } from "@lib/utils/helpers"
 import { Position, MouseCursor } from "../../interfaces/frontend"
+import { borderCN, cornerCN, fieldIndex } from "@lib/utils/helpers"
+import { CSSProperties, Dispatch, SetStateAction } from "react"
 
 type TilesType = {
   key: number

leaky-ships/components/Gamefield/EventBar.tsx

@@ -1,6 +1,6 @@
-import React, { Dispatch, SetStateAction } from "react"
 import { Items, Target } from "../../interfaces/frontend"
 import Item from "./Item"
+import React, { Dispatch, SetStateAction } from "react"
 
 function EventBar({
   props: { setMode, setTarget },

leaky-ships/components/Gamefield/Gamefield.tsx

@@ -1,4 +1,3 @@
-import { CSSProperties } from "react"
 // import Bluetooth from './Bluetooth'
 import BorderTiles from "./BorderTiles"
 import EventBar from "./EventBar"
@@ -6,8 +5,9 @@ import EventBar from "./EventBar"
 import HitElems from "./HitElems"
 import Labeling from "./Labeling"
 import Ships from "./Ships"
-import useGameEvent from "@lib/hooks/useGameEvent"
 import Targets from "./Targets"
+import useGameEvent from "@lib/hooks/useGameEvent"
+import { CSSProperties } from "react"
 
 function Gamefield() {
   const count = 12

leaky-ships/components/Gamefield/GamefieldPointer.tsx

@@ -1,9 +1,9 @@
-import { faCrosshairs } from "@fortawesome/pro-solid-svg-icons"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { CSSProperties } from "react"
-import classNames from "classnames"
-import { faRadar } from "@fortawesome/pro-thin-svg-icons"
 import { Target, TargetList } from "../../interfaces/frontend"
+import { faCrosshairs } from "@fortawesome/pro-solid-svg-icons"
+import { faRadar } from "@fortawesome/pro-thin-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import classNames from "classnames"
+import { CSSProperties } from "react"
 
 export interface PointerProps extends Target, TargetList {
   imply: boolean

leaky-ships/components/Gamefield/HitElems.tsx

@@ -1,7 +1,7 @@
+import { Hit } from "../../interfaces/frontend"
 import { faBurst, faXmark } from "@fortawesome/pro-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { CSSProperties } from "react"
-import { Hit } from "../../interfaces/frontend"
 
 function HitElems({ hits }: { hits: Hit[] }) {
   return (

leaky-ships/components/Gamefield/Labeling.tsx

@@ -1,7 +1,7 @@
+import { Field } from "../../interfaces/frontend"
+import { fieldIndex } from "@lib/utils/helpers"
 import classNames from "classnames"
 import { CSSProperties } from "react"
-import { fieldIndex } from "@lib/utils/helpers"
-import { Field } from "../../interfaces/frontend"
 
 function Labeling({ count }: { count: number }) {
   let elems: (Field & {

leaky-ships/components/Gamefield/Targets.tsx

@@ -1,6 +1,6 @@
-import React from "react"
 import { Target } from "../../interfaces/frontend"
 import GamefieldPointer, { PointerProps } from "./GamefieldPointer"
+import React from "react"
 
 function Targets({
   props: { composeTargetTiles, target, targetPreview },

leaky-ships/components/Lobby/LobbyFrame.tsx

@@ -1,6 +1,6 @@
-import { Fragment, useEffect, useState } from "react"
 import Icon from "./Icon"
 import Player from "./Player"
+import { Fragment, useEffect, useState } from "react"
 
 function LobbyFrame({ openSettings }: { openSettings: () => void }) {
   const [enemy, setEnemy] = useState(false)

leaky-ships/components/Lobby/SettingsFrame/Settings.tsx

@@ -1,8 +1,8 @@
-import { faXmark } from "@fortawesome/pro-solid-svg-icons"
+import Setting from "./Setting"
 import { faRotateLeft } from "@fortawesome/pro-regular-svg-icons"
+import { faXmark } from "@fortawesome/pro-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { useState } from "react"
-import Setting from "./Setting"
 
 const settingOptionsInit: { [key: string]: boolean } = {
   allowSpectators: false,

leaky-ships/components/OptionButton.tsx

@@ -15,7 +15,7 @@ function OptionButton({
 }) {
   return (
     <button
-      className="flex w-full flex-row items-center justify-between rounded-xl border-b-4 border-shield-gray bg-voidDark py-2 pr-4 pl-8 text-lg text-grayish duration-100 first:mt-4 last:mt-4 active:border-t-4 active:border-b-0 sm:py-4 sm:pr-8 sm:pl-16 sm:text-4xl sm:first:mt-8 sm:last:mt-8"
+      className="flex w-full flex-row items-center justify-between rounded-xl border-b-4 border-shield-gray bg-voidDark py-2 pl-8 pr-4 text-lg text-grayish duration-100 first:mt-4 last:mt-4 active:border-b-0 active:border-t-4 sm:py-4 sm:pl-16 sm:pr-8 sm:text-4xl sm:first:mt-8 sm:last:mt-8"
       onClick={() => action && setTimeout(action, 200)}
     >
       <span className="mx-auto">{children}</span>

leaky-ships/components/SocketIO.tsx

@@ -1,6 +1,6 @@
+import { ClientToServerEvents, ServerToClientEvents } from "../pages/api/ws"
 import { useEffect } from "react"
 import { io, Socket } from "socket.io-client"
-import { ClientToServerEvents, ServerToClientEvents } from "../pages/api/ws"
 
 function SocketIO() {
   useEffect(() => {

leaky-ships/interfaces/NextApiSocket.ts

@@ -1,6 +1,6 @@
 import type { Server as HTTPServer } from "http"
-import type { NextApiResponse } from "next"
 import type { Socket as NetSocket } from "net"
+import type { NextApiResponse } from "next"
 import type { Server as IOServer } from "socket.io"
 
 interface SocketServer extends HTTPServer {

leaky-ships/lib/backend/components/checkPasswordIsValid.ts

@@ -1,7 +1,7 @@
-import type { Player } from "@prisma/client"
-import bcrypt from "bcrypt"
 import { rejectionErrors } from "../errors"
 import sendError, { API } from "./sendError"
+import type { Player } from "@prisma/client"
+import bcrypt from "bcrypt"
 
 export default async function checkPasswordIsValid(
   context: API,

leaky-ships/lib/backend/components/checkTokenIsValid.ts

@@ -1,8 +1,8 @@
-import jwt from "jsonwebtoken"
 import { rejectionErrorFns } from "../errors"
 import jwtVerifyCatch from "../jwtVerifyCatch"
-import sendError, { API } from "./sendError"
 import type { IdToken, RawToken } from "./createTokenDB"
+import sendError, { API } from "./sendError"
+import jwt from "jsonwebtoken"
 
 async function checkTokenIsValid(
   context: API,

leaky-ships/lib/backend/components/createPlayerDB.ts

@@ -1,6 +1,6 @@
-import type { Player } from "@prisma/client"
 import prisma from "../../prisma"
 import logging from "../logging"
+import type { Player } from "@prisma/client"
 
 async function createPlayerDB(next: (player: Player) => void) {
   const player = await prisma.player.create({ data: {} })

leaky-ships/lib/backend/components/createTokenDB.ts

@@ -1,6 +1,6 @@
+import prisma from "../../prisma"
 import type { Player, Token, TokenType } from "@prisma/client"
 import jwt from "jsonwebtoken"
-import prisma from "../../prisma"
 
 export interface RawToken {
   value: string

leaky-ships/lib/backend/components/getPlayerByIdDB.ts

@@ -1,7 +1,7 @@
-import type { Player, Token } from "@prisma/client"
-import { rejectionErrors } from "../errors"
 import prisma from "../../prisma"
+import { rejectionErrors } from "../errors"
 import sendError, { API } from "./sendError"
+import type { Player, Token } from "@prisma/client"
 
 export default async function getPlayerByIdDB(
   context: API,

leaky-ships/lib/backend/components/getPlayerByNameDB.ts

@@ -1,7 +1,7 @@
-import type { Player } from "@prisma/client"
-import { rejectionErrors } from "../errors"
 import prisma from "../../prisma"
+import { rejectionErrors } from "../errors"
 import sendError, { API } from "./sendError"
+import type { Player } from "@prisma/client"
 
 export default async function getPlayerByNameDB(
   context: API,

leaky-ships/lib/backend/components/getTokenDB.ts

@@ -1,8 +1,8 @@
-import type { Token } from "@prisma/client"
-import type { IdToken } from "./createTokenDB"
 import prisma from "../../prisma"
 import { rejectionErrorFns, rejectionErrors } from "../errors"
+import type { IdToken } from "./createTokenDB"
 import sendError, { API } from "./sendError"
+import type { Token } from "@prisma/client"
 
 async function getTokenDB(
   context: API,

leaky-ships/lib/backend/components/getTokenFromBody.ts

@@ -1,6 +1,6 @@
+import { rejectionErrorFns } from "../errors"
 import type { RawToken } from "./createTokenDB"
 import sendError, { API } from "./sendError"
-import { rejectionErrorFns } from "../errors"
 
 async function getTokenFromBody(
   context: API,

leaky-ships/lib/backend/components/getUserFromBody.ts

@@ -1,5 +1,5 @@
-import sendError, { API } from "./sendError"
 import { rejectionErrors } from "../errors"
+import sendError, { API } from "./sendError"
 
 async function getUserFromBody(
   context: API,

leaky-ships/lib/backend/components/sendError.ts

@@ -1,6 +1,6 @@
-import type { NextApiRequest, NextApiResponse } from "next"
-import logging from "../logging"
 import type { rejectionError } from "../errors"
+import logging from "../logging"
+import type { NextApiRequest, NextApiResponse } from "next"
 
 export interface API {
   req: NextApiRequest

leaky-ships/lib/backend/components/updatePlayerDB.ts

@@ -1,7 +1,7 @@
-import type { Player, Prisma } from "@prisma/client"
 import prisma from "../../prisma"
-import sendError, { API } from "./sendError"
 import { rejectionErrors } from "../errors"
+import sendError, { API } from "./sendError"
+import type { Player, Prisma } from "@prisma/client"
 
 async function updatePlayerDB(
   context: API,

leaky-ships/lib/backend/errors.ts

@@ -1,5 +1,5 @@
-import { TokenType } from "@prisma/client"
 import { Logging } from "./logging"
+import { TokenType } from "@prisma/client"
 
 export interface rejectionError {
   rejected?: boolean

leaky-ships/lib/backend/jwtVerifyCatch.ts

@@ -1,5 +1,5 @@
-import type { TokenType } from "@prisma/client"
 import type { rejectionError } from "./errors"
+import type { TokenType } from "@prisma/client"
 
 export default function jwtVerifyCatch(
   tokenType: TokenType,

leaky-ships/lib/backend/logging.ts

@@ -1,6 +1,7 @@
-import fs from "fs"
 import colors, { Color } from "colors"
+import fs from "fs"
 import { NextApiRequest } from "next"
+
 colors.enable()
 
 const loggingTemplates: {

leaky-ships/lib/hooks/useGameEvent.ts

@@ -1,11 +1,4 @@
-import { useCallback, useEffect, useReducer, useState } from "react"
-import {
-  hitReducer,
-  initlialLastLeftTile,
-  initlialTarget,
-  initlialTargetPreview,
-  initlialMouseCursor,
-} from "../utils/helpers"
+import type { PointerProps } from "../../components/Gamefield/GamefieldPointer"
 import {
   Hit,
   Mode,
@@ -13,7 +6,14 @@ import {
   Target,
   Position,
 } from "../../interfaces/frontend"
-import type { PointerProps } from "../../components/Gamefield/GamefieldPointer"
+import {
+  hitReducer,
+  initlialLastLeftTile,
+  initlialTarget,
+  initlialTargetPreview,
+  initlialMouseCursor,
+} from "../utils/helpers"
+import { useCallback, useEffect, useReducer, useState } from "react"
 
 const modes: Mode[] = [
   {

leaky-ships/package.json

@@ -36,6 +36,7 @@
   },
   "devDependencies": {
     "@total-typescript/ts-reset": "^0.3.7",
+    "@trivago/prettier-plugin-sort-imports": "^4.1.1",
     "@types/bcrypt": "^5.0.0",
     "@types/jsonwebtoken": "^9.0.1",
     "@types/node": "^18.15.11",

leaky-ships/pages/_app.tsx

@@ -1,7 +1,7 @@
 import "../styles/App.scss"
-import "../styles/grid.scss"
-import "../styles/grid2.scss"
 import "../styles/globals.css"
+import "../styles/grid2.scss"
+import "../styles/grid.scss"
 import type { AppProps } from "next/app"
 
 export default function App({ Component, pageProps }: AppProps) {

leaky-ships/pages/api/user/auth.ts

@@ -1,11 +1,11 @@
-import type { NextApiRequest, NextApiResponse } from "next"
-import sendError from "@backend/components/sendError"
-import getTokenFromCookie from "@backend/components/getTokenFromCookie"
 import checkTokenIsValid from "@backend/components/checkTokenIsValid"
-import getTokenDB from "@backend/components/getTokenDB"
-import getPlayerByIdDB from "@backend/components/getPlayerByIdDB"
 import createTokenDB from "@backend/components/createTokenDB"
+import getPlayerByIdDB from "@backend/components/getPlayerByIdDB"
+import getTokenDB from "@backend/components/getTokenDB"
+import getTokenFromCookie from "@backend/components/getTokenFromCookie"
+import sendError from "@backend/components/sendError"
 import sendResponse from "@backend/components/sendResponse"
+import type { NextApiRequest, NextApiResponse } from "next"
 
 interface Data {
   token: string

leaky-ships/pages/api/user/data.ts

@@ -1,11 +1,11 @@
-import type { NextApiRequest, NextApiResponse } from "next"
-import type { Game } from "@prisma/client"
-import getTokenFromBody from "@backend/components/getTokenFromBody"
 import checkTokenIsValid from "@backend/components/checkTokenIsValid"
-import getTokenDB from "@backend/components/getTokenDB"
 import getPlayerByIdDB from "@backend/components/getPlayerByIdDB"
-import sendResponse from "@backend/components/sendResponse"
+import getTokenDB from "@backend/components/getTokenDB"
+import getTokenFromBody from "@backend/components/getTokenFromBody"
 import sendError from "@backend/components/sendError"
+import sendResponse from "@backend/components/sendResponse"
+import type { Game } from "@prisma/client"
+import type { NextApiRequest, NextApiResponse } from "next"
 
 interface Data {
   games: Game[]

leaky-ships/pages/api/user/login.ts

@@ -1,15 +1,15 @@
-import type { NextApiRequest, NextApiResponse } from "next"
-import { setCookie } from "cookies-next"
-import jwt from "jsonwebtoken"
-import prisma from "@lib/prisma"
-import logging from "@backend/logging"
-import getPlayerByNameDB from "@backend/components/getPlayerByNameDB"
 import checkPasswordIsValid from "@backend/components/checkPasswordIsValid"
 import createTokenDB from "@backend/components/createTokenDB"
-import sendResponse from "@backend/components/sendResponse"
-import sendError, { API } from "@backend/components/sendError"
+import getPlayerByNameDB from "@backend/components/getPlayerByNameDB"
 import getUserFromBody from "@backend/components/getUserFromBody"
+import sendError, { API } from "@backend/components/sendError"
+import sendResponse from "@backend/components/sendResponse"
+import logging from "@backend/logging"
 import { rejectionErrors } from "@lib/backend/errors"
+import prisma from "@lib/prisma"
+import { setCookie } from "cookies-next"
+import jwt from "jsonwebtoken"
+import type { NextApiRequest, NextApiResponse } from "next"
 
 interface Data {
   loggedIn: boolean

leaky-ships/pages/api/user/loginCheck.ts

@@ -1,10 +1,10 @@
-import type { NextApiRequest, NextApiResponse } from "next"
-import sendError from "@backend/components/sendError"
-import getTokenFromCookie from "@backend/components/getTokenFromCookie"
 import checkTokenIsValid from "@backend/components/checkTokenIsValid"
-import getTokenDB from "@backend/components/getTokenDB"
 import getPlayerByIdDB from "@backend/components/getPlayerByIdDB"
+import getTokenDB from "@backend/components/getTokenDB"
+import getTokenFromCookie from "@backend/components/getTokenFromCookie"
+import sendError from "@backend/components/sendError"
 import sendResponse from "@backend/components/sendResponse"
+import type { NextApiRequest, NextApiResponse } from "next"
 
 interface Data {
   token: string

leaky-ships/pages/api/user/logout.ts

@@ -1,10 +1,10 @@
-import type { NextApiRequest, NextApiResponse } from "next"
 import checkTokenIsValid from "@backend/components/checkTokenIsValid"
-import sendResponse from "@backend/components/sendResponse"
-import sendError from "@backend/components/sendError"
-import { deleteCookie } from "cookies-next"
 import getTokenDB from "@backend/components/getTokenDB"
 import getTokenFromCookie from "@backend/components/getTokenFromCookie"
+import sendError from "@backend/components/sendError"
+import sendResponse from "@backend/components/sendResponse"
+import { deleteCookie } from "cookies-next"
+import type { NextApiRequest, NextApiResponse } from "next"
 
 interface Data {
   loggedOut: boolean

leaky-ships/pages/api/user/register.ts

@@ -1,13 +1,13 @@
-import type { NextApiRequest, NextApiResponse } from "next"
-import bcrypt from "bcrypt"
+import checkTokenIsValid from "@backend/components/checkTokenIsValid"
+import getPlayerByIdDB from "@backend/components/getPlayerByIdDB"
+import getTokenDB from "@backend/components/getTokenDB"
+import getTokenFromCookie from "@backend/components/getTokenFromCookie"
+import getUserFromBody from "@backend/components/getUserFromBody"
 import sendError from "@backend/components/sendError"
 import sendResponse from "@backend/components/sendResponse"
-import getUserFromBody from "@backend/components/getUserFromBody"
-import getTokenFromCookie from "@backend/components/getTokenFromCookie"
-import checkTokenIsValid from "@backend/components/checkTokenIsValid"
-import getTokenDB from "@backend/components/getTokenDB"
 import updatePlayerDB from "@backend/components/updatePlayerDB"
-import getPlayerByIdDB from "@backend/components/getPlayerByIdDB"
+import bcrypt from "bcrypt"
+import type { NextApiRequest, NextApiResponse } from "next"
 
 interface Data {
   registered: boolean

leaky-ships/pages/api/user/remove.ts

@@ -1,10 +1,10 @@
-import { NextApiRequest, NextApiResponse } from "next"
-import getPlayerByNameDB from "@backend/components/getPlayerByNameDB"
 import checkPasswordIsValid from "@backend/components/checkPasswordIsValid"
+import getPlayerByNameDB from "@backend/components/getPlayerByNameDB"
+import getUserFromBody from "@backend/components/getUserFromBody"
+import sendError from "@backend/components/sendError"
 import sendResponse from "@backend/components/sendResponse"
 import prisma from "@lib/prisma"
-import sendError from "@backend/components/sendError"
-import getUserFromBody from "@backend/components/getUserFromBody"
+import { NextApiRequest, NextApiResponse } from "next"
 
 interface Data {
   loggedIn: boolean

leaky-ships/pages/api/ws.ts

@@ -1,8 +1,8 @@
-import type { NextApiRequest } from "next"
 import type { NextApiResponseWithSocket } from "../../interfaces/NextApiSocket"
-import { Server } from "socket.io"
-import jwt from "jsonwebtoken"
 import prisma from "@lib/prisma"
+import jwt from "jsonwebtoken"
+import type { NextApiRequest } from "next"
+import { Server } from "socket.io"
 
 export interface ServerToClientEvents {
   // noArg: () => void

leaky-ships/pages/dev/gamefield.tsx

@@ -1,5 +1,5 @@
-import Head from "next/head"
 import Gamefield from "../../components/Gamefield/Gamefield"
+import Head from "next/head"
 
 export default function Home() {
   return (

leaky-ships/pages/dev/grid.tsx

@@ -1,5 +1,5 @@
-import Head from "next/head"
 import Grid from "../../components/Grid"
+import Head from "next/head"
 
 export default function Home() {
   return (

leaky-ships/pages/dev/grid2.tsx

@@ -1,5 +1,5 @@
-import Head from "next/head"
 import Grid2 from "../../components/Grid2"
+import Head from "next/head"
 
 export default function Home() {
   return (

leaky-ships/pages/dev/index.tsx

@@ -1,12 +1,12 @@
-import { faPlus, faUserPlus } from "@fortawesome/pro-solid-svg-icons"
+import BurgerMenu from "../../components/BurgerMenu"
+import Logo from "../../components/Logo"
+import OptionButton from "../../components/OptionButton"
 import { faEye, faLeftLong } from "@fortawesome/pro-regular-svg-icons"
+import { faPlus, faUserPlus } from "@fortawesome/pro-solid-svg-icons"
 import { faCirclePlay } from "@fortawesome/pro-thin-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { useState } from "react"
-import Logo from "../../components/Logo"
-import BurgerMenu from "../../components/BurgerMenu"
-import OptionButton from "../../components/OptionButton"
 import getAccessToken from "@lib/frontend/getAccessToken"
+import { useState } from "react"
 
 export default function Home() {
   const [heWantsToPlay, setHeWantsToPlay] = useState<boolean | null>(false)

leaky-ships/pages/dev/lobby.tsx

@@ -1,10 +1,10 @@
-import Head from "next/head"
-import Logo from "../../components/Logo"
-import LobbyFrame from "../../components/Lobby/LobbyFrame"
 import BurgerMenu from "../../components/BurgerMenu"
-import { useState } from "react"
+import LobbyFrame from "../../components/Lobby/LobbyFrame"
 import Settings from "../../components/Lobby/SettingsFrame/Settings"
+import Logo from "../../components/Logo"
 import classNames from "classnames"
+import Head from "next/head"
+import { useState } from "react"
 
 export default function Home() {
   const [settings, setSettings] = useState(false)

leaky-ships/pages/dev/login.tsx

@@ -1,13 +1,13 @@
+import { faWifiExclamation } from "@fortawesome/pro-duotone-svg-icons"
 import {
   faArrowLeft,
   faCheck,
   faSpinnerThird,
   faXmark,
 } from "@fortawesome/pro-solid-svg-icons"
-import { faWifiExclamation } from "@fortawesome/pro-duotone-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { FormEvent, useState } from "react"
 import classNames from "classnames"
+import { FormEvent, useState } from "react"
 
 enum ProcessStates {
   "waiting",

leaky-ships/pages/dev/socket.tsx

@@ -1,7 +1,8 @@
+import type { ClientToServerEvents, ServerToClientEvents } from "../api/ws"
+import getAccessToken from "@lib/frontend/getAccessToken"
 import { ChangeEventHandler, useEffect, useState } from "react"
 import { io, Socket } from "socket.io-client"
-import getAccessToken from "@lib/frontend/getAccessToken"
-import type { ClientToServerEvents, ServerToClientEvents } from "../api/ws"
+
 let socket: Socket<ServerToClientEvents, ClientToServerEvents>
 
 const Home = () => {

leaky-ships/pnpm-lock.yaml

@@ -78,6 +78,9 @@ devDependencies:
   '@total-typescript/ts-reset':
     specifier: ^0.3.7
     version: 0.3.7
+  '@trivago/prettier-plugin-sort-imports':
+    specifier: ^4.1.1
+    version: 4.1.1(prettier@2.8.7)
   '@types/bcrypt':
     specifier: ^5.0.0
     version: 5.0.0
@@ -110,7 +113,7 @@ devDependencies:
     version: 2.8.7
   prettier-plugin-tailwindcss:
     specifier: ^0.2.7
-    version: 0.2.7(prettier@2.8.7)
+    version: 0.2.7(@trivago/prettier-plugin-sort-imports@4.1.1)(prettier@2.8.7)
   sass:
     specifier: ^1.61.0
     version: 1.61.0
@@ -120,6 +123,76 @@ devDependencies:
 
 packages:
 
+  /@babel/code-frame@7.21.4:
+    resolution: {integrity: sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/highlight': 7.18.6
+    dev: true
+
+  /@babel/generator@7.17.7:
+    resolution: {integrity: sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.17.0
+      jsesc: 2.5.2
+      source-map: 0.5.7
+    dev: true
+
+  /@babel/helper-environment-visitor@7.18.9:
+    resolution: {integrity: sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helper-function-name@7.21.0:
+    resolution: {integrity: sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.20.7
+      '@babel/types': 7.21.4
+    dev: true
+
+  /@babel/helper-hoist-variables@7.18.6:
+    resolution: {integrity: sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.21.4
+    dev: true
+
+  /@babel/helper-split-export-declaration@7.18.6:
+    resolution: {integrity: sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.21.4
+    dev: true
+
+  /@babel/helper-string-parser@7.19.4:
+    resolution: {integrity: sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helper-validator-identifier@7.19.1:
+    resolution: {integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/highlight@7.18.6:
+    resolution: {integrity: sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-validator-identifier': 7.19.1
+      chalk: 2.4.2
+      js-tokens: 4.0.0
+    dev: true
+
+  /@babel/parser@7.21.4:
+    resolution: {integrity: sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.17.0
+    dev: true
+
   /@babel/runtime@7.21.0:
     resolution: {integrity: sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==}
     engines: {node: '>=6.9.0'}
@@ -127,6 +200,50 @@ packages:
       regenerator-runtime: 0.13.11
     dev: false
 
+  /@babel/template@7.20.7:
+    resolution: {integrity: sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.21.4
+      '@babel/parser': 7.21.4
+      '@babel/types': 7.21.4
+    dev: true
+
+  /@babel/traverse@7.17.3:
+    resolution: {integrity: sha512-5irClVky7TxRWIRtxlh2WPUUOLhcPN06AGgaQSB8AEwuyEBgJVuJ5imdHm5zxk8w0QS5T+tDfnDxAlhWjpb7cw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.21.4
+      '@babel/generator': 7.17.7
+      '@babel/helper-environment-visitor': 7.18.9
+      '@babel/helper-function-name': 7.21.0
+      '@babel/helper-hoist-variables': 7.18.6
+      '@babel/helper-split-export-declaration': 7.18.6
+      '@babel/parser': 7.21.4
+      '@babel/types': 7.17.0
+      debug: 4.3.4
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/types@7.17.0:
+    resolution: {integrity: sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-validator-identifier': 7.19.1
+      to-fast-properties: 2.0.0
+    dev: true
+
+  /@babel/types@7.21.4:
+    resolution: {integrity: sha512-rU2oY501qDxE8Pyo7i/Orqma4ziCOrby0/9mvbDUGEfvZjb279Nk9k19e2fiCxHbRRpY2ZyrgW1eq22mvmOIzA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-string-parser': 7.19.4
+      '@babel/helper-validator-identifier': 7.19.1
+      to-fast-properties: 2.0.0
+    dev: true
+
   /@eslint/eslintrc@1.4.1:
     resolution: {integrity: sha512-XXrH9Uarn0stsyldqDYq8r++mROmWRI1xKMXa640Bb//SY1+ECYX6VzT6Lcx5frD0V30XieqJ0oX9I2Xj5aoMA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -453,6 +570,26 @@ packages:
     resolution: {integrity: sha512-yXt2BRRVCJVvzWaxac5n0nCXzIrQEBE/MeYlNQ8/Iq7UeelNmm/AdnUAu18ilSS893mbEQ4u6whPt/HvOPc4rw==}
     dev: true
 
+  /@trivago/prettier-plugin-sort-imports@4.1.1(prettier@2.8.7):
+    resolution: {integrity: sha512-dQ2r2uzNr1x6pJsuh/8x0IRA3CBUB+pWEW3J/7N98axqt7SQSm+2fy0FLNXvXGg77xEDC7KHxJlHfLYyi7PDcw==}
+    peerDependencies:
+      '@vue/compiler-sfc': 3.x
+      prettier: 2.x
+    peerDependenciesMeta:
+      '@vue/compiler-sfc':
+        optional: true
+    dependencies:
+      '@babel/generator': 7.17.7
+      '@babel/parser': 7.21.4
+      '@babel/traverse': 7.17.3
+      '@babel/types': 7.17.0
+      javascript-natural-sort: 0.7.1
+      lodash: 4.17.21
+      prettier: 2.8.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@types/bcrypt@5.0.0:
     resolution: {integrity: sha512-agtcFKaruL8TmcvqbndlqHPSJgsolhf/qPWchFlgnW1gECTN/nKbFcoFnvKAQRFfKbh+BO6A3SWdJu9t+xF3Lw==}
     dependencies:
@@ -619,6 +756,13 @@ packages:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
 
+  /ansi-styles@3.2.1:
+    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
+    engines: {node: '>=4'}
+    dependencies:
+      color-convert: 1.9.3
+    dev: true
+
   /ansi-styles@4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
@@ -820,6 +964,15 @@ packages:
   /caniuse-lite@1.0.30001476:
     resolution: {integrity: sha512-JmpktFppVSvyUN4gsLS0bShY2L9ZUslHLE72vgemBkS43JD2fOvKTKs+GtRwuxrtRGnwJFW0ye7kWRRlLJS9vQ==}
 
+  /chalk@2.4.2:
+    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
+    engines: {node: '>=4'}
+    dependencies:
+      ansi-styles: 3.2.1
+      escape-string-regexp: 1.0.5
+      supports-color: 5.5.0
+    dev: true
+
   /chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -854,12 +1007,22 @@ packages:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
     dev: false
 
+  /color-convert@1.9.3:
+    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
+    dependencies:
+      color-name: 1.1.3
+    dev: true
+
   /color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
     dependencies:
       color-name: 1.1.4
 
+  /color-name@1.1.3:
+    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
+    dev: true
+
   /color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
@@ -1173,6 +1336,11 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /escape-string-regexp@1.0.5:
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    engines: {node: '>=0.8.0'}
+    dev: true
+
   /escape-string-regexp@4.0.0:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
@@ -1641,6 +1809,11 @@ packages:
       once: 1.4.0
       path-is-absolute: 1.0.1
 
+  /globals@11.12.0:
+    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
+    engines: {node: '>=4'}
+    dev: true
+
   /globals@13.20.0:
     resolution: {integrity: sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==}
     engines: {node: '>=8'}
@@ -1702,6 +1875,11 @@ packages:
     resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
     dev: false
 
+  /has-flag@3.0.0:
+    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
+    engines: {node: '>=4'}
+    dev: true
+
   /has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
@@ -1957,6 +2135,10 @@ packages:
   /isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
+  /javascript-natural-sort@0.7.1:
+    resolution: {integrity: sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==}
+    dev: true
+
   /jiti@1.18.2:
     resolution: {integrity: sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==}
     hasBin: true
@@ -1967,7 +2149,6 @@ packages:
 
   /js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
-    dev: false
 
   /js-yaml@4.1.0:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
@@ -1975,6 +2156,12 @@ packages:
     dependencies:
       argparse: 2.0.1
 
+  /jsesc@2.5.2:
+    resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
+    engines: {node: '>=4'}
+    hasBin: true
+    dev: true
+
   /json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
 
@@ -2058,7 +2245,6 @@ packages:
 
   /lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
-    dev: false
 
   /loose-envify@1.4.0:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
@@ -2491,7 +2677,7 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
-  /prettier-plugin-tailwindcss@0.2.7(prettier@2.8.7):
+  /prettier-plugin-tailwindcss@0.2.7(@trivago/prettier-plugin-sort-imports@4.1.1)(prettier@2.8.7):
     resolution: {integrity: sha512-jQopIOgjLpX+y8HeD56XZw7onupRTC0cw7eKKUimI7vhjkPF5/1ltW5LyqaPtSyc8HvEpvNZsvvsGFa2qpa59w==}
     engines: {node: '>=12.17.0'}
     peerDependencies:
@@ -2543,6 +2729,7 @@ packages:
       prettier-plugin-twig-melody:
         optional: true
     dependencies:
+      '@trivago/prettier-plugin-sort-imports': 4.1.1(prettier@2.8.7)
       prettier: 2.8.7
     dev: true
 
@@ -2805,6 +2992,11 @@ packages:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
 
+  /source-map@0.5.7:
+    resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /stop-iteration-iterator@1.0.0:
     resolution: {integrity: sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==}
     engines: {node: '>= 0.4'}
@@ -2910,6 +3102,13 @@ packages:
       ts-interface-checker: 0.1.13
     dev: true
 
+  /supports-color@5.5.0:
+    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
+    engines: {node: '>=4'}
+    dependencies:
+      has-flag: 3.0.0
+    dev: true
+
   /supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -3003,6 +3202,11 @@ packages:
       globrex: 0.1.2
     dev: false
 
+  /to-fast-properties@2.0.0:
+    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
+    engines: {node: '>=4'}
+    dev: true
+
   /to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}