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

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

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

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

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

pnpm add -w -D -E dotenv-cli

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

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

shadcn/uiのドキュメント通りにダークモードの設定をしていたらうまくダークモードに切り替わらなかったので対応方法を残しておく。

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

pnpm dlx shadcn-ui@latest init

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

@layer base {
  :root {
    /* ... */
  }

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

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

解決策 その１

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

const config = {
  safelist: ['dark'],
}

解決策 その２

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

@layer base {
  :root {
    /* ... */
  }

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

解決策 その３

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

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

Dark mode not working because of `@layer base`, demo repo provided · Issue #313 · shadcn-ui/ui

Hi and congrats for making these beautiful components! I notice that dark mode isn't working on a fresh install: ran npx create-next-app@latest, didn't choose to use the app directory ran npx shadc...

github.com

.dark section not included in tailwind output · Issue #515 · shadcn-ui/ui

This is probably not a shadcn problem but I could really use some help figuring it out. For some reason my dark mode does not work because the css variables .dark in global.css that shadcn uses nev...

github.com

発生しない状況

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

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