Merge pull request #1694 from jd-opensource/feature_micro

Feature micro

Author: raoenhui

dev/children/react17/src/App.css

@@ -1,3 +1,9 @@
+
+:root {
+  /* 主题色 */
+  --text-color: blue; 
+}
+
 .App {
   text-align: center;
 }
@@ -23,6 +29,9 @@
   color: #333;
   /* test about @container */
   container-type: inline-size; 
+  p {
+      color: var(--text-color);  
+  }
 }
 
 @container (max-width: 1000px) {

dev/main-react16/src/components/HeaderSearch/index.less

@@ -1,6 +1,9 @@
 @import '~antd/es/style/themes/default.less';
 
 .headerSearch {
+  .anticon{
+    color: var(--text-color);  
+  }
   .input {
     width: 0;
     min-width: 0;

dev/main-react16/src/global.jsx

@@ -93,6 +93,7 @@ microApp.start({
   //   return node.parentElement
   // },
   // iframeSrc: 'http://localhost:3000/',
+  optionCss: ['isolation-root'],//有isolation-root（子应用:root 中定义的变量不起作用，默认用基座的）
   lifeCycles: {
     created (e, appName) {
       console.log(`子应用${appName}被创建 -- 全局监听`)

dev/main-react16/src/pages/react17/react17.js

@@ -6,6 +6,7 @@ import microApp from '@micro-zoe/micro-app'
 import { Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import config from '../../config'
+import './react17.less'
 
 const antIcon = <LoadingOutlined style={{ fontSize: 30 }} spin />
 

dev/main-react16/src/pages/react17/react17.less

@@ -0,0 +1,9 @@
+
+:root {
+  /* 主题色 */
+  --text-color: red; //基座
+}
+
+#logo.ant-pro-sider-logo h1{
+  color:var(--text-color);
+}

docs/zh-cn/advanced.md

@@ -110,4 +110,14 @@ microApp.start({
   // iframe模式下，不对事件对象的原型判断进行代理
   excludeRewriteIframeConstructor: ['EventTarget']
 })
+```
+
+## 8、optionCss : css属性隔离配置项
+```js
+import microApp from '@micro-zoe/micro-app'
+
+microApp.start({
+  // 有isolation-root（子应用:root 中定义的变量失效，默认用基座的）
+  optionCss: ['isolation-root']
+})
 ```

docs/zh-cn/changelog.md

@@ -7,12 +7,18 @@
 - 修订版本号：每周末会进行日常 bugfix 更新。（如果有紧急的 bugfix，则任何时候都可发布）
 
 ---
-### 1.0.0-rc.30
+### 1.0.0-rc.31
+
+`2026-06-09`
+- **Feature**
+  - 新增Css隔离选项：支持子应用:root 中定义的变量失效，用基座的。可设置成optionCss: ['isolation-root']
 
+### 1.0.0-rc.30
 `2026-04-20`
 - **Bug Fix**
   - 🐞 修复 Int16Array()，Int32Array()，Int8Array(),Float16Array()方法不支持，[issue 1589](https://github.com/jd-opensource/micro-app/issues/1589)
   - 🐞 修复 子应用使用 tailwindcss 4 无法正常工作，[issue 1550](https://github.com/jd-opensource/micro-app/issues/1550)
+
 ### 1.0.0-rc.29
 
 `2026-01-30`

src/sandbox/scoped_css.ts

@@ -3,8 +3,8 @@ import type { AppInterface } from '@micro-app/types'
 import { CompletionPath, getLinkFileDir, logError, trim, isFireFox } from '../libs/utils'
 import microApp from '../micro_app'
 
-// common reg
-const rootSelectorREG = /(^|\s+)(html|:root)(?=[\s>~[.#:]+|$)/
+// common regular expression
+// const rootSelectorREG = /(^|\s+)(html|:root)(?=[\s>~[.#:]+|$)/
 const bodySelectorREG = /(^|\s+)((html[\s>~]+body)|body)(?=[\s>~[.#:]+|$)/
 
 type parseErrorType = Error & { reason: string, filename?: string }
@@ -34,6 +34,7 @@ class CSSParser {
   private scopecssDisable = false // use block comments /* scopecss-disable */ to disable scopecss in your file, and use /* scopecss-enable */ to enable scopecss
   private scopecssDisableSelectors: Array<string> = [] // disable or enable scopecss for specific selectors
   private scopecssDisableNextLine = false // use block comments /* scopecss-disable-next-line */ to disable scopecss on a specific line
+  private optionCssSelectors: Array<string> = [] // use this option to include specific selectors, so that they will be affected by scopecss ,like microApp.options.optionCss
 
   public exec (
     cssText: string,
@@ -45,6 +46,8 @@ class CSSParser {
     this.prefix = prefix
     this.baseURI = baseURI
     this.linkPath = linkPath || ''
+    // fetch optionCss configure
+    this.optionCssSelectors = microApp.options.optionCss || []
 
     this.matchRules()
     return isFireFox() ? decodeURIComponent(this.result) : this.result
@@ -54,6 +57,7 @@ class CSSParser {
     this.cssText = this.prefix = this.baseURI = this.linkPath = this.result = ''
     this.scopecssDisable = this.scopecssDisableNextLine = false
     this.scopecssDisableSelectors = []
+    this.optionCssSelectors = []
   }
 
   // core action for match rules
@@ -123,6 +127,15 @@ class CSSParser {
         }
         return match
       })
+
+      // Check if it is in the optionCss list
+      const isIsolationRoot = this.optionCssSelectors.some(includeSelector => {
+        // isolation-root is used to isolation the :root styles between base-app and sub-app
+        if (includeSelector === 'isolation-root') return true
+        return false
+      })
+      const rootSelectorREG = isIsolationRoot ? /(^|\s+)(html)(?=[\s>~[.#:]+|$)/ : /(^|\s+)(html|:root)(?=[\s>~[.#:]+|$)/ // without root
+
       if (selector && !(
         this.scopecssDisableNextLine ||
         (

typings/global.d.ts

@@ -373,6 +373,7 @@ declare module '@micro-app/types' {
     escapeIframeWindowEvents? : Array<string>,
     disableIframeRootDocument?: boolean,
     excludeRewriteIframeConstructor?: string[]
+    optionCss?: string[] // some configurations of CSS
   }
 
   // MicroApp config