also looking at this
Merge @stacksjs/ts-css into this repo as packages/toolkit
#27
128 files
+9797
-201
| @@ -31,7 +31,7 @@ const config = { | ||
| 31 | 31 | ### Basic Preset Structure |
| 32 | 32 | |
| 33 | 33 | A preset is an object that implements the`Preset`interface:```typescript |
| 34 | import type { Preset } from 'ts-css' | |
| 34 | import type { Preset } from '@ts-css/core' | |
| 35 | 35 | |
| 36 | 36 | export const myPreset: Preset = { |
| 37 | 37 | name: 'my-preset', |
| @@ -54,7 +54,7 @@ export const myPreset: Preset = { | ||
| 54 | 54 | |
| 55 | 55 | ```### Simple Example```typescript |
| 56 | 56 | // presets/minimal.ts |
| 57 | import type { Preset } from 'ts-css' | |
| 57 | import type { Preset } from '@ts-css/core' | |
| 58 | 58 | |
| 59 | 59 | export const minimalPreset: Preset = { |
| 60 | 60 | name: 'minimal', |
| @@ -82,7 +82,7 @@ export const minimalPreset: Preset = { | ||
| 82 | 82 | ### Single Preset```typescript |
| 83 | 83 | |
| 84 | 84 | // css.config.ts |
| 85 | import type { TsCssOptions } from 'ts-css' | |
| 85 | import type { TsCssOptions } from '@ts-css/core' | |
| 86 | 86 | import { minimalPreset } from './presets/minimal' |
| 87 | 87 | |
| 88 | 88 | const config = { |
| @@ -133,7 +133,7 @@ const config = { | ||
| 133 | 133 | ### Design System Preset```typescript |
| 134 | 134 | |
| 135 | 135 | // presets/design-system.ts |
| 136 | import type { Preset } from 'ts-css' | |
| 136 | import type { Preset } from '@ts-css/core' | |
| 137 | 137 | |
| 138 | 138 | export const designSystemPreset: Preset = { |
| 139 | 139 | name: 'design-system', |
| @@ -212,7 +212,7 @@ export const designSystemPreset: Preset = { | ||
| 212 | 212 | ```### Component Library Preset```typescript |
| 213 | 213 | |
| 214 | 214 | // presets/components.ts |
| 215 | import type { Preset } from 'ts-css' | |
| 215 | import type { Preset } from '@ts-css/core' | |
| 216 | 216 | |
| 217 | 217 | export const componentsPreset: Preset = { |
| 218 | 218 | name: 'components', |
| @@ -254,7 +254,7 @@ export const componentsPreset: Preset = { | ||
| 254 | 254 | |
| 255 | 255 | ```### Utility Preset```typescript |
| 256 | 256 | // presets/utilities.ts |
| 257 | import type { Preset } from 'ts-css' | |
| 257 | import type { Preset } from '@ts-css/core' | |
| 258 | 258 | |
| 259 | 259 | export const utilitiesPreset: Preset = { |
| 260 | 260 | name: 'utilities', |
| @@ -307,7 +307,7 @@ export const utilitiesPreset: Preset = { | ||
| 307 | 307 | ```### Framework-Specific Preset```typescript |
| 308 | 308 | |
| 309 | 309 | // presets/react.ts |
| 310 | import type { Preset } from 'ts-css' | |
| 310 | import type { Preset } from '@ts-css/core' | |
| 311 | 311 | |
| 312 | 312 | export const reactPreset: Preset = { |
| 313 | 313 | name: 'react', |
| @@ -360,7 +360,7 @@ my-ts-css-preset/ | ||
| 360 | 360 | |
| 361 | 361 | ```typescript |
| 362 | 362 | // src/index.ts |
| 363 | import type { Preset } from 'ts-css' | |
| 363 | import type { Preset } from '@ts-css/core' | |
| 364 | 364 | |
| 365 | 365 | export const myPreset: Preset = { |
| 366 | 366 | name: 'my-preset', |
| @@ -389,10 +389,10 @@ export default myPreset | ||
| 389 | 389 | "prepublishOnly": "bun run build" |
| 390 | 390 | }, |
| 391 | 391 | "peerDependencies": { |
| 392 | "ts-css": ">=1.0.0" | |
| 392 | "@ts-css/core": ">=1.0.0" | |
| 393 | 393 | }, |
| 394 | 394 | "devDependencies": { |
| 395 | "ts-css": "latest", | |
| 395 | "@ts-css/core": "latest", | |
| 396 | 396 | "typescript": "latest" |
| 397 | 397 | } |
| 398 | 398 | } |
| @@ -459,7 +459,7 @@ const config = { | ||
| 459 | 459 | |
| 460 | 460 | ### Preset with Custom Preflight```typescript |
| 461 | 461 | |
| 462 | import type { Preflight, Preset } from 'ts-css' | |
| 462 | import type { Preflight, Preset } from '@ts-css/core' | |
| 463 | 463 | |
| 464 | 464 | const customPreflight: Preflight = { |
| 465 | 465 | getCSS: () => `/*Custom reset*/*{ |
| @@ -593,7 +593,7 @@ const config = { | ||
| 593 | 593 | } |
| 594 | 594 | ```### Type Errors**Problem:**TypeScript errors when creating preset**Solution:**Import and use the`Preset`type:```typescript |
| 595 | 595 | |
| 596 | import type { Preset } from 'ts-css' | |
| 596 | import type { Preset } from '@ts-css/core' | |
| 597 | 597 | |
| 598 | 598 | export const myPreset: Preset = { |
| 599 | 599 | name: 'my-preset', |