@csszyx/mcp-server 0.11.9 → 0.11.11
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/dist/index.mjs +4 -4
- package/llms-full.txt +97 -77
- package/package.json +10 -10
package/dist/index.mjs
CHANGED
|
@@ -296,7 +296,7 @@ function readResource(uri) {
|
|
|
296
296
|
}
|
|
297
297
|
|
|
298
298
|
const batchSchema = z.object({
|
|
299
|
-
items: z.array(z.record(z.any())).describe(
|
|
299
|
+
items: z.array(z.record(z.string(), z.any())).describe(
|
|
300
300
|
"Array of sz prop objects to expand. Example: [{ p: 4 }, { m: 2, bg: 'red-500' }]"
|
|
301
301
|
)
|
|
302
302
|
});
|
|
@@ -334,7 +334,7 @@ function handleBatch(input) {
|
|
|
334
334
|
}
|
|
335
335
|
|
|
336
336
|
const expandSchema = z.object({
|
|
337
|
-
sz: z.record(z.any()).describe(
|
|
337
|
+
sz: z.record(z.string(), z.any()).describe(
|
|
338
338
|
"The sz prop object to expand. Example: { p: 4, bg: 'blue-500', hover: { bg: 'blue-700' } }"
|
|
339
339
|
)
|
|
340
340
|
});
|
|
@@ -486,7 +486,7 @@ const migrateSchema = z.object({
|
|
|
486
486
|
code: z.string().describe(
|
|
487
487
|
`JSX/TSX code snippet containing className attributes to transform. Example: '<div className="p-4 bg-blue-500" />'`
|
|
488
488
|
),
|
|
489
|
-
customMap: z.record(z.unknown()).optional().describe(
|
|
489
|
+
customMap: z.record(z.string(), z.unknown()).optional().describe(
|
|
490
490
|
'Parsed .csszyx-todo.json map. Values: sz object, Tailwind string, "sz:keep", "sz:remove", "sz:todo", null, or false.'
|
|
491
491
|
),
|
|
492
492
|
injectTodos: z.boolean().optional().describe(
|
|
@@ -575,7 +575,7 @@ function handleTheme(input) {
|
|
|
575
575
|
}
|
|
576
576
|
|
|
577
577
|
const validateSchema = z.object({
|
|
578
|
-
sz: z.record(z.any()).describe('The sz prop object to validate. Example: { padding: 4, bg: "blue-500" }')
|
|
578
|
+
sz: z.record(z.string(), z.any()).describe('The sz prop object to validate. Example: { padding: 4, bg: "blue-500" }')
|
|
579
579
|
});
|
|
580
580
|
function validateEntry(key, value) {
|
|
581
581
|
const suggestion = SUGGESTION_MAP[key];
|
package/llms-full.txt
CHANGED
|
@@ -726,6 +726,18 @@ value-classified into property groups: same property → later wins
|
|
|
726
726
|
is scanned (`build.scanCss`); classes written in plain CSS register via
|
|
727
727
|
`registerSzcnGroups({ colors: [...], textSizes: [...] })` from `@csszyx/runtime`.
|
|
728
728
|
|
|
729
|
+
On a production-mangled build, `szcn` also ENCODES its output: a class name a
|
|
730
|
+
component resolves at runtime as a plain string (a prop mapped to `'flex-col'`,
|
|
731
|
+
a template like `` `gap-${n}` ``) leaves the merge in mangled form, matching
|
|
732
|
+
the mangled CSS. The lookup is single-pass and idempotent — already-mangled
|
|
733
|
+
tokens, authored literals, and external (non-csszyx) class names pass through
|
|
734
|
+
unchanged — and it is an identity in dev or on unmangled builds. Code that
|
|
735
|
+
INSPECTS a className for a utility by its original spelling must decode first:
|
|
736
|
+
`szDecode(token)` (from `@csszyx/runtime`) maps a mangled token back to its
|
|
737
|
+
original name and is identity everywhere else, so
|
|
738
|
+
`className.split(/\s+/).some(t => szDecode(t).startsWith('w-'))` is safe on
|
|
739
|
+
every build shape.
|
|
740
|
+
|
|
729
741
|
## `szs` — slot map for a component's internal parts
|
|
730
742
|
|
|
731
743
|
For parts a component renders ITSELF (no consumer content), `szs` maps slot names
|
|
@@ -1125,37 +1137,41 @@ Controlling effects like shadows, opacity, and blends.
|
|
|
1125
1137
|
|
|
1126
1138
|
Controlling the box shadow of an element.
|
|
1127
1139
|
|
|
1128
|
-
| Concept | CSS Rule | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note
|
|
1129
|
-
| :--------------------- | :------------------------------------------ | :---------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
1130
|
-
| **Shadow** | `box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05)` | `shadow-2xs`, `shadow-xs`, `shadow-sm`, `shadow`, `shadow-md`, `shadow-lg`, `shadow-xl`, `shadow-2xl` | `{ shadow: '2xs' }`, `{ shadow: 'xs' }`, `{ shadow: 'sm' }`, `{ shadow: 'md' }`, `{ shadow: 'lg' }`, `{ shadow: 'xl' }`, `{ shadow: '2xl' }` | **v4.1**: `2xs`, `xs`.
|
|
1131
|
-
| **Inset Shadow** | `box-shadow: inset (etc)` | `inset-shadow-2xs`, `inset-shadow-xs`, `inset-shadow-sm`, `inset-shadow-md`, `inset-shadow-lg`, `inset-shadow-xl` | `{ insetShadow: '2xs' }` | **New in v4**: Distinct from `shadow-inner`.
|
|
1132
|
-
| **Ring** | `box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05)` | `ring`, `ring-1` | `{ ring: 1 }` |
|
|
1133
|
-
| **Inset Ring** | `box-shadow: inset (etc)` | `inset-ring`, `inset-ring-1` | `{ insetRing: 1 }` |
|
|
1134
|
-
| **None** | `box-shadow: 0 0 #0000` | `shadow-none` | `{ shadow: 'none' }` |
|
|
1135
|
-
| **Inset None** | `box-shadow: inset 0 0 #0000` | `inset-shadow-none` | `{ insetShadow: 'none' }` |
|
|
1136
|
-
| **Ring None** | `box-shadow: 0 0 #0000` | `ring-none` | `{ ring: 'none' }` |
|
|
1137
|
-
| **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
|
-
| **Color + Opacity** | `--tw-shadow-color: (value) / 50%` | `shadow-blue-500/50` | `{ shadowColor: { color: 'blue-500', op: 50 } }` |
|
|
1139
|
-
| **
|
|
1140
|
-
| **
|
|
1141
|
-
| **Inset Sh
|
|
1142
|
-
| **Inset Sh
|
|
1143
|
-
| **Inset Sh
|
|
1144
|
-
| **
|
|
1145
|
-
| **
|
|
1146
|
-
| **
|
|
1147
|
-
| **Var**
|
|
1140
|
+
| Concept | CSS Rule | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
|
|
1141
|
+
| :--------------------- | :------------------------------------------ | :---------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------- |
|
|
1142
|
+
| **Shadow** | `box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05)` | `shadow-2xs`, `shadow-xs`, `shadow-sm`, `shadow`, `shadow-md`, `shadow-lg`, `shadow-xl`, `shadow-2xl` | `{ shadow: '2xs' }`, `{ shadow: 'xs' }`, `{ shadow: 'sm' }`, `{ shadow: 'md' }`, `{ shadow: 'lg' }`, `{ shadow: 'xl' }`, `{ shadow: '2xl' }` | **v4.1**: `2xs`, `xs`. |
|
|
1143
|
+
| **Inset Shadow** | `box-shadow: inset (etc)` | `inset-shadow-2xs`, `inset-shadow-xs`, `inset-shadow-sm`, `inset-shadow-md`, `inset-shadow-lg`, `inset-shadow-xl` | `{ insetShadow: '2xs' }` | **New in v4**: Distinct from `shadow-inner`. |
|
|
1144
|
+
| **Ring** | `box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05)` | `ring`, `ring-1` | `{ ring: 1 }` | |
|
|
1145
|
+
| **Inset Ring** | `box-shadow: inset (etc)` | `inset-ring`, `inset-ring-1` | `{ insetRing: 1 }` | |
|
|
1146
|
+
| **None** | `box-shadow: 0 0 #0000` | `shadow-none` | `{ shadow: 'none' }` | |
|
|
1147
|
+
| **Inset None** | `box-shadow: inset 0 0 #0000` | `inset-shadow-none` | `{ insetShadow: 'none' }` | |
|
|
1148
|
+
| **Ring None** | `box-shadow: 0 0 #0000` | `ring-none` | `{ ring: 'none' }` | |
|
|
1149
|
+
| **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' }` | |
|
|
1150
|
+
| **Color + Opacity** | `--tw-shadow-color: (value) / 50%` | `shadow-blue-500/50` | `{ shadowColor: { color: 'blue-500', op: 50 } }` | |
|
|
1151
|
+
| **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. |
|
|
1152
|
+
| **CSS Var + Opacity** | `--tw-shadow-color: var(--c) / 50%` | `shadow-(color:--c)/50` | `{ shadowColor: { color: '--c', op: 50 } }` | `color:` hint — bare `shadow-(--c)` would set the shadow value, not its color. |
|
|
1153
|
+
| **Inset Sh Color** | `--tw-inset-shadow-color: (value)` | `inset-shadow-blue-500` | `{ insetShadowColor: 'blue-500' }` | Separate key for inset shadow color. |
|
|
1154
|
+
| **Inset Sh Var** | `--tw-inset-shadow-color: var(--c)` | `inset-shadow-(color:--c)` | `{ insetShadowColor: '--c' }` | CSS variable with `color:` type hint. |
|
|
1155
|
+
| **Inset Sh + Opacity** | `--tw-inset-shadow-color: (value) / 30%` | `inset-shadow-black/30` | `{ insetShadowColor: { color: 'black', op: 30 } }` | |
|
|
1156
|
+
| **Inset Sh Var + Op** | `--tw-inset-shadow-color: var(--c) / 30%` | `inset-shadow-(color:--c)/30` | `{ insetShadowColor: { color: '--c', op: 30 } }` | `color:` hint, same as the string form above. |
|
|
1157
|
+
| **Inset Sh Size + Op** | `box-shadow: inset (size) / 12.5%` | `inset-shadow-sm/12.5` | `{ insetShadow: 'sm/12.5' }` | **TW 4.3.3**: fractional opacity on named sizes. |
|
|
1158
|
+
| **Inherit/Custom** | `box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05)` | `shadow-inherit`, `shadow-current`, `shadow-black`, `shadow-white`, `shadow-transparent` | `{ shadowColor: 'inherit' }` etc. | |
|
|
1159
|
+
| **Custom Var** | `--tw-shadow-color: var(--value)` | `shadow-(color:--my-color)` | `{ shadowColor: '--my-color' }` | **New in v4**: Sets variable explicitly. |
|
|
1160
|
+
| **Arbitrary** | `box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05)` | `shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]` | `{ shadow: '0 35px 60px -15px rgba(0,0,0,0.3)' }` | |
|
|
1161
|
+
| **Var** | `box-shadow: var(--s)` | `shadow-(--s)` | `{ shadow: '--s' }` | **Sugar**: Auto-detects `--`. |
|
|
1148
1162
|
|
|
1149
1163
|
## Text Shadow
|
|
1150
1164
|
|
|
1151
1165
|
Controlling the shadow of a text element.
|
|
1152
1166
|
|
|
1153
|
-
| Concept
|
|
1154
|
-
|
|
|
1155
|
-
| **Shadow**
|
|
1156
|
-
| **
|
|
1157
|
-
| **
|
|
1158
|
-
| **
|
|
1167
|
+
| Concept | CSS Rule | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
|
|
1168
|
+
| :----------------- | :--------------------------------- | :------------------------------------------------------------------ | :----------------------------------------------------- | :----------------------------------------------- |
|
|
1169
|
+
| **Shadow** | `text-shadow: (etc)` | `text-shadow`, `text-shadow-sm`, `text-shadow-md`, `text-shadow-lg` | `{ textShadow: 'sm' }` | **New in v4**. |
|
|
1170
|
+
| **Size + Opacity** | `text-shadow: (size) / 12.5%` | `text-shadow-sm/12.5` | `{ textShadow: 'sm/12.5' }` | **TW 4.3.3**: fractional opacity on named sizes. |
|
|
1171
|
+
| **None** | `text-shadow: none` | `text-shadow-none` | `{ textShadow: 'none' }` | |
|
|
1172
|
+
| **Color** | `text-shadow: (etc)` | `text-shadow-blue-500` | `{ textShadowColor: 'blue-500' }` | |
|
|
1173
|
+
| **Color Var** | `--tw-text-shadow-color: var(--c)` | `text-shadow-(color:--c)` | `{ textShadowColor: '--c' }` | CSS variable with `color:` type hint. |
|
|
1174
|
+
| **Arbitrary** | `text-shadow: (etc)` | `text-shadow-[2px_2px_4px_var(--tw-shadow-color)]` | `{ textShadow: '2px 2px 4px var(--tw-shadow-color)' }` | |
|
|
1159
1175
|
|
|
1160
1176
|
## Opacity
|
|
1161
1177
|
|
|
@@ -1451,44 +1467,45 @@ Utilities for controlling the overall filter property.
|
|
|
1451
1467
|
| **Backdrop None** | `backdrop-filter: none;` | `backdrop-filter-none` | `{ backdropFilter: 'none' }` | |
|
|
1452
1468
|
| **Defaults** | `filter: blur(8px)` | `blur` | `{ blur: true }` | **Boolean**: Sets default effects. |
|
|
1453
1469
|
|
|
1454
|
-
| Filter Item | CSS Rule | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note
|
|
1455
|
-
| :------------------------ | :---------------------------------------------------- | :--------------------------------------------------------------------------- | :----------------------------------------------------------- |
|
|
1456
|
-
| **Blur Scale** | `filter: blur(var(--blur-xs))` to `3xl` | `blur-xs` to `blur-3xl` | `{ blur: 'xs' }` to `{ blur: '3xl' }` |
|
|
1457
|
-
| **Blur None** | `filter: blur(0);` | `blur-none` | `{ blur: 'none' }` |
|
|
1458
|
-
| **Blur Var** | `filter: blur(var(--c))` | `blur-(--c)` | `{ blur: '--c' }` |
|
|
1459
|
-
| **Blur Arb** | `filter: var(--c)` | `blur-[4px]` | `{ blur: '4px' }` |
|
|
1460
|
-
| **Brightness** | `filter: brightness(0%)` to `200%` | `brightness-0` to `brightness-200` | `{ brightness: 0 }` to `{ brightness: 200 }` |
|
|
1461
|
-
| **Brightness Var** | `filter: brightness(var(--c))` | `brightness-(--c)` | `{ brightness: '--c' }` |
|
|
1462
|
-
| **Brightness Arb** | `filter: brightness(1.25)` | `brightness-[1.25]` | `{ brightness: '1.25' }` |
|
|
1463
|
-
| **Contrast** | `filter: contrast(0%)` to `200%` | `contrast-0` to `contrast-200` | `{ contrast: 0 }` to `{ contrast: 200 }` |
|
|
1464
|
-
| **Contrast Var** | `filter: contrast(var(--c))` | `contrast-(--c)` | `{ contrast: '--c' }` |
|
|
1465
|
-
| **Contrast Arb** | `filter: contrast(1.5)` | `contrast-[1.5]` | `{ contrast: '1.5' }` |
|
|
1466
|
-
| **Drop Shadow** | `filter: drop-shadow(var(--drop-shadow-xs))` to `2xl` | `drop-shadow-xs` to `drop-shadow-2xl` | `{ dropShadow: 'xs' }` to `{ dropShadow: '2xl' }` |
|
|
1467
|
-
| **Drop Shadow None** | `filter: drop-shadow(0 0 #0000)` | `drop-shadow-none` | `{ dropShadow: 'none' }` |
|
|
1468
|
-
| **Drop Shadow
|
|
1469
|
-
| **Drop Shadow
|
|
1470
|
-
| **Drop Shadow
|
|
1471
|
-
| **Drop Shadow
|
|
1472
|
-
| **Drop Shadow
|
|
1473
|
-
| **
|
|
1474
|
-
| **Grayscale
|
|
1475
|
-
| **Grayscale
|
|
1476
|
-
| **Grayscale
|
|
1477
|
-
| **
|
|
1478
|
-
| **Hue Rotate
|
|
1479
|
-
| **Hue Rotate
|
|
1480
|
-
| **Hue Rotate
|
|
1481
|
-
| **
|
|
1482
|
-
| **Invert
|
|
1483
|
-
| **Invert
|
|
1484
|
-
| **Invert
|
|
1485
|
-
| **
|
|
1486
|
-
| **Saturate
|
|
1487
|
-
| **Saturate
|
|
1488
|
-
| **
|
|
1489
|
-
| **Sepia
|
|
1490
|
-
| **Sepia
|
|
1491
|
-
| **Sepia
|
|
1470
|
+
| Filter Item | CSS Rule | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
|
|
1471
|
+
| :------------------------ | :---------------------------------------------------- | :--------------------------------------------------------------------------- | :----------------------------------------------------------- | :----------------------------------------------- |
|
|
1472
|
+
| **Blur Scale** | `filter: blur(var(--blur-xs))` to `3xl` | `blur-xs` to `blur-3xl` | `{ blur: 'xs' }` to `{ blur: '3xl' }` | |
|
|
1473
|
+
| **Blur None** | `filter: blur(0);` | `blur-none` | `{ blur: 'none' }` | |
|
|
1474
|
+
| **Blur Var** | `filter: blur(var(--c))` | `blur-(--c)` | `{ blur: '--c' }` | |
|
|
1475
|
+
| **Blur Arb** | `filter: var(--c)` | `blur-[4px]` | `{ blur: '4px' }` | |
|
|
1476
|
+
| **Brightness** | `filter: brightness(0%)` to `200%` | `brightness-0` to `brightness-200` | `{ brightness: 0 }` to `{ brightness: 200 }` | |
|
|
1477
|
+
| **Brightness Var** | `filter: brightness(var(--c))` | `brightness-(--c)` | `{ brightness: '--c' }` | |
|
|
1478
|
+
| **Brightness Arb** | `filter: brightness(1.25)` | `brightness-[1.25]` | `{ brightness: '1.25' }` | |
|
|
1479
|
+
| **Contrast** | `filter: contrast(0%)` to `200%` | `contrast-0` to `contrast-200` | `{ contrast: 0 }` to `{ contrast: 200 }` | |
|
|
1480
|
+
| **Contrast Var** | `filter: contrast(var(--c))` | `contrast-(--c)` | `{ contrast: '--c' }` | |
|
|
1481
|
+
| **Contrast Arb** | `filter: contrast(1.5)` | `contrast-[1.5]` | `{ contrast: '1.5' }` | |
|
|
1482
|
+
| **Drop Shadow** | `filter: drop-shadow(var(--drop-shadow-xs))` to `2xl` | `drop-shadow-xs` to `drop-shadow-2xl` | `{ dropShadow: 'xs' }` to `{ dropShadow: '2xl' }` | |
|
|
1483
|
+
| **Drop Shadow None** | `filter: drop-shadow(0 0 #0000)` | `drop-shadow-none` | `{ dropShadow: 'none' }` | |
|
|
1484
|
+
| **Drop Shadow Size + Op** | `filter: drop-shadow((size) / 12.5%)` | `drop-shadow-sm/12.5` | `{ dropShadow: 'sm/12.5' }` | **TW 4.3.3**: fractional opacity on named sizes. |
|
|
1485
|
+
| **Drop Shadow Var** | `filter: drop-shadow(var(--c))` | `drop-shadow-(--c)` | `{ dropShadow: '--c' }` | |
|
|
1486
|
+
| **Drop Shadow Arb** | `filter: drop-shadow(0 25px 25px rgb(0 0 0/0.15))` | `drop-shadow-[0_25px_25px_rgb(0_0_0/0.15)]` | `{ dropShadow: '0 25px 25px rgb(0 0 0/0.15)' }` | Spaces auto-encoded to `_`. |
|
|
1487
|
+
| **Drop Shadow + Variant** | (hover state) | `hover:drop-shadow-[0_0_15px_rgba(45,213,151,0.5)]` | `{ hover: { dropShadow: '0 0 15px rgba(45,213,151,0.5)' } }` | Works in any variant context. |
|
|
1488
|
+
| **Drop Shadow Color** | `--tw-drop-shadow-color: (etc)` | `drop-shadow-slate-500`, `drop-shadow-red-500`, `drop-shadow-blue-500`, etc. | `{ dropShadowColor: 'red-500' }` | Full palette support. |
|
|
1489
|
+
| **Drop Shadow Var Col** | `--tw-drop-shadow-color: var(--c)` | `drop-shadow-(color:--c)` | `{ dropShadowColor: '--c' }` | **New in v4**. |
|
|
1490
|
+
| **Grayscale** | `filter: grayscale(100%)` | `grayscale` | `{ grayscale: true }` | |
|
|
1491
|
+
| **Grayscale Scale** | `filter: grayscale(0%)` to `100%` | `grayscale-0` to `grayscale-100` | `{ grayscale: 0 }` to `{ grayscale: 100 }` | |
|
|
1492
|
+
| **Grayscale Var** | `filter: grayscale(var(--c))` | `grayscale-(--c)` | `{ grayscale: '--c' }` | |
|
|
1493
|
+
| **Grayscale Arb** | `filter: grayscale(50%)` | `grayscale-[50%]` | `{ grayscale: '50%' }` | |
|
|
1494
|
+
| **Hue Rotate** | `filter: hue-rotate(0deg)` to `180deg` | `hue-rotate-0` to `hue-rotate-180` | `{ hueRotate: 0 }` to `{ hueRotate: 180 }` | |
|
|
1495
|
+
| **Hue Rotate Neg** | `filter: hue-rotate(calc(ndeg * -1))` | `-hue-rotate-15` | `{ hueRotate: -15 }` | |
|
|
1496
|
+
| **Hue Rotate Var** | `filter: hue-rotate(var(--c))` | `hue-rotate-(--c)` | `{ hueRotate: '--c' }` | |
|
|
1497
|
+
| **Hue Rotate Arb** | `filter: hue-rotate(90deg)` | `hue-rotate-[90deg]` | `{ hueRotate: '90deg' }` | |
|
|
1498
|
+
| **Invert** | `filter: invert(100%)` | `invert` | `{ invert: true }` | |
|
|
1499
|
+
| **Invert Scale** | `filter: invert(0%)` to `100%` | `invert-0` to `invert-100` | `{ invert: 0 }` to `{ invert: 100 }` | |
|
|
1500
|
+
| **Invert Var** | `filter: invert(var(--c))` | `invert-(--c)` | `{ invert: '--c' }` | |
|
|
1501
|
+
| **Invert Arb** | `filter: invert(25%)` | `invert-[25%]` | `{ invert: '25%' }` | |
|
|
1502
|
+
| **Saturate** | `filter: saturate(0%)` to `200%` | `saturate-0` to `saturate-200` | `{ saturate: 0 }` to `{ saturate: 200 }` | |
|
|
1503
|
+
| **Saturate Var** | `filter: saturate(var(--c))` | `saturate-(--c)` | `{ saturate: '--c' }` | |
|
|
1504
|
+
| **Saturate Arb** | `filter: saturate(1.5)` | `saturate-[1.5]` | `{ saturate: '1.5' }` | |
|
|
1505
|
+
| **Sepia** | `filter: sepia(100%)` | `sepia` | `{ sepia: true }` | |
|
|
1506
|
+
| **Sepia Scale** | `filter: sepia(0%)` to `100%` | `sepia-0` to `sepia-100` | `{ sepia: 0 }` to `{ sepia: 100 }` | |
|
|
1507
|
+
| **Sepia Var** | `filter: sepia(var(--c))` | `sepia-(--c)` | `{ sepia: '--c' }` | |
|
|
1508
|
+
| **Sepia Arb** | `filter: sepia(50%)` | `sepia-[50%]` | `{ sepia: '50%' }` | |
|
|
1492
1509
|
|
|
1493
1510
|
## Backdrop Filter
|
|
1494
1511
|
|
|
@@ -3435,24 +3452,27 @@ Controlling the tracking (letter spacing).
|
|
|
3435
3452
|
|
|
3436
3453
|
Controlling the leading (line height).
|
|
3437
3454
|
|
|
3438
|
-
| Concept
|
|
3439
|
-
|
|
|
3440
|
-
| **Keywords**
|
|
3441
|
-
| **Fixed**
|
|
3442
|
-
| **
|
|
3443
|
-
| **
|
|
3455
|
+
| Concept | CSS Rule | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
|
|
3456
|
+
| :----------------- | :------------------------- | :------------------------------------------------------------------------------------------------------ | :------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
3457
|
+
| **Keywords** | `line-height: 1.5` | `leading-none`, `leading-tight`, `leading-snug`, `leading-normal`, `leading-relaxed`, `leading-loose` | `{ leading: 'none' }` etc. | |
|
|
3458
|
+
| **Fixed** | `line-height: .75rem`(etc) | `leading-3`, `leading-4`, `leading-5`, `leading-6`, `leading-7`, `leading-8`, `leading-9`, `leading-10` | `{ leading: 3 }` etc. | **Number = spacing scale** (length, quarter steps: `1.5` → `0.375rem`). |
|
|
3459
|
+
| **Unitless Ratio** | `line-height: 1.5` | `leading-[1.5]` | `{ leading: '1.5' }` | **Numeric STRING = ratio** (× font-size), auto-bracketed. A non-quarter-step number (`1.4`) also brackets — Tailwind has no bare class for it. |
|
|
3460
|
+
| **Arbitrary** | `line-height: 3rem` | `leading-[3rem]` | `{ leading: '3rem' }` | |
|
|
3461
|
+
| **CSS Variable** | `line-height: var(--l)` | `leading-(--l)` | `{ leading: '--l' }` | **Sugar**: Auto-detects `--`. |
|
|
3444
3462
|
|
|
3445
3463
|
### Text/Leading Shorthand
|
|
3446
3464
|
|
|
3447
3465
|
When both `text` (font-size) and `leading` (line-height) are specified together, they are automatically merged into a single Tailwind class using the `/` shorthand syntax.
|
|
3448
3466
|
|
|
3449
|
-
| Input | Output | Note
|
|
3450
|
-
| :---------------------------------- | :----------------- |
|
|
3451
|
-
| `{ text: 'lg', leading: 7 }` | `text-lg/7` | Numeric leading merged with text size.
|
|
3452
|
-
| `{ text: 'sm', leading: 'tight' }` | `text-sm/tight` | Keyword leading merged with text size.
|
|
3453
|
-
| `{ text: '
|
|
3454
|
-
| `{ text: '
|
|
3455
|
-
| `{ leading:
|
|
3467
|
+
| Input | Output | Note |
|
|
3468
|
+
| :---------------------------------- | :----------------- | :---------------------------------------------------------------------------------------- |
|
|
3469
|
+
| `{ text: 'lg', leading: 7 }` | `text-lg/7` | Numeric leading merged with text size. |
|
|
3470
|
+
| `{ text: 'sm', leading: 'tight' }` | `text-sm/tight` | Keyword leading merged with text size. |
|
|
3471
|
+
| `{ text: 'sm', leading: '1.5' }` | `text-sm/[1.5]` | Numeric string = unitless ratio (1.5 × font-size). |
|
|
3472
|
+
| `{ text: 'sm', leading: 1.5 }` | `text-sm/1.5` | Number = spacing scale (`calc(var(--spacing) * 1.5)` = 0.375rem — a length, not a ratio). |
|
|
3473
|
+
| `{ text: 'xl', leading: '1.5rem' }` | `text-xl/[1.5rem]` | Arbitrary leading merged with text size. |
|
|
3474
|
+
| `{ text: 'lg' }` | `text-lg` | No merge — `leading` not present. |
|
|
3475
|
+
| `{ leading: 7 }` | `leading-7` | No merge — `text` not present. |
|
|
3456
3476
|
|
|
3457
3477
|
## Text Align
|
|
3458
3478
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@csszyx/mcp-server",
|
|
3
|
-
"version": "0.11.
|
|
3
|
+
"version": "0.11.11",
|
|
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",
|
|
@@ -25,21 +25,21 @@
|
|
|
25
25
|
"llms-full.txt"
|
|
26
26
|
],
|
|
27
27
|
"engines": {
|
|
28
|
-
"node": "
|
|
28
|
+
"node": "^22.18.0 || >=24.11.0"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@modelcontextprotocol/sdk": "^1.29.0",
|
|
32
|
-
"zod": "^
|
|
33
|
-
"@csszyx/
|
|
34
|
-
"@csszyx/
|
|
35
|
-
"@csszyx/
|
|
32
|
+
"zod": "^4.4.3",
|
|
33
|
+
"@csszyx/cli": "0.11.11",
|
|
34
|
+
"@csszyx/unplugin": "0.11.11",
|
|
35
|
+
"@csszyx/compiler": "0.11.11"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
+
"@types/node": "^22.20.1",
|
|
39
|
+
"tsx": "^4.23.1",
|
|
38
40
|
"typescript": "^6.0.3",
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"vitest": "^4.1.9",
|
|
42
|
-
"unbuild": "^3.6.1"
|
|
41
|
+
"unbuild": "^3.6.1",
|
|
42
|
+
"vitest": "^4.1.10"
|
|
43
43
|
},
|
|
44
44
|
"keywords": [
|
|
45
45
|
"csszyx",
|