Tailwindcss default export should use satisfies instead of as (#231)

* build: update ast-types

required to include `AstTypes.TSSatisfiesExpression`

* feat: add `typeAnnotateSatisfiesExpression`

creates an expression of the form `{ } satsfies XXX`

* fix: use satisfies in tailwind config for type hints

* fix: restore type import

* revert package.json spacing changes

* fix and tweak

* not needed

* annoying

* tweak name

* changeset

---------

Co-authored-by: Ross Cooper <[email protected]>
Co-authored-by: AdrianGonz97 <[email protected]>

Author: rcoopr

.changeset/young-mice-battle.md

@@ -0,0 +1,5 @@
+---
+'sv': patch
+---
+
+fix: use `satisfies` instead of `as` in `tailwindcss` config

packages/adders/common.ts

@@ -17,7 +17,7 @@ export function addEslintConfigPrettier({ content }: FileEditor<Record<string, Q
 	let svelteImportName: string;
 	for (const specifier of sveltePluginImport?.specifiers ?? []) {
 		if (specifier.type === 'ImportDefaultSpecifier' && specifier.local?.name) {
-			svelteImportName = specifier.local.name;
+			svelteImportName = specifier.local.name as string;
 		}
 	}
 

packages/adders/tailwindcss/index.ts

@@ -1,6 +1,6 @@
 import { defineAdder, defineAdderOptions, type PackageDefinition } from '@sveltejs/cli-core';
 import { addImports } from '@sveltejs/cli-core/css';
-import { array, common, exports, imports, object, type AstTypes } from '@sveltejs/cli-core/js';
+import { array, common, exports, imports, object } from '@sveltejs/cli-core/js';
 import { parseCss, parseScript, parseJson, parseSvelte } from '@sveltejs/cli-core/parsers';
 import { addSlot } from '@sveltejs/cli-core/html';
 
@@ -80,17 +80,18 @@ export default defineAdder({
 				const rootExport = object.createEmpty();
 				if (typescript) {
 					imports.addNamed(ast, 'tailwindcss', { Config: 'Config' }, true);
-					root = common.typeAnnotateExpression(rootExport, 'Config');
+					root = common.satisfiesExpression(rootExport, 'Config');
 				}
 
 				const { astNode: exportDeclaration, value: node } = exports.defaultExport(
 					ast,
 					root ?? rootExport
 				);
 
-				const config = (
-					node.type === 'TSAsExpression' ? node.expression : node
-				) as AstTypes.ObjectExpression;
+				const config = node.type === 'TSSatisfiesExpression' ? node.expression : node;
+				if (config.type !== 'ObjectExpression') {
+					throw new Error(`Unexpected tailwind config shape: ${config.type}`);
+				}
 
 				if (!typescript) {
 					common.addJsDocTypeComment(exportDeclaration, "import('tailwindcss').Config");

packages/adders/vitest/index.ts

@@ -86,7 +86,7 @@ export default defineAdder({
 					const importSpecifier = defineConfigImportDecl?.specifiers?.find(
 						(sp) => sp.type === 'ImportSpecifier' && sp.imported.name === 'defineConfig'
 					);
-					const defineConfigAlias = importSpecifier?.local?.name ?? 'defineConfig';
+					const defineConfigAlias = (importSpecifier?.local?.name ?? 'defineConfig') as string;
 					imports.addNamed(ast, 'vitest/config', { defineConfig: defineConfigAlias });
 
 					object.properties(defaultExport.value.arguments[0], { test });

packages/ast-tooling/index.ts

@@ -16,7 +16,7 @@ import {
 import * as fleece from 'silver-fleece';
 import * as Walker from 'zimmerframe';
 import type { namedTypes as AstTypes } from 'ast-types';
-import type * as AstKinds from 'ast-types/gen/kinds.d.ts';
+import type * as AstKinds from 'ast-types/gen/kinds';
 
 /**
  * Most of the AST tooling is pretty big in bundle size and bundling takes forever.

packages/ast-tooling/package.json

@@ -25,7 +25,7 @@
 	},
 	"devDependencies": {
 		"@babel/parser": "^7.24.7",
-		"ast-types": "^0.14.2",
+		"ast-types": "^0.16.1",
 		"dom-serializer": "^2.0.0",
 		"domhandler": "^5.0.3",
 		"domutils": "^3.1.0",

packages/core/tooling/js/common.ts

@@ -54,6 +54,19 @@ export function typeAnnotateExpression(
 	return expression;
 }
 
+export function satisfiesExpression(
+	node: AstKinds.ExpressionKind,
+	type: string
+): AstTypes.TSSatisfiesExpression {
+	const expression: AstTypes.TSSatisfiesExpression = {
+		type: 'TSSatisfiesExpression',
+		expression: node,
+		typeAnnotation: { type: 'TSTypeReference', typeName: { type: 'Identifier', name: type } }
+	};
+
+	return expression;
+}
+
 export function createSpreadElement(expression: AstKinds.ExpressionKind): AstTypes.SpreadElement {
 	return {
 		type: 'SpreadElement',

packages/core/tooling/js/kit.ts

@@ -85,7 +85,7 @@ export function addHooksHandle(
 			if (handleSpecifier) {
 				isSpecifier = true;
 				// we'll search for the local name in case it's aliased (e.g. `export { foo as handle }`)
-				handleName = handleSpecifier.local?.name ?? handleSpecifier.exported.name;
+				handleName = (handleSpecifier.local?.name ?? handleSpecifier.exported.name) as string;
 
 				// find the definition
 				const handleFunc = ast.body.find((n) => isFunctionDeclaration(n, handleName));