also looking at this
Merge @stacksjs/ts-css into this repo as packages/toolkit
#27
128 files
+9797
-201
| @@ -9,31 +9,31 @@ Install ts-css as a development dependency in your project: | ||
| 9 | 9 | ::: code-group |
| 10 | 10 | |
| 11 | 11 | ```sh [bun] |
| 12 | bun add ts-css | |
| 12 | bun add @ts-css/core | |
| 13 | 13 | |
| 14 | 14 | # or |
| 15 | 15 | |
| 16 | bun install --dev ts-css | |
| 16 | bun install --dev @ts-css/core | |
| 17 | 17 | ``` |
| 18 | 18 | |
| 19 | 19 | ```sh [npm] |
| 20 | npm install ts-css | |
| 20 | npm install @ts-css/core | |
| 21 | 21 | |
| 22 | 22 | # or |
| 23 | 23 | |
| 24 | npm i -D ts-css | |
| 24 | npm i -D @ts-css/core | |
| 25 | 25 | ``` |
| 26 | 26 | |
| 27 | 27 | ```sh [pnpm] |
| 28 | pnpm add ts-css | |
| 28 | pnpm add @ts-css/core | |
| 29 | 29 | |
| 30 | 30 | # or |
| 31 | 31 | |
| 32 | pnpm add -D ts-css | |
| 32 | pnpm add -D @ts-css/core | |
| 33 | 33 | ``` |
| 34 | 34 | |
| 35 | 35 | ```sh [yarn] |
| 36 | yarn add ts-css | |
| 36 | yarn add @ts-css/core | |
| 37 | 37 | ```::: |
| 38 | 38 | |
| 39 | 39 | ### Global Installation |
| @@ -41,29 +41,29 @@ yarn add ts-css | ||
| 41 | 41 | For global installation (to use the CLI anywhere): |
| 42 | 42 | |
| 43 | 43 | ::: code-group```sh [bun] |
| 44 | bun add --global ts-css | |
| 44 | bun add --global @ts-css/core | |
| 45 | 45 | |
| 46 | 46 | ``` |
| 47 | 47 | |
| 48 | 48 | ```sh [npm] |
| 49 | 49 | |
| 50 | npm install --global ts-css | |
| 50 | npm install --global @ts-css/core | |
| 51 | 51 | |
| 52 | 52 | # or |
| 53 | 53 | |
| 54 | npm i -g ts-css | |
| 54 | npm i -g @ts-css/core | |
| 55 | 55 | |
| 56 | 56 | ``` |
| 57 | 57 | |
| 58 | 58 | ```sh [pnpm] |
| 59 | 59 | |
| 60 | pnpm add --global ts-css | |
| 60 | pnpm add --global @ts-css/core | |
| 61 | 61 | |
| 62 | 62 | ``` |
| 63 | 63 | |
| 64 | 64 | ```sh [yarn] |
| 65 | 65 | |
| 66 | yarn global add ts-css | |
| 66 | yarn global add @ts-css/core | |
| 67 | 67 | |
| 68 | 68 | ```::: |
| 69 | 69 | |
| @@ -85,7 +85,7 @@ cssx watch | ||
| 85 | 85 | ```## Configuration |
| 86 | 86 | |
| 87 | 87 | The`cssx init`command creates a basic`css.config.ts`file:```typescript |
| 88 | import type { TsCssOptions } from 'ts-css' | |
| 88 | import type { TsCssOptions } from '@ts-css/core' | |
| 89 | 89 | |
| 90 | 90 | const config = { |
| 91 | 91 | content: ['./src/**/*.{html,js,ts,jsx,tsx}'], |
| @@ -102,7 +102,7 @@ export default config | ||
| 102 | 102 | |
| 103 | 103 | # Install ts-css |
| 104 | 104 | |
| 105 | bun add ts-css | |
| 105 | bun add @ts-css/core | |
| 106 | 106 | |
| 107 | 107 | # Create config |
| 108 | 108 | |
| @@ -110,7 +110,7 @@ cssx init | ||
| 110 | 110 | ```Update your`css.config.ts`: |
| 111 | 111 | |
| 112 | 112 | ```typescript |
| 113 | import type { TsCssOptions } from 'ts-css' | |
| 113 | import type { TsCssOptions } from '@ts-css/core' | |
| 114 | 114 | |
| 115 | 115 | const config = { |
| 116 | 116 | content: [ |
| @@ -143,7 +143,7 @@ import './styles/styles.css' | ||
| 143 | 143 | |
| 144 | 144 | # Install ts-css |
| 145 | 145 | |
| 146 | bun add ts-css | |
| 146 | bun add @ts-css/core | |
| 147 | 147 | |
| 148 | 148 | # Create config |
| 149 | 149 | |
| @@ -151,7 +151,7 @@ cssx init | ||
| 151 | 151 | ```Update your`css.config.ts`: |
| 152 | 152 | |
| 153 | 153 | ```typescript |
| 154 | import type { TsCssOptions } from 'ts-css' | |
| 154 | import type { TsCssOptions } from '@ts-css/core' | |
| 155 | 155 | |
| 156 | 156 | const config = { |
| 157 | 157 | content: [ |
| @@ -174,7 +174,7 @@ export default config | ||
| 174 | 174 | |
| 175 | 175 | # Install ts-css |
| 176 | 176 | |
| 177 | bun add ts-css | |
| 177 | bun add @ts-css/core | |
| 178 | 178 | |
| 179 | 179 | # Create config |
| 180 | 180 | |
| @@ -182,7 +182,7 @@ cssx init | ||
| 182 | 182 | ```Update your`css.config.ts`: |
| 183 | 183 | |
| 184 | 184 | ```typescript |
| 185 | import type { TsCssOptions } from 'ts-css' | |
| 185 | import type { TsCssOptions } from '@ts-css/core' | |
| 186 | 186 | |
| 187 | 187 | const config = { |
| 188 | 188 | content: [ |
| @@ -203,7 +203,7 @@ export default config | ||
| 203 | 203 | |
| 204 | 204 | # Install ts-css |
| 205 | 205 | |
| 206 | bun add ts-css | |
| 206 | bun add @ts-css/core | |
| 207 | 207 | |
| 208 | 208 | # Create config |
| 209 | 209 | |
| @@ -211,7 +211,7 @@ cssx init | ||
| 211 | 211 | ```Update your`css.config.ts`: |
| 212 | 212 | |
| 213 | 213 | ```typescript |
| 214 | import type { TsCssOptions } from 'ts-css' | |
| 214 | import type { TsCssOptions } from '@ts-css/core' | |
| 215 | 215 | |
| 216 | 216 | const config = { |
| 217 | 217 | content: [ |
| @@ -235,7 +235,7 @@ import '/styles.css' | ||
| 235 | 235 | |
| 236 | 236 | # Install ts-css globally |
| 237 | 237 | |
| 238 | bun add --global ts-css | |
| 238 | bun add --global @ts-css/core | |
| 239 | 239 | |
| 240 | 240 | # Create config |
| 241 | 241 | |
| @@ -243,7 +243,7 @@ cssx init | ||
| 243 | 243 | ```Update your`css.config.ts`: |
| 244 | 244 | |
| 245 | 245 | ```typescript |
| 246 | import type { TsCssOptions } from 'ts-css' | |
| 246 | import type { TsCssOptions } from '@ts-css/core' | |
| 247 | 247 | |
| 248 | 248 | const config = { |
| 249 | 249 | content: ['./src/**/*.html'], |
| @@ -397,11 +397,11 @@ If you get permission errors when installing globally:```bash | ||
| 397 | 397 | |
| 398 | 398 | # Use sudo on macOS/Linux |
| 399 | 399 | |
| 400 | sudo bun add --global ts-css | |
| 400 | sudo bun add --global @ts-css/core | |
| 401 | 401 | |
| 402 | 402 | # Or install locally and use npx |
| 403 | 403 | |
| 404 | bun add ts-css | |
| 404 | bun add @ts-css/core | |
| 405 | 405 | bunx cssx build |
| 406 | 406 | |
| 407 | 407 | ```### TypeScript Errors |
| @@ -412,7 +412,7 @@ If you encounter TypeScript errors in your config file: | ||
| 412 | 412 | |
| 413 | 413 | bun add --dev typescript |
| 414 | 414 | ```2. Use the`satisfies`keyword for type checking:```typescript |
| 415 | import type { TsCssOptions } from 'ts-css' | |
| 415 | import type { TsCssOptions } from '@ts-css/core' | |
| 416 | 416 | |
| 417 | 417 | const config = { |
| 418 | 418 | content: ['./src/**/*.tsx'], |