Update everything to latest except Next

Author: darbyjack

components/Converter.tsx

@@ -62,7 +62,7 @@ const Converter = ({
 
       <main
         css={css`
-          ${tw`flex flex-col min-height[calc(100vh - 3.5rem)]`}
+          ${tw`flex flex-col [min-height:calc(100vh - 3.5rem)]`}
         `}
       >
         <div css={tw`w-full md:px-8 p-16 h-48 text-center`}>
@@ -76,7 +76,7 @@ const Converter = ({
             <div
               css={css`
                 height: calc(100vh - 18.5em);
-                ${tw`md:w-1/2 p-4 pt-1 md:pr-2 md:max-width[50vw] flex flex-col`}
+                ${tw`md:w-1/2 p-4 pt-1 md:pr-2 md:[max-width:50vw] flex flex-col`}
               `}
             >
               {Object.keys(inputConfigs).map((key) => {
@@ -111,7 +111,7 @@ const Converter = ({
             <div
               css={css`
                 height: calc(100vh - 18.5em);
-                ${tw`md:w-1/2 p-4 pt-1 md:pr-2 md:max-width[50vw] flex flex-col`}
+                ${tw`md:w-1/2 p-4 pt-1 md:pr-2 md:[max-width:50vw] flex flex-col`}
               `}
             >
               {error || !parsedConfigs ? (

components/Validator.tsx

@@ -57,7 +57,7 @@ const Validator = ({
 
       <main
         css={css`
-          ${tw`flex flex-col min-height[calc(100vh - 3.5rem)]`}
+          ${tw`flex flex-col [min-height:calc(100vh - 3.5rem)]`}
         `}
       >
         <div css={tw`w-full md:px-8 p-16 h-48 text-center`}>
@@ -71,7 +71,7 @@ const Validator = ({
             <div
               css={css`
                 height: calc(100vh - 18.5em);
-                ${tw`md:w-1/2 p-4 pt-1 md:pr-2 md:max-width[50vw]`}
+                ${tw`md:w-1/2 p-4 pt-1 md:pr-2 md:[max-width:50vw]`}
               `}
             >
               <TextBox
@@ -84,7 +84,7 @@ const Validator = ({
             <div
               css={css`
                 height: calc(100vh - 18.5em);
-                ${tw`w-full md:w-1/2 p-4 md:pl-2 pt-1 flex flex-col md:max-width[50vw]`}
+                ${tw`w-full md:w-1/2 p-4 md:pl-2 pt-1 flex flex-col md:[max-width:50vw]`}
               `}
             >
               <div css={tw`flex flex-col h-full w-full pt-1`}>

package.json

@@ -10,39 +10,39 @@
     "format": "yarn prettier --write ."
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "6.2.0",
-    "@fortawesome/fontawesome-svg-core": "6.2.0",
-    "@fortawesome/free-solid-svg-icons": "6.2.0",
+    "@fortawesome/fontawesome-free": "6.4.0",
+    "@fortawesome/fontawesome-svg-core": "6.4.0",
+    "@fortawesome/free-solid-svg-icons": "6.4.0",
     "@fortawesome/react-fontawesome": "0.2.0",
     "@js.properties/properties": "0.5.4",
     "@tkint/hocon-parser": "0.0.0-alpha.0",
-    "ajv": "8.11.0",
+    "ajv": "8.12.0",
     "next": "12.3.4",
     "prism-react-renderer": "1.3.5",
     "prismjs": "1.29.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-json-view": "1.21.3",
     "react-simple-code-editor": "0.13.1",
-    "styled-components": "5.3.6",
+    "styled-components": "5.3.9",
     "toml": "3.0.0",
-    "x2js": "3.4.3",
+    "x2js": "3.4.4",
     "xml-js": "1.6.11",
-    "yaml": "2.1.3"
+    "yaml": "2.2.1"
   },
   "devDependencies": {
-    "@types/node": "18.8.2",
+    "@types/node": "18.15.11",
     "@types/prismjs": "1.26.0",
-    "@types/react": "18.0.21",
+    "@types/react": "18.0.31",
     "@types/styled-components": "5.1.26",
     "babel-plugin-macros": "3.1.0",
-    "eslint": "8.24.0",
+    "eslint": "8.37.0",
     "eslint-config-next": "12.3.4",
-    "prettier": "2.7.1",
-    "tailwindcss": "3.1.8",
-    "ts-json-schema-generator": "1.1.2",
+    "prettier": "2.8.7",
+    "tailwindcss": "3.3.1",
+    "ts-json-schema-generator": "1.2.0",
     "ts-node": "10.9.1",
-    "twin.macro": "2.8.2",
+    "twin.macro": "3.3.0",
     "typescript": "4.8.4"
   },
   "babelMacros": {

pages/index.tsx

@@ -17,7 +17,7 @@ function Home() {
       </Head>
       <main
         css={css`
-          ${tw`flex flex-col min-height[calc(100vh - 3.5rem)]`}
+          ${tw`flex flex-col [min-height:calc(100vh - 3.5rem)]`}
         `}
       >
         <div
@@ -43,7 +43,7 @@ function Home() {
             `}
           >
             <div
-              css={tw`bg-white/10 backdrop-blur-sm drop-shadow-lg rounded-2xl grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-6 sm:p-8 md:p-6 md:px-6 w-full max-width[90vw] overflow-hidden`}
+              css={tw`bg-white/10 backdrop-blur-sm drop-shadow-lg rounded-2xl grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-6 sm:p-8 md:p-6 md:px-6 w-full [max-width:90vw] overflow-hidden`}
             >
               {(() => {
                 const tools: JSX.Element[] = [];
@@ -96,7 +96,7 @@ function ToolboxCard({
   return (
     <Link href={link} prefetch={false} passHref>
       <div
-        css={tw`gap-0.5 p-3 rounded-2xl bg-white/10 hover:bg-white/20 text-white hover:cursor-pointer width[15rem] max-w-full break-words min-height[12rem] w-56 block grid grid-cols-1 place-items-center mix-blend-multiply`}
+        css={tw`gap-0.5 p-3 rounded-2xl bg-white/10 hover:bg-white/20 text-white hover:cursor-pointer [width:15rem] max-w-full break-words [min-height:12rem] w-56 block grid grid-cols-1 place-items-center mix-blend-multiply`}
       >
         <FontAwesomeIcon icon={icon} size={"3x"} />
         <p css={tw`font-bold text-lg md:text-base`}>{name}</p>