chore(*): use postcss to build styles

.gitignore

@@ -8,5 +8,4 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
-/static/output.css
 .netlify

package-lock.json

@@ -19,6 +19,8 @@
 				"@sveltejs/adapter-static": "^3.0.0",
 				"@sveltejs/kit": "^2.0.6",
 				"@sveltejs/vite-plugin-svelte": "^3.0.0",
+				"@tailwindcss/forms": "^0.5.7",
+				"@tailwindcss/typography": "^0.5.13",
 				"@types/cookie": "^0.6.0",
 				"@types/eslint": "^8.56.0",
 				"@typescript-eslint/eslint-plugin": "^7.0.0",
@@ -30,7 +32,8 @@
 				"eslint": "^8.56.0",
 				"eslint-config-prettier": "^9.1.0",
 				"eslint-plugin-svelte": "^2.35.1",
-				"postcss": "^8.4.38",
+				"postcss": "^8.4.39",
+				"postcss-load-config": "^5.1.0",
 				"prettier": "^3.1.1",
 				"prettier-plugin-svelte": "^3.1.2",
 				"supabase": "^1.178.2",
@@ -3257,6 +3260,46 @@
 				"vite": "^5.0.0"
 			}
 		},
+		"node_modules/@tailwindcss/forms": {
+			"version": "0.5.7",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.7.tgz",
+			"integrity": "sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==",
+			"dev": true,
+			"dependencies": {
+				"mini-svg-data-uri": "^1.2.3"
+			},
+			"peerDependencies": {
+				"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
+			}
+		},
+		"node_modules/@tailwindcss/typography": {
+			"version": "0.5.13",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.13.tgz",
+			"integrity": "sha512-ADGcJ8dX21dVVHIwTRgzrcunY6YY9uSlAHHGVKvkA+vLc5qLwEszvKts40lx7z0qc4clpjclwLeK5rVCV2P/uw==",
+			"dev": true,
+			"dependencies": {
+				"lodash.castarray": "^4.4.0",
+				"lodash.isplainobject": "^4.0.6",
+				"lodash.merge": "^4.6.2",
+				"postcss-selector-parser": "6.0.10"
+			},
+			"peerDependencies": {
+				"tailwindcss": ">=3.0.0 || insiders"
+			}
+		},
+		"node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+			"version": "6.0.10",
+			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+			"integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+			"dev": true,
+			"dependencies": {
+				"cssesc": "^3.0.0",
+				"util-deprecate": "^1.0.2"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/@types/cookie": {
 			"version": "0.6.0",
 			"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
@@ -4067,12 +4110,12 @@
 			}
 		},
 		"node_modules/buffer-crc32": {
-			"version": "0.2.13",
-			"resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
-			"integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-1.0.0.tgz",
+			"integrity": "sha512-Db1SbgBS/fg/392AblrMJk97KggmvYhr4pB5ZIMTWtaivCPMWLkmb7m21cJvpvgK+J3nsU2CmmixNBZx4vFj/w==",
 			"dev": true,
 			"engines": {
-				"node": "*"
+				"node": ">=8.0.0"
 			}
 		},
 		"node_modules/buffer-from": {
@@ -5060,6 +5103,44 @@
 				}
 			}
 		},
+		"node_modules/eslint-plugin-svelte/node_modules/postcss-load-config": {
+			"version": "3.1.4",
+			"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
+			"integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
+			"dev": true,
+			"dependencies": {
+				"lilconfig": "^2.0.5",
+				"yaml": "^1.10.2"
+			},
+			"engines": {
+				"node": ">= 10"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/postcss/"
+			},
+			"peerDependencies": {
+				"postcss": ">=8.0.9",
+				"ts-node": ">=9.0.0"
+			},
+			"peerDependenciesMeta": {
+				"postcss": {
+					"optional": true
+				},
+				"ts-node": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/eslint-plugin-svelte/node_modules/yaml": {
+			"version": "1.10.2",
+			"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+			"integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+			"dev": true,
+			"engines": {
+				"node": ">= 6"
+			}
+		},
 		"node_modules/eslint-scope": {
 			"version": "7.2.2",
 			"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
@@ -6520,6 +6601,12 @@
 			"dev": true,
 			"peer": true
 		},
+		"node_modules/lodash.castarray": {
+			"version": "4.4.0",
+			"resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+			"integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+			"dev": true
+		},
 		"node_modules/lodash.debounce": {
 			"version": "4.0.8",
 			"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -6527,6 +6614,12 @@
 			"dev": true,
 			"peer": true
 		},
+		"node_modules/lodash.isplainobject": {
+			"version": "4.0.6",
+			"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+			"integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+			"dev": true
+		},
 		"node_modules/lodash.merge": {
 			"version": "4.6.2",
 			"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -6610,6 +6703,15 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/mini-svg-data-uri": {
+			"version": "1.4.4",
+			"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+			"integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+			"dev": true,
+			"bin": {
+				"mini-svg-data-uri": "cli.js"
+			}
+		},
 		"node_modules/minimatch": {
 			"version": "9.0.4",
 			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
@@ -7122,9 +7224,9 @@
 			}
 		},
 		"node_modules/picocolors": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-			"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
+			"integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
 			"dev": true
 		},
 		"node_modules/picomatch": {
@@ -7168,9 +7270,9 @@
 			}
 		},
 		"node_modules/postcss": {
-			"version": "8.4.38",
-			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
-			"integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+			"version": "8.4.39",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz",
+			"integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
 			"dev": true,
 			"funding": [
 				{
@@ -7188,7 +7290,7 @@
 			],
 			"dependencies": {
 				"nanoid": "^3.3.7",
-				"picocolors": "^1.0.0",
+				"picocolors": "^1.0.1",
 				"source-map-js": "^1.2.0"
 			},
 			"engines": {
@@ -7232,34 +7334,56 @@
 			}
 		},
 		"node_modules/postcss-load-config": {
-			"version": "3.1.4",
-			"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
-			"integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-5.1.0.tgz",
+			"integrity": "sha512-G5AJ+IX0aD0dygOE0yFZQ/huFFMSNneyfp0e3/bT05a8OfPC5FUoZRPfGijUdGOJNMewJiwzcHJXFafFzeKFVA==",
 			"dev": true,
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/postcss/"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
 			"dependencies": {
-				"lilconfig": "^2.0.5",
-				"yaml": "^1.10.2"
+				"lilconfig": "^3.1.1",
+				"yaml": "^2.4.2"
 			},
 			"engines": {
-				"node": ">= 10"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/postcss/"
+				"node": ">= 18"
 			},
 			"peerDependencies": {
+				"jiti": ">=1.21.0",
 				"postcss": ">=8.0.9",
-				"ts-node": ">=9.0.0"
+				"tsx": "^4.8.1"
 			},
 			"peerDependenciesMeta": {
+				"jiti": {
+					"optional": true
+				},
 				"postcss": {
 					"optional": true
 				},
-				"ts-node": {
+				"tsx": {
 					"optional": true
 				}
 			}
 		},
+		"node_modules/postcss-load-config/node_modules/lilconfig": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
+			"integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
+			"dev": true,
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/antonk52"
+			}
+		},
 		"node_modules/postcss-nested": {
 			"version": "6.0.1",
 			"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
@@ -7932,6 +8056,7 @@
 			"version": "7.2.3",
 			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
 			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+			"deprecated": "Glob versions prior to v9 are no longer supported",
 			"dev": true,
 			"dependencies": {
 				"fs.realpath": "^1.0.0",
@@ -7964,6 +8089,7 @@
 			"version": "2.7.1",
 			"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
 			"integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+			"deprecated": "Rimraf versions prior to v4 are no longer supported",
 			"dev": true,
 			"dependencies": {
 				"glob": "^7.1.3"
@@ -8204,13 +8330,13 @@
 			"peer": true
 		},
 		"node_modules/sorcery": {
-			"version": "0.11.0",
-			"resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.11.0.tgz",
-			"integrity": "sha512-J69LQ22xrQB1cIFJhPfgtLuI6BpWRiWu1Y3vSsIwK/eAScqJxd/+CJlUuHQRdX2C9NGFamq+KqNywGgaThwfHw==",
+			"version": "0.11.1",
+			"resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.11.1.tgz",
+			"integrity": "sha512-o7npfeJE6wi6J9l0/5LKshFzZ2rMatRiCDwYeDQaOzqdzRJwALhX7mk/A/ecg6wjMu7wdZbmXfD2S/vpOg0bdQ==",
 			"dev": true,
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.14",
-				"buffer-crc32": "^0.2.5",
+				"buffer-crc32": "^1.0.0",
 				"minimist": "^1.2.0",
 				"sander": "^0.5.0"
 			},
@@ -8888,18 +9014,6 @@
 				"url": "https://github.com/sponsors/antonk52"
 			}
 		},
-		"node_modules/tailwindcss/node_modules/yaml": {
-			"version": "2.4.2",
-			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.2.tgz",
-			"integrity": "sha512-B3VqDZ+JAg1nZpaEmWtTXUlBneoGx6CPM9b0TENK6aoSu5t73dItudwdgmi6tHlIZZId4dZ9skcAQ2UbcyAeVA==",
-			"dev": true,
-			"bin": {
-				"yaml": "bin.mjs"
-			},
-			"engines": {
-				"node": ">= 14"
-			}
-		},
 		"node_modules/tar": {
 			"version": "7.4.0",
 			"resolved": "https://registry.npmjs.org/tar/-/tar-7.4.0.tgz",
@@ -10169,12 +10283,15 @@
 			"dev": true
 		},
 		"node_modules/yaml": {
-			"version": "1.10.2",
-			"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-			"integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+			"version": "2.4.5",
+			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.5.tgz",
+			"integrity": "sha512-aBx2bnqDzVOyNKfsysjA2ms5ZlnjSAW2eG3/L5G/CSujfjLJTJsEw1bGw8kCf04KodQWk1pxlGnZ56CRxiawmg==",
 			"dev": true,
+			"bin": {
+				"yaml": "bin.mjs"
+			},
 			"engines": {
-				"node": ">= 6"
+				"node": ">= 14"
 			}
 		},
 		"node_modules/yocto-queue": {

package.json

@@ -3,14 +3,13 @@
 	"version": "0.0.1",
 	"private": true,
 	"scripts": {
-		"dev": "npx tailwindcss -i ./static/input.css -o ./static/output.css && vite dev",
-		"build": "npx tailwindcss -i ./static/input.css -o ./static/output.css && vite build",
+		"dev": "vite dev",
+		"build": "vite build",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --check . && eslint .",
-		"format": "prettier --write .",
-		"tailwind": "npx tailwindcss -i ./static/input.css -o ./static/output.css"
+		"format": "prettier --write ."
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.0.0",
@@ -19,6 +18,8 @@
 		"@sveltejs/adapter-static": "^3.0.0",
 		"@sveltejs/kit": "^2.0.6",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@tailwindcss/forms": "^0.5.7",
+		"@tailwindcss/typography": "^0.5.13",
 		"@types/cookie": "^0.6.0",
 		"@types/eslint": "^8.56.0",
 		"@typescript-eslint/eslint-plugin": "^7.0.0",
@@ -30,7 +31,8 @@
 		"eslint": "^8.56.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.35.1",
-		"postcss": "^8.4.38",
+		"postcss": "^8.4.39",
+		"postcss-load-config": "^5.1.0",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
 		"supabase": "^1.178.2",

postcss.config.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('tailwindcss'), require('autoprefixer')],
+};

src/app.html

@@ -5,7 +5,6 @@
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
-		<link rel="stylesheet" href="%sveltekit.assets%/output.css" />
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>

src/app.pcss

@@ -0,0 +1 @@
+/* Write your global styles here, in PostCSS syntax */

src/app.postcss

@@ -1,3 +1,4 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@tailwind variants;

src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import 'tailwindcss/tailwind.css';
+	import '../app.postcss';
 	import { onDestroy, onMount } from 'svelte';
 	import { isBrowser } from '@supabase/ssr';
 	import { basket, type Basket, type Item } from '$lib/stores/basket.js';
@@ -265,7 +265,7 @@
 	<span>{localGeneral.toastMessage == '' ? 'Added to basket' : localGeneral.toastMessage}</span>
 </div>
 
-<style scoped>
+<style scoped lang="postcss">
 	.user-circle {
 		width: 40px;
 		height: 40px;