feat(site): list required css imports per skin in preset reference (#1521)

site/src/components/docs/api-reference/PresetReference.astro

@@ -142,17 +142,16 @@ const listFormat = new Intl.ListFormat('en', { style: 'long', type: 'unit' });
                       <dd>
                         <FrameworkCase frameworks={["react"]}>
                           {preset.react.skins.length > 0
-                            ? listFormat
-                                .formatToParts(
-                                  preset.react.skins.map((s) => s.name),
-                                )
-                                .map((part) =>
-                                  part.type === "element" ? (
-                                    <MarkdownCode class="inline-block whitespace-nowrap">{`<${part.value}>`}</MarkdownCode>
-                                  ) : (
-                                    <span>{part.value}</span>
-                                  ),
-                                )
+                            ? preset.react.skins.map((skin) => (
+                                <div class="mb-2 last:mb-0">
+                                  <MarkdownCode class="inline-block whitespace-nowrap">{`<${skin.name}>`}</MarkdownCode>
+                                  {skin.cssImport && (
+                                    <div class="mt-0.5">
+                                      <MarkdownCode class="text-code inline-block whitespace-nowrap">{`import '${skin.cssImport}';`}</MarkdownCode>
+                                    </div>
+                                  )}
+                                </div>
+                              ))
                             : "–"}
                         </FrameworkCase>
                         <FrameworkCase frameworks={["html"]}>

site/src/content/docs/concepts/skins.mdx

@@ -105,7 +105,7 @@ There are currently two options for styling:
 
 <FrameworkCase frameworks={["react"]}>
 
-- Vanilla CSS where you import the stylesheet in your app. This is the default.
+- Vanilla CSS — import the stylesheet listed for each skin in the [preset table](#skins-features-and-presets). This is the default.
 - Tailwind where you [eject](../how-to/customize-skins#ejecting) the skin and use Tailwind classnames in your app.
 
 </FrameworkCase>

site/src/types/preset-reference.ts

@@ -6,6 +6,7 @@ import { z } from 'astro/zod';
 export const PresetSkinDefSchema = z.object({
   name: z.string(),
   tagName: z.string().optional(),
+  cssImport: z.string().optional(),
 });
 
 export const PresetReferenceSchema = z.object({