From 81ab881c197f1b07b1ab36a14c770c88aad72d5a Mon Sep 17 00:00:00 2001
From: meteorlxy <meteor.lxy@foxmail.com>
Date: Fri, 31 May 2024 19:40:52 +0800
Subject: [PATCH] test(e2e): add case for importing styles from packages

---
 e2e/docs/.vuepress/client.ts            |  7 +++++++
 e2e/docs/imports/style-exports.md       |  3 +++
 e2e/modules/style-exports/foo.css       |  3 +++
 e2e/modules/style-exports/index.css     |  3 +++
 e2e/modules/style-exports/package.json  | 17 +++++++++++++++++
 e2e/modules/style-exports/types.d.ts    |  1 +
 e2e/package.json                        |  1 +
 e2e/tests/imports/style-exports.spec.ts | 19 +++++++++++++++++++
 pnpm-lock.yaml                          |  8 ++++++++
 9 files changed, 62 insertions(+)
 create mode 100644 e2e/docs/imports/style-exports.md
 create mode 100644 e2e/modules/style-exports/foo.css
 create mode 100644 e2e/modules/style-exports/index.css
 create mode 100644 e2e/modules/style-exports/package.json
 create mode 100644 e2e/modules/style-exports/types.d.ts
 create mode 100644 e2e/tests/imports/style-exports.spec.ts

diff --git a/e2e/docs/.vuepress/client.ts b/e2e/docs/.vuepress/client.ts
index d41e3d4969..bd262cd6a5 100644
--- a/e2e/docs/.vuepress/client.ts
+++ b/e2e/docs/.vuepress/client.ts
@@ -1,6 +1,13 @@
 import { defineClientConfig } from 'vuepress/client'
 import RootComponentFromUserConfig from './components/RootComponentFromUserConfig.vue'
 
+// static imported styles file
+import '@vuepress-e2e/style-exports/foo.css'
+
 export default defineClientConfig({
+  async enhance() {
+    // dynamic imported styles file
+    await import('@vuepress-e2e/style-exports')
+  },
   rootComponents: [RootComponentFromUserConfig],
 })
diff --git a/e2e/docs/imports/style-exports.md b/e2e/docs/imports/style-exports.md
new file mode 100644
index 0000000000..923c49c057
--- /dev/null
+++ b/e2e/docs/imports/style-exports.md
@@ -0,0 +1,3 @@
+<div class="style-exports">dynamic import</div>
+
+<div class="style-exports-foo">static import</div>
diff --git a/e2e/modules/style-exports/foo.css b/e2e/modules/style-exports/foo.css
new file mode 100644
index 0000000000..87806ead03
--- /dev/null
+++ b/e2e/modules/style-exports/foo.css
@@ -0,0 +1,3 @@
+.style-exports-foo {
+  font-size: 30px;
+}
diff --git a/e2e/modules/style-exports/index.css b/e2e/modules/style-exports/index.css
new file mode 100644
index 0000000000..9575bcb292
--- /dev/null
+++ b/e2e/modules/style-exports/index.css
@@ -0,0 +1,3 @@
+.style-exports {
+  font-size: 20px;
+}
diff --git a/e2e/modules/style-exports/package.json b/e2e/modules/style-exports/package.json
new file mode 100644
index 0000000000..68fd76d613
--- /dev/null
+++ b/e2e/modules/style-exports/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@vuepress-e2e/style-exports",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./types.d.ts",
+      "default": "./index.css"
+    },
+    "./foo.css": {
+      "types": "./types.d.ts",
+      "default": "./foo.css"
+    }
+  },
+  "main": "./index.css",
+  "module": "./index.css",
+  "types": "./types.d.ts"
+}
diff --git a/e2e/modules/style-exports/types.d.ts b/e2e/modules/style-exports/types.d.ts
new file mode 100644
index 0000000000..336ce12bb9
--- /dev/null
+++ b/e2e/modules/style-exports/types.d.ts
@@ -0,0 +1 @@
+export {}
diff --git a/e2e/package.json b/e2e/package.json
index f0376c3843..97fa7bddcc 100644
--- a/e2e/package.json
+++ b/e2e/package.json
@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@vuepress-e2e/conditional-exports": "file:./modules/conditional-exports",
+    "@vuepress-e2e/style-exports": "file:./modules/style-exports",
     "@vuepress/bundler-vite": "workspace:*",
     "@vuepress/bundler-webpack": "workspace:*",
     "sass": "^1.77.4",
diff --git a/e2e/tests/imports/style-exports.spec.ts b/e2e/tests/imports/style-exports.spec.ts
new file mode 100644
index 0000000000..45bc01f1b2
--- /dev/null
+++ b/e2e/tests/imports/style-exports.spec.ts
@@ -0,0 +1,19 @@
+import { expect, test } from '@playwright/test'
+
+test('should load dynamic imported styles correctly', async ({ page }) => {
+  await page.goto('imports/style-exports.html')
+
+  const locator = page.locator('.style-exports')
+
+  await expect(locator).toHaveText('dynamic import')
+  await expect(locator).toHaveCSS('font-size', '20px')
+})
+
+test('should load static imported styles correctly', async ({ page }) => {
+  await page.goto('imports/style-exports.html')
+
+  const locator = page.locator('.style-exports-foo')
+
+  await expect(locator).toHaveText('static import')
+  await expect(locator).toHaveCSS('font-size', '30px')
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b0af2a0b47..ead4038639 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -83,6 +83,9 @@ importers:
       '@vuepress-e2e/conditional-exports':
         specifier: file:./modules/conditional-exports
         version: file:e2e/modules/conditional-exports
+      '@vuepress-e2e/style-exports':
+        specifier: file:./modules/style-exports
+        version: file:e2e/modules/style-exports
       '@vuepress/bundler-vite':
         specifier: workspace:*
         version: link:../packages/bundler-vite
@@ -1376,6 +1379,9 @@ packages:
   '@vuepress-e2e/conditional-exports@file:e2e/modules/conditional-exports':
     resolution: {directory: e2e/modules/conditional-exports, type: directory}
 
+  '@vuepress-e2e/style-exports@file:e2e/modules/style-exports':
+    resolution: {directory: e2e/modules/style-exports, type: directory}
+
   '@webassemblyjs/ast@1.12.1':
     resolution: {integrity: sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==}
 
@@ -6238,6 +6244,8 @@ snapshots:
 
   '@vuepress-e2e/conditional-exports@file:e2e/modules/conditional-exports': {}
 
+  '@vuepress-e2e/style-exports@file:e2e/modules/style-exports': {}
+
   '@webassemblyjs/ast@1.12.1':
     dependencies:
       '@webassemblyjs/helper-numbers': 1.11.6