feat: Add a validation for postcss with useLightningcss (#64379)

### What? Add validation to ensure that the user is not using postcss when `experimental.useLightningcss` is enabled. ### Why? It's confusing. ### How? Closes PACK-2928
vercel · Apr 16, 2024 · f1ad9c9 · f1ad9c9
1 parent bef015e
commit f1ad9c9
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 5 deletions.
diff --git a/packages/next/src/build/webpack/config/blocks/css/index.ts b/packages/next/src/build/webpack/config/blocks/css/index.ts
@@ -57,7 +57,8 @@ let postcssInstancePromise: Promise<any>
 export async function lazyPostCSS(
   rootDirectory: string,
   supportedBrowsers: string[] | undefined,
-  disablePostcssPresetEnv: boolean | undefined
+  disablePostcssPresetEnv: boolean | undefined,
+  useLightningcss: boolean | undefined
 ) {
   if (!postcssInstancePromise) {
     postcssInstancePromise = (async () => {
@@ -128,7 +129,8 @@ export async function lazyPostCSS(
       const postCssPlugins = await getPostCssPlugins(
         rootDirectory,
         supportedBrowsers,
-        disablePostcssPresetEnv
+        disablePostcssPresetEnv,
+        useLightningcss
       )
 
       return {
@@ -155,7 +157,8 @@ export const css = curry(async function css(
     lazyPostCSS(
       ctx.rootDirectory,
       ctx.supportedBrowsers,
-      ctx.experimental.disablePostcssPresetEnv
+      ctx.experimental.disablePostcssPresetEnv,
+      ctx.experimental.useLightningcss
     )
 
   const sassPreprocessors: webpack.RuleSetUseItem[] = [

diff --git a/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts b/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts
@@ -34,6 +34,7 @@ export function getGlobalCssLoader(
         import: (url: string, _: any, resourcePath: string) =>
           cssFileResolve(url, resourcePath, ctx.experimental.urlImports),
         targets: ctx.supportedBrowsers,
+        postcss,
       },
     })
   } else {

diff --git a/packages/next/src/build/webpack/config/blocks/css/loaders/modules.ts b/packages/next/src/build/webpack/config/blocks/css/loaders/modules.ts
@@ -40,6 +40,7 @@ export function getCssModuleLoader(
           exportOnlyLocals: ctx.isServer,
         },
         targets: ctx.supportedBrowsers,
+        postcss,
       },
     })
   } else {

diff --git a/packages/next/src/build/webpack/config/blocks/css/plugins.ts b/packages/next/src/build/webpack/config/blocks/css/plugins.ts
@@ -116,7 +116,8 @@ function getDefaultPlugins(
 export async function getPostCssPlugins(
   dir: string,
   supportedBrowsers: string[] | undefined,
-  disablePostcssPresetEnv: boolean = false
+  disablePostcssPresetEnv: boolean = false,
+  useLightningcss: boolean = false
 ): Promise<import('postcss').AcceptedPlugin[]> {
   let config = await findConfig<{ plugins: CssPluginCollection }>(
     dir,
@@ -125,7 +126,9 @@ export async function getPostCssPlugins(
 
   if (config == null) {
     config = {
-      plugins: getDefaultPlugins(supportedBrowsers, disablePostcssPresetEnv),
+      plugins: useLightningcss
+        ? []
+        : getDefaultPlugins(supportedBrowsers, disablePostcssPresetEnv),
     }
   }
 

diff --git a/packages/next/src/build/webpack/loaders/lightningcss-loader/src/loader.ts b/packages/next/src/build/webpack/loaders/lightningcss-loader/src/loader.ts
@@ -281,6 +281,16 @@ export async function LightningCssLoader(
     return
   }
 
+  if (options.postcss) {
+    const { postcssWithPlugins } = await options.postcss()
+
+    if (postcssWithPlugins?.plugins?.length > 0) {
+      throw new Error(
+        `[${LOADER_NAME}]: experimental.useLightningcss does not work with postcss plugins. Please remove 'useLightningcss: true' from your configuration.`
+      )
+    }
+  }
+
   const exports: CssExport[] = []
   const imports: CssImport[] = []
   const icssImports: CssImport[] = []