feat(cli): pnpm config will now be stored in pnpm-workspace.yaml

.changeset/nasty-towns-crash.md

@@ -0,0 +1,5 @@
+---
+'sv': patch
+---
+
+fix(tailwindcss): add `@tailwindcss/oxide` to approve-builds in `pnpm`

.changeset/solid-dragons-trade.md

@@ -0,0 +1,5 @@
+---
+'sv': patch
+---
+
+feat(cli): pnpm config will now be stored in `pnpm-workspace.yaml` (e.g. `onlyBuiltDependencies`)

community-addon-template/tests/setup/suite.ts

@@ -78,7 +78,7 @@ export function setupTest<Addons extends AddonMap>(addons: Addons) {
 				options,
 				packageManager: 'pnpm'
 			});
-			addPnpmBuildDependencies(cwd, 'pnpm', ['esbuild', ...pnpmBuildDependencies]);
+			await addPnpmBuildDependencies(cwd, 'pnpm', ['esbuild', ...pnpmBuildDependencies]);
 
 			return cwd;
 		};

package.json

@@ -40,10 +40,5 @@
 		"unplugin-isolated-decl": "^0.8.3",
 		"vitest": "4.0.0-beta.6"
 	},
-	"packageManager": "[email protected]",
-	"pnpm": {
-		"onlyBuiltDependencies": [
-			"esbuild"
-		]
-	}
+	"packageManager": "[email protected]"
 }

packages/addons/_tests/_setup/suite.ts

@@ -98,7 +98,7 @@ export function setupTest<Addons extends AddonMap>(
 				options: kind.options,
 				packageManager: 'pnpm'
 			});
-			addPnpmBuildDependencies(cwd, 'pnpm', ['esbuild', ...pnpmBuildDependencies]);
+			await addPnpmBuildDependencies(cwd, 'pnpm', ['esbuild', ...pnpmBuildDependencies]);
 		}
 
 		execSync('pnpm install', { cwd: path.resolve(cwd, testName), stdio: 'pipe' });

packages/addons/tailwindcss/index.ts

@@ -37,6 +37,7 @@ export default defineAddon({
 
 		sv.devDependency('tailwindcss', '^4.0.0');
 		sv.devDependency('@tailwindcss/vite', '^4.0.0');
+		sv.pnpmBuildDependency('@tailwindcss/oxide');
 
 		if (prettierInstalled) sv.devDependency('prettier-plugin-tailwindcss', '^0.6.11');
 

packages/cli/commands/add/index.ts

@@ -559,7 +559,7 @@ export async function runAddCommand(
 		if (packageManager) {
 			workspace.packageManager = packageManager;
 
-			addPnpmBuildDependencies(workspace.cwd, packageManager, [
+			await addPnpmBuildDependencies(workspace.cwd, packageManager, [
 				'esbuild',
 				...addonPnpmBuildDependencies
 			]);

packages/cli/commands/create.ts

@@ -204,7 +204,7 @@ async function createProject(cwd: ProjectPath, options: Options) {
 
 	const installDeps = async (install: true | AgentName) => {
 		packageManager = install === true ? await packageManagerPrompt(projectPath) : install;
-		addPnpmBuildDependencies(projectPath, packageManager, ['esbuild']);
+		await addPnpmBuildDependencies(projectPath, packageManager, ['esbuild']);
 		if (packageManager) await installDependencies(packageManager, projectPath);
 	};
 

packages/cli/lib/testing.ts

@@ -2,7 +2,7 @@ import fs from 'node:fs';
 import path from 'node:path';
 import process from 'node:process';
 import degit from 'degit';
-import { exec } from 'tinyexec';
+import { x, exec } from 'tinyexec';
 import { create } from '@sveltejs/create';
 
 export { addPnpmBuildDependencies } from '../utils/package-manager.ts';
@@ -83,7 +83,7 @@ export function createProject({ cwd, testName, templatesDir }: CreateOptions): C
 type PreviewOptions = { cwd: string; command?: string };
 export async function startPreview({
 	cwd,
-	command = 'npm run preview'
+	command = 'pnpm preview'
 }: PreviewOptions): Promise<{ url: string; close: () => Promise<void> }> {
 	const [cmd, ...args] = command.split(' ');
 	const proc = exec(cmd, args, {
@@ -124,7 +124,7 @@ export async function startPreview({
 async function terminate(pid: number) {
 	try {
 		if (process.platform === 'win32') {
-			await exec(`taskkill /pid ${pid} /T /F`); // on windows, use taskkill to terminate the process tree
+			await x('taskkill', ['/PID', `${pid}`, '/T', '/F']); // on windows, use taskkill to terminate the process tree
 		} else {
 			process.kill(-pid, 'SIGTERM'); // Kill the process group
 		}

packages/cli/utils/package-manager.ts

@@ -2,7 +2,7 @@ import fs from 'node:fs';
 import path from 'node:path';
 import process from 'node:process';
 import * as find from 'empathic/find';
-import { exec } from 'tinyexec';
+import { x } from 'tinyexec';
 import { Option } from 'commander';
 import * as p from '@clack/prompts';
 import {
@@ -12,7 +12,8 @@ import {
 	detect,
 	type AgentName
 } from 'package-manager-detector';
-import { parseJson } from '@sveltejs/cli-core/parsers';
+import { parseJson, parseYaml } from '@sveltejs/cli-core/parsers';
+import { isVersionUnsupportedBelow } from '@sveltejs/cli-core';
 
 export const AGENT_NAMES = AGENTS.filter((agent): agent is AgentName => !agent.includes('@'));
 const agentOptions: PackageManagerOptions = AGENT_NAMES.map((pm) => ({ value: pm, label: pm }));
@@ -55,19 +56,16 @@ export async function installDependencies(agent: AgentName, cwd: string): Promis
 
 	try {
 		const { command, args } = constructCommand(COMMANDS[agent].install, [])!;
-		const proc = exec(command, args, {
+
+		const proc = x(command, args, {
 			nodeOptions: { cwd, stdio: 'pipe' },
 			throwOnError: true
 		});
 
-		proc.process?.stdout?.on('data', (data) => {
-			task.message(data.toString(), { raw: true });
-		});
-		proc.process?.stderr?.on('data', (data) => {
-			task.message(data.toString(), { raw: true });
-		});
-
-		await proc;
+		for await (const line of proc) {
+			// line will be from stderr/stdout in the order you'd see it in a term
+			task.message(line, { raw: true });
+		}
 
 		task.success('Successfully installed dependencies');
 	} catch {
@@ -87,35 +85,69 @@ export function getUserAgent(): AgentName | undefined {
 	return AGENTS.includes(name) ? name : undefined;
 }
 
-export function addPnpmBuildDependencies(
+export async function addPnpmBuildDependencies(
 	cwd: string,
 	packageManager: AgentName | null | undefined,
 	allowedPackages: string[]
 ) {
 	// other package managers are currently not affected by this change
-	if (!packageManager || packageManager !== 'pnpm') return;
+	if (!packageManager || packageManager !== 'pnpm' || allowedPackages.length === 0) return;
+
+	let confIn: 'package.json' | 'pnpm-workspace.yaml' = 'package.json';
+	const pnpmVersion = await getPnpmVersion();
+	if (pnpmVersion) {
+		confIn = isVersionUnsupportedBelow(pnpmVersion, '10.5')
+			? 'package.json'
+			: 'pnpm-workspace.yaml';
+	}
 
 	// find the workspace root (if present)
-	const pnpmWorkspacePath = find.up('pnpm-workspace.yaml', { cwd });
-	let packageDirectory;
-
-	if (pnpmWorkspacePath) packageDirectory = path.dirname(pnpmWorkspacePath);
-	else packageDirectory = cwd;
-
-	// load the package.json
-	const pkgPath = path.join(packageDirectory, 'package.json');
-	const content = fs.readFileSync(pkgPath, 'utf-8');
-	const { data, generateCode } = parseJson(content);
-
-	// add the packages where we install scripts should be executed
-	data.pnpm ??= {};
-	data.pnpm.onlyBuiltDependencies ??= [];
-	for (const allowedPackage of allowedPackages) {
-		if (data.pnpm.onlyBuiltDependencies.includes(allowedPackage)) continue;
-		data.pnpm.onlyBuiltDependencies.push(allowedPackage);
+	const found = find.up('pnpm-workspace.yaml', { cwd });
+	const dir = found ? path.dirname(found) : cwd;
+
+	if (confIn === 'pnpm-workspace.yaml') {
+		const content = found ? fs.readFileSync(found, 'utf-8') : '';
+		const { data, generateCode } = parseYaml(content);
+
+		const onlyBuiltDependencies = data.get('onlyBuiltDependencies');
+		const items: Array<{ value: string } | string> = onlyBuiltDependencies?.items ?? [];
+
+		for (const item of allowedPackages) {
+			if (items.includes(item)) continue;
+			if (items.some((y) => typeof y === 'object' && y.value === item)) continue;
+			items.push(item);
+		}
+		data.set('onlyBuiltDependencies', new Set(items));
+
+		const newContent = generateCode();
+
+		const pnpmWorkspacePath = found ?? path.join(cwd, 'pnpm-workspace.yaml');
+		if (newContent !== content) fs.writeFileSync(pnpmWorkspacePath, newContent);
+	} else {
+		// else is package.json (fallback)
+		const pkgPath = path.join(dir, 'package.json');
+		const content = fs.readFileSync(pkgPath, 'utf-8');
+		const { data, generateCode } = parseJson(content);
+
+		// add the packages where we install scripts should be executed
+		data.pnpm ??= {};
+		data.pnpm.onlyBuiltDependencies ??= [];
+		for (const allowedPackage of allowedPackages) {
+			if (data.pnpm.onlyBuiltDependencies.includes(allowedPackage)) continue;
+			data.pnpm.onlyBuiltDependencies.push(allowedPackage);
+		}
+
+		// save the updated package.json
+		const newContent = generateCode();
+		if (newContent !== content) fs.writeFileSync(pkgPath, newContent);
 	}
+}
 
-	// save the updated package.json
-	const newContent = generateCode();
-	fs.writeFileSync(pkgPath, newContent);
+async function getPnpmVersion(): Promise<string | undefined> {
+	let v: string | undefined = undefined;
+	try {
+		const proc = await x('pnpm', ['--version'], { throwOnError: true });
+		v = proc.stdout.trim();
+	} catch {}
+	return v;
 }

packages/core/package.json

@@ -57,6 +57,7 @@
 		"picocolors": "^1.1.1",
 		"postcss": "^8.5.6",
 		"silver-fleece": "^1.2.1",
+		"yaml": "^2.8.1",
 		"zimmerframe": "^1.1.2"
 	},
 	"keywords": [

packages/core/tests/utils.ts

@@ -1,11 +1,13 @@
-import { expect, test } from 'vitest';
+import { describe, expect, test } from 'vitest';
 import dedent from 'dedent';
 import {
 	parseScript,
 	serializeScript,
 	guessIndentString,
 	guessQuoteStyle,
-	type AstTypes
+	type AstTypes,
+	serializeYaml,
+	parseYaml
 } from '../tooling/index.ts';
 
 test('guessIndentString - one tab', () => {
@@ -183,3 +185,87 @@ test('integration - preserves comments', () => {
 		let foo = 'bar';"
 	`);
 });
+
+describe('yaml', () => {
+	test('read and write', () => {
+		const input = dedent`foo:  
+ - bar
+ - baz`;
+		const output = serializeYaml(parseYaml(input));
+		expect(output).toMatchInlineSnapshot(`
+			"foo:
+			  - bar
+			  - baz
+			"
+		`);
+	});
+
+	test('edit object', () => {
+		const input = dedent`foo:  
+ # nice comment
+ - bar
+ - baz`;
+		const doc = parseYaml(input);
+		const foo = doc.get('foo');
+		if (foo) foo.add('yop');
+		else doc.set('foo', ['yop']);
+		expect(serializeYaml(doc)).toMatchInlineSnapshot(`
+			"foo:
+			  # nice comment
+			  - bar
+			  - baz
+			  - yop
+			"
+		`);
+	});
+
+	test('add to array (keeping comments)', () => {
+		const input = dedent`foo:
+ - bar 
+ # com 
+ - baz`;
+		const doc = parseYaml(input);
+		const toAdd = ['bar', 'yop1', 'yop2', 'yop1'];
+		const foo = doc.get('foo');
+		const items: Array<{ value: string } | string> = foo?.items ?? [];
+		for (const item of toAdd) {
+			if (items.includes(item)) continue;
+			if (items.some((y) => typeof y === 'object' && y.value === item)) continue;
+			items.push(item);
+		}
+		doc.set('foo', new Set(items));
+		expect(serializeYaml(doc)).toMatchInlineSnapshot(`
+			"foo:
+			  - bar
+			  # com 
+			  - baz
+			  - yop1
+			  - yop2
+			"
+		`);
+	});
+
+	test('create object', () => {
+		const input = dedent`# this is my file`;
+		const doc = parseYaml(input);
+		const foo = doc.get('foo');
+		if (foo) foo.add('yop');
+		else doc.set('foo', ['yop']);
+		expect(serializeYaml(doc)).toMatchInlineSnapshot(`
+			"# this is my file
+
+			foo:
+			  - yop
+			"
+		`);
+	});
+
+	test('array of foo', () => {
+		const input = dedent`foo:  # nice comment - bar - baz`;
+		const output = serializeYaml(parseYaml(input));
+		expect(output).toMatchInlineSnapshot(`
+			"foo: # nice comment - bar - baz
+			"
+		`);
+	});
+});

packages/core/tooling/index.ts

@@ -16,6 +16,7 @@ import * as fleece from 'silver-fleece';
 import { print as esrapPrint } from 'esrap';
 import * as acorn from 'acorn';
 import { tsPlugin } from '@sveltejs/acorn-typescript';
+import * as yaml from 'yaml';
 
 export {
 	// html
@@ -238,3 +239,11 @@ export function guessQuoteStyle(ast: TsEstree.Node): 'single' | 'double' | undef
 
 	return singleCount > doubleCount ? 'single' : 'double';
 }
+
+export function parseYaml(content: string): ReturnType<typeof yaml.parseDocument> {
+	return yaml.parseDocument(content);
+}
+
+export function serializeYaml(data: unknown): string {
+	return yaml.stringify(data, { singleQuote: true });
+}

packages/core/tooling/parsers.ts

@@ -35,6 +35,16 @@ export function parseJson(source: string): { data: any } & ParseBase {
 	return { data, source, generateCode };
 }
 
+export function parseYaml(
+	source: string
+): { data: ReturnType<typeof utils.parseYaml> } & ParseBase {
+	if (!source) source = '';
+	const data = utils.parseYaml(source);
+	const generateCode = () => utils.serializeYaml(data);
+
+	return { data, source, generateCode };
+}
+
 type SvelteGenerator = (code: {
 	script?: string;
 	module?: string;