fix: failed to load postcss.config.ts (#2385)

chenjiahan · web-flow · commit 49e62f616684 · 2024-05-19T21:30:34.000+08:00
diff --git a/e2e/cases/css/postcss-config-ts/index.test.ts b/e2e/cases/css/postcss-config-ts/index.test.ts
@@ -0,0 +1,17 @@
+import { build } from '@e2e/helper';
+import { expect, test } from '@playwright/test';
+
+test('should load postcss.config.ts correctly', async () => {
+  const rsbuild = await build({
+    cwd: __dirname,
+  });
+
+  const files = await rsbuild.unwrapOutputJSON();
+  const indexCssFile = Object.keys(files).find(
+    (file) => file.includes('index.') && file.endsWith('.css'),
+  )!;
+
+  expect(files[indexCssFile]).toEqual(
+    '.text-3xl{font-size:1.875rem;line-height:2.25rem}.font-bold{font-weight:700}.underline{text-decoration-line:underline}',
+  );
+});
diff --git a/e2e/cases/css/postcss-config-ts/postcss.config.ts b/e2e/cases/css/postcss-config-ts/postcss.config.ts
@@ -0,0 +1,9 @@
+const path = require('node:path');
+
+export default {
+  plugins: {
+    tailwindcss: {
+      config: path.join(__dirname, './tailwind.config.cjs'),
+    },
+  },
+};
diff --git a/e2e/cases/css/postcss-config-ts/rsbuild.config.ts b/e2e/cases/css/postcss-config-ts/rsbuild.config.ts
@@ -0,0 +1,5 @@
+export default {
+  html: {
+    template: './src/index.html',
+  },
+};
diff --git a/e2e/cases/css/postcss-config-ts/src/index.css b/e2e/cases/css/postcss-config-ts/src/index.css
@@ -0,0 +1 @@
+@tailwind utilities;
diff --git a/e2e/cases/css/postcss-config-ts/src/index.html b/e2e/cases/css/postcss-config-ts/src/index.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<html>
+  <head></head>
+  <body>
+    <h1 class="text-3xl font-bold underline">Hello world!</h1>
+  </body>
+</html>
diff --git a/e2e/cases/css/postcss-config-ts/src/index.ts b/e2e/cases/css/postcss-config-ts/src/index.ts
@@ -0,0 +1 @@
+import './index.css';
diff --git a/e2e/cases/css/postcss-config-ts/tailwind.config.cjs b/e2e/cases/css/postcss-config-ts/tailwind.config.cjs
@@ -0,0 +1,10 @@
+const path = require('node:path');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [path.join(__dirname, './src/**/*.{html,js,ts,jsx,tsx}')],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/packages/core/prebundle.config.mjs b/packages/core/prebundle.config.mjs
@@ -105,22 +105,24 @@ export default {
     {
       name: 'postcss-load-config',
       externals: {
-        jiti: '@rsbuild/shared/jiti',
         yaml: '@rsbuild/shared/yaml',
+        '@rsbuild/shared/jiti': '@rsbuild/shared/jiti',
       },
       ignoreDts: true,
       // this is a trick to avoid ncc compiling the dynamic import syntax
       // https://github.com/vercel/ncc/issues/935
       beforeBundle(task) {
-        replaceFileContent(
-          join(task.depPath, 'src/req.js'),
-          (content) => `${content.replace('await import', 'await __import')}`,
+        replaceFileContent(join(task.depPath, 'src/req.js'), (content) =>
+          content
+            .replaceAll('await import', 'await __import')
+            .replaceAll(`import('jiti')`, `import('@rsbuild/shared/jiti')`),
         );
       },
       afterBundle(task) {
         replaceFileContent(
           join(task.distPath, 'index.js'),
-          (content) => `${content.replace('await __import', 'await import')}`,
+          (content) =>
+            `${content.replaceAll('await __import', 'await import')}`,
         );
       },
     },

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +export default {
 +  html: {
 +    template: './src/index.html',
 +  },
 +};