diff --git a/packages/playwright/src/transform/babelBundle.ts b/packages/playwright/src/transform/babelBundle.ts
index 0d4a9b3c561f2..5c9ee26663ec9 100644
--- a/packages/playwright/src/transform/babelBundle.ts
+++ b/packages/playwright/src/transform/babelBundle.ts
@@ -78,23 +78,23 @@ function babelTransformOptions(isTypeScript: boolean, isModule: boolean, plugins
     ...(jsxImportSource ? { importSource: jsxImportSource } : {}),
   }]);
 
-  if (!isModule) {
+  // Note: we used to include '@babel/plugin-transform-dynamic-import' to convert async imports
+  // into require(), so that pirates can intercept them. With the ESM loader enabled by default,
+  // there is no need for this.
+  if (!isModule)
     plugins.push([require('@babel/plugin-transform-modules-commonjs')]);
-    // Note: we used to include '@babel/plugin-transform-dynamic-import' to convert async imports
-    // into require(), so that pirates can intercept them. With the ESM loader enabled by default,
-    // there is no need for this.
-    plugins.push([
-      (): PluginObj => ({
-        name: 'css-to-identity-obj-proxy',
-        visitor: {
-          ImportDeclaration(path: NodePath<ImportDeclaration>) {
-            if (path.node.source.value.match(/\.(css|less|scss)$/))
-              path.remove();
-          }
+
+  plugins.push([
+    (): PluginObj => ({
+      name: 'css-to-identity-obj-proxy',
+      visitor: {
+        ImportDeclaration(path: NodePath<ImportDeclaration>) {
+          if (path.node.source.value.match(/\.(css|less|sass|scss|styl)$/))
+            path.remove();
         }
-      })
-    ]);
-  }
+      }
+    })
+  ]);
 
   return {
     browserslistConfigFile: false,
diff --git a/tests/playwright-test/loader.spec.ts b/tests/playwright-test/loader.spec.ts
index fcc56e0c79dfa..3e54c9689d299 100644
--- a/tests/playwright-test/loader.spec.ts
+++ b/tests/playwright-test/loader.spec.ts
@@ -1086,6 +1086,39 @@ test('should remove import css', async ({ runInlineTest }) => {
   expect(result.passed).toBe(1);
 });
 
+test('should remove stylesheet imports in esm mode', {
+  annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/39187' },
+}, async ({ runInlineTest }) => {
+  const result = await runInlineTest({
+    'package.json': JSON.stringify({ type: 'module' }),
+    'a.test.ts': `
+      import './styles.scss';
+      import './styles.sass';
+      import './styles.less';
+      import './styles.styl';
+      import './styles.css';
+      import { helper } from './helper.ts';
+
+      import { test, expect } from '@playwright/test';
+      test('pass', async () => {
+        expect(helper).toBe(42);
+      });
+    `,
+    'helper.ts': `
+      import './nested.scss';
+      export const helper = 42;
+    `,
+    'styles.scss': `@use 'sass:math'; .foo { color: red; }`,
+    'styles.sass': `.foo\n  color: red`,
+    'styles.less': `@primary: red; .foo { color: @primary; }`,
+    'styles.styl': `.foo\n  color red`,
+    'styles.css': `.foo { color: red; }`,
+    'nested.scss': `@import 'foo'; .bar { color: blue; }`,
+  });
+  expect(result.exitCode).toBe(0);
+  expect(result.passed).toBe(1);
+});
+
 test('should dynamically import re-exported cjs namespace', {
   annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/35812' },
 }, async ({ runInlineTest }) => {