feat: add CSS file reference for styled share module

Author: imyangyong

packages/examples/vue3-demo-esm-shared-store/__tests__/vue3-demo-esm-shared-styled.serve.spec.ts

@@ -0,0 +1,30 @@
+import { expect, test } from 'vitest'
+import path from 'node:path'
+import fs from 'node:fs'
+
+function readFileWithRegexPattern(dirPath, regexPattern) {
+  // Get all files in the directory
+  const files = fs.readdirSync(dirPath);
+
+  // Find the file that matches the regex pattern
+  const matchedFile = files.find(file => regexPattern.test(file));
+
+  if (!matchedFile) {
+    throw new Error(`No file found matching pattern: ${regexPattern}`);
+  }
+
+  // Read and return the file content
+  return fs.readFileSync(path.join(dirPath, matchedFile), 'utf-8');
+}
+
+test('should have css imported', () => {
+  const dirPath = path.resolve(__dirname, '../host/dist/assets');
+  const regexPattern = /^__federation_shared_shared-styled-.*\.js$/;
+  try {
+    const css = readFileWithRegexPattern(dirPath, regexPattern)
+    expect(css).toMatch(/import.+\.css';/)
+  } catch (error) {
+    console.error(error)
+  }
+})
+

packages/examples/vue3-demo-esm-shared-store/host/package.json

@@ -10,7 +10,8 @@
   },
   "dependencies": {
     "vue": "^3.2.45",
-    "pinia": "^2.0.21"
+    "pinia": "^2.0.21",
+    "shared-styled": "file:./shared-styled"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.0.0",

packages/examples/vue3-demo-esm-shared-store/host/shared-styled/index.js

@@ -0,0 +1,3 @@
+import './style.css'
+
+export {}

packages/examples/vue3-demo-esm-shared-store/host/shared-styled/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "shared-styled",
+  "version": "1.0.0",
+  "main": "index.js"
+}

packages/examples/vue3-demo-esm-shared-store/host/shared-styled/style.css

@@ -0,0 +1,3 @@
+.foo {
+  color: red;
+}

packages/examples/vue3-demo-esm-shared-store/host/src/main.js

@@ -1,5 +1,6 @@
 import { createApp} from "vue";
 import { createPinia } from 'pinia'
+import 'shared-styled'
 import App from "./App.vue";
 
 const app = createApp(App);

packages/examples/vue3-demo-esm-shared-store/host/vite.config.ts

@@ -34,7 +34,8 @@ export default defineConfig({
                 myStore: {
                     packagePath: './src/store.js',
                     modulePreload: true,
-                }
+                },
+                'shared-styled': {}
             }
         })
     ],

packages/lib/src/prod/shared-production.ts

@@ -13,11 +13,14 @@
 // SPDX-License-Identifier: MulanPSL-2.0
 // *****************************************************************************
 
+import MagicString from 'magic-string'
 import type { PluginHooks } from '../../types/pluginHooks'
 import { NAME_CHAR_REG, parseSharedOptions, removeNonRegLetter } from '../utils'
-import { parsedOptions } from '../public'
+import { parsedOptions, builderInfo } from '../public'
 import type { ConfigTypeSet, VitePluginFederationOptions } from 'types'
-import { basename, join, resolve } from 'path'
+import type { RenderedChunk } from 'rollup'
+import type { ChunkMetadata } from 'vite'
+import { basename, join, resolve, relative, dirname } from 'path'
 import { readdirSync, readFileSync, statSync } from 'fs'
 const sharedFilePathReg = /__federation_shared_(.+)-.{8}\.js$/
 import federation_fn_import from './federation_fn_import.js?raw'
@@ -151,6 +154,38 @@ export function prodSharedPlugin(
       }
     },
 
+    renderChunk(this, code, _chunk) {
+      if (builderInfo.isShared) {
+        const chunk = _chunk as RenderedChunk & { viteMetadata?: ChunkMetadata }
+        const regRst = sharedFilePathReg.exec(chunk.fileName)
+        if (
+          regRst &&
+          shareName2Prop.get(removeNonRegLetter(regRst[1], NAME_CHAR_REG))
+            ?.generate !== false &&
+          chunk.type === 'chunk' &&
+          chunk.viteMetadata?.importedCss.size
+        ) {
+          /**
+           * Inject the referenced style files at the top of the chunk.
+           */
+          const magicString = new MagicString(code)
+          for (const cssFileName of chunk.viteMetadata.importedCss) {
+            let cssFilePath = relative(dirname(chunk.fileName), cssFileName)
+            cssFilePath = cssFilePath.startsWith('.')
+              ? cssFilePath
+              : `./${cssFilePath}`
+
+            magicString.prepend(`import '${cssFilePath}';`)
+          }
+
+          return {
+            code: magicString.toString(),
+            map: magicString.generateMap({ hires: true })
+          }
+        }
+      }
+    },
+
     outputOptions: function (outputOption) {
       // remove rollup generated empty imports,like import './filename.js'
       outputOption.hoistTransitiveImports = false