[WEB-1016] [turbopack] Local PostCSS configuration is not applied to CSS files imported from node_modules

[dstaley]

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

13.4.1

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

npm

What operating system are you using?

Linux

Describe the Bug

When 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, instead defaulting to the built-in PostCSS configuration.

For example, given the following

node_modules/@localhostonly/reset/components.css

html {
  & button {
    all: unset;
    padding: mod(50px, 51px);
    border: 1px solid tomato;
  }
}

postcss.config.js

module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        stage: 2,
        features: {
          "all-property": true,
          "nesting-rules": true,
          "custom-media-queries": true,
        },
      },
    ],
  ],
};

src/styles.globals.css

@import "@localhostonly/reset/reset.css";

The line padding: mod(50px, 51px); should be transformed to padding: 50px;. However, Turbopack emits the following CSS

/* chunk [root of the server]/_next/static/chunks/src_styles_globals.css */
/* import([project]/node_modules/@localhostonly/reset/reset.css (css)) */

/* import([project]/node_modules/@localhostonly/reset/components.css (css)) */

/* [project]/node_modules/@localhostonly/reset/components.css (css) */
html {}
html button {
  all: unset;
  padding: mod(50px, 51px);
  border: 1px solid tomato;
}

/* [project]/node_modules/@localhostonly/reset/reset.css (css) */

You can see that the nesting has been transformed, but the mod() function has not. This does not match the CSS emitted by Next.js when running without Turbopack.

  html button {
    all: unset;
    padding: 50px;
    border: 1px solid tomato;
  }

Expected Behavior

CSS files imported from node_modules are transformed according to the locally supplied PostCSS configuration.

To Reproduce

1. Clone https://github.com/dstaley/turbopack-postcss-imports
2. npm install
3. npm run without-turbopack, open localhost:3000, and confirm that the two buttons are equal in size.
4. npm run turbopack, open localhost:3000, and observe that the button with the text "One" is smaller than the button with the text "Two"

Reproduction Repo

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

_WEB-1016

[padmaia]

Relevant PR: vercel/next.js#49463