@csszyx/mcp-server 0.11.11 → 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.
Files changed (2) hide show
  1. package/llms-full.txt +68 -40
  2. 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]': {…} }`. **Custom breakpoints are typed from your CSS** — define one once in
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.
@@ -1145,7 +1174,7 @@ Controlling the box shadow of an element.
1145
1174
  | **Inset Ring** | `box-shadow: inset (etc)` | `inset-ring`, `inset-ring-1` | `{ insetRing: 1 }` | |
1146
1175
  | **None** | `box-shadow: 0 0 #0000` | `shadow-none` | `{ shadow: 'none' }` | |
1147
1176
  | **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' }` | |
1177
+ | **Ring None** | `box-shadow: 0 0 #0000` | `ring-0` | `{ ring: 'none' }` | Tailwind spells the zero ring `ring-0`; `ring-none` styles nothing. |
1149
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' }` | |
1150
1179
  | **Color + Opacity** | `--tw-shadow-color: (value) / 50%` | `shadow-blue-500/50` | `{ shadowColor: { color: 'blue-500', op: 50 } }` | |
1151
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. |
@@ -1222,35 +1251,29 @@ Controlling the masking of an element with images, gradients, and CSS properties
1222
1251
 
1223
1252
  > **Source:** [Tailwind CSS v4.1 Documentation](https://tailwindcss.com/docs/mask-image)
1224
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
+
1225
1261
  ### mask-image: Gradient Masks
1226
1262
 
1227
- | Concept | CSS Rule | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
1228
- | :------------- | :-------------------------------------------- | :---------------- | :------------------------ | :------------------------- |
1229
- | **None** | `mask-image: none` | `mask-none` | `{ mask: 'none' }` | |
1230
- | **Linear** | `mask-image: linear-gradient(45deg, ...)` | `mask-linear-45` | `{ mask: 'linear-45' }` | Angle in degrees. |
1231
- | **Linear Neg** | `mask-image: linear-gradient(-45deg, ...)` | `-mask-linear-45` | `{ mask: '-linear-45' }` | Negative angle prefix `-`. |
1232
- | **Radial** | `mask-image: radial-gradient(...)` | `mask-radial` | `{ mask: 'radial' }` | |
1233
- | **Conic** | `mask-image: conic-gradient(from 90deg, ...)` | `mask-conic-90` | `{ mask: 'conic-90' }` | |
1234
-
1235
- ### mask-image: Direction Keywords
1236
-
1237
- | Concept | CSS Rule | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
1238
- | :------------------ | :-------------------------------------------------- | :------------------ | :------------------------- | :--- |
1239
- | **To Top** | `mask-image: linear-gradient(to top, ...)` | `mask-linear-to-t` | `{ mask: 'linear-to-t' }` | |
1240
- | **To Top Right** | `mask-image: linear-gradient(to top right, ...)` | `mask-linear-to-tr` | `{ mask: 'linear-to-tr' }` | |
1241
- | **To Right** | `mask-image: linear-gradient(to right, ...)` | `mask-linear-to-r` | `{ mask: 'linear-to-r' }` | |
1242
- | **To Bottom Right** | `mask-image: linear-gradient(to bottom right, ...)` | `mask-linear-to-br` | `{ mask: 'linear-to-br' }` | |
1243
- | **To Bottom** | `mask-image: linear-gradient(to bottom, ...)` | `mask-linear-to-b` | `{ mask: 'linear-to-b' }` | |
1244
- | **To Bottom Left** | `mask-image: linear-gradient(to bottom left, ...)` | `mask-linear-to-bl` | `{ mask: 'linear-to-bl' }` | |
1245
- | **To Left** | `mask-image: linear-gradient(to left, ...)` | `mask-linear-to-l` | `{ mask: 'linear-to-l' }` | |
1246
- | **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 } }` | |
1247
1270
 
1248
1271
  ### mask-image: Shape Modifiers (Radial)
1249
1272
 
1250
- | Concept | CSS Rule | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
1251
- | :---------- | :-------------------------------- | :---------------- | :------------------------- | :-------------------- |
1252
- | **Circle** | `--tw-mask-radial-shape: circle` | `mask-circle` | `{ maskShape: 'circle' }` | For radial gradients. |
1253
- | **Ellipse** | `--tw-mask-radial-shape: ellipse` | `mask-ellipse` | `{ maskShape: 'ellipse' }` | Default shape. |
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. |
1254
1277
 
1255
1278
  ### mask-image: Arbitrary Values
1256
1279
 
@@ -1443,12 +1466,12 @@ Controls how multiple masks are combined.
1443
1466
 
1444
1467
  Control the color stops used in mask gradient functions.
1445
1468
 
1446
- | Concept | CSS Rule | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
1447
- | :----------- | :-------------------- | :------------------ | :------------------------ | :--- |
1448
- | **From** | mask gradient start | `mask-from-<color>` | `{ maskFrom: '<color>' }` | |
1449
- | **Via** | mask gradient middle | `mask-via-<color>` | `{ maskVia: '<color>' }` | |
1450
- | **To** | mask gradient end | `mask-to-<color>` | `{ maskTo: '<color>' }` | |
1451
- | **Variable** | `mask-from: var(--c)` | `mask-from-(--c)` | `{ maskFrom: '--c' }` | |
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. |
1452
1475
 
1453
1476
 
1454
1477
  # Filters
@@ -3417,10 +3440,10 @@ Controlling numeric glyphs.
3417
3440
 
3418
3441
  Controlling font-feature-settings. Added in Tailwind v4.2.
3419
3442
 
3420
- | Concept | CSS Rule | Tailwind v4 Class | `sz` Prop (Object Syntax) | Note |
3421
- | :------------ | :-------------------------------- | :------------------------- | :----------------------------- | :--- |
3422
- | **Normal** | `font-feature-settings: normal` | `font-features-normal` | `{ fontFeatures: 'normal' }` | |
3423
- | **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' }` | |
3424
3447
 
3425
3448
  ## Font Style & Smoothing
3426
3449
 
@@ -3981,14 +4004,19 @@ no tsconfig change needed.
3981
4004
 
3982
4005
  ## Production Build (Mangling)
3983
4006
 
3984
- In production, class names are mangled for maximum compression:
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.
3985
4011
 
3986
4012
  ```js
3987
4013
  // vite.config.ts (production)
3988
4014
  ...csszyx({ production: { mangle: true } })
3989
4015
  ```
3990
4016
 
3991
- Output: `<div class="z y x" />` — the CSS `.z { padding: 1rem }` etc. is injected automatically.
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).
3992
4020
 
3993
4021
  If an `sz`-generated utility also appears as a static string or template quasi in a
3994
4022
  source-level `class` or `className` attribute/property (including a `clsx(...)`
@@ -4002,8 +4030,8 @@ adapter keeps class names readable (and warns when `production.mangle: true` is
4002
4030
  explicit) because normal esbuild write-to-disk builds do not expose mutable final
4003
4031
  assets; source transforms and safelist generation still run.
4004
4032
 
4005
- Set `production: { mangle: false }` to keep readable class names — the supported way to
4006
- 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
4007
4035
  compiles to without a build, run `csszyx explain "{ p: 4, bg: 'blue-500' }"`.
4008
4036
 
4009
4037
  ### AST budget guard
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@csszyx/mcp-server",
3
- "version": "0.11.11",
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.11.11",
34
- "@csszyx/unplugin": "0.11.11",
35
- "@csszyx/compiler": "0.11.11"
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",