Merge pull request #273 from core-ds/feature/wmf-css-prefix

Добавлена возможность задавать сss-prefix для MF модулей
core-ds · Oct 2, 2024 · 3b7995e · 3b7995e
2 parents 9d1501b + 2a23b33
commit 3b7995e
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 11 deletions.
diff --git a/.changeset/warm-terms-shave.md b/.changeset/warm-terms-shave.md
@@ -0,0 +1,5 @@
+---
+'arui-scripts': patch
+---
+
+Добавлена возможность задавать css префикс для MF модулей
diff --git a/packages/arui-scripts/docs/modules.md b/packages/arui-scripts/docs/modules.md
@@ -338,10 +338,10 @@ export const MyAwesomeComponent = () => {
 трудоемкой задачей, особенно если у вас уже есть большая кодовая база.
 
 arui-scripts предоставляет два решения для этой проблемы:
-- _compat_ модули
+- _css-prefix_
 - использование shadow dom
 
-## compat модули
+## css-prefix
 
 Суть метода заключается в том, что ко всем стилям модуля будет добавляться префикс, который позволит изолировать
 стили модуля от стилей приложения-потребителя.
@@ -354,7 +354,7 @@ arui-scripts предоставляет два решения для этой п
 1. Изменить конфигурацию модуля в `arui-scripts.config.ts`:
 
 ```ts
-// ./arui-scripts.config.ts
+// ./arui-scripts.config.ts compatModules
 import type { PackageSettings } from 'arui-scripts';
 
 const aruiScriptsConfig: PackageSettings = {
@@ -384,6 +384,28 @@ const aruiScriptsConfig: PackageSettings = {
 export default aruiScriptsConfig;
 ```
 
+```ts
+// ./arui-scripts.config.ts module federation
+import type { PackageSettings } from 'arui-scripts';
+
+const aruiScriptsConfig: PackageSettings = {
+    modules: {
+        shared: {
+            'react': '^17.0.0',
+            'react-dom': '^17.0.0',
+        },
+        exposes: {
+            'Module': './src/modules/module/index',
+        },
+        options: {
+            cssPrefix: '.my-module'
+        }
+    }
+}
+
+export default aruiScriptsConfig;
+```
+
 2. Изменить входную точку модуля:
 
 ```tsx

diff --git a/packages/arui-scripts/src/configs/app-configs/types.ts b/packages/arui-scripts/src/configs/app-configs/types.ts
@@ -89,13 +89,17 @@ export type AppConfigs = {
         name?: string;
         shared: any; // webpack don't expose this type
         exposes?: Record<string, string>;
+        options?: ModuleConfigBase;
     } | null;
 };
 
-type CompatModuleConfigBase = {
+export type ModuleConfigBase = {
+    cssPrefix?: false | string;
+};
+
+type CompatModuleConfigBase  = ModuleConfigBase & {
     entry: string;
     externals?: Record<string, string>;
-    cssPrefix?: false | string;
 };
 
 export type CompatModuleConfig = CompatModuleConfigBase & {

diff --git a/packages/arui-scripts/src/configs/modules.ts b/packages/arui-scripts/src/configs/modules.ts
@@ -22,6 +22,12 @@ export function patchMainWebpackConfigForModules(webpackConf: webpack.Configurat
         return webpackConf;
     }
 
+    const {cssPrefix} = configs.modules.options || {};
+
+    if (cssPrefix) {
+        addCssPrefix(webpackConf, cssPrefix);
+    }
+
     webpackConf.output.publicPath = haveExposedDefaultModules()
         ? 'auto' // Для того чтобы модули могли подключаться из разных мест, нам необходимо использовать auto. Для корректной работы в IE надо подключaть https://github.com/amiller-gh/currentScript-polyfill
         : configs.publicPath;
@@ -73,6 +79,14 @@ export function getExposeLoadersFormCompatModules() {
     });
 }
 
+function addCssPrefix(webpackConf: webpack.Configuration, cssPrefix: string){
+    const cssRule = findLoader(webpackConf, '/\\.css$/');
+    const cssModulesRule = findLoader(webpackConf, '/\\.module\\.css$/');
+
+    addPrefixCssRule(cssRule, cssPrefix);
+    addPrefixCssRule(cssModulesRule, `:global(${cssPrefix})`);
+}
+
 function addPrefixCssRule(rule: webpack.RuleSetRule | undefined, prefix: string) {
     if (!rule || !rule.use || !Array.isArray(rule.use)) {
         return;
@@ -122,12 +136,7 @@ export function patchWebpackConfigForCompat(
     const cssPrefix = getCssPrefixForModule(module);
 
     if (cssPrefix) {
-        // Добавляем префикс для css-классов, чтобы изолировать стили модуля от стилей основного приложения
-        const cssRule = findLoader(webpackConf, '/\\.css$/');
-        const cssModulesRule = findLoader(webpackConf, '/\\.module\\.css$/');
-
-        addPrefixCssRule(cssRule, cssPrefix);
-        addPrefixCssRule(cssModulesRule, `:global(${cssPrefix})`);
+        addCssPrefix(webpackConf, cssPrefix);
     }
 
     return webpackConf;