ReviewOS
Reload

also looking at this

stacks/ts-css

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

#27
Merged glennmichael123 wants to merge merge/ts-css-toolkit into main
128 files +9797 -201

Review threads live on the whole diff, not on one commit, so none are shown here - a thread's line means something in the branch's final form, and painting it into an intermediate step would put it on code it is not about.

.env.examplemodified+1-1
@@ -12,7 +12,7 @@
1212# The release workflow uses this file only when both it and that secret exist,
1313# and otherwise falls back to a plain NPM_TOKEN secret.
1414
15# npm token used to publish `ts-css`. Publishing a package that does not exist
15# npm token used to publish `@ts-css/core`. Publishing a package that does not exist
1616# yet needs a token that can CREATE packages — an Automation token, or a
1717# granular token with read/write across all packages. A granular token scoped
1818# to existing packages returns 404 on the first publish.
CLAUDE.mdmodified+1-1
@@ -2,7 +2,7 @@
22
33## About
44
5`ts-css` (published unscoped on npm; CLI binary `cssx`, config file `css.config.ts`, class prefix `tc`) is an on-demand CSS engine built with Bun, with two front ends over one atomic output:
5`ts-css` (published on npm as `@ts-css/core`; CLI binary `cssx`, config file `css.config.ts`, class prefix `tc`) is an on-demand CSS engine built with Bun, with two front ends over one atomic output:
66
77- **Utility classes** — Tailwind v4-compatible, with full variant support (responsive, state, dark mode, pseudo-elements), arbitrary values, shortcut aliases, and compile-class HTML optimization.
88- **Style objects** — a StyleX-shaped typed API (`css.create`, `css.props`, `css.defineVars`, `css.createTheme`, `css.keyframes`) in `src/style/`, collected at build time by evaluating the modules that declare them.
README.mdmodified+6-6
@@ -11,7 +11,7 @@ A CSS engine with two front ends and one atomic output.
1111Write **utility classes** when you are laying out markup, and Tailwind v4 semantics apply unchanged. Write **typed style objects** when a style has to be computed, tokenised, or merged across a component boundary, and you get StyleX's authoring model. Both compile through the same pipeline into the same deduplicated atomic CSS, in one stylesheet, with nothing left at runtime.
1212
1313```bash
14bun add ts-css
14bun add @ts-css/core
1515```
1616
1717## Why two APIs
@@ -43,7 +43,7 @@ bunx cssx watch # rebuilds on change
4343
4444```ts
4545// css.config.ts
46import type { TsCssOptions } from 'ts-css'
46import type { TsCssOptions } from '@ts-css/core'
4747
4848export default {
4949 content: ['./src/**/*.{html,ts,tsx,stx}'],
@@ -57,7 +57,7 @@ export default {
5757## Style objects
5858
5959```ts
60import { css } from 'ts-css'
60import { css } from '@ts-css/core'
6161
6262const theme = css.defineVars({
6363 accent: '#0b7',
@@ -223,7 +223,7 @@ cssx clean # remove the output file
223223## Configuration
224224
225225```ts
226import type { TsCssOptions } from 'ts-css'
226import type { TsCssOptions } from '@ts-css/core'
227227
228228export default {
229229 content: ['./src/**/*.{html,ts,tsx}'],
@@ -296,7 +296,7 @@ The MIT License (MIT). Please see [LICENSE](LICENSE.md) for more information.
296296Made with ��
297297
298298<!-- Badges -->
299[npm-version-src]: https://img.shields.io/npm/v/ts-css?style=flat-square
300[npm-version-href]: https://npmjs.com/package/ts-css
299[npm-version-src]: https://img.shields.io/npm/v/@ts-css/core?style=flat-square
300[npm-version-href]: https://npmjs.com/package/@ts-css/core
301301[github-actions-src]: https://img.shields.io/github/actions/workflow/status/cwcss/crosswind/ci.yml?style=flat-square&branch=main
302302[github-actions-href]: https://github.com/cwcss/crosswind/actions?query=workflow%3Aci
benchmark/style-api.bench.tsmodified+1-1
@@ -157,7 +157,7 @@ const transpiler = new Bun.Transpiler({ loader: 'ts' })
157157
158158const tsCssSources = new Map(WORKLOADS.map(w => [
159159 w.name,
160 `import { css } from 'ts-css'\nexport const styles = css.create(${w.literal})\n`,
160 `import { css } from '@ts-css/core'\nexport const styles = css.create(${w.literal})\n`,
161161]))
162162
163163/**
bun.lockmodified+15-15
@@ -3,13 +3,13 @@
33 "configVersion": 1,
44 "workspaces": {
55 "": {
6 "name": "ts-css",
6 "name": "@ts-css/core",
77 "devDependencies": {
88 "better-dx": "^0.2.15",
99 },
1010 },
1111 "packages/ts-css": {
12 "name": "ts-css",
12 "name": "@ts-css/core",
1313 "version": "0.3.0",
1414 "bin": {
1515 "cssx": "./dist/cli.js",
@@ -20,7 +20,7 @@
2020 },
2121 },
2222 "packages/vscode": {
23 "name": "ts-css-vscode",
23 "name": "@ts-css/vscode",
2424 "version": "0.3.0",
2525 },
2626 },
@@ -35,11 +35,11 @@
3535
3636 "@stacksjs/bunpress": ["@stacksjs/bunpress@0.2.14", "", { "dependencies": { "@cwcss/crosswind": "^0.2.16", "@stacksjs/clapp": "^0.2.0", "@stacksjs/stx": "^0.2.171", "@stacksjs/ts-i18n": "^0.1.11", "bunfig": "^0.15.17", "ts-syntax-highlighter": "^0.2.14" }, "peerDependencies": { "@stacksjs/ts-cloud": "^0.7.51" }, "optionalPeers": ["@stacksjs/ts-cloud"], "bin": { "bunpress": "./dist/bin/cli.js" } }, "sha512-o0Bf8b7kXKSyH5xXrVrdA46gPzMVssLBnbP82t8WzF17gIveFLNW+CzEZe3n9o+Ui2wiy2+6IF5SwGfrdTtWcQ=="],
3737
38 "@stacksjs/clapp": ["@stacksjs/clapp@0.2.13", "", {}, "sha512-wh6Ybgga1S/3P+GRDb2kBiOK97+Ay7TKTiaLKfhpgd+V04+BAHg23xDlZUNkpllhoRdFimeHpWahuwghoNYbUg=="],
38 "@stacksjs/clapp": ["@stacksjs/clapp@0.2.15", "", {}, "sha512-EM2fWrFZaU+paHZ4X0RGNZTnBYVgwdkbTnYdLD72yoc8JXUH5Wl88IZcn/JZoFPrViNgXlhYgI3xEK4Fryd3Xw=="],
3939
4040 "@stacksjs/clarity": ["@stacksjs/clarity@0.3.33", "", { "dependencies": { "bunfig": "^0.15.6" }, "bin": { "clarity": "./dist/bin/cli.js" } }, "sha512-+5GLKnAI/M/z64UfNLLfQqx/kp+frmRY+NZXYwwGwbrkud/xlsEGDWEExdhqOhqEDMWdb1oafw/ubGAPg1PaFw=="],
4141
42 "@stacksjs/desktop": ["@stacksjs/desktop@0.2.237", "", { "dependencies": { "craft-native": ">=0.0.76" } }, "sha512-hpC2xTRn6uxgNPMomJBURQG7TYJPxWFoLzpzJePzKVpi0o2lEt4vZRxAGdZRQgc0ZTm9QCP3pTqRR+k3t0bEbw=="],
42 "@stacksjs/desktop": ["@stacksjs/desktop@0.2.249", "", { "dependencies": { "craft-native": ">=0.0.76" } }, "sha512-mQfxzJW2wGzTFffa1NIYVA0qSbJH7QSHocYJbKZxBSQR5qD8u3SXfpxDNg3YcgoHCj6CfH/BsuSg5jqaiyRTpw=="],
4343
4444 "@stacksjs/dtsx": ["@stacksjs/dtsx@0.11.10", "", { "dependencies": { "@stacksjs/clapp": "^0.2.0" }, "bin": { "dtsx": "./dist/bin/cli.js" } }, "sha512-NOSSGv7mdxzmijmKHxTZDmgZp7vCYrRKWpDwNqwTc97MTv5csjo3uukf7A/c+s7pSzJd+HxqsTCZ7IznjfEtmw=="],
4545
@@ -47,9 +47,9 @@
4747
4848 "@stacksjs/logsmith": ["@stacksjs/logsmith@0.2.11", "", { "dependencies": { "@stacksjs/clapp": "^0.2.0", "bunfig": "^0.15.6", "pickier": "^0.1.9" }, "bin": { "@stacksjs/logsmith": "./dist/bin/cli.js", "logsmith": "./dist/bin/cli.js" } }, "sha512-wqqAxewpsHVDzpC+IRy+yYyGXGlv1j5GCqYTh8fL7d3LLhnRPN72PEQywM357burtORvdkFHfOzk3Ih1SMvuiw=="],
4949
50 "@stacksjs/sanitizer": ["@stacksjs/sanitizer@0.2.237", "", {}, "sha512-hx51XqFdkoeVEKGXj083SGyY57BnWFRu8yWTrPk/FZlVqwup8XQGyiF0FTcf/u2z4pyRzpQ/pDCgsTQsh+d6tQ=="],
50 "@stacksjs/sanitizer": ["@stacksjs/sanitizer@0.2.249", "", {}, "sha512-u7xHcDDeyj+IfDsqAEGpuFoZeRWuKfpnpexfyjPCOvBhJlFWIYKvFVY9QjuKN/kFQxDv5hYK9vkROpZAIVSzNQ=="],
5151
52 "@stacksjs/stx": ["@stacksjs/stx@0.2.237", "", { "dependencies": { "@cwcss/crosswind": "^0.2.19", "@stacksjs/clapp": "^0.2.0", "@stacksjs/desktop": "0.2.237", "@stacksjs/sanitizer": "0.2.237", "@stacksjs/ts-i18n": "^0.1.11", "bun-plugin-stx": "0.2.237", "bunfig": "^0.15.17", "stx-router": "0.2.237", "ts-broadcasting": "^0.0.9", "ts-images": "^0.2.11", "ts-syntax-highlighter": "^0.2.1" }, "bin": { "stx": "./dist/cli.js" } }, "sha512-trsm4du5m4doOJwZztrVgYlClUxwi5wzfb79V/o5Vu5iw9WIdFbfwiOz/zcxDeoqBp6+eAVqD0bY1Jvq7/wABQ=="],
52 "@stacksjs/stx": ["@stacksjs/stx@0.2.249", "", { "dependencies": { "@cwcss/crosswind": "^0.2.19", "@stacksjs/clapp": "^0.2.14", "@stacksjs/desktop": "0.2.249", "@stacksjs/sanitizer": "0.2.249", "@stacksjs/ts-i18n": "^0.1.11", "bun-plugin-stx": "0.2.249", "bunfig": "^0.15.17", "stx-router": "0.2.249", "ts-broadcasting": "^0.0.9", "ts-images": "^0.2.11", "ts-syntax-highlighter": "^0.2.1" }, "bin": { "stx": "./dist/cli.js" } }, "sha512-3r2RgvcrnJZ4FKwsjFMyOPwpyKtBV8RWnTVGby5C9XCKe0d/DsF125+A/8LAXTjB4z32NUYRDVnSpvhd1vRxPA=="],
5353
5454 "@stacksjs/ts-avif": ["@stacksjs/ts-avif@0.1.4", "", {}, "sha512-+ri7xxHLxaFGRJPihI7irDZpdLEIrEFpR7Em+ojfDbTjXQmXtQBqN/9WKNhBdQ1BZ2M1ckjdgnxmfege86QQ5Q=="],
5555
@@ -67,6 +67,10 @@
6767
6868 "@stacksjs/ts-webp": ["@stacksjs/ts-webp@0.1.3", "", {}, "sha512-0PFmmBLKCxIc+8pNEwfvoXfS5uH47y7rXpVaGEfj6VQGPoQCAWUmheppCeJ66YCdSVR1dezR/4MGTZCnT+uZow=="],
6969
70 "@ts-css/core": ["@ts-css/core@workspace:packages/ts-css"],
71
72 "@ts-css/vscode": ["@ts-css/vscode@workspace:packages/vscode"],
73
7074 "@types/bun": ["@types/bun@1.4.0", "", { "dependencies": { "bun-types": "1.4.0" } }, "sha512-K+lZULY23vRgK/CfTjFIV+tyifaNdSMlPh9j+6mQ/cLfpOznLyAuzgV/JQysyECpkBQLVMSyvjlr2fBUSA9wFQ=="],
7175
7276 "@types/node": ["@types/node@26.4.0", "", { "dependencies": { "undici-types": "~8.3.0" } }, "sha512-faiGnoIrLH/V8cibOMEAZ8pMw6oXqSukl29ra4mN8GdaB2ZewzeaLj+INpV5N+Z1eKWzY+IzaIZH2EIR6YZRNQ=="],
@@ -119,13 +123,13 @@
119123
120124 "bun-plugin-dtsx": ["bun-plugin-dtsx@0.11.10", "", { "dependencies": { "@stacksjs/dtsx": "0.11.10" } }, "sha512-qQrEBIV1pzhDmrxmhTHhgVK5gqE5CfpO8C9NCp7zUaN48c4IJVrpqXbeNWch7sAT/Hf4GhVMWau7T65xySm59Q=="],
121125
122 "bun-plugin-stx": ["bun-plugin-stx@0.2.237", "", { "dependencies": { "@stacksjs/stx": "^0.2.227", "stx-router": "^0.2.227" }, "bin": { "serve": "./dist/serve.js", "stx-serve": "./dist/serve.js" } }, "sha512-LYBUiSNKtdkTHVeiUAYFPrrNGJWu4o/jLjOi2K1MiWDuOCqaQ6VHZItuw52nR4suVHOL5hbVJWRS93sQ+7dXxA=="],
126 "bun-plugin-stx": ["bun-plugin-stx@0.2.249", "", { "dependencies": { "@stacksjs/stx": "^0.2.227", "stx-router": "^0.2.227" }, "bin": { "serve": "./dist/serve.js", "stx-serve": "./dist/serve.js" } }, "sha512-TQ6UEPX54pATWLq27VnkQCAiOBbiM1roOPye6nbSjgmRj54mqz9we0HPfepfj+ahYvkniEiwIVw9Ym3xCXNjzQ=="],
123127
124128 "bun-types": ["bun-types@1.4.0", "", { "dependencies": { "@types/node": "*" } }, "sha512-iIKw23BspnQQYd3prITOBxeUsxBHnwzX6YJfGMuNOZzeNcMmVqzIIVGRm1l69ogaPQmb4wB6BN8mA5bE9YuC5Q=="],
125129
126130 "bunfig": ["bunfig@0.15.17", "", { "dependencies": { "@stacksjs/clapp": "^0.2.0", "@stacksjs/clarity": "^0.3.24" }, "bin": { "bunfig": "./bin/cli.js" } }, "sha512-nJAYGUq29lMmKindrIQIU5MD0JFFRoVFt+PBoNEvvVO9gKS3WgsYQVQLzN0gzHNnZtOZSR9p7jTBiRCwjQpr1g=="],
127131
128 "craft-native": ["craft-native@0.0.77", "", { "bin": { "craft-sdk": "./dist/cli.js" } }, "sha512-hBqFxZC22GVt8wv3srd/rsDTKykSzM/aFJDDM8+W/Mk8CuZDFjlOIkRSnyJqZwyVf4bvkRzdegd9fiOfnwUNOg=="],
132 "craft-native": ["craft-native@0.0.83", "", { "bin": { "craft-sdk": "./dist/cli.js" } }, "sha512-6FWJmaTG8TYpxKvj7gCYhkylq8jeY6anE75zNcxGbZDRt5AeaKpLBIdCo2AlCHkw1amuFUdahrJ6vPZdInGbQQ=="],
129133
130134 "data-uri-to-buffer": ["data-uri-to-buffer@6.0.2", "", {}, "sha512-7hvf7/GW8e86rW0ptuwS3OcBGDjIi6SZva7hCyWC0yYry2cOPmLIjXAUHI6DK2HsnwJd9ifmt57i8eV2n4YNpw=="],
131135
@@ -137,14 +141,10 @@
137141
138142 "sisteransi": ["sisteransi@1.0.5", "", {}, "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="],
139143
140 "stx-router": ["stx-router@0.2.237", "", {}, "sha512-sEuFmBW4YIgaF79AkBrqhBmkN6t6sdFISCHlalxoLb+QK4xyesc7CXnk6UOcLTkfEP89ojHyvM/8yvK2bqYdFg=="],
144 "stx-router": ["stx-router@0.2.249", "", {}, "sha512-zKCQH2S/qj2FbxYhreS9UdCw0vKGiD1lx//ZohPaXqmIIKdha4gL219DyV7gfdQKrZbjOGEf6N7dN+tvu42gbQ=="],
141145
142146 "ts-broadcasting": ["ts-broadcasting@0.0.9", "", { "bin": { "broadcast": "./dist/bin/cli.js" } }, "sha512-OA95bHPe3M/24Gx8FpbUV0+NzGwvemG2LP64s1p/zATagX8xJckeziru03ccjW0ExWaD+W5tC1GRIqS6lfbB4A=="],
143147
144 "ts-css": ["ts-css@workspace:packages/ts-css"],
145
146 "ts-css-vscode": ["ts-css-vscode@workspace:packages/vscode"],
147
148148 "ts-error-handling": ["ts-error-handling@0.1.3", "", {}, "sha512-Agm8wbQL1YVvnffVDSUKMgImZBoR4UVFjzPaIwPxa0z7YwsowKV8R57pCDIjLP/dTHRBetg7ZfdTeuNVb21OfA=="],
149149
150150 "ts-gif": ["ts-gif@0.1.2", "", { "dependencies": { "data-uri-to-buffer": "^6.0.2" } }, "sha512-jbraplO1qqJtrtkFeepNPUGPad7w8FQHWIQFsn1OJbHeWKUbdqdkrX18XzNXI5Fw7+s6A3nbNTdj+Ukn4d3f8g=="],
@@ -153,7 +153,7 @@
153153
154154 "ts-jpeg": ["ts-jpeg@0.3.5", "", {}, "sha512-etdIfMDRDYDF44kDu++z0M5GbR7ph9IKmubSXQop1O8NTUc+xjxE8dPt/niosHRUhMiQ4gaLtuFh0DH6QvfopA=="],
155155
156 "ts-pantry": ["ts-pantry@0.11.44", "", { "bin": { "ts-pantry": "./dist/bin/cli.js" } }, "sha512-xnvzhbhwdRk75aUyyXiSkSICRJNcUYR+xXtLUmRRufZiEBf4T1zrIPiEdgPWDhN0PYLCeA7GNi098yHxMcVvqg=="],
156 "ts-pantry": ["ts-pantry@0.11.45", "", { "bin": { "ts-pantry": "./dist/bin/cli.js" } }, "sha512-wh8pGg7EYrK0bR2rz71SFMniJSq9OFNMZTVkxvk04ywedSP8ECjYLpEg/MK1VRGJjW2/FfIZskkxVQq211jjSw=="],
157157
158158 "ts-syntax-highlighter": ["ts-syntax-highlighter@0.2.17", "", { "bin": { "ts-syntax-highlighter": "./dist/bin/cli.js" } }, "sha512-cHxkTRvqYabO9axIrw6KUkMweIHzXmVmcVmO+Yi2NEa9nxQa15zoISvvlKYPzK4OLsUS5I4uVaLz0Oivc3oOSw=="],
159159
docs/advanced/custom-rules.mdmodified+2-2
@@ -16,7 +16,7 @@ While ts-css includes comprehensive built-in utilities, you can add custom rules
1616Define custom rules in your configuration:
1717
1818```typescript
19import type { TsCssOptions } from 'ts-css'
19import type { TsCssOptions } from '@ts-css/core'
2020
2121const config = {
2222 rules: [
@@ -234,7 +234,7 @@ const config = {
234234```### Using Theme Values
235235
236236Access theme values in custom rules:```typescript
237import type { TsCssOptions } from 'ts-css'
237import type { TsCssOptions } from '@ts-css/core'
238238
239239const config = {
240240 theme: {
docs/advanced/frameworks.mdmodified+13-13
@@ -15,7 +15,7 @@ cd my-app
1515
1616# Install ts-css
1717
18bun add ts-css
18bun add @ts-css/core
1919
2020# Initialize ts-css
2121
@@ -23,7 +23,7 @@ bunx cssx init
2323```**Configuration:**```typescript
2424
2525// css.config.ts
26import type { TsCssOptions } from 'ts-css'
26import type { TsCssOptions } from '@ts-css/core'
2727
2828const config = {
2929 content: ['./src/**/*.{js,jsx,ts,tsx}'],
@@ -90,7 +90,7 @@ bun install
9090
9191# Install ts-css
9292
93bun add ts-css
93bun add @ts-css/core
9494bunx cssx init
9595
9696```**Configuration:**```typescript
@@ -118,7 +118,7 @@ cd my-app
118118
119119# Install ts-css
120120
121bun add ts-css
121bun add @ts-css/core
122122bunx cssx init
123123```**Configuration:**```typescript
124124
@@ -191,7 +191,7 @@ bun install
191191
192192# Install ts-css
193193
194bun add ts-css
194bun add @ts-css/core
195195bunx cssx init
196196
197197```**Configuration:**```typescript
@@ -263,7 +263,7 @@ bun install
263263
264264# Install ts-css
265265
266bun add ts-css
266bun add @ts-css/core
267267bunx cssx init
268268```**Configuration:**```typescript
269269
@@ -307,7 +307,7 @@ bun install
307307
308308# Install ts-css
309309
310bun add ts-css
310bun add @ts-css/core
311311bunx cssx init
312312```**Configuration:**```typescript
313313
@@ -358,7 +358,7 @@ const config = {
358358bun create vite my-app --template svelte-ts
359359cd my-app
360360bun install
361bun add ts-css
361bun add @ts-css/core
362362bunx cssx init
363363
364364```**Configuration:**```typescript
@@ -377,7 +377,7 @@ bun install
377377
378378# Install ts-css
379379
380bun add ts-css
380bun add @ts-css/core
381381bunx cssx init
382382
383383```**Configuration:**```typescript
@@ -444,7 +444,7 @@ bun install
444444
445445# Install ts-css
446446
447bun add ts-css
447bun add @ts-css/core
448448bunx cssx init
449449```**Configuration:**```typescript
450450
@@ -471,7 +471,7 @@ bun install
471471
472472# Install ts-css
473473
474bun add ts-css
474bun add @ts-css/core
475475bunx cssx init
476476
477477```**Configuration:**```typescript
@@ -491,7 +491,7 @@ import './styles.css'
491491
492492# Install ts-css
493493
494bun add ts-css
494bun add @ts-css/core
495495bunx cssx init
496496```**Configuration:**```typescript
497497
@@ -525,7 +525,7 @@ const config = {
525525
526526# In your Hugo project
527527
528bun add ts-css
528bun add @ts-css/core
529529bunx cssx init
530530```**Configuration:**```typescript
531531
docs/advanced/presets.mdmodified+12-12
@@ -31,7 +31,7 @@ const config = {
3131### Basic Preset Structure
3232
3333A preset is an object that implements the`Preset`interface:```typescript
34import type { Preset } from 'ts-css'
34import type { Preset } from '@ts-css/core'
3535
3636export const myPreset: Preset = {
3737 name: 'my-preset',
@@ -54,7 +54,7 @@ export const myPreset: Preset = {
5454
5555```### Simple Example```typescript
5656// presets/minimal.ts
57import type { Preset } from 'ts-css'
57import type { Preset } from '@ts-css/core'
5858
5959export const minimalPreset: Preset = {
6060 name: 'minimal',
@@ -82,7 +82,7 @@ export const minimalPreset: Preset = {
8282### Single Preset```typescript
8383
8484// css.config.ts
85import type { TsCssOptions } from 'ts-css'
85import type { TsCssOptions } from '@ts-css/core'
8686import { minimalPreset } from './presets/minimal'
8787
8888const config = {
@@ -133,7 +133,7 @@ const config = {
133133### Design System Preset```typescript
134134
135135// presets/design-system.ts
136import type { Preset } from 'ts-css'
136import type { Preset } from '@ts-css/core'
137137
138138export const designSystemPreset: Preset = {
139139 name: 'design-system',
@@ -212,7 +212,7 @@ export const designSystemPreset: Preset = {
212212```### Component Library Preset```typescript
213213
214214// presets/components.ts
215import type { Preset } from 'ts-css'
215import type { Preset } from '@ts-css/core'
216216
217217export const componentsPreset: Preset = {
218218 name: 'components',
@@ -254,7 +254,7 @@ export const componentsPreset: Preset = {
254254
255255```### Utility Preset```typescript
256256// presets/utilities.ts
257import type { Preset } from 'ts-css'
257import type { Preset } from '@ts-css/core'
258258
259259export const utilitiesPreset: Preset = {
260260 name: 'utilities',
@@ -307,7 +307,7 @@ export const utilitiesPreset: Preset = {
307307```### Framework-Specific Preset```typescript
308308
309309// presets/react.ts
310import type { Preset } from 'ts-css'
310import type { Preset } from '@ts-css/core'
311311
312312export const reactPreset: Preset = {
313313 name: 'react',
@@ -360,7 +360,7 @@ my-ts-css-preset/
360360
361361```typescript
362362// src/index.ts
363import type { Preset } from 'ts-css'
363import type { Preset } from '@ts-css/core'
364364
365365export const myPreset: Preset = {
366366 name: 'my-preset',
@@ -389,10 +389,10 @@ export default myPreset
389389 "prepublishOnly": "bun run build"
390390 },
391391 "peerDependencies": {
392 "ts-css": ">=1.0.0"
392 "@ts-css/core": ">=1.0.0"
393393 },
394394 "devDependencies": {
395 "ts-css": "latest",
395 "@ts-css/core": "latest",
396396 "typescript": "latest"
397397 }
398398}
@@ -459,7 +459,7 @@ const config = {
459459
460460### Preset with Custom Preflight```typescript
461461
462import type { Preflight, Preset } from 'ts-css'
462import type { Preflight, Preset } from '@ts-css/core'
463463
464464const customPreflight: Preflight = {
465465 getCSS: () => `/*Custom reset*/*{
@@ -593,7 +593,7 @@ const config = {
593593}
594594```### Type Errors**Problem:**TypeScript errors when creating preset**Solution:**Import and use the`Preset`type:```typescript
595595
596import type { Preset } from 'ts-css'
596import type { Preset } from '@ts-css/core'
597597
598598export const myPreset: Preset = {
599599 name: 'my-preset',
docs/advanced/theme-customization.mdmodified+3-3
@@ -8,7 +8,7 @@ The theme configuration defines the design tokens that utilities are generated f
88
99```typescript
1010// css.config.ts
11import type { TsCssOptions } from 'ts-css'
11import type { TsCssOptions } from '@ts-css/core'
1212
1313const config = {
1414 theme: {
@@ -339,7 +339,7 @@ const config = {
339339</div>
340340```## Complete Theme Example```typescript
341341
342import type { TsCssOptions } from 'ts-css'
342import type { TsCssOptions } from '@ts-css/core'
343343
344344const config = {
345345 theme: {
@@ -530,7 +530,7 @@ const config = {
530530```### Extending Default Theme
531531
532532Merge with the default theme:```typescript
533import { defaultConfig } from 'ts-css'
533import { defaultConfig } from '@ts-css/core'
534534
535535const config = {
536536 theme: {
docs/api-reference.mdmodified+21-21
@@ -5,12 +5,12 @@ This document provides a complete reference for ts-css's programmatic API. Use t
55## Installation
66
77```bash
8bun add ts-css
8bun add @ts-css/core
99```## Core Functions
1010
1111### `build(config: TsCssConfig): Promise<BuildResult>`Build CSS from content files and return the result.**Parameters:**-`config` - Complete ts-css configuration object**Returns:**`Promise<BuildResult>`**Example:**```typescript
1212
13import { build } from 'ts-css'
13import { build } from '@ts-css/core'
1414
1515const result = await build({
1616 content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
@@ -39,7 +39,7 @@ console.log(`Built ${result.classes.size} classes in ${result.duration}ms`)
3939console.log(`Generated CSS:\n${result.css}`)
4040
4141```###`buildAndWrite(config: TsCssConfig): Promise<BuildResult>`Build CSS and write it to the output file.**Parameters:**-`config` - Complete ts-css configuration object**Returns:**`Promise<BuildResult>`**Example:**```typescript
42import { buildAndWrite } from 'ts-css'
42import { buildAndWrite } from '@ts-css/core'
4343
4444const result = await buildAndWrite({
4545 content: ['./src/**/*.tsx'],
@@ -53,13 +53,13 @@ console.log(`File size: ${result.css.length} bytes`)
5353```###`writeCSS(css: string, outputPath: string): Promise<void>`Write CSS string to a file.**Parameters:**-`css`- CSS content to write
5454
5555-`outputPath` - Path to output file**Returns:**`Promise<void>`**Example:**```typescript
56import { build, writeCSS } from 'ts-css'
56import { build, writeCSS } from '@ts-css/core'
5757
5858const result = await build(config)
5959await writeCSS(result.css, './custom/path/output.css')
6060
6161```###`writeTransformedFiles(transformedFiles: Map<string, string>): Promise<void>`Write transformed files to disk (used with compile class transformer).**Parameters:**-`transformedFiles` - Map of file paths to transformed content**Returns:**`Promise<void>`**Example:**```typescript
62import { build, writeTransformedFiles } from 'ts-css'
62import { build, writeTransformedFiles } from '@ts-css/core'
6363
6464const result = await build({
6565 // ... config with compileClass enabled
@@ -79,7 +79,7 @@ Class responsible for generating CSS from utility classes.**Constructor:**```typ
7979new CSSGenerator(config: TsCssConfig)
8080
8181```**Methods:**#### `generate(className: string): void`Generate CSS for a single utility class.```typescript
82import { CSSGenerator } from 'ts-css'
82import { CSSGenerator } from '@ts-css/core'
8383
8484const generator = new CSSGenerator(config)
8585generator.generate('bg-blue-500')
@@ -96,7 +96,7 @@ const prettyCSS = generator.toCSS(false) // Formatted
9696generator.reset()
9797```**Complete example:**```typescript
9898
99import { CSSGenerator, defaultConfig } from 'ts-css'
99import { CSSGenerator, defaultConfig } from '@ts-css/core'
100100
101101const config = {
102102 ...defaultConfig,
@@ -133,7 +133,7 @@ new Scanner(
133133
134134-`classes`- Set of found utility classes
135135-`transformedFiles` - Map of transformed files (if transformer provided)**Example:**```typescript
136import { Scanner } from 'ts-css'
136import { Scanner } from '@ts-css/core'
137137
138138const scanner = new Scanner(['./src/**/*.tsx'])
139139const { classes, transformedFiles } = await scanner.scan()
@@ -147,7 +147,7 @@ for (const className of classes) {
147147
148148### `parseClass(className: string): ParsedClass`Parse a utility class string into its components.**Parameters:**-`className` - Class name to parse**Returns:**`ParsedClass` object**Example:**```typescript
149149
150import { parseClass } from 'ts-css'
150import { parseClass } from '@ts-css/core'
151151
152152const parsed = parseClass('md:hover:bg-blue-500')
153153
@@ -172,7 +172,7 @@ console.log(arbitrary.value) // '500px'
172172### `defaultConfig`
173173
174174The default ts-css configuration object.**Example:**```typescript
175import { defaultConfig } from 'ts-css'
175import { defaultConfig } from '@ts-css/core'
176176
177177// Extend default config
178178const config = {
@@ -188,7 +188,7 @@ const config = {
188188
189189```###`loadConfig(options): Promise<TsCssConfig>`Load configuration from file (used internally by CLI).**Parameters:**-`options.name`- Config name (default: 'css')
190190-`options.defaultConfig` - Default configuration**Returns:**`Promise<TsCssConfig>`**Example:**```typescript
191import { defaultConfig, loadConfig } from 'ts-css'
191import { defaultConfig, loadConfig } from '@ts-css/core'
192192
193193const config = await loadConfig({
194194 name: 'css',
@@ -208,7 +208,7 @@ new CompileClassTransformer(config?: {
208208```**Methods:**#### `getCompiledClasses(): Map<string, { className: string, utilities: string[] }>`
209209
210210Get all compiled classes.**Example:**```typescript
211import { CompileClassTransformer } from 'ts-css'
211import { CompileClassTransformer } from '@ts-css/core'
212212
213213const transformer = new CompileClassTransformer({
214214 trigger: ':tc:',
@@ -324,7 +324,7 @@ interface VariantConfig {
324324
325325### Custom Build Pipeline```typescript
326326
327import { CSSGenerator, Scanner, writeCSS } from 'ts-css'
327import { CSSGenerator, Scanner, writeCSS } from '@ts-css/core'
328328
329329async function customBuild() {
330330 // 1. Configure
@@ -361,7 +361,7 @@ async function customBuild() {
361361await customBuild()
362362
363363```### Analyze Utility Usage```typescript
364import { parseClass, Scanner } from 'ts-css'
364import { parseClass, Scanner } from '@ts-css/core'
365365
366366async function analyzeUtilities() {
367367 const scanner = new Scanner(['./src/**/*.tsx'])
@@ -389,7 +389,7 @@ await analyzeUtilities()
389389```### Watch Mode Implementation```typescript
390390
391391import { watch } from 'node:fs'
392import { buildAndWrite } from 'ts-css'
392import { buildAndWrite } from '@ts-css/core'
393393
394394async function watchMode(config: TsCssConfig) {
395395 console.log('Watching for changes...')
@@ -419,7 +419,7 @@ async function watchMode(config: TsCssConfig) {
419419await watchMode(config)
420420
421421```### Framework Plugin```typescript
422import { buildAndWrite } from 'ts-css'
422import { buildAndWrite } from '@ts-css/core'
423423
424424// Usage in vite.config.ts
425425import { defineConfig } from 'vite'
@@ -457,7 +457,7 @@ export default defineConfig({
457457})
458458```### Generate Multiple Themes```typescript
459459
460import { build, writeCSS } from 'ts-css'
460import { build, writeCSS } from '@ts-css/core'
461461
462462const baseConfig = {
463463 content: ['./src/**/*.tsx'],
@@ -494,7 +494,7 @@ for (const [name, theme] of Object.entries(themes)) {
494494
495495```### Testing Utilities```typescript
496496import { expect, test } from 'bun:test'
497import { CSSGenerator, defaultConfig, parseClass } from 'ts-css'
497import { CSSGenerator, defaultConfig, parseClass } from '@ts-css/core'
498498
499499test('parses utility class', () => {
500500 const parsed = parseClass('md:hover:bg-blue-500')
@@ -519,7 +519,7 @@ test('handles important modifier', () => {
519519})
520520```## Error Handling```typescript
521521
522import { buildAndWrite } from 'ts-css'
522import { buildAndWrite } from '@ts-css/core'
523523
524524try {
525525 const result = await buildAndWrite(config)
@@ -543,7 +543,7 @@ catch (error) {
543543
544544### Caching Results```typescript
545545
546import { build } from 'ts-css'
546import { build } from '@ts-css/core'
547547
548548const cache = new Map<string, BuildResult>()
549549
@@ -562,7 +562,7 @@ async function buildWithCache(config: TsCssConfig) {
562562}
563563```### Parallel Builds```typescript
564564
565import { build, writeCSS } from 'ts-css'
565import { build, writeCSS } from '@ts-css/core'
566566
567567const configs = [
568568 { output: './dist/app.css', content: ['./src/app/**/*.tsx'] },
docs/config.mdmodified+5-5
@@ -10,7 +10,7 @@ Create a configuration file using the init command:
1010cssx init
1111```This creates a basic`css.config.ts`file:```typescript
1212
13import type { TsCssOptions } from 'ts-css'
13import type { TsCssOptions } from '@ts-css/core'
1414
1515const config = {
1616 content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
@@ -238,7 +238,7 @@ const config = {
238238
239239```**Creating a Preset:**```typescript
240240// presets/custom.ts
241import type { TsCssOptions } from 'ts-css'
241import type { TsCssOptions } from '@ts-css/core'
242242
243243export const myCustomPreset: Partial<TsCssConfig> = {
244244 theme: {
@@ -252,7 +252,7 @@ export const myCustomPreset: Partial<TsCssConfig> = {
252252}
253253```## Complete Configuration Example```typescript
254254
255import type { TsCssOptions } from 'ts-css'
255import type { TsCssOptions } from '@ts-css/core'
256256
257257const config = {
258258 // Required
@@ -306,7 +306,7 @@ export default config
306306```## Environment-Specific Configuration
307307
308308You can create different configurations for different environments:```typescript
309import type { TsCssOptions } from 'ts-css'
309import type { TsCssOptions } from '@ts-css/core'
310310
311311const isDev = process.env.NODE_ENV === 'development'
312312const isProd = process.env.NODE_ENV === 'production'
@@ -327,7 +327,7 @@ export default config
327327```## TypeScript Support
328328
329329ts-css provides full TypeScript support with type checking and autocomplete:```typescript
330import type { TsCssOptions } from 'ts-css'
330import type { TsCssOptions } from '@ts-css/core'
331331
332332// Use satisfies for type checking while preserving literal types
333333const config = {
docs/features/cli.mdmodified+6-6
@@ -10,11 +10,11 @@ Install ts-css globally or locally:
1010
1111# Global (use anywhere)
1212
13bun add --global ts-css
13bun add --global @ts-css/core
1414
1515# Local (project-specific)
1616
17bun add ts-css
17bun add @ts-css/core
1818```## Commands
1919
2020### `build`Build CSS from your content files.```bash
@@ -125,7 +125,7 @@ Next steps:
125125
126126```**Generated file:**```typescript
127127
128import type { TsCssOptions } from 'ts-css'
128import type { TsCssOptions } from '@ts-css/core'
129129
130130const config = {
131131 content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
@@ -403,7 +403,7 @@ cssx build --config ./css.test.config.ts
403403```### Programmatic Usage
404404
405405While the CLI is convenient, you can also use ts-css programmatically:```typescript
406import { build, buildAndWrite } from 'ts-css'
406import { build, buildAndWrite } from '@ts-css/core'
407407
408408// Build only (get result)
409409const result = await build({
@@ -459,7 +459,7 @@ const config = {
459459### Command Not Found**Problem:**`command not found: cssx`**Solutions:**1. Install globally
460460
461461 ```bash
462 bun add --global ts-css
462 bun add --global @ts-css/core
463463 ```2. Or use with package runner:```bash
464464 bunx cssx build
465465
@@ -494,7 +494,7 @@ const config = {
494494 ls -la ./src/**/*.tsx
495495 ```3. Validate config:```typescript
496496 // Use type checking
497 import type { TsCssOptions } from 'ts-css'
497 import type { TsCssOptions } from '@ts-css/core'
498498
499499 const config = {
500500 content: ['./src/**/*.tsx'],
docs/features/compile-class.mdmodified+1-1
@@ -30,7 +30,7 @@ Add the`:tc:`trigger to mark utility groups for compilation:```html
3030
3131Configure the transformer in your config:```typescript
3232// css.config.ts
33import type { TsCssOptions } from 'ts-css'
33import type { TsCssOptions } from '@ts-css/core'
3434
3535const config = {
3636 content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
docs/features/shortcuts.mdmodified+1-1
@@ -37,7 +37,7 @@ Define shortcuts in your`css.config.ts`:
3737
3838```typescript
3939
40import type { TsCssOptions } from 'ts-css'
40import type { TsCssOptions } from '@ts-css/core'
4141
4242const config = {
4343 shortcuts: {
docs/features/typescript.mdmodified+25-25
@@ -8,7 +8,7 @@ Use TypeScript for your configuration file to get autocompletion and type checki
88
99```typescript
1010// css.config.ts
11import type { TsCssOptions } from 'ts-css'
11import type { TsCssOptions } from '@ts-css/core'
1212
1313const config = {
1414 content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
@@ -31,7 +31,7 @@ export default config
3131```## Type Checking
3232
3333The`satisfies`keyword provides type checking while preserving literal types:```typescript
34import type { TsCssOptions } from 'ts-css'
34import type { TsCssOptions } from '@ts-css/core'
3535
3636// ✅ Type-safe with autocompletion
3737const config = {
@@ -107,7 +107,7 @@ Get IntelliSense and autocompletion in your IDE:
1071071. Install the TypeScript extension (comes pre-installed)
1081082. Create`css.config.ts`with the type import:```typescript
109109
110import type { TsCssOptions } from 'ts-css'
110import type { TsCssOptions } from '@ts-css/core'
111111
112112const config = {
113113 // Press Ctrl+Space here for autocompletion
@@ -161,8 +161,8 @@ const config = {
161161
162162### Build Function```typescript
163163
164import type { BuildResult, TsCssConfig } from 'ts-css'
165import { build } from 'ts-css'
164import type { BuildResult, TsCssConfig } from '@ts-css/core'
165import { build } from '@ts-css/core'
166166
167167const result: BuildResult = await build({
168168 content: ['./src/**/*.tsx'],
@@ -185,7 +185,7 @@ interface BuildResult {
185185}
186186
187187```### Using with async/await```typescript
188import { build, buildAndWrite } from 'ts-css'
188import { build, buildAndWrite } from '@ts-css/core'
189189
190190async function buildStyles() {
191191 // With build
@@ -207,7 +207,7 @@ async function buildStyles() {
207207```## Custom Rules with Types
208208
209209Define type-safe custom rules:```typescript
210import type { CustomRule, TsCssConfig } from 'ts-css'
210import type { CustomRule, TsCssConfig } from '@ts-css/core'
211211
212212const customRules: CustomRule[] = [
213213 // Pattern and handler with types
@@ -229,7 +229,7 @@ const config = {
229229```## Preset Types
230230
231231Create type-safe presets:```typescript
232import type { Preset, Theme } from 'ts-css'
232import type { Preset, Theme } from '@ts-css/core'
233233
234234const myPreset: Preset = {
235235 name: 'my-design-system',
@@ -264,7 +264,7 @@ const config = {
264264### Custom Theme Values
265265
266266Extend the theme with custom properties:```typescript
267import type { TsCssOptions, Theme } from 'ts-css'
267import type { TsCssOptions, Theme } from '@ts-css/core'
268268
269269interface CustomTheme extends Theme {
270270 customSpacing: Record<string, string>
@@ -286,7 +286,7 @@ const config = {
286286```### Custom Config
287287
288288Create a custom config interface:```typescript
289import type { TsCssOptions } from 'ts-css'
289import type { TsCssOptions } from '@ts-css/core'
290290
291291interface MyConfig extends Partial<TsCssConfig> {
292292 // Add custom properties
@@ -310,7 +310,7 @@ const config: MyConfig = {
310310```## Type Guards
311311
312312Use type guards for runtime type checking:```typescript
313import type { TsCssOptions } from 'ts-css'
313import type { TsCssOptions } from '@ts-css/core'
314314
315315function isValidConfig(config: unknown): config is TsCssConfig {
316316 return (
@@ -333,7 +333,7 @@ if (isValidConfig(config)) {
333333```## Generics
334334
335335Use generics for flexible, type-safe functions:```typescript
336import type { TsCssOptions } from 'ts-css'
336import type { TsCssOptions } from '@ts-css/core'
337337
338338function createConfig<T extends Partial<TsCssConfig>>(config: T): T {
339339 return {
@@ -356,12 +356,12 @@ const config = createConfig({
356356
357357Extend ts-css types globally:```typescript
358358// Now use in config
359import type { TsCssOptions } from 'ts-css'
359import type { TsCssOptions } from '@ts-css/core'
360360
361361// types/ts-css.d.ts
362import 'ts-css'
362import '@ts-css/core'
363363
364declare module 'ts-css' {
364declare module '@ts-css/core' {
365365 interface TsCssConfig {
366366 // Add your custom properties
367367 customFeature?: {
@@ -392,8 +392,8 @@ const config = {
392392
393393### Vite```typescript
394394
395import type { TsCssOptions } from 'ts-css'
396import { build } from 'ts-css'
395import type { TsCssOptions } from '@ts-css/core'
396import { build } from '@ts-css/core'
397397// vite.config.ts
398398import { defineConfig } from 'vite'
399399
@@ -415,10 +415,10 @@ export default defineConfig({
415415})
416416```### Next.js```typescript
417417
418import type { TsCssOptions } from 'ts-css'
418import type { TsCssOptions } from '@ts-css/core'
419419// next.config.ts
420420import type { NextConfig } from 'next'
421import { buildAndWrite } from 'ts-css'
421import { buildAndWrite } from '@ts-css/core'
422422
423423const tsCssConfig: TsCssConfig = {
424424 content: ['./src/**/*.tsx', './app/**/*.tsx'],
@@ -446,7 +446,7 @@ import type {
446446 ParsedClass,
447447 Preset,
448448 Theme,
449} from 'ts-css'
449} from '@ts-css/core'
450450
451451// Extract specific types
452452type ConfigColors = Theme['colors']
@@ -460,10 +460,10 @@ type PartialTheme = Partial<Theme>
460460### 1. Always Use Type Imports```typescript
461461
462462// ✅ Type-only import
463import type { TsCssOptions } from 'ts-css'
463import type { TsCssOptions } from '@ts-css/core'
464464
465465// ❌ Value import (unnecessary)
466import { TsCssConfig } from 'ts-css'
466import { TsCssConfig } from '@ts-css/core'
467467
468468```### 2. Use`satisfies`for Validation```typescript
469469// ✅ Validates types while preserving literals
@@ -478,7 +478,7 @@ const config: Partial<TsCssConfig> = {
478478```### 3. Separate Type Definitions```typescript
479479
480480// types/ts-css.ts
481import type { TsCssOptions, Preset } from 'ts-css'
481import type { TsCssOptions, Preset } from '@ts-css/core'
482482
483483// css.config.ts
484484import type { MyConfig } from './types/ts-css'
@@ -528,14 +528,14 @@ bun add --dev typescript
528528
529529# Ensure types are imported
530530
531import type { TsCssOptions } from 'ts-css'
531import type { TsCssOptions } from '@ts-css/core'
532532
533533```### Autocomplete Not Working**Problem:**No autocompletion in IDE**Solutions:**1. Restart TypeScript server
534534
5355352. Check tsconfig.json includes the config file
5365363. Ensure proper imports:```typescript
537537
538 import type { TsCssOptions } from 'ts-css'
538 import type { TsCssOptions } from '@ts-css/core'
539539 ```
540540
541541## 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
docs/features/watch-mode.mdmodified+1-1
@@ -33,7 +33,7 @@ When you start watch mode, ts-css:
3333
3434Watch mode uses the content patterns from your configuration file:```typescript
3535// css.config.ts
36import type { TsCssOptions } from 'ts-css'
36import type { TsCssOptions } from '@ts-css/core'
3737
3838const config = {
3939 content: [
docs/install.mdmodified+26-26
@@ -9,31 +9,31 @@ Install ts-css as a development dependency in your project:
99::: code-group
1010
1111```sh [bun]
12bun add ts-css
12bun add @ts-css/core
1313
1414# or
1515
16bun install --dev ts-css
16bun install --dev @ts-css/core
1717```
1818
1919```sh [npm]
20npm install ts-css
20npm install @ts-css/core
2121
2222# or
2323
24npm i -D ts-css
24npm i -D @ts-css/core
2525```
2626
2727```sh [pnpm]
28pnpm add ts-css
28pnpm add @ts-css/core
2929
3030# or
3131
32pnpm add -D ts-css
32pnpm add -D @ts-css/core
3333```
3434
3535```sh [yarn]
36yarn add ts-css
36yarn add @ts-css/core
3737```:::
3838
3939### Global Installation
@@ -41,29 +41,29 @@ yarn add ts-css
4141For global installation (to use the CLI anywhere):
4242
4343::: code-group```sh [bun]
44bun add --global ts-css
44bun add --global @ts-css/core
4545
4646```
4747
4848```sh [npm]
4949
50npm install --global ts-css
50npm install --global @ts-css/core
5151
5252# or
5353
54npm i -g ts-css
54npm i -g @ts-css/core
5555
5656```
5757
5858```sh [pnpm]
5959
60pnpm add --global ts-css
60pnpm add --global @ts-css/core
6161
6262```
6363
6464```sh [yarn]
6565
66yarn global add ts-css
66yarn global add @ts-css/core
6767
6868```:::
6969
@@ -85,7 +85,7 @@ cssx watch
8585```## Configuration
8686
8787The`cssx init`command creates a basic`css.config.ts`file:```typescript
88import type { TsCssOptions } from 'ts-css'
88import type { TsCssOptions } from '@ts-css/core'
8989
9090const config = {
9191 content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
@@ -102,7 +102,7 @@ export default config
102102
103103# Install ts-css
104104
105bun add ts-css
105bun add @ts-css/core
106106
107107# Create config
108108
@@ -110,7 +110,7 @@ cssx init
110110```Update your`css.config.ts`:
111111
112112```typescript
113import type { TsCssOptions } from 'ts-css'
113import type { TsCssOptions } from '@ts-css/core'
114114
115115const config = {
116116 content: [
@@ -143,7 +143,7 @@ import './styles/styles.css'
143143
144144# Install ts-css
145145
146bun add ts-css
146bun add @ts-css/core
147147
148148# Create config
149149
@@ -151,7 +151,7 @@ cssx init
151151```Update your`css.config.ts`:
152152
153153```typescript
154import type { TsCssOptions } from 'ts-css'
154import type { TsCssOptions } from '@ts-css/core'
155155
156156const config = {
157157 content: [
@@ -174,7 +174,7 @@ export default config
174174
175175# Install ts-css
176176
177bun add ts-css
177bun add @ts-css/core
178178
179179# Create config
180180
@@ -182,7 +182,7 @@ cssx init
182182```Update your`css.config.ts`:
183183
184184```typescript
185import type { TsCssOptions } from 'ts-css'
185import type { TsCssOptions } from '@ts-css/core'
186186
187187const config = {
188188 content: [
@@ -203,7 +203,7 @@ export default config
203203
204204# Install ts-css
205205
206bun add ts-css
206bun add @ts-css/core
207207
208208# Create config
209209
@@ -211,7 +211,7 @@ cssx init
211211```Update your`css.config.ts`:
212212
213213```typescript
214import type { TsCssOptions } from 'ts-css'
214import type { TsCssOptions } from '@ts-css/core'
215215
216216const config = {
217217 content: [
@@ -235,7 +235,7 @@ import '/styles.css'
235235
236236# Install ts-css globally
237237
238bun add --global ts-css
238bun add --global @ts-css/core
239239
240240# Create config
241241
@@ -243,7 +243,7 @@ cssx init
243243```Update your`css.config.ts`:
244244
245245```typescript
246import type { TsCssOptions } from 'ts-css'
246import type { TsCssOptions } from '@ts-css/core'
247247
248248const config = {
249249 content: ['./src/**/*.html'],
@@ -397,11 +397,11 @@ If you get permission errors when installing globally:```bash
397397
398398# Use sudo on macOS/Linux
399399
400sudo bun add --global ts-css
400sudo bun add --global @ts-css/core
401401
402402# Or install locally and use npx
403403
404bun add ts-css
404bun add @ts-css/core
405405bunx cssx build
406406
407407```### TypeScript Errors
@@ -412,7 +412,7 @@ If you encounter TypeScript errors in your config file:
412412
413413 bun add --dev typescript
414414 ```2. Use the`satisfies`keyword for type checking:```typescript
415 import type { TsCssOptions } from 'ts-css'
415 import type { TsCssOptions } from '@ts-css/core'
416416
417417 const config = {
418418 content: ['./src/**/*.tsx'],
docs/intro.mdmodified+4-4
@@ -130,15 +130,15 @@ Install ts-css via your package manager:```bash
130130
131131# Using Bun (recommended)
132132
133bun add ts-css
133bun add @ts-css/core
134134
135135# Using npm
136136
137npm install ts-css
137npm install @ts-css/core
138138
139139# Using pnpm
140140
141pnpm add ts-css
141pnpm add @ts-css/core
142142
143143```### Configuration
144144
@@ -146,7 +146,7 @@ Create a configuration file:```bash
146146cssx init
147147```This creates a`css.config.ts`file:```typescript
148148
149import type { TsCssOptions } from 'ts-css'
149import type { TsCssOptions } from '@ts-css/core'
150150
151151const config = {
152152 content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
package.jsonmodified+1-1
@@ -1,5 +1,5 @@
11{
2 "name": "ts-css",
2 "name": "@ts-css/core",
33 "type": "module",
44 "sideEffects": false,
55 "version": "0.3.0",
packages/ts-css/PLUGIN.mdmodified+7-7
@@ -5,7 +5,7 @@ A Bun plugin that automatically generates and injects Crosswind CSS into your HT
55## Installation
66
77```bash
8bun add ts-css
8bun add @ts-css/core
99```
1010
1111## Quick Start**1. Create your HTML file**(`src/template.html`)
@@ -32,7 +32,7 @@ document.body.innerHTML = template
3232```**3. Build with the plugin**:
3333
3434```typescript
35import { plugin } from 'ts-css'
35import { plugin } from '@ts-css/core'
3636
3737await Bun.build({
3838 entrypoints: ['./src/index.ts'],
@@ -49,7 +49,7 @@ await Bun.build({
4949
5050### Basic Configuration```typescript
5151
52import { plugin } from 'ts-css'
52import { plugin } from '@ts-css/core'
5353
5454await Bun.build({
5555 entrypoints: ['./src/index.ts'],
@@ -62,7 +62,7 @@ await Bun.build({
6262})
6363
6464```### Custom Theme```typescript
65import { plugin } from 'ts-css'
65import { plugin } from '@ts-css/core'
6666
6767await Bun.build({
6868 entrypoints: ['./src/index.ts'],
@@ -92,7 +92,7 @@ await Bun.build({
9292})
9393```### Advanced Configuration```typescript
9494
95import { plugin } from 'ts-css'
95import { plugin } from '@ts-css/core'
9696
9797await Bun.build({
9898 entrypoints: ['./src/index.ts'],
@@ -186,7 +186,7 @@ The plugin is highly performant:
186186## TypeScript Support
187187
188188The plugin is fully typed. Import the types:```typescript
189import type { TsCssPluginOptions } from 'ts-css'
189import type { TsCssPluginOptions } from '@ts-css/core'
190190
191191const options: TsCssPluginOptions = {
192192 config: {
@@ -197,7 +197,7 @@ const options: TsCssPluginOptions = {
197197
198198The plugin also respects`crosswind.config.ts`in your project root:```typescript
199199// crosswind.config.ts
200import type { TsCssOptions } from 'ts-css'
200import type { TsCssOptions } from '@ts-css/core'
201201
202202export default {
203203 minify: true,
packages/ts-css/README.mdmodified+6-6
@@ -5,7 +5,7 @@ A CSS engine with two front ends and one atomic output: Tailwind-compatible **ut
55## Installation
66
77```bash
8bun add ts-css
8bun add @ts-css/core
99```
1010
1111## Quick Start
@@ -13,7 +13,7 @@ bun add ts-css
1313### Programmatic API
1414
1515```typescript
16import { CSSGenerator, defaultConfig } from 'ts-css'
16import { CSSGenerator, defaultConfig } from '@ts-css/core'
1717
1818const gen = new CSSGenerator(defaultConfig)
1919gen.generate('flex')
@@ -32,7 +32,7 @@ const css = gen.toCSS(true) // true = include preflight
3232### Build API
3333
3434```typescript
35import { build } from 'ts-css'
35import { build } from '@ts-css/core'
3636
3737const result = await build({
3838 content: ['./src/**/*.html', './src/**/*.tsx'],
@@ -44,7 +44,7 @@ const result = await build({
4444### Style API
4545
4646```typescript
47import { css } from 'ts-css'
47import { css } from '@ts-css/core'
4848
4949const theme = css.defineVars({
5050 accent: '#0b7',
@@ -101,7 +101,7 @@ cssx build --minify
101101Create a `css.config.ts` in your project root:
102102
103103```typescript
104import type { TsCssConfig } from 'ts-css'
104import type { TsCssConfig } from '@ts-css/core'
105105
106106export default {
107107 content: ['./src/**/*.{html,tsx,stx}'],
@@ -588,7 +588,7 @@ Prefix with `!` to apply `!important`:
588588## Presets
589589
590590```typescript
591import type { Preset } from 'ts-css'
591import type { Preset } from '@ts-css/core'
592592
593593const myPreset: Preset = {
594594 name: 'my-preset',
packages/ts-css/bin/cli.tsmodified+1-1
@@ -309,7 +309,7 @@ cli
309309 process.exit(1)
310310 }
311311
312 const defaultConfig = `import type { TsCssOptions } from 'ts-css'
312 const defaultConfig = `import type { TsCssOptions } from '@ts-css/core'
313313
314314const config = {
315315 content: ['./src/**/*.{html,js,ts,jsx,tsx,stx}'],
packages/ts-css/examples/plugin/README.mdmodified+2-2
@@ -20,7 +20,7 @@ The plugin works by intercepting HTML imports in your TypeScript/JavaScript code
2020
2121### Basic Setup```typescript
2222
23import { plugin } from 'ts-css'
23import { plugin } from '@ts-css/core'
2424
2525await Bun.build({
2626 entrypoints: ['./src/index.ts'],
@@ -36,7 +36,7 @@ import html from './index.html'
3636document.body.innerHTML = html
3737```### With Custom Configuration```typescript
3838
39import { plugin } from 'ts-css'
39import { plugin } from '@ts-css/core'
4040
4141await Bun.build({
4242 entrypoints: ['./src/index.ts'],
packages/ts-css/examples/plugin/build.tsmodified+1-1
@@ -1,4 +1,4 @@
1import { plugin } from 'ts-css'
1import { plugin } from '@ts-css/core'
22
33// Build with the ts-css plugin
44// The plugin will automatically process HTML files that are imported in your TypeScript/JavaScript code
packages/ts-css/package.jsonmodified+1-1
@@ -1,5 +1,5 @@
11{
2 "name": "ts-css",
2 "name": "@ts-css/core",
33 "type": "module",
44 "version": "0.3.0",
55 "description": "A blazingly fast utility-first CSS engine with a StyleX-style typed API. Tailwind-compatible utilities, zero runtime.",
packages/ts-css/src/plugin.tsmodified+1-1
@@ -22,7 +22,7 @@ export interface TsCssPluginOptions {
2222 *
2323 * @example
2424 * ```typescript
25 * import { plugin } from 'ts-css'
25 * import { plugin } from '@ts-css/core'
2626 *
2727 * await Bun.build({
2828 * entrypoints: ['./src/index.ts'],
packages/ts-css/src/style/index.tsmodified+1-1
@@ -51,7 +51,7 @@ import { renderStyles, resetStyles } from './registry'
5151 *
5252 * @example
5353 * ```ts
54 * import { css } from 'ts-css'
54 * import { css } from '@ts-css/core'
5555 *
5656 * const styles = css.create({ card: { padding: 16 } })
5757 * <div {...css.props(styles.card)} />
packages/vscode/package.jsonmodified+1-1
@@ -1,5 +1,5 @@
11{
2 "name": "ts-css-vscode",
2 "name": "@ts-css/vscode",
33 "version": "0.3.0",
44 "description": "VS Code extension for ts-css (placeholder package)",
55 "license": "MIT",
scripts/setup-publishing.shmodified+7-7
@@ -28,11 +28,11 @@ TAG="${1:-$(git tag --list 'v*' --sort=-v:refname | head -1)}"
2828VERSION="${TAG#v}"
2929
3030echo "Repository : $REPO"
31echo "Release tag: $TAG (ts-css@$VERSION)"
31echo "Release tag: $TAG (@ts-css/core@$VERSION)"
3232echo
3333echo "Paste the npm token, then press Enter. It will not be displayed."
3434echo "It needs permission to CREATE packages (Automation, or granular with"
35echo "read/write on all packages) — 'ts-css' does not exist on npm yet."
35echo "read/write on all packages) — '@ts-css/core' does not exist on npm yet."
3636printf 'npm token: '
3737read -rs NPM_TOKEN_VALUE
3838echo
@@ -62,7 +62,7 @@ if [[ "$WHOAMI_STATUS" != "200" ]]; then
6262 echo "npm rejected the token (HTTP $WHOAMI_STATUS)." >&2
6363 echo "Create a fresh one at https://www.npmjs.com/settings/~/tokens" >&2
6464 echo "It must be an Automation token, or granular with read/write on ALL" >&2
65 echo "packages — 'ts-css' does not exist yet, so a token scoped to existing" >&2
65 echo "packages — '@ts-css/core' does not exist yet, so a token scoped to existing" >&2
6666 echo "packages cannot create it." >&2
6767 exit 1
6868fi
@@ -129,11 +129,11 @@ fi
129129# publish step has previously reported errors while the run itself succeeded,
130130# and the registry is the only authority on whether the version exists.
131131echo
132echo "Confirming ts-css@$VERSION on the registry ..."
132echo "Confirming @ts-css/core@$VERSION on the registry ..."
133133for attempt in 1 2 3 4 5 6; do
134 STATUS="$(curl -s -o /dev/null -w '%{http_code}' "https://registry.npmjs.org/ts-css/$VERSION" || echo 000)"
134 STATUS="$(curl -s -o /dev/null -w '%{http_code}' "https://registry.npmjs.org/@ts-css%2Fcore/$VERSION" || echo 000)"
135135 if [[ "$STATUS" == "200" ]]; then
136 echo " ts-css@$VERSION is live: https://www.npmjs.com/package/ts-css/v/$VERSION"
136 echo " @ts-css/core@$VERSION is live: https://www.npmjs.com/package/@ts-css/core/v/$VERSION"
137137 PUBLISHED=1
138138 break
139139 fi
@@ -143,7 +143,7 @@ done
143143
144144if [[ "${PUBLISHED:-0}" != "1" ]]; then
145145 echo >&2
146 echo "The workflow finished but ts-css@$VERSION is not on the registry." >&2
146 echo "The workflow finished but @ts-css/core@$VERSION is not on the registry." >&2
147147 echo "Inspect the publish step with:" >&2
148148 echo " gh run view $RUN_ID --log --repo $REPO | grep -A5 'Publish to npm'" >&2
149149 exit 1
tsconfig.jsonmodified+1-1
@@ -6,7 +6,7 @@
66 "module": "esnext",
77 "moduleResolution": "bundler",
88 "paths": {
9 "ts-css": ["./packages/ts-css/src/index.ts"]
9 "@ts-css/core": ["./packages/ts-css/src/index.ts"]
1010 },
1111 "resolveJsonModule": true,
1212 "types": ["bun"],