@csszyx/mcp-server 0.11.8 → 0.11.10

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.
Files changed (3) hide show
  1. package/dist/index.mjs +4 -4
  2. package/llms-full.txt +85 -77
  3. 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
@@ -1125,37 +1125,41 @@ Controlling effects like shadows, opacity, and blends.
1125
1125
 
1126
1126
  Controlling the box shadow of an element.
1127
1127
 
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
- | **CSS Var + Opacity** | `--tw-shadow-color: var(--c) / 50%` | `shadow-(--c)/50` | `{ shadowColor: { color: '--c', op: 50 } }` | CSS variables are auto-wrapped in `(...)`. |
1140
- | **Inset Sh Color** | `--tw-inset-shadow-color: (value)` | `inset-shadow-blue-500` | `{ insetShadowColor: 'blue-500' }` | Separate key for inset shadow color. |
1141
- | **Inset Sh Var** | `--tw-inset-shadow-color: var(--c)` | `inset-shadow-(color:--c)` | `{ insetShadowColor: '--c' }` | CSS variable with `color:` type hint. |
1142
- | **Inset Sh + Opacity** | `--tw-inset-shadow-color: (value) / 30%` | `inset-shadow-black/30` | `{ insetShadowColor: { color: 'black', op: 30 } }` | |
1143
- | **Inset Sh Var + Op** | `--tw-inset-shadow-color: var(--c) / 30%` | `inset-shadow-(--c)/30` | `{ insetShadowColor: { color: '--c', op: 30 } }` | CSS variables are auto-wrapped in `(...)`. |
1144
- | **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. | |
1145
- | **Custom Var** | `--tw-shadow-color: var(--value)` | `shadow-(color:--my-color)` | `{ shadowColor: '--my-color' }` | **New in v4**: Sets variable explicitly. |
1146
- | **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)' }` | |
1147
- | **Var** | `box-shadow: var(--s)` | `shadow-(--s)` | `{ shadow: '--s' }` | **Sugar**: Auto-detects `--`. |
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
+ | **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. |
1140
+ | **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. |
1141
+ | **Inset Sh Color** | `--tw-inset-shadow-color: (value)` | `inset-shadow-blue-500` | `{ insetShadowColor: 'blue-500' }` | Separate key for inset shadow color. |
1142
+ | **Inset Sh Var** | `--tw-inset-shadow-color: var(--c)` | `inset-shadow-(color:--c)` | `{ insetShadowColor: '--c' }` | CSS variable with `color:` type hint. |
1143
+ | **Inset Sh + Opacity** | `--tw-inset-shadow-color: (value) / 30%` | `inset-shadow-black/30` | `{ insetShadowColor: { color: 'black', op: 30 } }` | |
1144
+ | **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. |
1145
+ | **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. |
1146
+ | **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. | |
1147
+ | **Custom Var** | `--tw-shadow-color: var(--value)` | `shadow-(color:--my-color)` | `{ shadowColor: '--my-color' }` | **New in v4**: Sets variable explicitly. |
1148
+ | **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)' }` | |
1149
+ | **Var** | `box-shadow: var(--s)` | `shadow-(--s)` | `{ shadow: '--s' }` | **Sugar**: Auto-detects `--`. |
1148
1150
 
1149
1151
  ## Text Shadow
1150
1152
 
1151
1153
  Controlling the shadow of a text element.
1152
1154
 
1153
- | Concept | CSS Rule | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
1154
- | :------------ | :------------------- | :------------------------------------------------------------------ | :----------------------------------------------------- | :------------- |
1155
- | **Shadow** | `text-shadow: (etc)` | `text-shadow`, `text-shadow-sm`, `text-shadow-md`, `text-shadow-lg` | `{ textShadow: 'sm' }` | **New in v4**. |
1156
- | **None** | `text-shadow: none` | `text-shadow-none` | `{ textShadow: 'none' }` | |
1157
- | **Color** | `text-shadow: (etc)` | `text-shadow-blue-500` | `{ textShadowColor: 'blue-500' }` | |
1158
- | **Arbitrary** | `text-shadow: (etc)` | `text-shadow-[2px_2px_4px_var(--tw-shadow-color)]` | `{ textShadow: '2px 2px 4px var(--tw-shadow-color)' }` | |
1155
+ | Concept | CSS Rule | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
1156
+ | :----------------- | :--------------------------------- | :------------------------------------------------------------------ | :----------------------------------------------------- | :----------------------------------------------- |
1157
+ | **Shadow** | `text-shadow: (etc)` | `text-shadow`, `text-shadow-sm`, `text-shadow-md`, `text-shadow-lg` | `{ textShadow: 'sm' }` | **New in v4**. |
1158
+ | **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. |
1159
+ | **None** | `text-shadow: none` | `text-shadow-none` | `{ textShadow: 'none' }` | |
1160
+ | **Color** | `text-shadow: (etc)` | `text-shadow-blue-500` | `{ textShadowColor: 'blue-500' }` | |
1161
+ | **Color Var** | `--tw-text-shadow-color: var(--c)` | `text-shadow-(color:--c)` | `{ textShadowColor: '--c' }` | CSS variable with `color:` type hint. |
1162
+ | **Arbitrary** | `text-shadow: (etc)` | `text-shadow-[2px_2px_4px_var(--tw-shadow-color)]` | `{ textShadow: '2px 2px 4px var(--tw-shadow-color)' }` | |
1159
1163
 
1160
1164
  ## Opacity
1161
1165
 
@@ -1451,44 +1455,45 @@ Utilities for controlling the overall filter property.
1451
1455
  | **Backdrop None** | `backdrop-filter: none;` | `backdrop-filter-none` | `{ backdropFilter: 'none' }` | |
1452
1456
  | **Defaults** | `filter: blur(8px)` | `blur` | `{ blur: true }` | **Boolean**: Sets default effects. |
1453
1457
 
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 Var** | `filter: drop-shadow(var(--c))` | `drop-shadow-(--c)` | `{ dropShadow: '--c' }` | |
1469
- | **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 `_`. |
1470
- | **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. |
1471
- | **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. |
1472
- | **Drop Shadow Var Col** | `--tw-drop-shadow-color: var(--c)` | `drop-shadow-(color:--c)` | `{ dropShadowColor: '--c' }` | **New in v4**. |
1473
- | **Grayscale** | `filter: grayscale(100%)` | `grayscale` | `{ grayscale: true }` | |
1474
- | **Grayscale Scale** | `filter: grayscale(0%)` to `100%` | `grayscale-0` to `grayscale-100` | `{ grayscale: 0 }` to `{ grayscale: 100 }` | |
1475
- | **Grayscale Var** | `filter: grayscale(var(--c))` | `grayscale-(--c)` | `{ grayscale: '--c' }` | |
1476
- | **Grayscale Arb** | `filter: grayscale(50%)` | `grayscale-[50%]` | `{ grayscale: '50%' }` | |
1477
- | **Hue Rotate** | `filter: hue-rotate(0deg)` to `180deg` | `hue-rotate-0` to `hue-rotate-180` | `{ hueRotate: 0 }` to `{ hueRotate: 180 }` | |
1478
- | **Hue Rotate Neg** | `filter: hue-rotate(calc(ndeg * -1))` | `-hue-rotate-15` | `{ hueRotate: -15 }` | |
1479
- | **Hue Rotate Var** | `filter: hue-rotate(var(--c))` | `hue-rotate-(--c)` | `{ hueRotate: '--c' }` | |
1480
- | **Hue Rotate Arb** | `filter: hue-rotate(90deg)` | `hue-rotate-[90deg]` | `{ hueRotate: '90deg' }` | |
1481
- | **Invert** | `filter: invert(100%)` | `invert` | `{ invert: true }` | |
1482
- | **Invert Scale** | `filter: invert(0%)` to `100%` | `invert-0` to `invert-100` | `{ invert: 0 }` to `{ invert: 100 }` | |
1483
- | **Invert Var** | `filter: invert(var(--c))` | `invert-(--c)` | `{ invert: '--c' }` | |
1484
- | **Invert Arb** | `filter: invert(25%)` | `invert-[25%]` | `{ invert: '25%' }` | |
1485
- | **Saturate** | `filter: saturate(0%)` to `200%` | `saturate-0` to `saturate-200` | `{ saturate: 0 }` to `{ saturate: 200 }` | |
1486
- | **Saturate Var** | `filter: saturate(var(--c))` | `saturate-(--c)` | `{ saturate: '--c' }` | |
1487
- | **Saturate Arb** | `filter: saturate(1.5)` | `saturate-[1.5]` | `{ saturate: '1.5' }` | |
1488
- | **Sepia** | `filter: sepia(100%)` | `sepia` | `{ sepia: true }` | |
1489
- | **Sepia Scale** | `filter: sepia(0%)` to `100%` | `sepia-0` to `sepia-100` | `{ sepia: 0 }` to `{ sepia: 100 }` | |
1490
- | **Sepia Var** | `filter: sepia(var(--c))` | `sepia-(--c)` | `{ sepia: '--c' }` | |
1491
- | **Sepia Arb** | `filter: sepia(50%)` | `sepia-[50%]` | `{ sepia: '50%' }` | |
1458
+ | Filter Item | CSS Rule | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
1459
+ | :------------------------ | :---------------------------------------------------- | :--------------------------------------------------------------------------- | :----------------------------------------------------------- | :----------------------------------------------- |
1460
+ | **Blur Scale** | `filter: blur(var(--blur-xs))` to `3xl` | `blur-xs` to `blur-3xl` | `{ blur: 'xs' }` to `{ blur: '3xl' }` | |
1461
+ | **Blur None** | `filter: blur(0);` | `blur-none` | `{ blur: 'none' }` | |
1462
+ | **Blur Var** | `filter: blur(var(--c))` | `blur-(--c)` | `{ blur: '--c' }` | |
1463
+ | **Blur Arb** | `filter: var(--c)` | `blur-[4px]` | `{ blur: '4px' }` | |
1464
+ | **Brightness** | `filter: brightness(0%)` to `200%` | `brightness-0` to `brightness-200` | `{ brightness: 0 }` to `{ brightness: 200 }` | |
1465
+ | **Brightness Var** | `filter: brightness(var(--c))` | `brightness-(--c)` | `{ brightness: '--c' }` | |
1466
+ | **Brightness Arb** | `filter: brightness(1.25)` | `brightness-[1.25]` | `{ brightness: '1.25' }` | |
1467
+ | **Contrast** | `filter: contrast(0%)` to `200%` | `contrast-0` to `contrast-200` | `{ contrast: 0 }` to `{ contrast: 200 }` | |
1468
+ | **Contrast Var** | `filter: contrast(var(--c))` | `contrast-(--c)` | `{ contrast: '--c' }` | |
1469
+ | **Contrast Arb** | `filter: contrast(1.5)` | `contrast-[1.5]` | `{ contrast: '1.5' }` | |
1470
+ | **Drop Shadow** | `filter: drop-shadow(var(--drop-shadow-xs))` to `2xl` | `drop-shadow-xs` to `drop-shadow-2xl` | `{ dropShadow: 'xs' }` to `{ dropShadow: '2xl' }` | |
1471
+ | **Drop Shadow None** | `filter: drop-shadow(0 0 #0000)` | `drop-shadow-none` | `{ dropShadow: 'none' }` | |
1472
+ | **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. |
1473
+ | **Drop Shadow Var** | `filter: drop-shadow(var(--c))` | `drop-shadow-(--c)` | `{ dropShadow: '--c' }` | |
1474
+ | **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 `_`. |
1475
+ | **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. |
1476
+ | **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. |
1477
+ | **Drop Shadow Var Col** | `--tw-drop-shadow-color: var(--c)` | `drop-shadow-(color:--c)` | `{ dropShadowColor: '--c' }` | **New in v4**. |
1478
+ | **Grayscale** | `filter: grayscale(100%)` | `grayscale` | `{ grayscale: true }` | |
1479
+ | **Grayscale Scale** | `filter: grayscale(0%)` to `100%` | `grayscale-0` to `grayscale-100` | `{ grayscale: 0 }` to `{ grayscale: 100 }` | |
1480
+ | **Grayscale Var** | `filter: grayscale(var(--c))` | `grayscale-(--c)` | `{ grayscale: '--c' }` | |
1481
+ | **Grayscale Arb** | `filter: grayscale(50%)` | `grayscale-[50%]` | `{ grayscale: '50%' }` | |
1482
+ | **Hue Rotate** | `filter: hue-rotate(0deg)` to `180deg` | `hue-rotate-0` to `hue-rotate-180` | `{ hueRotate: 0 }` to `{ hueRotate: 180 }` | |
1483
+ | **Hue Rotate Neg** | `filter: hue-rotate(calc(ndeg * -1))` | `-hue-rotate-15` | `{ hueRotate: -15 }` | |
1484
+ | **Hue Rotate Var** | `filter: hue-rotate(var(--c))` | `hue-rotate-(--c)` | `{ hueRotate: '--c' }` | |
1485
+ | **Hue Rotate Arb** | `filter: hue-rotate(90deg)` | `hue-rotate-[90deg]` | `{ hueRotate: '90deg' }` | |
1486
+ | **Invert** | `filter: invert(100%)` | `invert` | `{ invert: true }` | |
1487
+ | **Invert Scale** | `filter: invert(0%)` to `100%` | `invert-0` to `invert-100` | `{ invert: 0 }` to `{ invert: 100 }` | |
1488
+ | **Invert Var** | `filter: invert(var(--c))` | `invert-(--c)` | `{ invert: '--c' }` | |
1489
+ | **Invert Arb** | `filter: invert(25%)` | `invert-[25%]` | `{ invert: '25%' }` | |
1490
+ | **Saturate** | `filter: saturate(0%)` to `200%` | `saturate-0` to `saturate-200` | `{ saturate: 0 }` to `{ saturate: 200 }` | |
1491
+ | **Saturate Var** | `filter: saturate(var(--c))` | `saturate-(--c)` | `{ saturate: '--c' }` | |
1492
+ | **Saturate Arb** | `filter: saturate(1.5)` | `saturate-[1.5]` | `{ saturate: '1.5' }` | |
1493
+ | **Sepia** | `filter: sepia(100%)` | `sepia` | `{ sepia: true }` | |
1494
+ | **Sepia Scale** | `filter: sepia(0%)` to `100%` | `sepia-0` to `sepia-100` | `{ sepia: 0 }` to `{ sepia: 100 }` | |
1495
+ | **Sepia Var** | `filter: sepia(var(--c))` | `sepia-(--c)` | `{ sepia: '--c' }` | |
1496
+ | **Sepia Arb** | `filter: sepia(50%)` | `sepia-[50%]` | `{ sepia: '50%' }` | |
1492
1497
 
1493
1498
  ## Backdrop Filter
1494
1499
 
@@ -3435,24 +3440,27 @@ Controlling the tracking (letter spacing).
3435
3440
 
3436
3441
  Controlling the leading (line height).
3437
3442
 
3438
- | Concept | CSS Rule | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
3439
- | :--------------- | :------------------------- | :------------------------------------------------------------------------------------------------------ | :------------------------- | :---------------------------- |
3440
- | **Keywords** | `line-height: 1.5` | `leading-none`, `leading-tight`, `leading-snug`, `leading-normal`, `leading-relaxed`, `leading-loose` | `{ leading: 'none' }` etc. | |
3441
- | **Fixed** | `line-height: .75rem`(etc) | `leading-3`, `leading-4`, `leading-5`, `leading-6`, `leading-7`, `leading-8`, `leading-9`, `leading-10` | `{ leading: 3 }` etc. | Maps to spacing scale. |
3442
- | **Arbitrary** | `line-height: 3rem` | `leading-[3rem]` | `{ leading: '3rem' }` | |
3443
- | **CSS Variable** | `line-height: var(--l)` | `leading-(--l)` | `{ leading: '--l' }` | **Sugar**: Auto-detects `--`. |
3443
+ | Concept | CSS Rule | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
3444
+ | :----------------- | :------------------------- | :------------------------------------------------------------------------------------------------------ | :------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------- |
3445
+ | **Keywords** | `line-height: 1.5` | `leading-none`, `leading-tight`, `leading-snug`, `leading-normal`, `leading-relaxed`, `leading-loose` | `{ leading: 'none' }` etc. | |
3446
+ | **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`). |
3447
+ | **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. |
3448
+ | **Arbitrary** | `line-height: 3rem` | `leading-[3rem]` | `{ leading: '3rem' }` | |
3449
+ | **CSS Variable** | `line-height: var(--l)` | `leading-(--l)` | `{ leading: '--l' }` | **Sugar**: Auto-detects `--`. |
3444
3450
 
3445
3451
  ### Text/Leading Shorthand
3446
3452
 
3447
3453
  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
3454
 
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: 'xl', leading: '1.5rem' }` | `text-xl/[1.5rem]` | Arbitrary leading merged with text size. |
3454
- | `{ text: 'lg' }` | `text-lg` | No merge — `leading` not present. |
3455
- | `{ leading: 7 }` | `leading-7` | No merge — `text` not present. |
3455
+ | Input | Output | Note |
3456
+ | :---------------------------------- | :----------------- | :---------------------------------------------------------------------------------------- |
3457
+ | `{ text: 'lg', leading: 7 }` | `text-lg/7` | Numeric leading merged with text size. |
3458
+ | `{ text: 'sm', leading: 'tight' }` | `text-sm/tight` | Keyword leading merged with text size. |
3459
+ | `{ text: 'sm', leading: '1.5' }` | `text-sm/[1.5]` | Numeric string = unitless ratio (1.5 × font-size). |
3460
+ | `{ text: 'sm', leading: 1.5 }` | `text-sm/1.5` | Number = spacing scale (`calc(var(--spacing) * 1.5)` = 0.375rem — a length, not a ratio). |
3461
+ | `{ text: 'xl', leading: '1.5rem' }` | `text-xl/[1.5rem]` | Arbitrary leading merged with text size. |
3462
+ | `{ text: 'lg' }` | `text-lg` | No merge — `leading` not present. |
3463
+ | `{ leading: 7 }` | `leading-7` | No merge — `text` not present. |
3456
3464
 
3457
3465
  ## Text Align
3458
3466
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@csszyx/mcp-server",
3
- "version": "0.11.8",
3
+ "version": "0.11.10",
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": ">=22.12.0"
28
+ "node": "^22.18.0 || >=24.11.0"
29
29
  },
30
30
  "dependencies": {
31
31
  "@modelcontextprotocol/sdk": "^1.29.0",
32
- "zod": "^3.23.8",
33
- "@csszyx/compiler": "0.11.8",
34
- "@csszyx/cli": "0.11.8",
35
- "@csszyx/unplugin": "0.11.8"
32
+ "zod": "^4.4.3",
33
+ "@csszyx/cli": "0.11.10",
34
+ "@csszyx/compiler": "0.11.10",
35
+ "@csszyx/unplugin": "0.11.10"
36
36
  },
37
37
  "devDependencies": {
38
+ "@types/node": "^22.20.1",
39
+ "tsx": "^4.23.1",
38
40
  "typescript": "^6.0.3",
39
- "@types/node": "^20.0.0",
40
- "tsx": "^4.0.0",
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",