test(e2e): add case for importing styles from packages

Author: meteorlxy

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],
 })

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>

e2e/modules/style-exports/foo.css

@@ -0,0 +1,3 @@
+.style-exports-foo {
+  font-size: 30px;
+}

e2e/modules/style-exports/index.css

@@ -0,0 +1,3 @@
+.style-exports {
+  font-size: 20px;
+}

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"
+}

e2e/modules/style-exports/types.d.ts

@@ -0,0 +1 @@
+export {}

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",

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')
+})