synthesisui 0.16.13 → 0.16.14
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/claude-md.js +6 -0
- package/dist/component-codegen.js +30 -0
- package/package.json +1 -1
package/dist/claude-md.js
CHANGED
|
@@ -226,6 +226,12 @@ YOURSELF. It materializes that component as real typed code in this project, and
|
|
|
226
226
|
extend that. The person who asked you for a feature should never have to know these command
|
|
227
227
|
names or type them; finding the right component is your job, not theirs.
|
|
228
228
|
|
|
229
|
+
When you override a style a component already sets, add \`!\` to your class:
|
|
230
|
+
\`className="text-info!"\`, not \`className="text-info"\`. Both are plain utilities at the
|
|
231
|
+
same specificity, so which one wins is decided by the order Tailwind writes the stylesheet -
|
|
232
|
+
not by the order of the class names, which is what the code looks like it controls. This
|
|
233
|
+
applies to the Tailwind flavour only; the CSS one is layered and needs no marker.
|
|
234
|
+
|
|
229
235
|
Only write something new when nothing in the manifest covers the purpose - and when you do,
|
|
230
236
|
say which entry you considered and why it did not fit. To review a
|
|
231
237
|
component, create an isolated sample page (e.g. \`app/synthesisui-samples/<component>/\`) - do not
|
|
@@ -345,8 +345,38 @@ function header(slug, name, version, mode) {
|
|
|
345
345
|
`// On-system by construction: every style resolves to the DS tokens.`,
|
|
346
346
|
`// Global setup (once per app): ${setup}`,
|
|
347
347
|
`// and put data-ds="${slug}" on a root element (e.g. <body data-ds="${slug}">).`,
|
|
348
|
+
...(mode === "tailwind" ? [OVERRIDE_WARNING] : []),
|
|
348
349
|
].join("\n");
|
|
349
350
|
}
|
|
351
|
+
/**
|
|
352
|
+
* THE OVERRIDE THAT LOSES WITHOUT SAYING SO.
|
|
353
|
+
*
|
|
354
|
+
* `className` is appended last in the string below, which looks like it wins
|
|
355
|
+
* and does not. Two plain utilities setting the same property have the same
|
|
356
|
+
* specificity, so the winner is decided by the order Tailwind emits them into
|
|
357
|
+
* the stylesheet - which depends on the order of names in the theme, not on
|
|
358
|
+
* anything visible from here.
|
|
359
|
+
*
|
|
360
|
+
* Found by an agent building against these components: it wanted a blue title
|
|
361
|
+
* on a `CardTitle` whose base carries `text-foreground`, and only got it by
|
|
362
|
+
* reaching for `!` - which it knew about because it had written the trip-up
|
|
363
|
+
* into its own project memory on an earlier run (my-test4, 27/07).
|
|
364
|
+
*
|
|
365
|
+
* CSS mode does not have this. Its rules live in `@layer components`, which
|
|
366
|
+
* Tailwind's utilities outrank by construction, so an override there just
|
|
367
|
+
* works. This warning is emitted for the Tailwind flavour only.
|
|
368
|
+
*
|
|
369
|
+
* A real fix has to resolve utility conflicts - knowing that `text-info`
|
|
370
|
+
* collides with `text-foreground` but not with `text-lg`, though all three
|
|
371
|
+
* start with `text-`. That needs the system's own colour and size vocabulary,
|
|
372
|
+
* which this generator has. Until it is built, the failure at least stops
|
|
373
|
+
* being silent, which is the part that actually costs people time.
|
|
374
|
+
*/
|
|
375
|
+
const OVERRIDE_WARNING = `//
|
|
376
|
+
// Overriding a style this component already sets? Add \`!\`:
|
|
377
|
+
// <Thing className="text-info!" /> not className="text-info"
|
|
378
|
+
// Both are plain utilities at the same specificity, so which one wins is
|
|
379
|
+
// decided by the stylesheet's order, not by this string's.`;
|
|
350
380
|
const joinCls = (parts) => `[${parts.join(", ")}].filter(Boolean).join(" ")`;
|
|
351
381
|
/** JSDoc showing how to compose the component with its parts + content, so the
|
|
352
382
|
* materialized code doesn't read as "a bare shell renders nothing" (dogfood
|
package/package.json
CHANGED