[Fix]: theme, ui 패키지의 vanilla-extract 빌드 설정 수정

apps/web/package.json

@@ -23,7 +23,6 @@
     "@types/react": "18.3.0",
     "@types/react-dom": "18.3.1",
     "@vanilla-extract/next-plugin": "^2.4.8",
-    "eslint": "^8",
     "eslint-config-next": "14.2.21",
     "typescript": "5.5.4"
   }

apps/web/src/app/layout.tsx

@@ -1,6 +1,8 @@
 import type { Metadata } from 'next';
 import localFont from 'next/font/local';
 import './globals.css';
+//import '@repo/ui/styles';
+import '@repo/theme/styles';
 
 const geistSans = localFont({
   src: './fonts/GeistVF.woff',

package.json

@@ -35,6 +35,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@vanilla-extract/css": "^1.17.0"
+    "@vanilla-extract/css": "^1.17.0",
+    "@vanilla-extract/recipes": "^0.5.5"
   }
 }

packages/eslint-config/package.json

@@ -11,8 +11,6 @@
     "@eslint/js": "^9.17.0",
     "@next/eslint-plugin-next": "^15.1.0",
     "@typescript-eslint/eslint-plugin": "^8.15.0",
-    "@typescript-eslint/parser": "^8.15.0",
-    "eslint": "^9.15.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-only-warn": "^1.1.0",
     "eslint-plugin-react": "^7.37.2",

packages/theme/esbuild.config.mjs

@@ -0,0 +1,24 @@
+import { vanillaExtractPlugin } from '@vanilla-extract/esbuild-plugin';
+import esbuild from 'esbuild';
+import { preserveDirectivesPlugin } from 'esbuild-plugin-preserve-directives';
+import path from 'path';
+
+const outdir = path.join(process.cwd(), 'dist');
+esbuild
+  .build({
+    entryPoints: ['./src/index.ts'],
+    bundle: true,
+    plugins: [
+      vanillaExtractPlugin(),
+      preserveDirectivesPlugin({
+        directives: ['use client', 'use strict'],
+        include: /\.(js|ts|jsx|tsx)$/,
+        exclude: /node_modules/,
+      }),
+    ],
+    format: 'esm',
+    loader: { '.css': 'file' },
+    outdir,
+    external: ['react', 'react-dom'],
+  })
+  .catch(() => process.exit(1));

packages/theme/package.json

@@ -2,11 +2,15 @@
   "name": "@repo/theme",
   "version": "0.0.0",
   "private": true,
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js"
+    },
+    "./styles": "./dist/index.css"
+  },
   "scripts": {
-    "build": "tsc --emitDeclarationOnly && esbuild src/index.ts --bundle --platform=node --format=esm --outfile=dist/index.mjs && esbuild src/index.ts --bundle --platform=node --format=cjs --outfile=dist/index.js",
+    "build": "tsc && node esbuild.config.mjs",
     "dev": "esbuild src/index.ts --bundle --platform=node --format=esm --outfile=dist/index.mjs --watch",
     "lint": "eslint . --max-warnings 0"
   },
@@ -18,6 +22,7 @@
   },
   "devDependencies": {
     "@vanilla-extract/esbuild-plugin": "^2.3.5",
-    "esbuild": "^0.24.0"
+    "esbuild": "^0.21.0",
+    "esbuild-plugin-preserve-directives": "^0.0.11"
   }
 }

packages/theme/src/index.ts

@@ -1,3 +1,3 @@
 export * from './tokens';
 export * from './themes';
-export * from './sprinkles.css';
+export * from './sprinkles';

packages/theme/src/sprinkles/index.ts

@@ -0,0 +1 @@
+export { sprinkles } from './sprinkles.css';

packages/theme/src/sprinkles.css.ts → packages/theme/src/sprinkles/sprinkles.css.ts

@@ -1,5 +1,5 @@
 import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';
-import { vars } from './themes';
+import { vars } from '../themes';
 
 const colorProperties = defineProperties({
   properties: {

packages/theme/src/themes/index.ts

@@ -1,11 +1,5 @@
-import { createTheme } from '@vanilla-extract/css';
-import { lightTheme } from './light';
-import { darkTheme } from './dark';
-import type { ThemeContract } from './contract';
+import { vars } from './themes.css';
 
-const [lightThemeClass, vars] = createTheme<ThemeContract>(lightTheme);
-const darkThemeClass = createTheme(vars, darkTheme);
-
-export { lightThemeClass, darkThemeClass, vars };
-export type { ThemeContract };
+export * from './themes.css';
+export type { ThemeContract } from './contract';
 export type Vars = typeof vars;

packages/theme/src/themes/themes.css.ts

@@ -0,0 +1,7 @@
+import { createTheme } from '@vanilla-extract/css';
+import { lightTheme } from './light';
+import { darkTheme } from './dark';
+import type { ThemeContract } from './contract';
+
+export const [lightThemeClass, vars] = createTheme<ThemeContract>(lightTheme);
+export const darkThemeClass = createTheme(vars, darkTheme);

packages/ui/esbuild.config.mjs

@@ -0,0 +1,24 @@
+import { vanillaExtractPlugin } from '@vanilla-extract/esbuild-plugin';
+import esbuild from 'esbuild';
+import { preserveDirectivesPlugin } from 'esbuild-plugin-preserve-directives';
+import path from 'path';
+
+const outdir = path.join(process.cwd(), 'dist');
+esbuild
+  .build({
+    entryPoints: ['./src/index.ts'],
+    bundle: true,
+    plugins: [
+      vanillaExtractPlugin(),
+      preserveDirectivesPlugin({
+        directives: ['use client', 'use strict'],
+        include: /\.(js|ts|jsx|tsx)$/,
+        exclude: /node_modules/,
+      }),
+    ],
+    format: 'esm',
+    loader: { '.css': 'file' },
+    outdir,
+    external: ['react', 'react-dom'],
+  })
+  .catch(() => process.exit(1));

packages/ui/package.json

@@ -2,11 +2,15 @@
   "name": "@repo/ui",
   "version": "0.0.0",
   "private": true,
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js"
+    },
+    "./styles": "./dist/index.css"
+  },
   "scripts": {
-    "build": "tsc --emitDeclarationOnly && esbuild src/index.ts --bundle --platform=node --format=esm --outfile=dist/index.mjs && esbuild src/index.ts --bundle --platform=node --format=cjs --outfile=dist/index.js",
+    "build": "tsc && node esbuild.config.mjs",
     "dev": "esbuild src/index.ts --bundle --platform=node --format=esm --outfile=dist/index.mjs --watch",
     "lint": "eslint . --max-warnings 0"
   },
@@ -19,7 +23,8 @@
   "devDependencies": {
     "@types/react": "^18.2.0",
     "@vanilla-extract/esbuild-plugin": "^2.3.5",
-    "esbuild": "^0.24.0"
+    "esbuild": "^0.21.0",
+    "esbuild-plugin-preserve-directives": "^0.0.11"
   },
   "peerDependencies": {
     "react": "^18.2.0"