[turbopack] Local PostCSS configuration is not applied to CSS files imported from node_modules when using workspaces

[dstaley]

What version of Next.js are you using Turbopack in?

13.4.3 (also confirmed in 13.5.2 on September 20 2023)

What package manager are you using / does the bug impact?

npm

What operating system are you using?

Linux

Describe the Bug

When a workspace with a Next.js application is configured with a local PostCSS config file, CSS files imported from node_modules do not have locally-configured transformations applied.

For example, given the following:

node_modules/@localhostonly/button/style.module.css

.root {
  background-color: tomato;
  padding: mod(50px, 51px);
  @media (--medium-up) {
    background-color: aqua;
  }
}

node_modules/@localhostonly/global-styles/custom-media.css

@custom-media --small (max-width: 767px);
@custom-media --small-up (min-width: 0px);
@custom-media --medium (min-width: 768px) and (max-width: 1119px);
@custom-media --medium-up (min-width: 768px);
@custom-media --large (min-width: 1120px);

apps/repro/postcss.config.js

module.exports = {
  plugins: [
    [
      "@csstools/postcss-global-data",
      {
        files: ["node_modules://@localhostonly/global-styles/custom-media.css"],
      },
    ],
    [
      "postcss-preset-env",
      {
        stage: 2,
        browsers: ["defaults"],
        autoprefixer: { flexbox: "no-2009" },
        features: {
          "nesting-rules": true,
          "custom-media-queries": true,
          "custom-properties": false,
        },
      },
    ],
  ],
};

The line padding: mod(50px, 51px); should be transformed to padding: 50px; and the custom media query @media (--medium-up) should be transformed to @media (min-width: 768px). However, Turbopack emits the following CSS:

/* chunk [root of the server]/_next/static/chunks/08b5e_@localhostonly_button_style.module_b5a149.css */
/* [project]/node_modules/@localhostonly/button/style.module.css (css, css module) */
.root__style__7a7d5953 {
  background-color: tomato;
  padding: mod(50px, 51px);
}
@media (--medium-up) {
  .root__style__7a7d5953 {
    background-color: aqua;
  }
}

This does not match the CSS emitted by Next.js when running without Turbopack, or when the application is run outside of a monorepo using Turbopack.

.localButton {
  background-color: tomato;
  padding: 50px;
}
@media (min-width: 768px) {
  .localButton {
    background-color: aqua;
}
  }

Expected Behavior

CSS files imported from node_modules in applications stored in a workspace are transformed according to the locally supplied PostCSS configuration.

To Reproduce

1. Clone https://github.com/dstaley/turborepo-turbopack-postcss
2. npm install
3. npm run make-package
4. npx turbo run dev, open localhost:3000, and confirm that the two buttons are equal in size, that in viewports narrower than 768px the buttons are orange, and that in viewports wider than 768px the buttons are aqua.
5. npx turbo run dev-turbopack, open localhost:3000, and confirm that the "node_modules button" button has no padding, and that in viewports wider than 768px the "node_modules button" button remains orange.

Reproduction Repo

https://github.com/dstaley/turborepo-turbopack-postcss

_WEB-1614

[dstaley]

This is basically the same bug as #4861 (which 13.4.3 fixes) except the issue only occurs when the Next.js application is within an npm workspace. This isn't Turborepo specific, and reproduces when calling npm run dev-turbopack -w repro.

[realduolaf]

Same problem. need help