chore: Update vite-plugin-tailwind-purgecss and PurgeCSS docs (#2604)

Author: AdrianGonz97

.changeset/stupid-foxes-switch.md

@@ -0,0 +1,5 @@
+---
+"create-skeleton-app": patch
+---
+
+chore: Updated purgecss plugin template

packages/create-skeleton-app/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "create-skeleton-app",
-	"version": "0.0.53",
+	"version": "0.0.54",
 	"description": "Use this CLI app to setup a new Skeleton application in a new SvelteKit project.",
 	"keywords": [
 		"skeleton",
@@ -30,7 +30,8 @@
 	"scripts": {
 		"prep": "node scripts/prepare-templates.mjs && pnpm format",
 		"tw": "node scripts/tw.mjs",
-		"dev": "node src/index.js -p=../../../atest --skeletontemplatedir=../../templates/",
+		"dev": "node src/index.js -p=../../../_test --skeletontemplatedir=../../templates/",
+		"short": "node src/index.js",
 		"long": "node src/index.js --types=typescript --prettier --eslint --playwright=false --vitest=false --codeblocks=true --popups=true --typography=false --forms=false -t crimson --skeletontemplate=welcome",
 		"pub:beta": "pnpm prep && npm publish --tag beta",
 		"pub:rc": "pnpm prep && npm publish --tag rc",
@@ -41,9 +42,9 @@
 	"dependencies": {
 		"@clack/prompts": "^0.7.0",
 		"columnify": "^1.6.0",
-		"create-svelte": "^5.0.6",
-		"fast-glob": "^3.3.1",
-		"fs-extra": "^11.1.1",
+		"create-svelte": "^6.0.0",
+		"fast-glob": "^3.3.2",
+		"fs-extra": "^11.2.0",
 		"got": "^13.0.0",
 		"json5": "^2.2.3",
 		"kleur": "^4.1.5",
@@ -52,7 +53,7 @@
 	},
 	"devDependencies": {
 		"archiver": "^6.0.1",
-		"eslint": "^8.49.0",
-		"eslint-config-prettier": "^9.0.0"
+		"eslint": "^8.55.0",
+		"eslint-config-prettier": "^9.1.0"
 	}
 }

packages/create-skeleton-app/pnpm-lock.yaml

@@ -182,27 +182,21 @@ function createSvelteConfig(opts) {
 	// For some reason create-svelte will turn off preprocessing for jsdoc and no type checking
 	// this will break the using of all CSS preprocessing as well, which is undesirable.
 	// Here we will just return the typescript default setup
-	const mdsvexConfig = `import { mdsvex } from 'mdsvex'
-		
-/** @type {import('mdsvex').MdsvexOptions} */
-const mdsvexOptions = {
-	extensions: ['.md'],
-}`;
+
 	const inspectorConfig = `
 	vitePlugin: {
 		inspector: true,
 	},`;
 
 	let str = `import adapter from '@sveltejs/adapter-auto';
-import { vitePreprocess } from '@sveltejs/kit/vite';
-${iit(opts.mdsvex, mdsvexConfig)}
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	extensions: ['.svelte'${iit(opts.mdsvex, `, '.md'`)}],
+	extensions: ['.svelte'],
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: [${iit(opts.mdsvex, 'mdsvex(mdsvexOptions),')} vitePreprocess()],
+	preprocess: [vitePreprocess()],
 	${iit(opts.inspector, inspectorConfig)}
 	kit: {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
@@ -222,21 +216,9 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [sveltekit(), purgeCss(`;
-
-	if (opts.codeblocks) {
-		contents += `{
-			safelist: {
-				// any selectors that begin with "hljs-" will not be purged
-				greedy: [/^hljs-/],
-			},
-		}),
-	],
-});`;
-	} else {
-		contents += `)]
+	plugins: [sveltekit(), purgeCss()]
 });`;
-	}
+
 	writeFileSync(filename, contents);
 }
 

packages/create-skeleton-app/src/creator.js

@@ -143,13 +143,6 @@ export function getHelpText() {
 			Description: 'Install codeblock optional dependencies',
 		},
 		{ Option: '--popups', Short: '', 'Quiet Default': 'false', Value: 'true|false', Description: 'Install popups dependencies' },
-		{
-			Option: '--mdsvex',
-			Short: '',
-			'Quiet Default': 'false',
-			Value: 'true|false',
-			Description: 'Install mdsvex for markdown processing',
-		},
 		{ Option: '--forms', Short: '', 'Quiet Default': 'false', Value: 'true|false', Description: 'Install Tailwinds Forms plugin' },
 		{
 			Option: '--typography',
@@ -172,6 +165,7 @@ export function getHelpText() {
 			Value: 'skeleton',
 			Description: 'Choose one for the Skeleton theme',
 		},
+		{ Option: '', Short: '', 'Quiet Default': 'wintry', Value: 'wintry', Description: '' },
 		{ Option: '', Short: '', 'Quiet Default': 'modern', Value: 'modern', Description: '' },
 		{ Option: '', Short: '', 'Quiet Default': 'hamlindigo', Value: 'hamlindigo', Description: '' },
 		{ Option: '', Short: '', 'Quiet Default': 'rocket', Value: 'rocket', Description: '' },

packages/create-skeleton-app/src/utils.js

@@ -1,6 +1,6 @@
 <!-- YOU CAN DELETE EVERYTHING IN THIS PAGE -->
 
-<div class="container h-screen mx-auto flex justify-center items-center">
+<div class="container h-full mx-auto flex justify-center items-center">
 	<div class="space-y-5">
 		<h1 class="h1">Let's get cracking bones!</h1>
 		<p>Start by exploring:</p>

packages/create-skeleton-app/templates/skeleton-template-bare/src/routes/+page.svelte

@@ -197,7 +197,7 @@
 		return allowDuplicates || !value.includes(chip);
 	}
 
-	function validate(chip: string = ''): boolean {
+	function validate(chip = ''): boolean {
 		if (!chip && !input) return false;
 		// Format: trim value
 		chip = chip !== '' ? chip.trim() : input.trim();

packages/skeleton/src/lib/components/InputChip/InputChip.svelte

@@ -27,7 +27,7 @@
 		"@floating-ui/dom": "^1.2.9",
 		"@skeletonlabs/skeleton": "workspace:*",
 		"@skeletonlabs/tw-plugin": "workspace:*",
-		"@sveltejs/adapter-vercel": "^3.0.1",
+		"@sveltejs/adapter-vercel": "^3.1.0",
 		"@sveltejs/kit": "^1.20.2",
 		"@tailwindcss/forms": "^0.5.3",
 		"@tailwindcss/typography": "^0.5.9",
@@ -52,7 +52,7 @@
 		"tslib": "^2.5.3",
 		"typescript": "^5.0.3",
 		"vite": "^4.3.9",
-		"vite-plugin-tailwind-purgecss": "^0.1.4",
+		"vite-plugin-tailwind-purgecss": "^0.3.0",
 		"vitest": "^0.32.0"
 	},
 	"type": "module"