daangn · malangcat · Apr 22, 2025 · Apr 22, 2025
diff --git a/.changeset/wild-shoes-train.md b/.changeset/wild-shoes-train.md
@@ -0,0 +1,7 @@
+---
+"@seed-design/stackflow": patch
+"@seed-design/react": patch
+"@seed-design/css": patch
+---
+
+recipe에서 직접 스타일시트 의존성을 표현하도록 변경합니다.
diff --git a/bun.lock b/bun.lock
diff --git a/ecosystem/qvism/core/src/js.ts b/ecosystem/qvism/core/src/js.ts
@@ -22,8 +22,9 @@ export function generateSharedJs(): string {
 
 export function generateSlotRecipeJs(
   definition: SlotRecipeDefinition<string, SlotRecipeVariantRecord<string>>,
-  options: { prefix?: string } = {},
+  options: { prefix?: string; importCss?: boolean } = {},
 ): string {
+  const { importCss = true } = options;
   const jsName = camelCase(definition.name);
 
   const slotNames = definition.slots.map((slot) => [
@@ -40,7 +41,9 @@ export function generateSlotRecipeJs(
 
   const compoundVariants = definition.compoundVariants?.map(({ css, ...rest }) => rest) ?? [];
 
-  return outdent`
+  return (
+    (importCss ? `import './${definition.name}.css';\n` : "") +
+    outdent`
   import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
   const ${jsName}SlotNames = ${JSON.stringify(slotNames, null, 2)};
@@ -67,13 +70,15 @@ export function generateSlotRecipeJs(
   Object.assign(${escapeReservedWord(jsName)}, { splitVariantProps: (props) => splitVariantProps(props, ${jsName}VariantMap) });
 
   // @recipe(seed): ${definition.name}
-  `;
+  `
+  );
 }
 
 export function generateRecipeJs(
   definition: RecipeDefinition<RecipeVariantRecord>,
-  options: { prefix?: string } = {},
+  options: { prefix?: string; importCss?: boolean } = {},
 ): string {
+  const { importCss = true } = options;
   const jsName = camelCase(definition.name);
 
   const variantMap = Object.fromEntries(
@@ -88,7 +93,9 @@ export function generateRecipeJs(
   const compoundVariants =
     definition.compoundVariants?.map(({ css, ...rest }: { css: StyleObject }) => rest) ?? [];
 
-  return outdent`
+  return (
+    (importCss ? `import './${definition.name}.css';\n` : "") +
+    outdent`
   import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
   const defaultVariant = ${JSON.stringify(definition.defaultVariants ?? {}, null, 2)};
@@ -110,7 +117,8 @@ export function generateRecipeJs(
   Object.assign(${escapeReservedWord(jsName)}, { splitVariantProps: (props) => splitVariantProps(props, ${jsName}VariantMap) });
 
   // @recipe(seed): ${definition.name}
-  `;
+  `
+  );
 }
 
 export function generateJs(

diff --git a/ecosystem/qvism/rollup-plugin/index.d.ts b/ecosystem/qvism/rollup-plugin/index.d.ts
diff --git a/ecosystem/qvism/rollup-plugin/index.mjs b/ecosystem/qvism/rollup-plugin/index.mjs
diff --git a/ecosystem/qvism/rollup-plugin/package.json b/ecosystem/qvism/rollup-plugin/package.json
diff --git a/packages/css/recipes/action-button.mjs b/packages/css/recipes/action-button.mjs
@@ -1,3 +1,4 @@
+import './action-button.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const defaultVariant = {

diff --git a/packages/css/recipes/action-chip.mjs b/packages/css/recipes/action-chip.mjs
@@ -1,3 +1,4 @@
+import './action-chip.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const defaultVariant = {

diff --git a/packages/css/recipes/action-sheet-item.mjs b/packages/css/recipes/action-sheet-item.mjs
@@ -1,3 +1,4 @@
+import './action-sheet-item.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const defaultVariant = {

diff --git a/packages/css/recipes/action-sheet.mjs b/packages/css/recipes/action-sheet.mjs
@@ -1,3 +1,4 @@
+import './action-sheet.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const actionSheetSlotNames = [

diff --git a/packages/css/recipes/app-bar-main.mjs b/packages/css/recipes/app-bar-main.mjs
@@ -1,3 +1,4 @@
+import './app-bar-main.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const appBarMainSlotNames = [

diff --git a/packages/css/recipes/app-bar.mjs b/packages/css/recipes/app-bar.mjs
@@ -1,3 +1,4 @@
+import './app-bar.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const appBarSlotNames = [

diff --git a/packages/css/recipes/app-screen.mjs b/packages/css/recipes/app-screen.mjs
@@ -1,3 +1,4 @@
+import './app-screen.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const appScreenSlotNames = [

diff --git a/packages/css/recipes/avatar-stack.mjs b/packages/css/recipes/avatar-stack.mjs
@@ -1,3 +1,4 @@
+import './avatar-stack.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const avatarStackSlotNames = [

diff --git a/packages/css/recipes/avatar.mjs b/packages/css/recipes/avatar.mjs
@@ -1,3 +1,4 @@
+import './avatar.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const avatarSlotNames = [

diff --git a/packages/css/recipes/badge.mjs b/packages/css/recipes/badge.mjs
@@ -1,3 +1,4 @@
+import './badge.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const defaultVariant = {

diff --git a/packages/css/recipes/bottom-sheet.mjs b/packages/css/recipes/bottom-sheet.mjs
@@ -1,3 +1,4 @@
+import './bottom-sheet.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const bottomSheetSlotNames = [

diff --git a/packages/css/recipes/callout.mjs b/packages/css/recipes/callout.mjs
@@ -1,3 +1,4 @@
+import './callout.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const calloutSlotNames = [

diff --git a/packages/css/recipes/checkbox.mjs b/packages/css/recipes/checkbox.mjs
@@ -1,3 +1,4 @@
+import './checkbox.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const checkboxSlotNames = [

diff --git a/packages/css/recipes/chip-tabs.mjs b/packages/css/recipes/chip-tabs.mjs
@@ -1,3 +1,4 @@
+import './chip-tabs.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const chipTabsSlotNames = [

diff --git a/packages/css/recipes/control-chip.mjs b/packages/css/recipes/control-chip.mjs
@@ -1,3 +1,4 @@
+import './control-chip.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const defaultVariant = {

diff --git a/packages/css/recipes/dialog.mjs b/packages/css/recipes/dialog.mjs
@@ -1,3 +1,4 @@
+import './dialog.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const dialogSlotNames = [

diff --git a/packages/css/recipes/extended-action-sheet-item.mjs b/packages/css/recipes/extended-action-sheet-item.mjs
@@ -1,3 +1,4 @@
+import './extended-action-sheet-item.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const defaultVariant = {

diff --git a/packages/css/recipes/extended-action-sheet.mjs b/packages/css/recipes/extended-action-sheet.mjs
@@ -1,3 +1,4 @@
+import './extended-action-sheet.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const extendedActionSheetSlotNames = [

diff --git a/packages/css/recipes/extended-fab.mjs b/packages/css/recipes/extended-fab.mjs
@@ -1,3 +1,4 @@
+import './extended-fab.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const defaultVariant = {

diff --git a/packages/css/recipes/fab.mjs b/packages/css/recipes/fab.mjs
@@ -1,3 +1,4 @@
+import './fab.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const defaultVariant = {};

diff --git a/packages/css/recipes/help-bubble.mjs b/packages/css/recipes/help-bubble.mjs
@@ -1,3 +1,4 @@
+import './help-bubble.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const helpBubbleSlotNames = [

diff --git a/packages/css/recipes/identity-placeholder.mjs b/packages/css/recipes/identity-placeholder.mjs
@@ -1,3 +1,4 @@
+import './identity-placeholder.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const identityPlaceholderSlotNames = [

diff --git a/packages/css/recipes/inline-banner.mjs b/packages/css/recipes/inline-banner.mjs
@@ -1,3 +1,4 @@
+import './inline-banner.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const inlineBannerSlotNames = [

diff --git a/packages/css/recipes/link-content.mjs b/packages/css/recipes/link-content.mjs
@@ -1,3 +1,4 @@
+import './link-content.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const defaultVariant = {

diff --git a/packages/css/recipes/manner-temp-badge.mjs b/packages/css/recipes/manner-temp-badge.mjs
@@ -1,3 +1,4 @@
+import './manner-temp-badge.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const defaultVariant = {

diff --git a/packages/css/recipes/manner-temp.mjs b/packages/css/recipes/manner-temp.mjs
@@ -1,3 +1,4 @@
+import './manner-temp.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const defaultVariant = {

diff --git a/packages/css/recipes/notification-badge-positioner.mjs b/packages/css/recipes/notification-badge-positioner.mjs
@@ -1,3 +1,4 @@
+import './notification-badge-positioner.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const defaultVariant = {

diff --git a/packages/css/recipes/notification-badge.mjs b/packages/css/recipes/notification-badge.mjs
@@ -1,3 +1,4 @@
+import './notification-badge.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const defaultVariant = {

diff --git a/packages/css/recipes/progress-circle.mjs b/packages/css/recipes/progress-circle.mjs
@@ -1,3 +1,4 @@
+import './progress-circle.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const progressCircleSlotNames = [

diff --git a/packages/css/recipes/pull-to-refresh.mjs b/packages/css/recipes/pull-to-refresh.mjs
@@ -1,3 +1,4 @@
+import './pull-to-refresh.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const pullToRefreshSlotNames = [

diff --git a/packages/css/recipes/radio.mjs b/packages/css/recipes/radio.mjs
@@ -1,3 +1,4 @@
+import './radio.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const radioSlotNames = [

diff --git a/packages/css/recipes/reaction-button.mjs b/packages/css/recipes/reaction-button.mjs
@@ -1,3 +1,4 @@
+import './reaction-button.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const defaultVariant = {

diff --git a/packages/css/recipes/segmented-control.mjs b/packages/css/recipes/segmented-control.mjs
@@ -1,3 +1,4 @@
+import './segmented-control.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const segmentedControlSlotNames = [

diff --git a/packages/css/recipes/select-box-group.mjs b/packages/css/recipes/select-box-group.mjs
@@ -1,3 +1,4 @@
+import './select-box-group.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const defaultVariant = {};

diff --git a/packages/css/recipes/select-box.mjs b/packages/css/recipes/select-box.mjs
@@ -1,3 +1,4 @@
+import './select-box.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const selectBoxSlotNames = [

diff --git a/packages/css/recipes/skeleton.mjs b/packages/css/recipes/skeleton.mjs
@@ -1,3 +1,4 @@
+import './skeleton.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const defaultVariant = {

diff --git a/packages/css/recipes/snackbar-region.mjs b/packages/css/recipes/snackbar-region.mjs
@@ -1,3 +1,4 @@
+import './snackbar-region.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const defaultVariant = {};

diff --git a/packages/css/recipes/snackbar.mjs b/packages/css/recipes/snackbar.mjs
@@ -1,3 +1,4 @@
+import './snackbar.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const snackbarSlotNames = [

diff --git a/packages/css/recipes/switch.mjs b/packages/css/recipes/switch.mjs
@@ -1,3 +1,4 @@
+import './switch.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const switchSlotNames = [

diff --git a/packages/css/recipes/tabs.mjs b/packages/css/recipes/tabs.mjs
@@ -1,3 +1,4 @@
+import './tabs.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const tabsSlotNames = [

diff --git a/packages/css/recipes/text-field.mjs b/packages/css/recipes/text-field.mjs
@@ -1,3 +1,4 @@
+import './text-field.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const textFieldSlotNames = [

diff --git a/packages/css/recipes/text.mjs b/packages/css/recipes/text.mjs
@@ -1,3 +1,4 @@
+import './text.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const defaultVariant = {