From 7ef240791040e3b833437589b1d7ccd548e4aa01 Mon Sep 17 00:00:00 2001 From: fxy060608 Date: Thu, 5 Aug 2021 13:16:50 +0800 Subject: [PATCH] feat(app): styleIsolation --- packages/uni-app-vite/dist/index.js | 10 ++++ packages/uni-app-vite/src/index.ts | 21 +++++++- .../src/json/app/manifest/env.ts | 8 +++ .../src/json/app/manifest/index.ts | 2 +- .../src/vite}/plugins/cssScoped.ts | 20 +++++-- .../uni-cli-shared/src/vite/plugins/index.ts | 1 + packages/uni-h5-vite/dist/index.js | 46 ++-------------- .../{ => plugin}/handleHotUpdate/index.js | 2 +- packages/uni-h5-vite/dist/plugin/index.js | 44 +++++++++++++++ .../{ => plugin}/transformIndexHtml/index.js | 4 +- .../uni-h5-vite/dist/plugins/cssScoped.js | 54 ------------------- packages/uni-h5-vite/src/index.ts | 44 +-------------- .../src/{ => plugin}/handleHotUpdate/index.ts | 2 +- packages/uni-h5-vite/src/plugin/index.ts | 40 ++++++++++++++ .../{ => plugin}/transformIndexHtml/index.ts | 2 +- 15 files changed, 150 insertions(+), 150 deletions(-) rename packages/{uni-h5-vite/src => uni-cli-shared/src/vite}/plugins/cssScoped.ts (69%) rename packages/uni-h5-vite/dist/{ => plugin}/handleHotUpdate/index.js (98%) create mode 100644 packages/uni-h5-vite/dist/plugin/index.js rename packages/uni-h5-vite/dist/{ => plugin}/transformIndexHtml/index.js (75%) delete mode 100644 packages/uni-h5-vite/dist/plugins/cssScoped.js rename packages/uni-h5-vite/src/{ => plugin}/handleHotUpdate/index.ts (98%) create mode 100644 packages/uni-h5-vite/src/plugin/index.ts rename packages/uni-h5-vite/src/{ => plugin}/transformIndexHtml/index.ts (84%) diff --git a/packages/uni-app-vite/dist/index.js b/packages/uni-app-vite/dist/index.js index ff1c5f10f..79b40b2d0 100644 --- a/packages/uni-app-vite/dist/index.js +++ b/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(), diff --git a/packages/uni-app-vite/src/index.ts b/packages/uni-app-vite/src/index.ts index 926bbab9f..673fa7263 100644 --- a/packages/uni-app-vite/src/index.ts +++ b/packages/uni-app-vite/src/index.ts @@ -1,4 +1,10 @@ -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(), diff --git a/packages/uni-cli-shared/src/json/app/manifest/env.ts b/packages/uni-cli-shared/src/json/app/manifest/env.ts index 8067d7376..82e1c5ee3 100644 --- a/packages/uni-cli-shared/src/json/app/manifest/env.ts +++ b/packages/uni-cli-shared/src/json/app/manifest/env.ts @@ -12,3 +12,11 @@ export function getAppCodeSpliting(manifestJson: Record) { } return false } + +export function getAppStyleIsolation( + manifestJson: Record +): 'apply-shared' | 'isolated' { + return ( + manifestJson['app-plus']?.optimization?.styleIsolation ?? 'apply-shared' + ) +} diff --git a/packages/uni-cli-shared/src/json/app/manifest/index.ts b/packages/uni-cli-shared/src/json/app/manifest/index.ts index 72f2314ae..bf761c30d 100644 --- a/packages/uni-cli-shared/src/json/app/manifest/index.ts +++ b/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, diff --git a/packages/uni-h5-vite/src/plugins/cssScoped.ts b/packages/uni-cli-shared/src/vite/plugins/cssScoped.ts similarity index 69% rename from packages/uni-h5-vite/src/plugins/cssScoped.ts rename to packages/uni-cli-shared/src/vite/plugins/cssScoped.ts index 4bbc09f1e..bb10f31f4 100644 --- a/packages/uni-h5-vite/src/plugins/cssScoped.ts +++ b/packages/uni-cli-shared/src/vite/plugins/cssScoped.ts @@ -1,8 +1,9 @@ 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(/(<]*)>/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 diff --git a/packages/uni-cli-shared/src/vite/plugins/index.ts b/packages/uni-cli-shared/src/vite/plugins/index.ts index eb39950d8..a312e675e 100644 --- a/packages/uni-cli-shared/src/vite/plugins/index.ts +++ b/packages/uni-cli-shared/src/vite/plugins/index.ts @@ -1,4 +1,5 @@ export * from './css' +export * from './cssScoped' export * from './copy' export * from './inject' export * from './mainJs' diff --git a/packages/uni-h5-vite/dist/index.js b/packages/uni-h5-vite/dist/index.js index 18eaef4f0..b340bcc96 100644 --- a/packages/uni-h5-vite/dist/index.js +++ b/packages/uni-h5-vite/dist/index.js @@ -1,13 +1,8 @@ "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, ]; diff --git a/packages/uni-h5-vite/dist/handleHotUpdate/index.js b/packages/uni-h5-vite/dist/plugin/handleHotUpdate/index.js similarity index 98% rename from packages/uni-h5-vite/dist/handleHotUpdate/index.js rename to packages/uni-h5-vite/dist/plugin/handleHotUpdate/index.js index 5dd822889..6e920c5e1 100644 --- a/packages/uni-h5-vite/dist/handleHotUpdate/index.js +++ b/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)); diff --git a/packages/uni-h5-vite/dist/plugin/index.js b/packages/uni-h5-vite/dist/plugin/index.js new file mode 100644 index 000000000..aff303830 --- /dev/null +++ b/packages/uni-h5-vite/dist/plugin/index.js @@ -0,0 +1,44 @@ +"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(), +}; diff --git a/packages/uni-h5-vite/dist/transformIndexHtml/index.js b/packages/uni-h5-vite/dist/plugin/transformIndexHtml/index.js similarity index 75% rename from packages/uni-h5-vite/dist/transformIndexHtml/index.js rename to packages/uni-h5-vite/dist/plugin/transformIndexHtml/index.js index 7349572f8..b74170451 100644 --- a/packages/uni-h5-vite/dist/transformIndexHtml/index.js +++ b/packages/uni-h5-vite/dist/plugin/transformIndexHtml/index.js @@ -1,11 +1,11 @@ "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}`); }; diff --git a/packages/uni-h5-vite/dist/plugins/cssScoped.js b/packages/uni-h5-vite/dist/plugins/cssScoped.js deleted file mode 100644 index edac99447..000000000 --- a/packages/uni-h5-vite/dist/plugins/cssScoped.js +++ /dev/null @@ -1,54 +0,0 @@ -"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 = /]*scoped[^>]*>/i; -function addScoped(code) { - if (SCOPED_RE.test(code)) { - return code; - } - return code.replace(/(<]*)>/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; diff --git a/packages/uni-h5-vite/src/index.ts b/packages/uni-h5-vite/src/index.ts index ffa1f9c2f..c7e49232c 100644 --- a/packages/uni-h5-vite/src/index.ts +++ b/packages/uni-h5-vite/src/index.ts @@ -1,8 +1,6 @@ -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(), diff --git a/packages/uni-h5-vite/src/handleHotUpdate/index.ts b/packages/uni-h5-vite/src/plugin/handleHotUpdate/index.ts similarity index 98% rename from packages/uni-h5-vite/src/handleHotUpdate/index.ts rename to packages/uni-h5-vite/src/plugin/handleHotUpdate/index.ts index 18535a61d..9f874e3e5 100644 --- a/packages/uni-h5-vite/src/handleHotUpdate/index.ts +++ b/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') diff --git a/packages/uni-h5-vite/src/plugin/index.ts b/packages/uni-h5-vite/src/plugin/index.ts new file mode 100644 index 000000000..5de6e5e5a --- /dev/null +++ b/packages/uni-h5-vite/src/plugin/index.ts @@ -0,0 +1,40 @@ +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(), +} diff --git a/packages/uni-h5-vite/src/transformIndexHtml/index.ts b/packages/uni-h5-vite/src/plugin/transformIndexHtml/index.ts similarity index 84% rename from packages/uni-h5-vite/src/transformIndexHtml/index.ts rename to packages/uni-h5-vite/src/plugin/transformIndexHtml/index.ts index f51871ea4..e5222771b 100644 --- a/packages/uni-h5-vite/src/transformIndexHtml/index.ts +++ b/packages/uni-h5-vite/src/plugin/transformIndexHtml/index.ts @@ -1,6 +1,6 @@ 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) { -- GitLab