Catch the permission exception on the audio component (#2330)

* Catch the permission exception on the audio component and fail gracefully * Run autoformatter on src/Audio.svelte * Revert "Run autoformatter on src/Audio.svelte" This reverts commit e53af15cdd. * Run autoformatter * use gradio error message * convert to try catch, fix types * cleanup Co-authored-by: Ian Gonzalez <ian.gl@protonmail.com> Co-authored-by: Ali Abid <aabid94@gmail.com> Co-authored-by: pngwn <hello@pngwn.io>
2024-11-27 01:40:20 +08:00 · 2022-09-29 09:33:22 -05:00 · 2022-09-29 09:33:22 -05:00 · 662a811689
commit 662a811689
parent ea5fdd0b20
9 changed files with 122 additions and 76 deletions
--- a/ui/packages/app/src/components/Audio/Audio.svelte
+++ b/ui/packages/app/src/components/Audio/Audio.svelte
@ -16,6 +16,7 @@
 	const dispatch = createEventDispatcher<{
 		change: typeof value;
 		stream: typeof value;
+		error: string;
 	}>();

 	export let elem_id: string = "";
@ -72,6 +73,11 @@
 			on:play
 			on:pause
 			on:ended
+			on:error={({ detail }) => {
+				loading_status = loading_status || {};
+				loading_status.status = "error";
+				loading_status.message = detail;
+			}}
 			drop_text={$_("interface.drop_audio")}
 			or_text={$_("or")}
 			upload_text={$_("interface.click_to_upload")}
--- a/ui/packages/app/src/components/Image/Image.svelte
+++ b/ui/packages/app/src/components/Image/Image.svelte
@ -54,6 +54,11 @@
 			on:change
 			on:stream
 			on:drag={({ detail }) => (dragging = detail)}
+			on:error={({ detail }) => {
+				loading_status = loading_status || {};
+				loading_status.status = "error";
+				loading_status.message = detail;
+			}}
 			{label}
 			{show_label}
 			{pending}
--- a/ui/packages/app/src/components/StatusTracker/types.ts
+++ b/ui/packages/app/src/components/StatusTracker/types.ts
@ -6,4 +6,5 @@ export interface LoadingStatus {
 	scroll_to_output: boolean;
 	visible: boolean;
 	fn_index: number;
+	message?: string;
 }
--- a/ui/packages/app/src/components/Video/Video.svelte
+++ b/ui/packages/app/src/components/Video/Video.svelte
@ -47,6 +47,11 @@
 			value={_value}
 			on:change={({ detail }) => (value = detail)}
 			on:drag={({ detail }) => (dragging = detail)}
+			on:error={({ detail }) => {
+				loading_status = loading_status || {};
+				loading_status.status = "error";
+				loading_status.message = detail;
+			}}
 			{label}
 			{show_label}
 			{source}
--- a/ui/packages/audio/src/Audio.svelte
+++ b/ui/packages/audio/src/Audio.svelte
@ -45,6 +45,7 @@
 		pause: undefined;
 		ended: undefined;
 		drag: boolean;
+		error: string;
 	}>();

 	function blob_to_data_url(blob: Blob): Promise<string> {
@ -57,7 +58,25 @@
 	}

 	async function prepare_audio() {
-		const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+		let stream: MediaStream | null;
+		try {
+			stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+		} catch (err) {
+			if (err instanceof DOMException && err.name == "NotAllowedError") {
+				dispatch(
+					"error",
+					"Please allow access to the microphone for recording."
+				);
+				return;
+			} else {
+				throw err;
+			}
+		}
+
+		if (stream === null) {
+			return;
+		}
+
 		recorder = new MediaRecorder(stream);

 		recorder.addEventListener("dataavailable", (event) => {
@ -80,12 +99,14 @@
 	}

 	async function record() {
-		recording = true;
-		audio_chunks = [];
-
 		if (!inited) await prepare_audio();

-		recorder.start();
+		if (recorder) {
+			recording = true;
+			audio_chunks = [];
+
+			recorder.start();
+		}
 	}

 	onDestroy(() => {
--- a/ui/packages/image/src/Image.svelte
+++ b/ui/packages/image/src/Image.svelte
@ -208,6 +208,7 @@
 				on:capture={(e) =>
 					tool === "color-sketch" ? handle_upload(e) : handle_save(e, true)}
 				on:stream={handle_save}
+				on:error
 				{streaming}
 				{pending}
 				{mirror_webcam}
--- a/ui/packages/image/src/Webcam.svelte
+++ b/ui/packages/image/src/Webcam.svelte
@ -21,8 +21,13 @@
 			});
 			video_source.srcObject = stream;
 			video_source.play();
-		} catch (error) {
-			console.error(error);
+		} catch (err) {
+			if (err instanceof DOMException && err.name == "NotAllowedError") {
+				dispatch("error", "Please allow access to the webcam for recording.");
+				return null;
+			} else {
+				throw err;
+			}
 		}
 	}

--- a/ui/packages/video/src/Video.svelte
+++ b/ui/packages/video/src/Video.svelte
@ -26,6 +26,7 @@
 		pause: undefined;
 		ended: undefined;
 		drag: boolean;
+		error: string;
 	}>();

 	function handle_load({ detail }: CustomEvent<FileData | null>) {
@ -61,6 +62,7 @@
 		<Webcam
 			{mirror_webcam}
 			mode="video"
+			on:error
 			on:capture={({ detail }) => dispatch("change", detail)}
 		/>
 	{/if}
--- a/ui/pnpm-lock.yaml
+++ b/ui/pnpm-lock.yaml
@ -1,4 +1,4 @@
-lockfileVersion: 5.3
+lockfileVersion: 5.4

 importers:

@ -43,7 +43,7 @@ importers:
      '@tailwindcss/forms': 0.5.0_tailwindcss@3.1.6
      '@testing-library/dom': 8.11.3
      '@testing-library/svelte': 3.1.0_svelte@3.49.0
-      '@testing-library/user-event': 13.5.0_@testing-library+dom@8.11.3
+      '@testing-library/user-event': 13.5.0_gzufz4q333be4gqfrvipwvqt6a
      autoprefixer: 10.4.4_postcss@8.4.6
      babylonjs: 5.18.0
      babylonjs-loaders: 5.18.0
@ -56,14 +56,14 @@ importers:
      postcss: 8.4.6
      postcss-nested: 5.0.6_postcss@8.4.6
      prettier: 2.6.2
-      prettier-plugin-svelte: 2.7.0_prettier@2.6.2+svelte@3.49.0
+      prettier-plugin-svelte: 2.7.0_3cyj5wbackxvw67rnaarcmbw7y
      sirv: 2.0.2
      sirv-cli: 2.0.2
      svelte: 3.49.0
-      svelte-check: 2.8.0_postcss@8.4.6+svelte@3.49.0
+      svelte-check: 2.8.0_mgmdnb6x5rpawk37gozc2sbtta
      svelte-i18n: 3.3.13_svelte@3.49.0
-      svelte-preprocess: 4.10.6_62d50a01257de5eec5be08cad9d3ed66
-      tailwindcss: 3.1.6
+      svelte-preprocess: 4.10.6_mlkquajfpxs65rn6bdfntu7nmy
+      tailwindcss: 3.1.6_postcss@8.4.6
      tinyspy: 0.3.0
      typescript: 4.7.4
      vite: 2.9.5
@ -133,7 +133,7 @@ importers:
      d3-dsv: 3.0.1
      mime-types: 2.1.34
      playwright: 1.22.2
-      svelte-i18n: 3.3.13_svelte@3.49.0
+      svelte-i18n: 3.3.13

  packages/atoms:
    specifiers:
@ -389,14 +389,14 @@ importers:
      '@gradio/upload': link:../upload
      '@gradio/video': link:../video
    devDependencies:
-      '@sveltejs/adapter-auto': 1.0.0-next.75
-      '@sveltejs/kit': 1.0.0-next.318_svelte@3.49.0
+      '@sveltejs/adapter-auto': 1.0.0-next.80
+      '@sveltejs/kit': 1.0.0-next.318
      autoprefixer: 10.4.2_postcss@8.4.6
      postcss: 8.4.6
      postcss-load-config: 3.1.1
-      svelte-check: 2.4.1_736abba5ed1eb6f8ecf70b1d49ead14b
-      svelte-preprocess: 4.10.2_d50790bb30dd88cc44babe7efa52bace
-      tailwindcss: 3.0.23_autoprefixer@10.4.2
+      svelte-check: 2.4.1_2y4otvh2n6klv6metqycpfiuzy
+      svelte-preprocess: 4.10.2_bw7ic75prjd4umr4fb55sbospu
+      tailwindcss: 3.0.23_qm7bagfnbv4vjkuayu3hle4sne
      tslib: 2.3.1
      typescript: 4.5.5

@ -569,19 +569,19 @@ packages:
      estree-walker: 2.0.2
      picomatch: 2.3.1

-  /@sveltejs/adapter-auto/1.0.0-next.75:
-    resolution: {integrity: sha512-UEE6XkeXVrNhpEceqcCbtfV5EYzulIt1D/L+RsjIVsPVtUIZMMpPWzuHHzVvPemFRAuYho+4C1hJjIJ9iCgPeQ==}
+  /@sveltejs/adapter-auto/1.0.0-next.80:
+    resolution: {integrity: sha512-352WoZr9fQgxJqgNENvxRr2gsA+wTF6V9AVaQaaatDYd3RVEBaXTYOOalFaRLSa25mRUJaLYP2aaliqczMl23g==}
    dependencies:
-      '@sveltejs/adapter-cloudflare': 1.0.0-next.34
+      '@sveltejs/adapter-cloudflare': 1.0.0-next.38
      '@sveltejs/adapter-netlify': 1.0.0-next.78
-      '@sveltejs/adapter-vercel': 1.0.0-next.76
+      '@sveltejs/adapter-vercel': 1.0.0-next.77
    transitivePeerDependencies:
      - encoding
      - supports-color
    dev: true

-  /@sveltejs/adapter-cloudflare/1.0.0-next.34:
-    resolution: {integrity: sha512-9/YJsx5O+iy2+XGuH0vVzZ9OSeHGjkInh8JG8CLmIc0cKkv2t7sEu7qQ/qXA5CcvmS1AqNSUgIMxGoeEDVlO3g==}
+  /@sveltejs/adapter-cloudflare/1.0.0-next.38:
+    resolution: {integrity: sha512-N6jdTomRZkdKlcNoguwYD7lpdXSt0beIyUJsp0MS/YLm/4gI83y698zFYInFKJ9t5e6DAnuEBSAXcg568z2oFA==}
    dependencies:
      '@cloudflare/workers-types': 3.14.1
      esbuild: 0.15.7
@ -596,8 +596,8 @@ packages:
      set-cookie-parser: 2.4.8
    dev: true

-  /@sveltejs/adapter-vercel/1.0.0-next.76:
-    resolution: {integrity: sha512-Od9DBfeMwWC/sZNeCJw4TYVE3LMR8lGJivSdkXWgpvksgG+QizLyzTfvBacapId3wcu+7X4PPTLoH00o5iQGEQ==}
+  /@sveltejs/adapter-vercel/1.0.0-next.77:
+    resolution: {integrity: sha512-r4MqtP+lzx83HfcvI8PU0Yxzmxt6WQq9nzZETLboJouJzhSBUFIN5RmNZfEn6nNIlUwZbGQUEK/FxsRnnxI/Ig==}
    dependencies:
      '@vercel/nft': 0.22.0
      esbuild: 0.15.7
@ -606,16 +606,15 @@ packages:
      - supports-color
    dev: true

-  /@sveltejs/kit/1.0.0-next.318_svelte@3.49.0:
+  /@sveltejs/kit/1.0.0-next.318:
    resolution: {integrity: sha512-/M/XNvEqK71KCGro1xLuiUuklsMPe+G5DiVMs39tpfFIFhH4oCzAt+YBaIZDKORogGz3QDaYc5BV+eFv9E5cyw==}
    engines: {node: '>=14.13'}
    hasBin: true
    peerDependencies:
      svelte: ^3.44.0
    dependencies:
-      '@sveltejs/vite-plugin-svelte': 1.0.0-next.41_svelte@3.49.0+vite@2.9.5
+      '@sveltejs/vite-plugin-svelte': 1.0.0-next.41_vite@2.9.5
      sade: 1.8.1
-      svelte: 3.49.0
      vite: 2.9.5
    transitivePeerDependencies:
      - diff-match-patch
@ -625,7 +624,7 @@ packages:
      - supports-color
    dev: true

-  /@sveltejs/vite-plugin-svelte/1.0.0-next.41_svelte@3.49.0+vite@2.9.5:
+  /@sveltejs/vite-plugin-svelte/1.0.0-next.41_vite@2.9.5:
    resolution: {integrity: sha512-2kZ49mpi/YW1PIPvKaJNSSwIFgmw9QUf1+yaNa4U8yJD6AsfSHXAU3goscWbi1jfWnSg2PhvwAf+bvLCdp2F9g==}
    engines: {node: ^14.13.1 || >= 16}
    peerDependencies:
@ -640,8 +639,7 @@ packages:
      debug: 4.3.4
      kleur: 4.1.4
      magic-string: 0.26.1
-      svelte: 3.49.0
-      svelte-hmr: 0.14.11_svelte@3.49.0
+      svelte-hmr: 0.14.11
      vite: 2.9.5
    transitivePeerDependencies:
      - supports-color
@ -676,7 +674,7 @@ packages:
      tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1'
    dependencies:
      mini-svg-data-uri: 1.4.4
-      tailwindcss: 3.1.6
+      tailwindcss: 3.1.6_postcss@8.4.6
    dev: false

  /@testing-library/dom/7.31.2:
@ -717,7 +715,7 @@ packages:
      svelte: 3.49.0
    dev: false

-  /@testing-library/user-event/13.5.0_@testing-library+dom@8.11.3:
+  /@testing-library/user-event/13.5.0_gzufz4q333be4gqfrvipwvqt6a:
    resolution: {integrity: sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==}
    engines: {node: '>=10', npm: '>=6'}
    peerDependencies:
@ -2765,28 +2763,18 @@ packages:
      trouter: 3.2.0
    dev: false

-  /postcss-import/14.1.0_postcss@8.4.14:
+  /postcss-import/14.1.0_postcss@8.4.6:
    resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
    engines: {node: '>=10.0.0'}
    peerDependencies:
      postcss: ^8.0.0
    dependencies:
-      postcss: 8.4.14
+      postcss: 8.4.6
      postcss-value-parser: 4.2.0
      read-cache: 1.0.0
      resolve: 1.22.1
    dev: false

-  /postcss-js/4.0.0_postcss@8.4.14:
-    resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==}
-    engines: {node: ^12 || ^14 || >= 16}
-    peerDependencies:
-      postcss: ^8.3.3
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.4.14
-    dev: false
-
  /postcss-js/4.0.0_postcss@8.4.6:
    resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==}
    engines: {node: ^12 || ^14 || >= 16}
@ -2795,7 +2783,6 @@ packages:
    dependencies:
      camelcase-css: 2.0.1
      postcss: 8.4.6
-    dev: true

  /postcss-load-config/3.1.1:
    resolution: {integrity: sha512-c/9XYboIbSEUZpiD1UQD0IKiUe8n9WHYV7YFe7X7J+ZwCsEKkUJSFWjS9hBU1RR9THR7jMXst8sxiqP0jjo2mg==}
@ -2810,7 +2797,7 @@ packages:
      yaml: 1.10.2
    dev: true

-  /postcss-load-config/3.1.4_postcss@8.4.14:
+  /postcss-load-config/3.1.4_postcss@8.4.6:
    resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
    engines: {node: '>= 10'}
    peerDependencies:
@ -2823,20 +2810,10 @@ packages:
        optional: true
    dependencies:
      lilconfig: 2.0.6
-      postcss: 8.4.14
+      postcss: 8.4.6
      yaml: 1.10.2
    dev: false

-  /postcss-nested/5.0.6_postcss@8.4.14:
-    resolution: {integrity: sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.2.14
-    dependencies:
-      postcss: 8.4.14
-      postcss-selector-parser: 6.0.9
-    dev: false
-
  /postcss-nested/5.0.6_postcss@8.4.6:
    resolution: {integrity: sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==}
    engines: {node: '>=12.0'}
@ -2888,7 +2865,7 @@ packages:
      picocolors: 1.0.0
      source-map-js: 1.0.2

-  /prettier-plugin-svelte/2.7.0_prettier@2.6.2+svelte@3.49.0:
+  /prettier-plugin-svelte/2.7.0_3cyj5wbackxvw67rnaarcmbw7y:
    resolution: {integrity: sha512-fQhhZICprZot2IqEyoiUYLTRdumULGRvw0o4dzl5jt0jfzVWdGqeYW27QTWAeXhoupEZJULmNoH3ueJwUWFLIA==}
    peerDependencies:
      prettier: ^1.16.4 || ^2.0.0
@ -3292,7 +3269,7 @@ packages:
    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
    engines: {node: '>= 0.4'}

-  /svelte-check/2.4.1_736abba5ed1eb6f8ecf70b1d49ead14b:
+  /svelte-check/2.4.1_2y4otvh2n6klv6metqycpfiuzy:
    resolution: {integrity: sha512-xhf3ShP5rnRwBokrgTBJ/0cO9QIc1DAVu1NWNRTfCDsDBNjGmkS3HgitgUadRuoMKj1+irZR/yHJ+Uqobnkbrw==}
    hasBin: true
    peerDependencies:
@ -3305,8 +3282,7 @@ packages:
      picocolors: 1.0.0
      sade: 1.8.1
      source-map: 0.7.3
-      svelte: 3.49.0
-      svelte-preprocess: 4.10.2_d50790bb30dd88cc44babe7efa52bace
+      svelte-preprocess: 4.10.2_bw7ic75prjd4umr4fb55sbospu
      typescript: 4.5.5
    transitivePeerDependencies:
      - '@babel/core'
@ -3321,7 +3297,7 @@ packages:
      - sugarss
    dev: true

-  /svelte-check/2.8.0_postcss@8.4.6+svelte@3.49.0:
+  /svelte-check/2.8.0_mgmdnb6x5rpawk37gozc2sbtta:
    resolution: {integrity: sha512-HRL66BxffMAZusqe5I5k26mRWQ+BobGd9Rxm3onh7ZVu0nTk8YTKJ9vu3LVPjUGLU9IX7zS+jmwPVhJYdXJ8vg==}
    hasBin: true
    peerDependencies:
@ -3334,7 +3310,7 @@ packages:
      picocolors: 1.0.0
      sade: 1.8.1
      svelte: 3.49.0
-      svelte-preprocess: 4.10.6_62d50a01257de5eec5be08cad9d3ed66
+      svelte-preprocess: 4.10.6_mlkquajfpxs65rn6bdfntu7nmy
      typescript: 4.7.4
    transitivePeerDependencies:
      - '@babel/core'
@ -3349,6 +3325,13 @@ packages:
      - sugarss
    dev: false

+  /svelte-hmr/0.14.11:
+    resolution: {integrity: sha512-R9CVfX6DXxW1Kn45Jtmx+yUe+sPhrbYSUp7TkzbW0jI5fVPn6lsNG9NEs5dFg5qRhFNAoVdRw5qQDLALNKhwbQ==}
+    engines: {node: ^12.20 || ^14.13.1 || >= 16}
+    peerDependencies:
+      svelte: '>=3.19.0'
+    dev: true
+
  /svelte-hmr/0.14.11_svelte@3.49.0:
    resolution: {integrity: sha512-R9CVfX6DXxW1Kn45Jtmx+yUe+sPhrbYSUp7TkzbW0jI5fVPn6lsNG9NEs5dFg5qRhFNAoVdRw5qQDLALNKhwbQ==}
    engines: {node: ^12.20 || ^14.13.1 || >= 16}
@ -3356,6 +3339,21 @@ packages:
      svelte: '>=3.19.0'
    dependencies:
      svelte: 3.49.0
+    dev: false
+
+  /svelte-i18n/3.3.13:
+    resolution: {integrity: sha512-RQM+ys4+Y9ztH//tX22H1UL2cniLNmIR+N4xmYygV6QpQ6EyQvloZiENRew8XrVzfvJ8HaE8NU6/yurLkl7z3g==}
+    engines: {node: '>= 11.15.0'}
+    hasBin: true
+    peerDependencies:
+      svelte: ^3.25.1
+    dependencies:
+      deepmerge: 4.2.2
+      estree-walker: 2.0.2
+      intl-messageformat: 9.11.4
+      sade: 1.8.1
+      tiny-glob: 0.2.9
+    dev: false

  /svelte-i18n/3.3.13_svelte@3.49.0:
    resolution: {integrity: sha512-RQM+ys4+Y9ztH//tX22H1UL2cniLNmIR+N4xmYygV6QpQ6EyQvloZiENRew8XrVzfvJ8HaE8NU6/yurLkl7z3g==}
@ -3372,7 +3370,7 @@ packages:
      tiny-glob: 0.2.9
    dev: false

-  /svelte-preprocess/4.10.2_d50790bb30dd88cc44babe7efa52bace:
+  /svelte-preprocess/4.10.2_bw7ic75prjd4umr4fb55sbospu:
    resolution: {integrity: sha512-aPpkCreSo8EL/y8kJSa1trhiX0oyAtTjlNNM7BNjRAsMJ8Yy2LtqHt0zyd4pQPXt+D4PzbO3qTjjio3kwOxDlA==}
    engines: {node: '>= 9.11.2'}
    requiresBuild: true
@ -3421,11 +3419,10 @@ packages:
      postcss-load-config: 3.1.1
      sorcery: 0.10.0
      strip-indent: 3.0.0
-      svelte: 3.49.0
      typescript: 4.5.5
    dev: true

-  /svelte-preprocess/4.10.6_62d50a01257de5eec5be08cad9d3ed66:
+  /svelte-preprocess/4.10.6_mlkquajfpxs65rn6bdfntu7nmy:
    resolution: {integrity: sha512-I2SV1w/AveMvgIQlUF/ZOO3PYVnhxfcpNyGt8pxpUVhPfyfL/CZBkkw/KPfuFix5FJ9TnnNYMhACK3DtSaYVVQ==}
    engines: {node: '>= 9.11.2'}
    requiresBuild: true
@ -3501,12 +3498,13 @@ packages:
      get-port: 3.2.0
    dev: false

-  /tailwindcss/3.0.23_autoprefixer@10.4.2:
+  /tailwindcss/3.0.23_qm7bagfnbv4vjkuayu3hle4sne:
    resolution: {integrity: sha512-+OZOV9ubyQ6oI2BXEhzw4HrqvgcARY38xv3zKcjnWtMIZstEsXdI9xftd1iB7+RbOnj2HOEzkA0OyB5BaSxPQA==}
    engines: {node: '>=12.13.0'}
    hasBin: true
    peerDependencies:
      autoprefixer: ^10.0.2
+      postcss: ^8.0.9
    dependencies:
      arg: 5.0.1
      autoprefixer: 10.4.2_postcss@8.4.6
@ -3534,10 +3532,12 @@ packages:
      - ts-node
    dev: true

-  /tailwindcss/3.1.6:
+  /tailwindcss/3.1.6_postcss@8.4.6:
    resolution: {integrity: sha512-7skAOY56erZAFQssT1xkpk+kWt2NrO45kORlxFPXUt3CiGsVPhH1smuH5XoDH6sGPXLyBv+zgCKA2HWBsgCytg==}
    engines: {node: '>=12.13.0'}
    hasBin: true
+    peerDependencies:
+      postcss: ^8.0.9
    dependencies:
      arg: 5.0.2
      chokidar: 3.5.3
@ -3552,11 +3552,11 @@ packages:
      normalize-path: 3.0.0
      object-hash: 3.0.0
      picocolors: 1.0.0
-      postcss: 8.4.14
-      postcss-import: 14.1.0_postcss@8.4.14
-      postcss-js: 4.0.0_postcss@8.4.14
-      postcss-load-config: 3.1.4_postcss@8.4.14
-      postcss-nested: 5.0.6_postcss@8.4.14
+      postcss: 8.4.6
+      postcss-import: 14.1.0_postcss@8.4.6
+      postcss-js: 4.0.0_postcss@8.4.6
+      postcss-load-config: 3.1.4_postcss@8.4.6
+      postcss-nested: 5.0.6_postcss@8.4.6
      postcss-selector-parser: 6.0.10
      postcss-value-parser: 4.2.0
      quick-lru: 5.1.1