@csszyx/mcp-server 0.11.10 → 0.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/llms-full.txt +80 -40
- package/package.json +4 -4
package/llms-full.txt
CHANGED
|
@@ -263,7 +263,8 @@ compile error, so typos and legacy CSS-property names are caught by `tsc` (run
|
|
|
263
263
|
```
|
|
264
264
|
|
|
265
265
|
Arbitrary variants are allowed by pattern: `{ '@container': {…} }`, `{ 'min-[320px]': {…} }`,
|
|
266
|
-
`{ '[&>span]': {…} }`.
|
|
266
|
+
`{ '[&>span]': {…} }`. A STRING value under any variant key is a ready-made utility the
|
|
267
|
+
variant prefixes with `:` — `{ 'data-[open]': 'sr-only' }` → `data-[open]:sr-only`. **Custom breakpoints are typed from your CSS** — define one once in
|
|
267
268
|
Tailwind `@theme` and csszyx auto-generates the type:
|
|
268
269
|
|
|
269
270
|
```css
|
|
@@ -515,6 +516,34 @@ Data and state attributes.
|
|
|
515
516
|
| **Open** | `open:bg-white` | `{ open: { bg: 'white' } }` | |
|
|
516
517
|
| **Inert** | `inert:opacity-50` | `{ inert: { opacity: 50 } }` | |
|
|
517
518
|
|
|
519
|
+
## Variant String Shorthand
|
|
520
|
+
|
|
521
|
+
A **string value under a variant key** is a ready-made Tailwind utility to
|
|
522
|
+
prefix — the variant chains onto it with `:`. Use it when the utility has no
|
|
523
|
+
sz key spelling (e.g. `sr-only`) or when you already have the exact class.
|
|
524
|
+
Works for every variant form, not just the simple names.
|
|
525
|
+
|
|
526
|
+
| Concept | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
|
|
527
|
+
| :------------------------- | :------------------------------------- | :---------------------------------------------- | :----------------------------------------------- |
|
|
528
|
+
| **Known variant** | `hover:translate-x-full` | `{ hover: 'translate-x-full' }` | |
|
|
529
|
+
| **Arbitrary data variant** | `data-[ending-style]:translate-x-full` | `{ 'data-[ending-style]': 'translate-x-full' }` | |
|
|
530
|
+
| **Bare data variant** | `data-open:sr-only` | `{ 'data-open': 'sr-only' }` | Attribute presence (Tailwind v4). |
|
|
531
|
+
| **Bare ARIA state** | `aria-checked:opacity-50` | `{ 'aria-checked': 'opacity-50' }` | Built-in ARIA set only; others use `[...]`. |
|
|
532
|
+
| **Scope compound** | `group-hover:translate-x-full` | `{ 'group-hover': 'translate-x-full' }` | Also `peer-*`, `not-*` with a known state. |
|
|
533
|
+
| **Arbitrary selector** | `[&>li]:translate-x-full` | `{ '[&>li]': 'translate-x-full' }` | |
|
|
534
|
+
| **Arbitrary breakpoint** | `min-[900px]:flex` | `{ 'min-[900px]': 'flex' }` | Also `max-[...]`, `supports-[...]`, `has-[...]`. |
|
|
535
|
+
|
|
536
|
+
The string is emitted verbatim after the variant — csszyx does not validate it
|
|
537
|
+
against Tailwind's utility set, so prefer sz keys where one exists. A key that
|
|
538
|
+
is not a variant keeps its property meaning: `{ 'not-italic': true }` is still
|
|
539
|
+
the font-style utility.
|
|
540
|
+
|
|
541
|
+
Negative utility keywords under a variant place the minus on the utility:
|
|
542
|
+
`{ hover: { translateX: '-full' } }` → `hover:-translate-x-full`. Arbitrary
|
|
543
|
+
negative values keep the sign inside the bracket:
|
|
544
|
+
`{ 'data-[starting-style]': { translateX: '-100%' } }` →
|
|
545
|
+
`data-[starting-style]:translate-x-[-100%]`.
|
|
546
|
+
|
|
518
547
|
## Helper Variants (Child/Descendants)
|
|
519
548
|
|
|
520
549
|
Mapping for common descendant patterns.
|
|
@@ -726,6 +755,18 @@ value-classified into property groups: same property → later wins
|
|
|
726
755
|
is scanned (`build.scanCss`); classes written in plain CSS register via
|
|
727
756
|
`registerSzcnGroups({ colors: [...], textSizes: [...] })` from `@csszyx/runtime`.
|
|
728
757
|
|
|
758
|
+
On a production-mangled build, `szcn` also ENCODES its output: a class name a
|
|
759
|
+
component resolves at runtime as a plain string (a prop mapped to `'flex-col'`,
|
|
760
|
+
a template like `` `gap-${n}` ``) leaves the merge in mangled form, matching
|
|
761
|
+
the mangled CSS. The lookup is single-pass and idempotent — already-mangled
|
|
762
|
+
tokens, authored literals, and external (non-csszyx) class names pass through
|
|
763
|
+
unchanged — and it is an identity in dev or on unmangled builds. Code that
|
|
764
|
+
INSPECTS a className for a utility by its original spelling must decode first:
|
|
765
|
+
`szDecode(token)` (from `@csszyx/runtime`) maps a mangled token back to its
|
|
766
|
+
original name and is identity everywhere else, so
|
|
767
|
+
`className.split(/\s+/).some(t => szDecode(t).startsWith('w-'))` is safe on
|
|
768
|
+
every build shape.
|
|
769
|
+
|
|
729
770
|
## `szs` — slot map for a component's internal parts
|
|
730
771
|
|
|
731
772
|
For parts a component renders ITSELF (no consumer content), `szs` maps slot names
|
|
@@ -1133,7 +1174,7 @@ Controlling the box shadow of an element.
|
|
|
1133
1174
|
| **Inset Ring** | `box-shadow: inset (etc)` | `inset-ring`, `inset-ring-1` | `{ insetRing: 1 }` | |
|
|
1134
1175
|
| **None** | `box-shadow: 0 0 #0000` | `shadow-none` | `{ shadow: 'none' }` | |
|
|
1135
1176
|
| **Inset None** | `box-shadow: inset 0 0 #0000` | `inset-shadow-none` | `{ insetShadow: 'none' }` | |
|
|
1136
|
-
| **Ring None** | `box-shadow: 0 0 #0000` | `ring-
|
|
1177
|
+
| **Ring None** | `box-shadow: 0 0 #0000` | `ring-0` | `{ ring: 'none' }` | Tailwind spells the zero ring `ring-0`; `ring-none` styles nothing. |
|
|
1137
1178
|
| **Color** | `box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05)` | `shadow-blue-500`, `inset-shadow-blue-500`, `ring-blue-500` | `{ shadowColor: 'blue-500' }` | |
|
|
1138
1179
|
| **Color + Opacity** | `--tw-shadow-color: (value) / 50%` | `shadow-blue-500/50` | `{ shadowColor: { color: 'blue-500', op: 50 } }` | |
|
|
1139
1180
|
| **Size + Opacity** | `box-shadow: (size) / 12.5%` | `shadow-sm/12.5`, `shadow-2xl/50` | `{ shadow: 'sm/12.5' }`, `{ shadow: '2xl/50' }` | **TW 4.3.3**: fractional opacity on named sizes. |
|
|
@@ -1210,35 +1251,29 @@ Controlling the masking of an element with images, gradients, and CSS properties
|
|
|
1210
1251
|
|
|
1211
1252
|
> **Source:** [Tailwind CSS v4.1 Documentation](https://tailwindcss.com/docs/mask-image)
|
|
1212
1253
|
|
|
1254
|
+
**Migration (breaking):** the flat stop keys were removed — `maskFrom`/`maskTo`
|
|
1255
|
+
moved into their layer (`{ maskLinear: { from } }` etc.), `maskShape` moved to
|
|
1256
|
+
`{ maskRadial: { shape } }`, `maskVia` was removed with no equivalent (Tailwind
|
|
1257
|
+
has no via stop for masks), and gradient layer values on `mask`
|
|
1258
|
+
(`{ mask: 'linear-45' }`) moved to the layer keys. `mask` carries only a direct
|
|
1259
|
+
mask-image: `none`, `url(…)`, a CSS variable, or an arbitrary value.
|
|
1260
|
+
|
|
1213
1261
|
### mask-image: Gradient Masks
|
|
1214
1262
|
|
|
1215
|
-
| Concept | CSS Rule | Tailwind v4 Class
|
|
1216
|
-
| :------------- | :-------------------------------------------- |
|
|
1217
|
-
| **None** | `mask-image: none` | `mask-none`
|
|
1218
|
-
| **Linear** | `mask-image: linear-gradient(45deg, ...)` | `mask-linear-45`
|
|
1219
|
-
| **Linear Neg** | `mask-image: linear-gradient(-45deg, ...)` | `-mask-linear-45`
|
|
1220
|
-
| **Radial** | `mask-image: radial-gradient(...)` | `mask-radial`
|
|
1221
|
-
| **Conic** | `mask-image: conic-gradient(from 90deg, ...)` | `mask-conic-90`
|
|
1222
|
-
|
|
1223
|
-
### mask-image: Direction Keywords
|
|
1224
|
-
|
|
1225
|
-
| Concept | CSS Rule | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
|
|
1226
|
-
| :------------------ | :-------------------------------------------------- | :------------------ | :------------------------- | :--- |
|
|
1227
|
-
| **To Top** | `mask-image: linear-gradient(to top, ...)` | `mask-linear-to-t` | `{ mask: 'linear-to-t' }` | |
|
|
1228
|
-
| **To Top Right** | `mask-image: linear-gradient(to top right, ...)` | `mask-linear-to-tr` | `{ mask: 'linear-to-tr' }` | |
|
|
1229
|
-
| **To Right** | `mask-image: linear-gradient(to right, ...)` | `mask-linear-to-r` | `{ mask: 'linear-to-r' }` | |
|
|
1230
|
-
| **To Bottom Right** | `mask-image: linear-gradient(to bottom right, ...)` | `mask-linear-to-br` | `{ mask: 'linear-to-br' }` | |
|
|
1231
|
-
| **To Bottom** | `mask-image: linear-gradient(to bottom, ...)` | `mask-linear-to-b` | `{ mask: 'linear-to-b' }` | |
|
|
1232
|
-
| **To Bottom Left** | `mask-image: linear-gradient(to bottom left, ...)` | `mask-linear-to-bl` | `{ mask: 'linear-to-bl' }` | |
|
|
1233
|
-
| **To Left** | `mask-image: linear-gradient(to left, ...)` | `mask-linear-to-l` | `{ mask: 'linear-to-l' }` | |
|
|
1234
|
-
| **To Top Left** | `mask-image: linear-gradient(to top left, ...)` | `mask-linear-to-tl` | `{ mask: 'linear-to-tl' }` | |
|
|
1263
|
+
| Concept | CSS Rule | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
|
|
1264
|
+
| :------------- | :-------------------------------------------- | :---------------------- | :--------------------------------- | :------------------------- |
|
|
1265
|
+
| **None** | `mask-image: none` | `mask-none` | `{ mask: 'none' }` | |
|
|
1266
|
+
| **Linear** | `mask-image: linear-gradient(45deg, ...)` | `mask-linear-45` | `{ maskLinear: { angle: 45 } }` | Angle in degrees. |
|
|
1267
|
+
| **Linear Neg** | `mask-image: linear-gradient(-45deg, ...)` | `-mask-linear-45` | `{ maskLinear: { angle: -45 } }` | Negative angle prefix `-`. |
|
|
1268
|
+
| **Radial** | `mask-image: radial-gradient(...)` | `mask-radial-at-center` | `{ maskRadial: { at: 'center' } }` | |
|
|
1269
|
+
| **Conic** | `mask-image: conic-gradient(from 90deg, ...)` | `mask-conic-90` | `{ maskConic: { angle: 90 } }` | |
|
|
1235
1270
|
|
|
1236
1271
|
### mask-image: Shape Modifiers (Radial)
|
|
1237
1272
|
|
|
1238
|
-
| Concept | CSS Rule | Tailwind v4 Class | `sz` Prop (Object Syntax)
|
|
1239
|
-
| :---------- | :-------------------------------- | :---------------- |
|
|
1240
|
-
| **Circle** | `--tw-mask-radial-shape: circle` | `mask-circle` | `{
|
|
1241
|
-
| **Ellipse** | `--tw-mask-radial-shape: ellipse` | `mask-ellipse` | `{
|
|
1273
|
+
| Concept | CSS Rule | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
|
|
1274
|
+
| :---------- | :-------------------------------- | :---------------- | :------------------------------------- | :-------------------- |
|
|
1275
|
+
| **Circle** | `--tw-mask-radial-shape: circle` | `mask-circle` | `{ maskRadial: { shape: 'circle' } }` | For radial gradients. |
|
|
1276
|
+
| **Ellipse** | `--tw-mask-radial-shape: ellipse` | `mask-ellipse` | `{ maskRadial: { shape: 'ellipse' } }` | Default shape. |
|
|
1242
1277
|
|
|
1243
1278
|
### mask-image: Arbitrary Values
|
|
1244
1279
|
|
|
@@ -1431,12 +1466,12 @@ Controls how multiple masks are combined.
|
|
|
1431
1466
|
|
|
1432
1467
|
Control the color stops used in mask gradient functions.
|
|
1433
1468
|
|
|
1434
|
-
| Concept
|
|
1435
|
-
|
|
|
1436
|
-
| **
|
|
1437
|
-
| **
|
|
1438
|
-
| **
|
|
1439
|
-
| **Variable** | `mask-from
|
|
1469
|
+
| Concept | CSS Rule | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
|
|
1470
|
+
| :------------- | :------------------------------- | :---------------------------------------------- | :-------------------------------------------------------------- | :------------------------------------- |
|
|
1471
|
+
| **Layer stop** | `--tw-mask-linear-from-position` | `mask-linear-from-20%` | `{ maskLinear: { from: '20%' } }` | Also `maskRadial` / `maskConic`. |
|
|
1472
|
+
| **Side stop** | `--tw-mask-bottom-from-position` | `mask-b-from-20%` | `{ maskLinear: { b: { from: '20%' } } }` | Sides: `t r b l x y`. |
|
|
1473
|
+
| **Colour** | `--tw-mask-bottom-from-color` | `mask-b-from-red-500/30` | `{ maskLinear: { b: { from: { color: 'red-500', op: 30 } } } }` | Position and colour are separate vars. |
|
|
1474
|
+
| **Variable** | position vs colour | `mask-b-from-(--c)` / `mask-b-from-(color:--c)` | `{ from: { at: '--c' } }` / `{ from: { color: '--c' } }` | A bare var reads as a POSITION. |
|
|
1440
1475
|
|
|
1441
1476
|
|
|
1442
1477
|
# Filters
|
|
@@ -3405,10 +3440,10 @@ Controlling numeric glyphs.
|
|
|
3405
3440
|
|
|
3406
3441
|
Controlling font-feature-settings. Added in Tailwind v4.2.
|
|
3407
3442
|
|
|
3408
|
-
| Concept | CSS Rule | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note
|
|
3409
|
-
| :------------ | :-------------------------------- | :------------------------- | :----------------------------- |
|
|
3410
|
-
| **Normal** | `font-feature-settings: normal` | `font-features-normal`
|
|
3411
|
-
| **Arbitrary** | `font-feature-settings: "liga" 1` | `font-features-["liga"_1]` | `{ fontFeatures: '"liga" 1' }` |
|
|
3443
|
+
| Concept | CSS Rule | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
|
|
3444
|
+
| :------------ | :-------------------------------- | :------------------------- | :----------------------------- | :-------------------------------------------------------------------------------- |
|
|
3445
|
+
| **Normal** | `font-feature-settings: normal` | `font-features-[normal]` | `{ fontFeatures: 'normal' }` | Tailwind's `font-features-*` is functional-only; the bare keyword styles nothing. |
|
|
3446
|
+
| **Arbitrary** | `font-feature-settings: "liga" 1` | `font-features-["liga"_1]` | `{ fontFeatures: '"liga" 1' }` | |
|
|
3412
3447
|
|
|
3413
3448
|
## Font Style & Smoothing
|
|
3414
3449
|
|
|
@@ -3969,14 +4004,19 @@ no tsconfig change needed.
|
|
|
3969
4004
|
|
|
3970
4005
|
## Production Build (Mangling)
|
|
3971
4006
|
|
|
3972
|
-
|
|
4007
|
+
Class-name mangling is **opt-in** (`production.mangle` defaults to `false`) and is an
|
|
4008
|
+
obfuscation feature, not a size optimization: the runtime mangle map the page must ship
|
|
4009
|
+
costs more bytes than the shorter class names save, so enable it only when the original
|
|
4010
|
+
utility names should not be readable in the production bundle.
|
|
3973
4011
|
|
|
3974
4012
|
```js
|
|
3975
4013
|
// vite.config.ts (production)
|
|
3976
4014
|
...csszyx({ production: { mangle: true } })
|
|
3977
4015
|
```
|
|
3978
4016
|
|
|
3979
|
-
Output: `<div class="z y x" />` — the CSS `.z { padding: 1rem }` etc. is injected
|
|
4017
|
+
Output: `<div class="z y x" />` — the CSS `.z { padding: 1rem }` etc. is injected
|
|
4018
|
+
automatically. `production.mangleMapDelivery` chooses where the runtime map ships
|
|
4019
|
+
(`'both'` default, `'html'`, or `'bundle'`; vite/rollup lanes).
|
|
3980
4020
|
|
|
3981
4021
|
If an `sz`-generated utility also appears as a static string or template quasi in a
|
|
3982
4022
|
source-level `class` or `className` attribute/property (including a `clsx(...)`
|
|
@@ -3990,8 +4030,8 @@ adapter keeps class names readable (and warns when `production.mangle: true` is
|
|
|
3990
4030
|
explicit) because normal esbuild write-to-disk builds do not expose mutable final
|
|
3991
4031
|
assets; source transforms and safelist generation still run.
|
|
3992
4032
|
|
|
3993
|
-
|
|
3994
|
-
inspect the emitted CSS. To check what a single `sz` object
|
|
4033
|
+
With mangling left at its default (off), a build keeps readable class names — the
|
|
4034
|
+
supported way to inspect the emitted CSS. To check what a single `sz` object
|
|
3995
4035
|
compiles to without a build, run `csszyx explain "{ p: 4, bg: 'blue-500' }"`.
|
|
3996
4036
|
|
|
3997
4037
|
### AST budget guard
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@csszyx/mcp-server",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.12.0",
|
|
4
4
|
"description": "Model Context Protocol (MCP) server for csszyx — enables AI agents to understand and generate sz props",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -30,9 +30,9 @@
|
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@modelcontextprotocol/sdk": "^1.29.0",
|
|
32
32
|
"zod": "^4.4.3",
|
|
33
|
-
"@csszyx/cli": "0.
|
|
34
|
-
"@csszyx/compiler": "0.
|
|
35
|
-
"@csszyx/unplugin": "0.
|
|
33
|
+
"@csszyx/cli": "0.12.0",
|
|
34
|
+
"@csszyx/compiler": "0.12.0",
|
|
35
|
+
"@csszyx/unplugin": "0.12.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@types/node": "^22.20.1",
|