Repository: storybook
Issue: [Bug]: "postcss-import" and "cssnano" from Open Props are not properly loaded when using pnpm
Labels: bug,compatibility with other tools,has workaround,nextjs,sev:S3

### Describe the bug

We did set up a project with NextJS 14 using CSS modules and postcss with preset-env and open props:
```json
  "dependencies": {
    "clsx": "2.1.0",
    "intl-locale-textinfo-polyfill": "2.1.1",
    "next": "14.1.0",
    "next-intl": "3.7.0",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "open-props": "1.6.18",
    "postcss": "8.4.35",
    "postcss-jit-props": "1.0.14",
    "postcss-load-config": "5.0.3",
    "postcss-mixins": "9.0.4",
    "postcss-preset-env": "9.3.0",
}
```
We want the style to have our global css and so we did it:
```ts
import { initialize, mswLoader } from "msw-storybook-addon";

import { MINIMAL_VIEWPORTS } from "@storybook/addon-viewport";

import handlers from "../src/mocks/handlers";

import type { Preview } from "@storybook/react";

import "../src/app/[locale]/globals.css";

```

But running the storybook, we get the following issues, first time running storybook:
```bash
ERROR in ./node_modules/.pnpm/open-props@1.6.18/node_modules/open-props/animations.min.css (./node_modules/.pnpm/css-loader@6.10.0_webpack@5.90.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[8].use[1]!./node_modules/.pnpm/postcss-loader@7.3.4_postcss@8.4.35_typescript@5.3.3_webpack@5.90.1/node_modules/postcss-loader/dist/cjs.js!./node_modules/.pnpm/open-props@1.6.18/node_modules/open-props/animations.min.css)
Module build failed (from ./node_modules/.pnpm/postcss-loader@7.3.4_postcss@8.4.35_typescript@5.3.3_webpack@5.90.1/node_modules/postcss-loader/dist/cjs.js):
Error: Cannot find module 'postcss-import'
Require stack:
- /home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/open-props@1.6.18/node_modules/open-props/postcss.config.cjs
- /home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/cosmiconfig@8.3.6_typescript@5.3.3/node_modules/cosmiconfig/dist/loaders.js
- /home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/cosmiconfig@8.3.6_typescript@5.3.3/node_modules/cosmiconfig/dist/Explorer.js
- /home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/cosmiconfig@8.3.6_typescript@5.3.3/node_modules/cosmiconfig/dist/index.js
- /home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/postcss-loader@7.3.4_postcss@8.4.35_typescript@5.3.3_webpack@5.90.1/node_modules/postcss-loader/dist/utils.js
- /home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/postcss-loader@7.3.4_postcss@8.4.35_typescript@5.3.3_webpack@5.90.1/node_modules/postcss-loader/dist/index.js
- /home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/postcss-loader@7.3.4_postcss@8.4.35_typescript@5.3.3_webpack@5.90.1/node_modules/postcss-loader/dist/cjs.js
- /home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/webpack@5.90.1_@swc+core@1.4.0_esbuild@0.18.20/node_modules/webpack/lib/ProgressPlugin.js
- /home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/webpack@5.90.1_@swc+core@1.4.0_esbuild@0.18.20/node_modules/webpack/lib/index.js
- /home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/@storybook+nextjs@7.6.13_@swc+core@1.4.0_esbuild@0.18.20_next@14.1.0_react-dom@18.2.0_react@1_hira244ys3bq3vxf32k3zzxybi/node_modules/@storybook/nextjs/dist/preset.js
- /home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/@storybook+core-common@7.6.13/node_modules/@storybook/core-common/dist/index.js
- /home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/@storybook+telemetry@7.6.13/node_modules/@storybook/telemetry/dist/index.js
- /home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/@storybook+cli@7.6.13/node_modules/@storybook/cli/dist/generate.js
- /home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/@storybook+cli@7.6.13/node_modules/@storybook/cli/bin/index.js
- /home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/storybook@7.6.13/node_modules/storybook/index.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)
    at Module._resolveFilename (/home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/esbuild-register@3.5.0_esbuild@0.18.20/node_modules/esbuild-register/dist/node.js:4799:36)
    at /home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/require-hook.js:55:36
    at Module._load (node:internal/modules/cjs/loader:985:27)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at mod.require (/home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/require-hook.js:65:28)
    at require (node:internal/modules/helpers:176:18)
    at Object.<anonymous> (/home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/open-props@1.6.18/node_modules/open-props/postcss.config.cjs:2:27)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Object.newLoader (/home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/esbuild-register@3.5.0_esbuild@0.18.20/node_modules/esbuild-register/dist/node.js:2262:9)
    at extensions..js (/home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/esbuild-register@3.5.0_esbuild@0.18.20/node_modules/esbuild-register/dist/node.js:4838:24)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at mod.require (/home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/require-hook.js:65:28)
    at module.exports (/home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/import-fresh@3.3.0/node_modules/import-fresh/index.js:32:59)
    at loadJsSync (/home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/cosmiconfig@8.3.6_typescript@5.3.3/node_modules/cosmiconfig/dist/loaders.js:17:12)
    at #loadConfiguration (/home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/cosmiconfig@8.3.6_typescript@5.3.3/node_modules/cosmiconfig/dist/Explorer.js:92:30)
    at #readConfiguration (/home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/cosmiconfig@8.3.6_typescript@5.3.3/node_modules/cosmiconfig/dist/Explorer.js:77:80)
    at async search (/home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/cosmiconfig@8.3.6_typescript@5.3.3/node_modules/cosmiconfig/dist/Explorer.js:44:40)
    at async Explorer.search (/home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/cosmiconfig@8.3.6_typescript@5.3.3/node_modules/cosmiconfig/dist/Explorer.js:71:20)
    at async loadConfig (/home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/postcss-loader@7.3.4_postcss@8.4.35_typescript@5.3.3_webpack@5.90.1/node_modules/postcss-loader/dist/utils.js:118:16)
    at async Object.loader (/home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/postcss-loader@7.3.4_postcss@8.4.35_typescript@5.3.3_webpack@5.90.1/node_modules/postcss-loader/dist/index.js:45:22)
 @ ./node_modules/.pnpm/css-loader@6.10.0_webpack@5.90.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[8].use[1]!./node_modules/.pnpm/postcss-loader@7.3.4_postcss@8.4.35_typescript@5.3.3_webpack@5.90.1/node_modules/postcss-loader/dist/cjs.js!./src/app/[locale]/globals.css 5:0-400 20:26-59
 @ ./src/app/[locale]/globals.css 8:6-323 22:17-24 26:7-21 52:25-39 53:36-47 53:50-64 57:6-67:7 58:54-65 58:68-82 64:42-53 64:56-70 66:21-28 77:0-293 77:0-293 78:22-29 78:33-47 78:50-64 55:4-68:5
 @ ./.storybook/preview.ts 4:0-41
 @ ./storybook-config-entry.js 9:2900-2975 33:2-36:4 33:2868-36:3 ```
 
 After installing it manually, I got the next issue with running storybook:
 ```bash
 ojects/TRT/twe_fe_next/node_modules/.pnpm/postcss-loader@7.3.4_postcss@8.4.35_typescript@5.3.3_webpack@5.90.1/node_modules/postcss-loader/dist/utils.js
- /home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/postcss-loader@7.3.4_postcss@8.4.35_typescript@5.3.3_webpack@5.90.1/node_modules/postcss-loader/dist/index.js
- /home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/postcss-loader@7.3.4_postcss@8.4.35_typescript@5.3.3_webpack@5.90.1/node_modules/postcss-loader/dist/cjs.js
- /home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/webpack@5.90.1_@swc+core@1.4.0_esbuild@0.18.20/node_modules/webpack/lib/ProgressPlugin.js
- /home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/webpack@5.90.1_@swc+core@1.4.0_esbuild@0.18.20/node_modules/webpack/lib/index.js
- /home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/@storybook+nextjs@7.6.13_@swc+core@1.4.0_esbuild@0.18.20_next@14.1.0_react-dom@18.2.0_react@1_hira244ys3bq3vxf32k3zzxybi/node_modules/@storybook/nextjs/dist/preset.js
- /home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/@storybook+core-common@7.6.13/node_modules/@storybook/core-common/dist/index.js
- /home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/@storybook+telemetry@7.6.13/node_modules/@storybook/telemetry/dist/index.js
- /home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/@storybook+cli@7.6.13/node_modules/@storybook/cli/dist/generate.js
- /home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/@storybook+cli@7.6.13/node_modules/@storybook/cli/bin/index.js
- /home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/storybook@7.6.13/node_modules/storybook/index.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)
    at Module._resolveFilename (/home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/esbuild-register@3.5.0_esbuild@0.18.20/node_modules/esbuild-register/dist/node.js:4799:36)
    at /home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/require-hook.js:55:36
    at Module._load (node:internal/modules/cjs/loader:985:27)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at mod.require (/home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/require-hook.js:65:28)
    at require (node:internal/modules/helpers:176:18)
    at Object.<anonymous> (/home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/open-props@1.6.18/node_modules/open-props/postcss.config.cjs:3:27)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Object.newLoader (/home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/esbuild-register@3.5.0_esbuild@0.18.20/node_modules/esbuild-register/dist/node.js:2262:9)
    at extensions..js (/home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/esbuild-register@3.5.0_esbuild@0.18.20/node_modules/esbuild-register/dist/node.js:4838:24)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at mod.require (/home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/require-hook.js:65:28)
    at module.exports (/home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/import-fresh@3.3.0/node_modules/import-fresh/index.js:32:59)
    at loadJsSync (/home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/cosmiconfig@8.3.6_typescript@5.3.3/node_modules/cosmiconfig/dist/loaders.js:17:12)
    at #loadConfiguration (/home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/cosmiconfig@8.3.6_typescript@5.3.3/node_modules/cosmiconfig/dist/Explorer.js:92:30)
    at #readConfiguration (/home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/cosmiconfig@8.3.6_typescript@5.3.3/node_modules/cosmiconfig/dist/Explorer.js:77:80)
    at async search (/home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/cosmiconfig@8.3.6_typescript@5.3.3/node_modules/cosmiconfig/dist/Explorer.js:44:40)
    at async Explorer.search (/home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/cosmiconfig@8.3.6_typescript@5.3.3/node_modules/cosmiconfig/dist/Explorer.js:71:20)
    at async loadConfig (/home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/postcss-loader@7.3.4_postcss@8.4.35_typescript@5.3.3_webpack@5.90.1/node_modules/postcss-loader/dist/utils.js:118:16)
    at async Object.loader (/home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/postcss-loader@7.3.4_postcss@8.4.35_typescript@5.3.3_webpack@5.90.1/node_modules/postcss-loader/dist/index.js:45:22)
 @ ./node_modules/.pnpm/css-loader@6.10.0_webpack@5.90.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[8].use[1]!./node_modules/.pnpm/postcss-loader@7.3.4_postcss@8.4.35_typescript@5.3.3_webpack@5.90.1/node_modules/postcss-loader/dist/cjs.js!./src/app/[locale]/globals.css 5:0-400 20:26-59
 @ ./src/app/[locale]/globals.css 8:6-323 22:17-24 26:7-21 52:25-39 53:36-47 53:50-64 57:6-67:7 58:54-65 58:68-82 64:42-53 64:56-70 66:21-28 77:0-293 77:0-293 78:22-29 78:33-47 78:50-64 55:4-68:5
 @ ./.storybook/preview.ts 4:0-41
 @ ./storybook-config-entry.js 9:2900-2975 33:2-36:4 33:2868-36:3
 ```
 
 This does not happen when running the **NextJS** development server:
![image](https://github.com/storybookjs/storybook/assets/5034215/77bcdc4f-0e20-4692-ab0b-679ca52fa052)

 It also does not happen when we don't import the global styles:
``` css
@import url("open-props/normalize");
@import url("open-props/animations");
@import url("open-props/aspects");
@import url("open-props/borders");
@import url("open-props/durations");
@import url("open-props/easings");
@import url("open-props/fonts");
@import url("open-props/media");
@import url("open-props/shadows");
@import url("open-props/sizes");
@import url("open-props/zindex");

@import url("open-props/green");
@import url("open-props/red");
@import url("open-props/yellow");

/* Light Theme and Globals */
```

It seems there is a problem importing the Open Props files, and they are required since we use its tokens.


### To Reproduce

https://stackblitz.com/edit/github-91aey4?embed=1

### System

```bash
Storybook Environment Info:

  System:
    OS: Linux 6.1 Manjaro Linux
    CPU: (16) x64 AMD Ryzen 9 5900HX with Radeon Graphics
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    Yarn: 1.22.21 - /usr/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
    pnpm: 8.15.1 - /usr/bin/pnpm <----- active
  npmPackages:
    @storybook/addon-a11y: 7.6.13 => 7.6.13 
    @storybook/addon-essentials: 7.6.13 => 7.6.13 
    @storybook/addon-interactions: 7.6.13 => 7.6.13 
    @storybook/addon-links: 7.6.13 => 7.6.13 
    @storybook/addon-onboarding: 1.0.11 => 1.0.11 
    @storybook/addon-storysource: 7.6.13 => 7.6.13 
    @storybook/blocks: 7.6.13 => 7.6.13 
    @storybook/nextjs: 7.6.13 => 7.6.13 
    @storybook/react: 7.6.13 => 7.6.13 
    @storybook/test: 8.0.0-alpha.16 => 8.0.0-alpha.16 
    @storybook/theming: 7.6.13 => 7.6.13 
    eslint-plugin-storybook: 0.6.15 => 0.6.15 
    msw-storybook-addon: 2.0.0-beta.1 => 2.0.0-beta.1 
    storybook: 7.6.13 => 7.6.13 
    storybook-addon-pseudo-states: 2.1.2 => 2.1.2
```


### Additional context

# Workaround

Installing `postcss-import` and `cssnano` on the main project does fix this issue.