Merge @stacksjs/ts-css into this repo as packages/toolkit

docs/features/typescript.mdmodified+25-25

Changes to docs/features/typescript.md

		⋯7 linesShow the 7 lines above this hunk@@ -8,7 +8,7 @@ Use TypeScript for your configuration file to get autocompletion and type checki
8	8
9	9	```typescript
10	10	// css.config.ts
11		-import type { TsCssOptions } from 'ts-css'
	11	+import type { TsCssOptions } from '@ts-css/core'
12	12
13	13	const config = {
14	14	content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
		⋯16 linesShow the 16 lines above this hunk@@ -31,7 +31,7 @@ export default config
31	31	```## Type Checking
32	32
33	33	The`satisfies`keyword provides type checking while preserving literal types:```typescript
34		-import type { TsCssOptions } from 'ts-css'
	34	+import type { TsCssOptions } from '@ts-css/core'
35	35
36	36	// ✅ Type-safe with autocompletion
37	37	const config = {
		⋯69 linesShow the 69 lines above this hunk@@ -107,7 +107,7 @@ Get IntelliSense and autocompletion in your IDE:
107	107	1. Install the TypeScript extension (comes pre-installed)
108	108	2. Create`css.config.ts`with the type import:```typescript
109	109
110		-import type { TsCssOptions } from 'ts-css'
	110	+import type { TsCssOptions } from '@ts-css/core'
111	111
112	112	const config = {
113	113	// Press Ctrl+Space here for autocompletion
		⋯47 linesShow the 47 lines above this hunk@@ -161,8 +161,8 @@ const config = {
161	161
162	162	### Build Function```typescript
163	163
164		-import type { BuildResult, TsCssConfig } from 'ts-css'
165		-import { build } from 'ts-css'
	164	+import type { BuildResult, TsCssConfig } from '@ts-css/core'
	165	+import { build } from '@ts-css/core'
166	166
167	167	const result: BuildResult = await build({
168	168	content: ['./src/**/*.tsx'],
		⋯16 linesShow the 16 lines above this hunk@@ -185,7 +185,7 @@ interface BuildResult {
185	185	}
186	186
187	187	```### Using with async/await```typescript
188		-import { build, buildAndWrite } from 'ts-css'
	188	+import { build, buildAndWrite } from '@ts-css/core'
189	189
190	190	async function buildStyles() {
191	191	// With build
		⋯15 linesShow the 15 lines above this hunk@@ -207,7 +207,7 @@ async function buildStyles() {
207	207	```## Custom Rules with Types
208	208
209	209	Define type-safe custom rules:```typescript
210		-import type { CustomRule, TsCssConfig } from 'ts-css'
	210	+import type { CustomRule, TsCssConfig } from '@ts-css/core'
211	211
212	212	const customRules: CustomRule[] = [
213	213	// Pattern and handler with types
		⋯15 linesShow the 15 lines above this hunk@@ -229,7 +229,7 @@ const config = {
229	229	```## Preset Types
230	230
231	231	Create type-safe presets:```typescript
232		-import type { Preset, Theme } from 'ts-css'
	232	+import type { Preset, Theme } from '@ts-css/core'
233	233
234	234	const myPreset: Preset = {
235	235	name: 'my-design-system',
		⋯28 linesShow the 28 lines above this hunk@@ -264,7 +264,7 @@ const config = {
264	264	### Custom Theme Values
265	265
266	266	Extend the theme with custom properties:```typescript
267		-import type { TsCssOptions, Theme } from 'ts-css'
	267	+import type { TsCssOptions, Theme } from '@ts-css/core'
268	268
269	269	interface CustomTheme extends Theme {
270	270	customSpacing: Record<string, string>
		⋯15 linesShow the 15 lines above this hunk@@ -286,7 +286,7 @@ const config = {
286	286	```### Custom Config
287	287
288	288	Create a custom config interface:```typescript
289		-import type { TsCssOptions } from 'ts-css'
	289	+import type { TsCssOptions } from '@ts-css/core'
290	290
291	291	interface MyConfig extends Partial<TsCssConfig> {
292	292	// Add custom properties
		⋯17 linesShow the 17 lines above this hunk@@ -310,7 +310,7 @@ const config: MyConfig = {
310	310	```## Type Guards
311	311
312	312	Use type guards for runtime type checking:```typescript
313		-import type { TsCssOptions } from 'ts-css'
	313	+import type { TsCssOptions } from '@ts-css/core'
314	314
315	315	function isValidConfig(config: unknown): config is TsCssConfig {
316	316	return (
		⋯16 linesShow the 16 lines above this hunk@@ -333,7 +333,7 @@ if (isValidConfig(config)) {
333	333	```## Generics
334	334
335	335	Use generics for flexible, type-safe functions:```typescript
336		-import type { TsCssOptions } from 'ts-css'
	336	+import type { TsCssOptions } from '@ts-css/core'
337	337
338	338	function createConfig<T extends Partial<TsCssConfig>>(config: T): T {
339	339	return {
		⋯16 linesShow the 16 lines above this hunk@@ -356,12 +356,12 @@ const config = createConfig({
356	356
357	357	Extend ts-css types globally:```typescript
358	358	// Now use in config
359		-import type { TsCssOptions } from 'ts-css'
	359	+import type { TsCssOptions } from '@ts-css/core'
360	360
361	361	// types/ts-css.d.ts
362		-import 'ts-css'
	362	+import '@ts-css/core'
363	363
364		-declare module 'ts-css' {
	364	+declare module '@ts-css/core' {
365	365	interface TsCssConfig {
366	366	// Add your custom properties
367	367	customFeature?: {
		⋯24 linesShow the 24 lines above this hunk@@ -392,8 +392,8 @@ const config = {
392	392
393	393	### Vite```typescript
394	394
395		-import type { TsCssOptions } from 'ts-css'
396		-import { build } from 'ts-css'
	395	+import type { TsCssOptions } from '@ts-css/core'
	396	+import { build } from '@ts-css/core'
397	397	// vite.config.ts
398	398	import { defineConfig } from 'vite'
399	399
		⋯15 linesShow the 15 lines above this hunk@@ -415,10 +415,10 @@ export default defineConfig({
415	415	})
416	416	```### Next.js```typescript
417	417
418		-import type { TsCssOptions } from 'ts-css'
	418	+import type { TsCssOptions } from '@ts-css/core'
419	419	// next.config.ts
420	420	import type { NextConfig } from 'next'
421		-import { buildAndWrite } from 'ts-css'
	421	+import { buildAndWrite } from '@ts-css/core'
422	422
423	423	const tsCssConfig: TsCssConfig = {
424	424	content: ['./src/**/*.tsx', './app/**/*.tsx'],
		⋯21 linesShow the 21 lines above this hunk@@ -446,7 +446,7 @@ import type {
446	446	ParsedClass,
447	447	Preset,
448	448	Theme,
449		-} from 'ts-css'
	449	+} from '@ts-css/core'
450	450
451	451	// Extract specific types
452	452	type ConfigColors = Theme['colors']
		⋯7 linesShow the 7 lines above this hunk@@ -460,10 +460,10 @@ type PartialTheme = Partial<Theme>
460	460	### 1. Always Use Type Imports```typescript
461	461
462	462	// ✅ Type-only import
463		-import type { TsCssOptions } from 'ts-css'
	463	+import type { TsCssOptions } from '@ts-css/core'
464	464
465	465	// ❌ Value import (unnecessary)
466		-import { TsCssConfig } from 'ts-css'
	466	+import { TsCssConfig } from '@ts-css/core'
467	467
468	468	```### 2. Use`satisfies`for Validation```typescript
469	469	// ✅ Validates types while preserving literals
		⋯8 linesShow the 8 lines above this hunk@@ -478,7 +478,7 @@ const config: Partial<TsCssConfig> = {
478	478	```### 3. Separate Type Definitions```typescript
479	479
480	480	// types/ts-css.ts
481		-import type { TsCssOptions, Preset } from 'ts-css'
	481	+import type { TsCssOptions, Preset } from '@ts-css/core'
482	482
483	483	// css.config.ts
484	484	import type { MyConfig } from './types/ts-css'
		⋯43 linesShow the 43 lines above this hunk@@ -528,14 +528,14 @@ bun add --dev typescript
528	528
529	529	# Ensure types are imported
530	530
531		-import type { TsCssOptions } from 'ts-css'
	531	+import type { TsCssOptions } from '@ts-css/core'
532	532
533	533	```### Autocomplete Not Working**Problem:**No autocompletion in IDE**Solutions:**1. Restart TypeScript server
534	534
535	535	2. Check tsconfig.json includes the config file
536	536	3. Ensure proper imports:```typescript
537	537
538		- import type { TsCssOptions } from 'ts-css'
	538	+ import type { TsCssOptions } from '@ts-css/core'
539	539	```
540	540
541	541	## Related*[Configuration](../config.md) - Full configuration guide*[Custom Rules](../advanced/custom-rules.md) - Creating custom utilities*[Presets](../advanced/presets.md) - Reusable configurations*[API Reference](../api-reference.md) - Programmatic API