JSON5 and wintry added

packages/create-skeleton-app/CHANGELOG.md

@@ -4,15 +4,15 @@
 
 ### Patch Changes
 
-- Fixed @rc pinning ([#1882](https://github.com/skeletonlabs/skeleton/pull/1882))
+-   Fixed @rc pinning ([#1882](https://github.com/skeletonlabs/skeleton/pull/1882))
 
 ## 0.0.46-rc.2
 
 ### Patch Changes
 
-- CSA updates for V2 ([#1859](https://github.com/skeletonlabs/skeleton/pull/1859))
-  - Install vite-plugin-tailwind-purgecss to enable purging of unused component CSS
-  - mdsvex is an optional install
-  - No longer installs packages by default
-  - Templates can now specify additional packages to be installed
-  - Bug fixes and improvements all over
+-   CSA updates for V2 ([#1859](https://github.com/skeletonlabs/skeleton/pull/1859))
+    -   Install vite-plugin-tailwind-purgecss to enable purging of unused component CSS
+    -   mdsvex is an optional install
+    -   No longer installs packages by default
+    -   Templates can now specify additional packages to be installed
+    -   Bug fixes and improvements all over

packages/create-skeleton-app/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "create-skeleton-app",
-	"version": "0.0.46-rc.3",
+	"version": "0.0.46-rc.6",
 	"description": "Use this CLI app to setup a new Skeleton application in a new SvelteKit project.",
 	"keywords": [
 		"skeleton",
@@ -29,10 +29,11 @@
 	},
 	"scripts": {
 		"prep": "node scripts/prepare-templates.mjs && pnpm format",
+		"tw": "node scripts/tw.mjs",
 		"dev": "node src/index.js -p=../../../atest --skeletontemplatedir=../../templates/",
 		"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:next": "pnpm prep && npm publish --tag next",
+		"pub:rc": "pnpm prep && npm publish --tag rc",
 		"pub:release": "pnpm prep && npm publish",
 		"lint": "prettier --ignore-path .prettierignore --check --plugin-search-dir=. . && eslint --fix --ignore-path .gitignore .",
 		"format": "prettier --plugin-search-dir . --write ."
@@ -46,7 +47,8 @@
 		"got": "^13.0.0",
 		"kleur": "^4.1.5",
 		"mri": "^1.2.0",
-		"semver": "^7.5.4"
+		"semver": "^7.5.4",
+		"json5": "^2.2.3"
 	},
 	"devDependencies": {
 		"archiver": "^5.3.1",

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

@@ -43,6 +43,9 @@ devDependencies:
   eslint-config-prettier:
     specifier: ^8.10.0
     version: 8.10.0(eslint@8.46.0)
+  json5:
+    specifier: ^2.2.3
+    version: 2.2.3
 
 packages:
 
@@ -786,6 +789,12 @@ packages:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
     dev: true
 
+  /json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dev: true
+
   /jsonfile@6.1.0:
     resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
     dependencies:

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

@@ -5,10 +5,22 @@ import { join, resolve } from 'path';
 import { cwd, chdir } from 'process';
 import { mkdirp, setNestedValue, checkIfDirSafeToInstall, iit } from './utils.js';
 import { fileURLToPath } from 'url';
+import JSON5 from 'json5';
 
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
-export const presetThemes = ['skeleton', 'modern', 'hamlindigo', 'rocket', 'sahara', 'gold-nouveau', 'vintage', 'seafoam', 'crimson'];
+export const presetThemes = [
+	'skeleton',
+	'wintry',
+	'modern',
+	'hamlindigo',
+	'rocket',
+	'sahara',
+	'gold-nouveau',
+	'vintage',
+	'seafoam',
+	'crimson',
+];
 // NOTE: Any changes here must also be reflected in the --help output in utils.js and shortcut expansions in index.js.
 // Probably a good idea to do a search on the values you are changing to catch any other areas they are used in
 
@@ -43,7 +55,7 @@ export class SkeletonOptions {
 			['autoprefixer', 'latest'],
 			['tailwindcss', 'latest'],
 			['@skeletonlabs/skeleton', '2.0.0-rc.1'],
-			['@skeletonlabs/tw-plugin', '0.0.1-rc.3'],
+			['@skeletonlabs/tw-plugin', '0.1.0-rc.5'],
 			['vite-plugin-tailwind-purgecss', 'latest'],
 		]);
 
@@ -228,7 +240,7 @@ async function createVSCodeSettings() {
 	}
 }
 
-function createTailwindConfig(opts) {
+export function createTailwindConfig(opts) {
 	let plugins = [];
 	let pluginImports = [];
 
@@ -241,34 +253,36 @@ function createTailwindConfig(opts) {
 		plugins.push(`typography`);
 	}
 	pluginImports.push(`import { skeleton } from '@skeletonlabs/tw-plugin'`);
-	// Can't use JSON.stringify because we node code literals in there without everything being coerced to quoted strings
-	// space on the end is important
-	let presetConfig = '{ themes: { preset: [ ';
-	let customConfig = '';
+	// Can't use JSON.stringify because we need code literals in there without everything being coerced to quoted strings
+
+	let configs = { themes: { preset: [], custom: [] } };
 	for (const theme of opts.skeletontheme) {
 		if (typeof theme === 'string') {
-			presetConfig += `{ name: "${theme}", enhancements: true },`;
+			configs.themes.preset.push({ name: theme, enhancements: true });
 		} else {
-			pluginImports.push(`import { ${theme.custom} } from './src/${theme.custom}.js'`);
-			customConfig = `, custom:[${theme.custom}]`;
+			pluginImports.push(`import { ${theme.custom} } from './src/${theme.custom}'`);
+			configs.themes.custom.push(theme.custom);
 			createCustomTheme(opts, theme.custom);
 		}
 	}
-	const finalConfig = presetConfig.slice(0, -1) + ']' + customConfig + '}}';
-	plugins.push(`skeleton(${finalConfig})`);
+	if (configs.themes.preset.length == 0) delete configs.themes.preset;
+	if (configs.themes.custom.length == 0) delete configs.themes.custom;
+	let configsStr = JSON5.stringify(configs, { space: '\t' });
+	configsStr = configsStr.replace(/^/gm, `\t\t`).slice(2);
+
+	plugins.push(`skeleton(${configsStr}),`);
 
 	const str = `import { join } from 'path'
 ${iit(opts.types == 'typescript', `import type { Config } from 'tailwindcss'`)}
-${pluginImports.join('\n')}
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
+${pluginImports.join(';\n')}
+${iit(opts.types == 'checkjs', `/** @type {import('tailwindcss').Config} */`)}
+export default {
 	darkMode: 'class',
 	content: ['./src/**/*.{html,js,svelte,ts}', join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')],
 	theme: {
 		extend: {},
 	},
-	plugins: [${plugins.join(',')}],
+	plugins: [\n\t\t${plugins.join(',\n\t\t')}\n\t\],
 }${iit(opts.types == 'typescript', ' satisfies Config')};
 `;
 	writeFileSync(join(cwd(), `tailwind.config.${iit(opts.types == 'typescript', 'ts', 'js')}`), str);

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

@@ -210,6 +210,7 @@ Problems? Open an issue on ${cyan('https://github.com/skeletonlabs/skeleton/issu
 	if (!('skeletontheme' in opts)) {
 		let themeChoices = [
 			{ label: 'Skeleton', value: 'skeleton' },
+			{ label: 'Wintry', value: 'wintry' },
 			{ label: 'Modern', value: 'modern' },
 			{ label: 'Hamlindigo', value: 'hamlindigo' },
 			{ label: 'Rocket', value: 'rocket' },