You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
padmaia
changed the title
[turbopack] Local PostCSS configuration is not applied to CSS files imported from node_modules
[WEB-1016] [turbopack] Local PostCSS configuration is not applied to CSS files imported from node_modules
May 8, 2023
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
postcss.config.js
src/styles.globals.css
The line
padding: mod(50px, 51px);
should be transformed topadding: 50px;
. However, Turbopack emits the following CSSYou 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.Expected Behavior
CSS files imported from
node_modules
are transformed according to the locally supplied PostCSS configuration.To Reproduce
npm install
npm run without-turbopack
, openlocalhost:3000
, and confirm that the two buttons are equal in size.npm run turbopack
, openlocalhost: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
The text was updated successfully, but these errors were encountered: