Upgrade react-scripts to v5, tailwindcss to v3, and others

This makes several significant changes to our dependencies:
 - react-scripts (i.e. create-react-app) is now v5 (from v4)
 - tailwindcss is now v3 (from a variant of v2 targeting postcss v7)
 - postcss is now v8 (from v7)
 - autoprefixer is now v10 (from v9)
 - craco is no longer used because react-scripts v5 natively supports
   tailwindcss

The postcss and autoprefixer upgrades required no changes on our end, as
they're used only through tailwindcss.

The craco removal required minor changes to package.json to go back to
invoking react-scripts directly.

The react-scripts upgrade didn't require any changes apart from the
other dependency upgrades. However, it did introduce a pair of harmless
"DeprecationWarning" messages from webpack-dev-server to the build, for
which a fix has already been submitted upstream to create-react-app[1].

The tailwindcss upgrade was the most invasive and required a number of
changes to our CSS and config. I fully followed the upgrade guide[2]
and tested as much functionality as I could. As far as I can tell, the
site behaves and appears identical to how it did before.

[1] facebook/create-react-app#11862
[2] https://tailwindcss.com/docs/upgrade-guide

package.json

@@ -6,21 +6,20 @@
     "license": "MIT",
     "homepage": "/protocols",
     "dependencies": {
-        "@craco/craco": "^6.1.1",
         "@headlessui/react": "^1.4.1",
         "@vscode/codicons": "^0.0.21",
         "plausible-tracker": "^0.3.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
-        "react-scripts": "4.0.3",
+        "react-scripts": "5.0.0",
         "web-vitals": "^2.1.0",
         "wouter": "^2.7.4"
     },
     "scripts": {
-        "start": "craco start",
-        "build": "env BUILD_PATH=build/protocols craco build",
+        "start": "react-scripts start",
+        "build": "env BUILD_PATH=build/protocols react-scripts build",
         "postbuild": "ts-node --project=./tsconfig.scripts.json ./scripts/bin/render-static-html.tsx",
-        "test": "craco test",
+        "test": "react-scripts test",
         "regenerate-protocols": "ts-node --project=./tsconfig.scripts.json ./scripts/bin/regenerate-protocols-data.ts",
         "print-registry": "ts-node --project=./tsconfig.scripts.json ./scripts/bin/print-protocol-registry-items.ts",
         "eject": "react-scripts eject"
@@ -62,15 +61,15 @@
         "@types/node": "^16.7.10",
         "@types/react": "^17.0.0",
         "@types/react-dom": "^17.0.0",
-        "autoprefixer": "^9",
+        "autoprefixer": "^10.4.2",
         "fast-xml-parser": "^4.0.1",
         "html-minifier": "^4.0.0",
         "husky": "^7.0.2",
         "lint-staged": "^12.3.1",
-        "postcss": "^7",
+        "postcss": "^8.4.5",
         "prettier": "^2.3.2",
         "tailwind-scrollbar": "^1.3.1",
-        "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.4",
+        "tailwindcss": "^3.0.16",
         "ts-node": "^10.2.1",
         "typescript": "^4.4.2"
     }

src/components/breadcrumbs/Breadcrumbs.tsx

@@ -61,7 +61,7 @@ export const Breadcrumbs: React.FC<{ metadata: WaylandProtocolMetadata }> = ({
                                 <div className="flex items-center">
                                     {/* Heroicon name: solid/chevron-right */}
                                     <svg
-                                        className="flex-shrink-0 h-5 w-5 text-gray-400"
+                                        className="shrink-0 h-5 w-5 text-gray-400"
                                         xmlns="http://www.w3.org/2000/svg"
                                         viewBox="0 0 20 20"
                                         fill="currentColor"
@@ -91,7 +91,7 @@ export const Breadcrumbs: React.FC<{ metadata: WaylandProtocolMetadata }> = ({
                         <div className="flex items-center">
                             {/* Heroicon name: solid/chevron-right */}
                             <svg
-                                className="flex-shrink-0 h-5 w-5 text-gray-400"
+                                className="shrink-0 h-5 w-5 text-gray-400"
                                 xmlns="http://www.w3.org/2000/svg"
                                 viewBox="0 0 20 20"
                                 fill="currentColor"

src/components/layout/Header.tsx

@@ -7,7 +7,7 @@ export const Header: React.FC<{
     setIsOutlineOpen: (open: boolean) => void
 }> = ({ setIsSidebarOpen, setIsOutlineOpen, showOutlineButton }) => (
     <header className="xl:hidden w-full">
-        <div className="relative z-10 flex-shrink-0 h-16 bg-gray-50 border-b border-gray-200 shadow-sm flex dark:bg-gray-900 dark:border-gray-700">
+        <div className="relative z-10 shrink-0 h-16 bg-gray-50 border-b border-gray-200 shadow-sm flex dark:bg-gray-900 dark:border-gray-700">
             <button
                 className="border-r border-gray-200 px-4 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 dark:border-gray-700"
                 onClick={() => setIsSidebarOpen(true)}

src/components/layout/MultiColumnLayout.tsx

@@ -43,7 +43,7 @@ export const MultiColumnLayout: React.FC<{
                         {/* Sidebar component, swap this element with another sidebar if you like */}
                         <div className="flex flex-col h-full border-r border-gray-200 bg-gray-50 dark:bg-gray-900 dark:border-gray-700">
                             <div className="flex-1 flex flex-col overflow-y-auto">
-                                <div className="flex-shrink-0 px-4 my-5">
+                                <div className="shrink-0 px-4 my-5">
                                     <Logo />
                                 </div>
                                 <WaylandProtocolLinks />

src/components/layout/overlays/SidebarOverlay.tsx

@@ -77,7 +77,7 @@ export const SidebarOverlay: React.FC<{
                 </div>
             </Transition.Child>
 
-            <div className="flex-shrink-0 w-14" aria-hidden="true">
+            <div className="shrink-0 w-14" aria-hidden="true">
                 {/* Dummy element to force sidebar to shrink to fit close icon */}
             </div>
         </div>

src/components/sidebar-navigation/WaylandProtocolLinks.tsx

@@ -22,7 +22,7 @@ export const WaylandProtocolLinks: React.FC = () => (
                     {section.name}
                 </h3>
 
-                <div className="flex-grow flex flex-col">
+                <div className="grow flex flex-col">
                     <div className="flex-1 space-y-1">
                         {section.items.map((protocol) => (
                             <SidebarNavLink

tailwind.config.js

@@ -2,20 +2,16 @@ const colors = require('tailwindcss/colors')
 const defaultTheme = require('tailwindcss/defaultTheme')
 
 module.exports = {
-    purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
-    darkMode: 'media', // or 'media' or 'class'
+    content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
     theme: {
-        extend: {},
-        colors: { ...colors, transparent: 'transparent' },
+        extend: {
+            colors: { gray: colors.zinc },
+        },
         fontFamily: {
             sans: ['Inter var', ...defaultTheme.fontFamily.sans],
             serif: [...defaultTheme.fontFamily.serif],
             mono: [...defaultTheme.fontFamily.mono],
         },
     },
-    variants: {
-        extend: {},
-        scrollbar: ['dark', 'rounded'],
-    },
     plugins: [require('tailwind-scrollbar')],
 }