feat(app): styleIsolation

packages/uni-app-vite/dist/index.js

@@ -7,7 +7,17 @@ const mainJs_1 = require("./plugins/mainJs");
 const manifestJson_1 = require("./plugins/manifestJson");
 const pagesJson_1 = require("./plugins/pagesJson");
 const resolveId_1 = require("./plugins/resolveId");
+function createUniCssScopedPluginOptions() {
+    const styleIsolation = uni_cli_shared_1.getAppStyleIsolation(uni_cli_shared_1.parseManifestJsonOnce(process.env.UNI_INPUT_DIR));
+    if (styleIsolation === 'isolated') {
+        // isolated: 对所有非 App.vue 增加 scoped
+        return {};
+    }
+    // apply-shared: 仅对非页面组件增加 scoped
+    return { exclude: /mpType=page/ };
+}
 const plugins = [
+    uni_cli_shared_1.uniCssScopedPlugin(createUniCssScopedPluginOptions()),
     resolveId_1.uniResolveIdPlugin(),
     copy_1.uniCopyPlugin(),
     mainJs_1.uniMainJsPlugin(),

packages/uni-app-vite/src/index.ts

-import { initProvide, uniViteInjectPlugin } from '@dcloudio/uni-cli-shared'
+import {
+  initProvide,
+  uniViteInjectPlugin,
+  uniCssScopedPlugin,
+  getAppStyleIsolation,
+  parseManifestJsonOnce,
+} from '@dcloudio/uni-cli-shared'
 import { UniAppPlugin } from './plugin'
 import { uniCopyPlugin } from './plugins/copy'
 import { uniMainJsPlugin } from './plugins/mainJs'
@@ -6,7 +12,20 @@ import { uniManifestJsonPlugin } from './plugins/manifestJson'
 import { uniPagesJsonPlugin } from './plugins/pagesJson'
 import { uniResolveIdPlugin } from './plugins/resolveId'
 
+function createUniCssScopedPluginOptions() {
+  const styleIsolation = getAppStyleIsolation(
+    parseManifestJsonOnce(process.env.UNI_INPUT_DIR)
+  )
+  if (styleIsolation === 'isolated') {
+    // isolated: 对所有非 App.vue 增加 scoped
+    return {}
+  }
+  // apply-shared: 仅对非页面组件增加 scoped
+  return { exclude: /mpType=page/ }
+}
+
 const plugins = [
+  uniCssScopedPlugin(createUniCssScopedPluginOptions()),
   uniResolveIdPlugin(),
   uniCopyPlugin(),
   uniMainJsPlugin(),

packages/uni-cli-shared/src/json/app/manifest/env.ts

@@ -12,3 +12,11 @@ export function getAppCodeSpliting(manifestJson: Record<string, any>) {
   }
   return false
 }
+
+export function getAppStyleIsolation(
+  manifestJson: Record<string, any>
+): 'apply-shared' | 'isolated' {
+  return (
+    manifestJson['app-plus']?.optimization?.styleIsolation ?? 'apply-shared'
+  )
+}

packages/uni-cli-shared/src/json/app/manifest/index.ts

@@ -35,7 +35,7 @@ export function normalizeAppManifestJson(
   return manifestJson
 }
 
-export { getAppRenderer, getAppCodeSpliting } from './env'
+export * from './env'
 
 export {
   getNVueCompiler,

packages/uni-h5-vite/src/plugins/cssScoped.ts → packages/uni-cli-shared/src/vite/plugins/cssScoped.ts

 import path from 'path'
 import debug from 'debug'
 import { Plugin } from 'vite'
-
-import { EXTNAME_VUE, parseVueRequest } from '@dcloudio/uni-cli-shared'
+import { parseVueRequest } from '../utils'
+import { EXTNAME_VUE } from '../../constants'
+import { createFilter, FilterPattern } from '@rollup/pluginutils'
 
 const debugScoped = debug('vite:uni:scoped')
 
@@ -15,14 +16,24 @@ function addScoped(code: string) {
   return code.replace(/(<style\b[^><]*)>/gi, '$1 scoped>')
 }
 
-export function uniCssScopedPlugin(): Plugin {
+interface UniCssScopedPluginOptions {
+  include?: FilterPattern
+  exclude?: FilterPattern
+}
+
+export function uniCssScopedPlugin(
+  options: UniCssScopedPluginOptions = {}
+): Plugin {
+  const filter = createFilter(options.include, options.exclude)
   return {
-    name: 'vite:uni-h5-scoped',
+    name: 'vite:uni-css-scoped',
     enforce: 'pre',
     transform(code, id) {
       if (id.endsWith('App.vue')) {
         return code
       }
+      if (!filter(id)) return null
+
       const { filename, query } = parseVueRequest(id)
       if (query.vue) {
         return code
@@ -35,6 +46,7 @@ export function uniCssScopedPlugin(): Plugin {
         }
       }
     },
+    // 仅 h5
     handleHotUpdate(ctx) {
       if (!EXTNAME_VUE.includes(path.extname(ctx.file))) {
         return

packages/uni-cli-shared/src/vite/plugins/index.ts

 export * from './css'
+export * from './cssScoped'
 export * from './copy'
 export * from './inject'
 export * from './mainJs'

packages/uni-h5-vite/dist/index.js

 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const fs_1 = __importDefault(require("fs"));
-const path_1 = __importDefault(require("path"));
 const uni_cli_shared_1 = require("@dcloudio/uni-cli-shared");
+const plugin_1 = require("./plugin");
 const css_1 = require("./plugins/css");
-const cssScoped_1 = require("./plugins/cssScoped");
 const inject_1 = require("./plugins/inject");
 const mainJs_1 = require("./plugins/mainJs");
 const manifestJson_1 = require("./plugins/manifestJson");
@@ -15,43 +10,8 @@ const pagesJson_1 = require("./plugins/pagesJson");
 const resolveId_1 = require("./plugins/resolveId");
 const setup_1 = require("./plugins/setup");
 const ssr_1 = require("./plugins/ssr");
-const utils_1 = require("./utils");
-const handleHotUpdate_1 = require("./handleHotUpdate");
-const transformIndexHtml_1 = require("./transformIndexHtml");
-const UniH5Plugin = {
-    name: 'vite:uni-h5',
-    uni: {
-        copyOptions: {
-            assets: ['hybrid/html'],
-        },
-        transformEvent: {
-            tap: 'click',
-        },
-    },
-    config(config, env) {
-        if (uni_cli_shared_1.isInHBuilderX()) {
-            if (!fs_1.default.existsSync(path_1.default.resolve(process.env.UNI_INPUT_DIR, 'index.html'))) {
-                console.error(`请确认您的项目模板是否支持vue3：根目录缺少 index.html`);
-                process.exit();
-            }
-        }
-        return {
-            optimizeDeps: {
-                exclude: ['@dcloudio/uni-h5', '@dcloudio/uni-h5-vue'],
-            },
-            define: utils_1.createDefine(env.command, config),
-        };
-    },
-    configResolved(config) {
-        // TODO 禁止 optimizeDeps
-        ;
-        config.cacheDir = '';
-    },
-    handleHotUpdate: handleHotUpdate_1.createHandleHotUpdate(),
-    transformIndexHtml: transformIndexHtml_1.createTransformIndexHtml(),
-};
 exports.default = [
-    cssScoped_1.uniCssScopedPlugin(),
+    uni_cli_shared_1.uniCssScopedPlugin(),
     resolveId_1.uniResolveIdPlugin(),
     mainJs_1.uniMainJsPlugin(),
     manifestJson_1.uniManifestJsonPlugin(),
@@ -60,5 +20,5 @@ exports.default = [
     css_1.uniCssPlugin(),
     ssr_1.uniSSRPlugin(),
     setup_1.uniSetupPlugin(),
-    UniH5Plugin,
+    plugin_1.UniH5Plugin,
 ];

packages/uni-h5-vite/dist/handleHotUpdate/index.js → packages/uni-h5-vite/dist/plugin/handleHotUpdate/index.js

@@ -8,7 +8,7 @@ const path_1 = __importDefault(require("path"));
 const debug_1 = __importDefault(require("debug"));
 const shared_1 = require("@vue/shared");
 const uni_cli_shared_1 = require("@dcloudio/uni-cli-shared");
-const utils_1 = require("../utils");
+const utils_1 = require("../../utils");
 const debugHmr = debug_1.default('vite:uni:hmr');
 async function invalidate(file, moduleGraph) {
     const mods = await moduleGraph.getModulesByFile(uni_cli_shared_1.normalizePath(file));

packages/uni-h5-vite/dist/plugin/index.js

+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UniH5Plugin = void 0;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const uni_cli_shared_1 = require("@dcloudio/uni-cli-shared");
+const handleHotUpdate_1 = require("./handleHotUpdate");
+const transformIndexHtml_1 = require("./transformIndexHtml");
+const features_1 = require("../utils/features");
+exports.UniH5Plugin = {
+    name: 'vite:uni-h5',
+    uni: {
+        copyOptions: {
+            assets: ['hybrid/html'],
+        },
+        transformEvent: {
+            tap: 'click',
+        },
+    },
+    config(config, env) {
+        if (uni_cli_shared_1.isInHBuilderX()) {
+            if (!fs_1.default.existsSync(path_1.default.resolve(process.env.UNI_INPUT_DIR, 'index.html'))) {
+                console.error(`请确认您的项目模板是否支持vue3：根目录缺少 index.html`);
+                process.exit();
+            }
+        }
+        return {
+            optimizeDeps: {
+                exclude: ['@dcloudio/uni-h5', '@dcloudio/uni-h5-vue'],
+            },
+            define: features_1.createDefine(env.command, config),
+        };
+    },
+    configResolved(config) {
+        // TODO 禁止 optimizeDeps
+        ;
+        config.cacheDir = '';
+    },
+    handleHotUpdate: handleHotUpdate_1.createHandleHotUpdate(),
+    transformIndexHtml: transformIndexHtml_1.createTransformIndexHtml(),
+};

packages/uni-h5-vite/dist/transformIndexHtml/index.js → packages/uni-h5-vite/dist/plugin/transformIndexHtml/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createTransformIndexHtml = void 0;
-const dist_1 = require("../../../uni-cli-shared/dist");
+const uni_cli_shared_1 = require("@dcloudio/uni-cli-shared");
 function createTransformIndexHtml() {
     return async function (html) {
         var _a;
-        const manifestJson = dist_1.parseManifestJsonOnce(process.env.UNI_INPUT_DIR);
+        const manifestJson = uni_cli_shared_1.parseManifestJsonOnce(process.env.UNI_INPUT_DIR);
         const title = ((_a = manifestJson.h5) === null || _a === void 0 ? void 0 : _a.title) || manifestJson.name || '';
         return html.replace(/<title>(.*?)<\/title>/, `<title>${title}</title>`);
     };

packages/uni-h5-vite/dist/plugins/cssScoped.js

-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.uniCssScopedPlugin = void 0;
-const path_1 = __importDefault(require("path"));
-const debug_1 = __importDefault(require("debug"));
-const uni_cli_shared_1 = require("@dcloudio/uni-cli-shared");
-const debugScoped = debug_1.default('vite:uni:scoped');
-const SCOPED_RE = /<style\s[^>]*scoped[^>]*>/i;
-function addScoped(code) {
-    if (SCOPED_RE.test(code)) {
-        return code;
-    }
-    return code.replace(/(<style\b[^><]*)>/gi, '$1 scoped>');
-}
-function uniCssScopedPlugin() {
-    return {
-        name: 'vite:uni-h5-scoped',
-        enforce: 'pre',
-        transform(code, id) {
-            if (id.endsWith('App.vue')) {
-                return code;
-            }
-            const { filename, query } = uni_cli_shared_1.parseVueRequest(id);
-            if (query.vue) {
-                return code;
-            }
-            if (uni_cli_shared_1.EXTNAME_VUE.includes(path_1.default.extname(filename))) {
-                debugScoped(id);
-                return {
-                    code: addScoped(code),
-                    map: this.getCombinedSourcemap(),
-                };
-            }
-        },
-        handleHotUpdate(ctx) {
-            if (!uni_cli_shared_1.EXTNAME_VUE.includes(path_1.default.extname(ctx.file))) {
-                return;
-            }
-            if (ctx.file.endsWith('App.vue')) {
-                return;
-            }
-            debugScoped('hmr', ctx.file);
-            const oldRead = ctx.read;
-            ctx.read = async () => {
-                const code = await oldRead();
-                return addScoped(code);
-            };
-        },
-    };
-}
-exports.uniCssScopedPlugin = uniCssScopedPlugin;

packages/uni-h5-vite/src/index.ts

-import fs from 'fs'
-import path from 'path'
-import { isInHBuilderX, UniVitePlugin } from '@dcloudio/uni-cli-shared'
+import { uniCssScopedPlugin } from '@dcloudio/uni-cli-shared'
+import { UniH5Plugin } from './plugin'
 import { uniCssPlugin } from './plugins/css'
-import { uniCssScopedPlugin } from './plugins/cssScoped'
 import { uniInjectPlugin } from './plugins/inject'
 import { uniMainJsPlugin } from './plugins/mainJs'
 import { uniManifestJsonPlugin } from './plugins/manifestJson'
@@ -11,44 +9,6 @@ import { uniResolveIdPlugin } from './plugins/resolveId'
 import { uniSetupPlugin } from './plugins/setup'
 import { uniSSRPlugin } from './plugins/ssr'
 
-import { createDefine } from './utils'
-import { createHandleHotUpdate } from './handleHotUpdate'
-import { createTransformIndexHtml } from './transformIndexHtml'
-
-const UniH5Plugin: UniVitePlugin = {
-  name: 'vite:uni-h5',
-  uni: {
-    copyOptions: {
-      assets: ['hybrid/html'],
-    },
-    transformEvent: {
-      tap: 'click',
-    },
-  },
-  config(config, env) {
-    if (isInHBuilderX()) {
-      if (
-        !fs.existsSync(path.resolve(process.env.UNI_INPUT_DIR, 'index.html'))
-      ) {
-        console.error(`请确认您的项目模板是否支持vue3：根目录缺少 index.html`)
-        process.exit()
-      }
-    }
-    return {
-      optimizeDeps: {
-        exclude: ['@dcloudio/uni-h5', '@dcloudio/uni-h5-vue'],
-      },
-      define: createDefine(env.command, config),
-    }
-  },
-  configResolved(config) {
-    // TODO 禁止 optimizeDeps
-    ;(config as any).cacheDir = ''
-  },
-  handleHotUpdate: createHandleHotUpdate(),
-  transformIndexHtml: createTransformIndexHtml(),
-}
-
 export default [
   uniCssScopedPlugin(),
   uniResolveIdPlugin(),

packages/uni-h5-vite/src/handleHotUpdate/index.ts → packages/uni-h5-vite/src/plugin/handleHotUpdate/index.ts

@@ -9,7 +9,7 @@ import {
   parsePagesJson,
 } from '@dcloudio/uni-cli-shared'
 
-import { initFeatures } from '../utils'
+import { initFeatures } from '../../utils'
 
 const debugHmr = debug('vite:uni:hmr')
 

packages/uni-h5-vite/src/plugin/index.ts

+import fs from 'fs'
+import path from 'path'
+import { isInHBuilderX, UniVitePlugin } from '@dcloudio/uni-cli-shared'
+import { createHandleHotUpdate } from './handleHotUpdate'
+import { createTransformIndexHtml } from './transformIndexHtml'
+import { createDefine } from '../utils/features'
+
+export const UniH5Plugin: UniVitePlugin = {
+  name: 'vite:uni-h5',
+  uni: {
+    copyOptions: {
+      assets: ['hybrid/html'],
+    },
+    transformEvent: {
+      tap: 'click',
+    },
+  },
+  config(config, env) {
+    if (isInHBuilderX()) {
+      if (
+        !fs.existsSync(path.resolve(process.env.UNI_INPUT_DIR, 'index.html'))
+      ) {
+        console.error(`请确认您的项目模板是否支持vue3：根目录缺少 index.html`)
+        process.exit()
+      }
+    }
+    return {
+      optimizeDeps: {
+        exclude: ['@dcloudio/uni-h5', '@dcloudio/uni-h5-vue'],
+      },
+      define: createDefine(env.command, config),
+    }
+  },
+  configResolved(config) {
+    // TODO 禁止 optimizeDeps
+    ;(config as any).cacheDir = ''
+  },
+  handleHotUpdate: createHandleHotUpdate(),
+  transformIndexHtml: createTransformIndexHtml(),
+}

packages/uni-h5-vite/src/transformIndexHtml/index.ts → packages/uni-h5-vite/src/plugin/transformIndexHtml/index.ts

 import { Plugin } from 'vite'
 
-import { parseManifestJsonOnce } from '../../../uni-cli-shared/dist'
+import { parseManifestJsonOnce } from '@dcloudio/uni-cli-shared'
 
 export function createTransformIndexHtml(): Plugin['transformIndexHtml'] {
   return async function (html) {