From dd28d95ad15527cc793f44864aab1fe65bfb2b4d Mon Sep 17 00:00:00 2001 From: Thomas Hebb Date: Tue, 25 Jan 2022 03:46:36 -0800 Subject: [PATCH] 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] https://github.com/facebook/create-react-app/pull/11862 [2] https://tailwindcss.com/docs/upgrade-guide --- craco.config.js | 7 - package.json | 15 +- src/components/breadcrumbs/Breadcrumbs.tsx | 4 +- src/components/layout/Header.tsx | 2 +- src/components/layout/MultiColumnLayout.tsx | 2 +- .../layout/overlays/SidebarOverlay.tsx | 2 +- .../WaylandProtocolLinks.tsx | 2 +- tailwind.config.js | 12 +- yarn.lock | 10828 ++++++---------- 9 files changed, 3832 insertions(+), 7042 deletions(-) delete mode 100644 craco.config.js diff --git a/craco.config.js b/craco.config.js deleted file mode 100644 index 9a30aba..0000000 --- a/craco.config.js +++ /dev/null @@ -1,7 +0,0 @@ -module.exports = { - style: { - postcss: { - plugins: [require('tailwindcss'), require('autoprefixer')], - }, - }, -} diff --git a/package.json b/package.json index 99b2731..e9aa8c7 100644 --- a/package.json +++ b/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" } diff --git a/src/components/breadcrumbs/Breadcrumbs.tsx b/src/components/breadcrumbs/Breadcrumbs.tsx index 6fcc90b..23e513c 100644 --- a/src/components/breadcrumbs/Breadcrumbs.tsx +++ b/src/components/breadcrumbs/Breadcrumbs.tsx @@ -61,7 +61,7 @@ export const Breadcrumbs: React.FC<{ metadata: WaylandProtocolMetadata }> = ({
{/* Heroicon name: solid/chevron-right */} = ({
{/* Heroicon name: solid/chevron-right */} void }> = ({ setIsSidebarOpen, setIsOutlineOpen, showOutlineButton }) => (
-
+