feat: add autoprefixer and cssnano for improved CSS handling

refactor: update Counter component to accept className prop for styling

delete: remove unused Input component

refactor: replace Input component with new TextInput component in the main page

chore: update Vite configuration to include PostCSS plugins for CSS optimization

feat: create TextInput component for reactive text input with output display

Author: saaqi

bun.lock

@@ -19,6 +19,8 @@
 		"@sveltejs/adapter-static": "^3.0.8",
 		"@sveltejs/kit": "^2.21.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"autoprefixer": "^10.4.21",
+		"cssnano": "^7.0.7",
 		"eslint": "^9.27.0",
 		"eslint-config-prettier": "^10.1.5",
 		"eslint-plugin-svelte": "^3.8.1",

package.json

@@ -3,12 +3,15 @@
 	let count = $state(0);
 	const times = $derived(count == 1 ? 'time' : 'times');
 
-	const { btnStyle = 'primary' } = $props();
+	const { 
+		btnStyle = 'primary',
+		className = ''
+ } = $props();
 </script>
 
 <!-- onclick event handler is set to the increment function -->
 <!-- Button text displays the current count and the word "time" with appropriate pluralization -->
-<button type="button" class="btn btn-{btnStyle} w-100" onclick={() => count++}>
+<button type="button" class="btn btn-{btnStyle} w-100 {className}" onclick={() => count++}>
 	Pressed {count}
 	{times}
 </button>

src/lib/components/Counter.svelte

@@ -0,0 +1,29 @@
+<script>
+	let {
+		placeholder = 'Enter your text here...',
+	} = $props();
+	let inputText = $state('');
+</script>
+
+
+<div class="mb-3">
+	<label for="exampleFormControlTextarea1" class="form-label">Insert Reactive Text Here:</label>
+	<textarea
+		bind:value={inputText}
+		class="form-control"
+		id="exampleFormControlTextarea1"
+		{placeholder}
+		rows="3"
+	></textarea>
+</div>
+<div class="inputTextOutput bg-light text-bg-light rounded-3 border-1 border-black">
+	{inputText}
+</div>
+
+<style lang="scss">
+	.inputTextOutput {
+		font-size: 1.5rem;
+		min-height: 3rem;
+		padding: 0.5rem 1rem;
+	}
+</style>

src/lib/components/Input.svelte

@@ -2,7 +2,7 @@
 	import Counter from '$lib/components/Counter.svelte';
 	import Logos from '$lib/components/Logos.svelte';
 	import Modal from '$lib/components/Modal.svelte';
-	import Input from '$lib/components/Input.svelte';
+	import TextInput from '$lib/components/TextInput.svelte';
 	import { onMount } from 'svelte';
 
 	let hrefLocation = '';
@@ -28,28 +28,34 @@
 				<Logos />
 			</div>
 
-			<div class="mb-5 col-xl-4 col-md-6">
-				<div class="mb-3 d-flex justify-content-between gap-3">
-					<Counter btnStyle="secondary" />
-					<Modal
-						id="modal-demo"
-						btnTitle="Modal Demo"
-						modalTitle="Cat's Diary"
-						body="Make muffins give attitude chase mice sweet beast under the bed all of a sudden go crazy behind the couch destroy couch intently stare at the same spot chew ipad power cord bag stretch claw drapes, leave dead animals as gifts attack feet flop over hopped up on goofballs hunt anything that moves hide when guests come over intrigued by the shower stand in front of the computer screen rub face on everything."
-					/>
+			<div class="container">
+				<div class="row g-3 col-12 col-md-6">
+					<div class="col-6">
+						<Counter btnStyle="secondary" />
+					</div>
+					<div class="col-6">
+						<Modal
+							class="col-6"
+							id="modal-demo"
+							btnTitle="Modal Demo"
+							modalTitle="Cat's Diary"
+							body="Make muffins give attitude chase mice sweet beast under the bed all of a sudden go crazy behind the couch destroy couch intently stare at the same spot chew ipad power cord bag stretch claw drapes, leave dead animals as gifts attack feet flop over hopped up on goofballs hunt anything that moves hide when guests come over intrigued by the shower stand in front of the computer screen rub face on everything."
+						/>
+					</div>
+					<div class="col-12">
+						<a
+							href="https://pagespeed.web.dev/report?url={hrefLocation}"
+							target="_blank"
+							class="btn btn-light w-100"
+							rel="noreferrer"
+						>
+							Google PageSpeed Report
+						</a>
+					</div>
+					<div class="col-12">
+						<TextInput />
+					</div>
 				</div>
-
-				<div class="mb-3">
-					<a
-						href="https://pagespeed.web.dev/report?url={hrefLocation}"
-						target="_blank"
-						class="btn btn-light w-100"
-						rel="noreferrer"
-					>
-						Google PageSpeed Report
-					</a>
-				</div>
-				<Input />
 			</div>
 
 

src/lib/components/TextInput.svelte

@@ -1,8 +1,11 @@
-import { sveltekit } from '@sveltejs/kit/vite';
+const IN_PRODUCTION = process.env.NODE_ENV === 'production';
 import { defineConfig } from 'vite';
+import { sveltekit } from '@sveltejs/kit/vite';
 import webfontDownload from 'vite-plugin-webfont-dl';
-const IN_PRODUCTION = process.env.NODE_ENV === 'production';
-import htmlPurge from 'vite-plugin-purgecss';
+// import { purgeCSSPlugin } from '@fullhuman/postcss-purgecss';
+import htmlPurge from 'vite-plugin-purgecss'
+import autoprefixer from 'autoprefixer';
+import cssnano from 'cssnano';
 const bootstrap = 'node_modules/bootstrap';
 
 export default defineConfig({
@@ -38,17 +41,26 @@ export default defineConfig({
 		}),
 
 		/* ## Download Google Fonts and attach them with production build for offline use */
-		IN_PRODUCTION &&
-			webfontDownload([
-				'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'
-			])
+		IN_PRODUCTION && webfontDownload([
+			'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'
+		])
 	],
 
 	css: {
 		preprocessorOptions: {
 			scss: {
 				api: 'modern'
 			}
+		},
+		postcss: {
+			plugins: [
+				// --- CSSNano is a modern CSS minifier based on the PostCSS ecosystem.
+				cssnano({
+					preset: ["default", { discardComments: { removeAll: true } }],
+				}),
+				// --- Autoprefixer is used to add vendor prefixes to CSS rules using values from "Can I Use".
+				autoprefixer
+			]
 		}
 	},