# 開発日記-2024-07-27 / monorepoでルートの.envを共有する

## monorepoでルートの.envを共有する

```tree
.
├── packages
│   ├── package1
│   └── package2
├── apps
│   └── next
│      ├── src
│      └── package.json
└── .env
```

上記のような構成の `./apps/next` のNext.jsのローカルサーバーを `pnpm dev` で起動した場合に、`.env` の環境変数を参照（`process.env.XXXX`）したい場合の方法。stackoverflowに答えがあった。

::link-card[https://stackoverflow.com/questions/75058474/how-to-use-both-root-and-app-level-env-files-with-turborepo]

以下はコマンドとpackage.jsonの修正内容メモ。

```sh:Terminal
pnpm add -w -D -E dotenv-cli
```

```json:apps/next/package.json
{
  "scripts": {
    "dev": "pnpm with-env next dev",
    "with-env": "dotenv -e ../../.env --"
  },
}
```

## shadcn/uiの初期化時に生成されるglobals.cssの.darkセクションが出力されない場合の対応方法

[shadcn/uiのドキュメント](https://ui.shadcn.com/docs/dark-mode/next)通りにダークモードの設定をしていたらうまくダークモードに切り替わらなかったので対応方法を残しておく。

次のコマンドを実行するとshadcn/uiの初期化を行い、いくつかのファイルが自動的に修正される。

```sh:Terminal
pnpm dlx shadcn-ui@latest init
```

このとき `globals.css` が次のように修正される。

```css:globals.css
@layer base {
  :root {
    /* ... */
  }

  .dark { /* [!code highlight]
    /* ... */
  }
}
```

上記の `.dark` のセクションが実際のCSS（`/_next/static/css/app/layout.css`）に出力されない場合がある。Tailwind CSSでは使われていないclass属性は出力しないという仕様になっているため。

### 解決策 その１

なので、次のように `tailwind.config.ts` の `safelist` に `'dark'` を追加すると良い。

```typescript:tailwind.config.ts
const config = {
  safelist: ['dark'],
}
```

### 解決策 その２

他には次のように `.dark` を `:root[class~="dark"]` に置き換えるという方法がある。

```css:globals.css
@layer base {
  :root {
    /* ... */
  }

  :root[class~="dark"] { /* [!code highlight]
    /* ... */
  }
}
```

### 解決策 その３

最後に `@layer base { ... }` の外側に出すという対応方法もある。

これらの方法は以下の公式のissueにコメントがついていた。

::link-card[https://github.com/shadcn-ui/ui/issues/313]

::link-card[https://github.com/shadcn-ui/ui/issues/515]

### 発生しない状況

Tailwind CSSの設定の `content: ['./src/**/*.{ts,tsx}']` の対象となっているファイルで、次のように何かの属性に `dark` という単語が含まれていた場合は問題は発生しない（CSSファイルに.darkセクションが出力される）ため気づかなかった。

```tsx
<ToggleGroupItem className="rounded-full" value="dark" aria-label="Toggle dark">
```