perf: use avif instead of png

package.json

@@ -66,23 +66,23 @@
     "eslint-plugin-unicorn": "^55.0.0",
     "lightningcss": "^1.22.0",
     "msw": "^1.3.3",
-    "postcss": "^8.4.31",
-    "postcss-nesting": "12.0.1",
+    "postcss": "^8.4.41",
+    "postcss-nesting": "13.0.0",
     "prettier": "3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.6",
     "standard-version": "^9.5.0",
     "storybook": "^8.0.10",
     "storybook-addon-react-router-v6": "~2.0.15",
-    "tailwindcss": "^3.3.2",
+    "tailwindcss": "^3.4.10",
     "typescript": "^5.2.2",
-    "vite": "^5.3.5",
+    "vite": "^5.4.2",
     "vite-plugin-pwa": "^0.20.1",
     "vitest": "^2.0.5"
   },
   "dependencies": {
     "@growthbook/growthbook-react": "^0.20.0",
     "@vanilla-extract/css": "^1.15.5",
-    "daisyui": "^3.9.4",
+    "daisyui": "^4.12.10",
     "dexie": "^3.2.4",
     "dexie-react-hooks": "^1.1.6",
     "react": "^18.3.1",

src/components/Header.tsx

@@ -1,4 +1,4 @@
 import { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { themeChange } from 'theme-change';
 
@@ -11,14 +11,14 @@
   return (
     <nav className="navbar mb-3 bg-neutral text-neutral-content">
       <div className="flex-1">
-        <Link to="/" className="btn-ghost btn text-xl normal-case">
+        <Link to="/" className="btn btn-ghost text-xl normal-case">
           Microblogging
         </Link>
       </div>
       <div className="flex-none justify-between">
         <button
           type="button"
-          className="btn-circle btn mr-6"
+          className="btn btn-circle mr-6"
           data-toggle-theme="forest,winter"
           data-act-class="ACTIVECLASS"
           aria-label="Dark Theme"
@@ -39,7 +39,7 @@
           </svg>
         </button>
         <form className="form-inline navbar-end">
-          <Link to="/posts/new" className="btn-primary btn-outline btn">
+          <Link to="/posts/new" className="btn btn-outline btn-primary">
             New Post
           </Link>
         </form>

src/components/header.tsx

@@ -11,14 +11,14 @@ function Header() {
   return (
     <nav className="navbar mb-3 bg-neutral text-neutral-content">
       <div className="flex-1">
-        <Link to="/" className="btn-ghost btn text-xl normal-case">
+        <Link to="/" className="btn btn-ghost text-xl normal-case">
           Microblogging
         </Link>
       </div>
       <div className="flex-none justify-between">
         <button
           type="button"
-          className="btn-circle btn mr-6"
+          className="btn btn-circle mr-6"
           data-toggle-theme="forest,winter"
           data-act-class="ACTIVECLASS"
           aria-label="Dark Theme"
@@ -39,7 +39,7 @@ function Header() {
           </svg>
         </button>
         <form className="form-inline navbar-end">
-          <Link to="/posts/new" className="btn-primary btn-outline btn">
+          <Link to="/posts/new" className="btn btn-outline btn-primary">
             New Post
           </Link>
         </form>

src/components/post-preview.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable max-len */
 import { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 
@@ -26,7 +25,7 @@ function Author({ userId }: IAuthor) {
 
   return userId ? (
     <div>
-      <Link to={`/users/${username}`} className="link-neutral link">
+      <Link to={`/users/${username}`} className="link link-neutral">
         {name}
       </Link>{' '}
       <span className="text-muted">{`@${username}`}</span>
@@ -108,7 +107,7 @@ function BlogPost({
             </time>
           </p>
         </div>
-        <h3 className="link-primary link card-title mb-2 text-3xl">
+        <h3 className="link card-title link-primary mb-2 text-3xl">
           <Link to={`/posts/${id}`} className="">
             {heading}
           </Link>
@@ -118,7 +117,7 @@ function BlogPost({
       <div className="grid grid-cols-12 p-3 pb-1">
         <div className="col-span-6">
           <button
-            className="btn-ghost btn-circle btn"
+            className="btn btn-circle btn-ghost"
             title="Like it!"
             type="button"
             onClick={(e) => {
@@ -158,7 +157,7 @@ function BlogPost({
           <div className="btn-group-horizontal" role="group">
             <Link
               to={`/posts/${id}/edit`}
-              className="btn-ghost btn-circle btn"
+              className="btn btn-circle btn-ghost"
               title="Edit post"
             >
               <svg
@@ -174,7 +173,7 @@ function BlogPost({
               </svg>
             </Link>
             <button
-              className="btn-ghost btn-circle btn"
+              className="btn btn-circle btn-ghost"
               title="Remove post"
               type="button"
               onClick={() => {

src/pages/posts/[postId]/edit.tsx

@@ -134,7 +134,7 @@ export function EditPost({ post }: IBlogPostProps) {
               <input
                 title="Update post"
                 type="submit"
-                className="btn-primary btn-outline btn mt-5"
+                className="btn btn-outline btn-primary mt-5"
                 value="Update it"
               />
             </div>

src/pages/posts/new.tsx

@@ -133,7 +133,7 @@ function AddPost() {
               <button
                 title="Add new post"
                 type="submit"
-                className="btn-primary btn-outline btn mt-5"
+                className="btn btn-outline btn-primary mt-5"
               >
                 <i className="glyphicon glyphicon-ok" />
                 Post it

tailwind.config.cjs

@@ -2,11 +2,12 @@
 /* eslint-disable global-require */
 module.exports = {
   content: ['./src/**/*.{jsx,tsx}'],
-  theme: {
-    extend: {},
-  },
+  // theme: {
+  //   extend: {},
+  // },
   plugins: [require('@tailwindcss/typography'), require('daisyui')],
   daisyui: {
     themes: ['forest', 'winter'],
   },
+  darkMode: ['class', '[data-theme="forest"]'],
 };

tsconfig.node.json

@@ -1,6 +1,8 @@
 {
   "compilerOptions": {
+    "strict": true,
     "composite": true,
+    "forceConsistentCasingInFileNames": true,
     "module": "esnext",
     "moduleResolution": "node"
   },

vite.config.ts

@@ -17,7 +17,7 @@ export default defineConfig({
     emptyOutDir: true,
     cssMinify: 'lightningcss',
   },
-  plugins: [react(), VitePWA({}), vanillaExtractPlugin()],
+  plugins: [react(), vanillaExtractPlugin(), VitePWA()],
   define: {
     APP_VERSION: JSON.stringify(process.env.npm_package_version),
   },