@lumal/vite 0.0.4-beta → 0.0.6-beta

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @lumal/vite
 
+## 0.0.6-beta (2026-10-25)
+
+### Minor Changes
+
+- 新增默认关闭的 createViewportTransformPlugin / createViewportPostcssPlugin，显式限定 CSS 转换范围。
+- Dev/Build 使用同一转换逻辑，默认排除依赖；支持显式依赖白名单、字体和自定义属性策略。
+- 保护 Windows/pnpm 路径、SFC/SCSS/CSS 来源边界，不转换脚本普通数字、内联 style 或 URL。
+- 工作区 alias 增加 @lumal/viewport；公共包版本同步为 0.0.6-beta。
+
+## 0.0.5-beta (2026-10-20)
+
+### Patch Changes
+
+- 新增 Vben 兼容层 v5、v5/router、legacy 和 style.css 的源码/产物 alias，并验证最长子入口优先。
+- 与 fixed-group 公共包同步为 0.0.5-beta，无新增运行时依赖。
+
 ## 0.0.4-beta (2026-10-20)
 
 ### Patch Changes

package/README.md

@@ -1,5 +1,42 @@
 # @lumal/vite
 
+## 可选的局部 px → vw
+
+以下 API 属于 `0.0.6-beta`，实际版本可用性以 registry 为准；发布核验前使用候选 tarball：
+
+```ts
+import { createViewportTransformPlugin } from '@lumal/vite'
+
+const viewport = createViewportTransformPlugin({
+  enabled: true,
+  include: ['src/screen/**'],
+  exclude: ['**/map/**'],
+  viewportWidth: 1920,
+  fontSize: false,
+  customProperties: false,
+})
+// 将 viewport 加入已有 Vite plugins。
+```
+
+默认 `enabled=false`，开启必须指定 include。Dev/Build 共用 PostCSS 声明转换，
+保留已有 inline 或文件 PostCSS 配置；SCSS 在预处理后转换，SFC仅转换style。
+默认不转换 node_modules，仅 `dependencies: ['明确的包名']` 可白名单加入。
+默认保留 <=1px、font/font-size 和 CSS 自定义属性；已有vw、URL、var引用、
+引号字符串和普通数字不变，重复执行幂等。
+
+预处理器有原始 source map 时，按每条声明的真实来源判断范围，而非入口文件名。
+没有可靠 source map 时，跨文件 `@use` / `@forward` / Sass `@import`、
+无法解析的预处理语法或函数形式 `additionalData` 会使该 style 整体跳过并警告。
+这是对转换边界的保护：请把第三方/Shared 样式与需要转换的 Screen 声明分开；
+同一 SFC 的独立安全 style 块仍可转换。纯 SCSS 声明不受此限制。
+直接使用 `createViewportPostcssPlugin` 处理预编译的 SCSS/SFC 输出时，
+必须传入原始 source map，否则保守保留 px，不能根据入口路径猜测来源。
+
+不转换模板内联 style、TS/JS 字符串或坐标；动态数值布局使用响应式 viewport Composable。
+不提供旧插件的全依赖/全脚本扫描开关。不要将本插件与同一画布的 transform 双重缩放，
+也不要让转换范围覆盖 Admin、Element Plus 或地图引擎样式。
+解析依赖仅供 Node 构建工具使用，不进入应用运行时。
+
 Lumal 的轻量 Vite 配置助手，提供组件 resolver、工作区源码/产物 alias 和可选 Devtools 接线。
 
 ```ts

package/dist/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("node:path");var t=[...[`auth`,`components`,`composables`,`dictionary`,`directives`,`layout`,`minimal`,`permission`,`request`,`router`,`theme`,`utils`].map(e=>({dist:`packages/core/dist/${e}.js`,packageName:`core`,source:e===`components`?`packages/core/src/exports/components.ts`:`packages/core/src/${e}/index.ts`,specifier:`@lumal/core/${e}`})),{dist:`packages/core/dist/core.css`,packageName:`core`,source:`packages/core/src/source-style.css`,specifier:`@lumal/core/style.css`},{dist:`packages/core/theme-chalk/index.scss`,packageName:`core`,source:`packages/core/theme-chalk/index.scss`,specifier:`@lumal/core/theme-chalk/index.scss`},{dist:`packages/icons/dist/vite.js`,packageName:`icons`,source:`packages/icons/src/vite/index.ts`,specifier:`@lumal/icons/vite`},{dist:`packages/icons/dist/morph.js`,packageName:`icons`,source:`packages/icons/src/morph/index.ts`,specifier:`@lumal/icons/morph`},{dist:`packages/icons-vue/dist/icons-vue.css`,packageName:`icons-vue`,source:`packages/icons-vue/src/source-style.css`,specifier:`@lumal/icons-vue/style.css`},{dist:`packages/charts/dist/charts.css`,packageName:`charts`,source:`packages/charts/src/source-style.css`,specifier:`@lumal/charts/style.css`},{dist:`packages/datav/dist/datav.css`,packageName:`datav`,source:`packages/datav/src/source-style.css`,specifier:`@lumal/datav/style.css`},{dist:`packages/cockpit/dist/designer.js`,packageName:`cockpit`,source:`packages/cockpit/src/designer/index.ts`,specifier:`@lumal/cockpit/designer`},{dist:`packages/cockpit/dist/registry.js`,packageName:`cockpit`,source:`packages/cockpit/src/registry/index.ts`,specifier:`@lumal/cockpit/registry`},{dist:`packages/cockpit/dist/runtime.js`,packageName:`cockpit`,source:`packages/cockpit/src/runtime/index.ts`,specifier:`@lumal/cockpit/runtime`},{dist:`packages/cockpit/dist/cockpit.css`,packageName:`cockpit`,source:`packages/cockpit/src/source-style.scss`,specifier:`@lumal/cockpit/style.css`},{dist:`packages/vben-compat/dist/index.js`,packageName:`vben-compat`,source:`packages/vben-compat/src/index.ts`,specifier:`@lumal/vben-compat`},{dist:`packages/charts/dist/index.js`,packageName:`charts`,source:`packages/charts/src/index.ts`,specifier:`@lumal/charts`},{dist:`packages/datav/dist/index.js`,packageName:`datav`,source:`packages/datav/src/index.ts`,specifier:`@lumal/datav`},{dist:`packages/icons/dist/index.js`,packageName:`icons`,source:`packages/icons/src/index.ts`,specifier:`@lumal/icons`},{dist:`packages/icons-vue/dist/index.js`,packageName:`icons-vue`,source:`packages/icons-vue/src/index.ts`,specifier:`@lumal/icons-vue`},{dist:`packages/core/dist/index.js`,packageName:`core`,source:`packages/core/src/index.ts`,specifier:`@lumal/core`},{dist:`packages/cockpit/dist/index.js`,packageName:`cockpit`,source:`packages/cockpit/src/index.ts`,specifier:`@lumal/cockpit`}];function n(n){let r=n.target??`source`,i=new Set(n.packages??[`charts`,`cockpit`,`core`,`datav`,`icons`,`icons-vue`,`vben-compat`]);return t.filter(e=>i.has(e.packageName)).map(t=>({find:t.specifier,replacement:(0,e.resolve)(n.workspaceRoot,t[r])})).sort((e,t)=>t.find.length-e.find.length)}var r=new Map([[`LumalAccessControl`,`@lumal/core/permission`],[`LumalBreadcrumb`,`@lumal/core/layout`],[`LumalChart`,`@lumal/charts`],[`LumalChartPanel`,`@lumal/charts`],[`LumalContent`,`@lumal/core/layout`],[`LumalCrudTable`,`@lumal/core/components`],[`LumalHeader`,`@lumal/core/layout`],[`LumalGlobalSearch`,`@lumal/core/layout`],[`LumalIcon`,`@lumal/icons-vue`],[`LumalIconPicker`,`@lumal/icons-vue`],[`LumalIconPickerDialog`,`@lumal/icons-vue`],[`LumalInfoTable`,`@lumal/core/components`],[`LumalLayout`,`@lumal/core/layout`],[`LumalPage`,`@lumal/core/components`],[`LumalPageLayout`,`@lumal/core/components`],[`LumalPagination`,`@lumal/core/components`],[`LumalRouterView`,`@lumal/core/layout`],[`LumalSchemaForm`,`@lumal/core/components`],[`LumalSchemaTable`,`@lumal/core/components`],[`LumalSidebar`,`@lumal/core/layout`],[`LumalTabs`,`@lumal/core/layout`],[`LumalThemeSettingsPanel`,`@lumal/core/theme`],[`LumalTopNav`,`@lumal/core/layout`]]);function i(e){if(e.startsWith(`@lumal/core`))return`@lumal/core/style.css`;if(e===`@lumal/icons-vue`||e===`@lumal/charts`)return`${e}/style.css`}function a(e={}){let t=new Map(r);for(let[n,r]of Object.entries(e.customComponents??{}))t.set(n,r);return{type:`component`,resolve(n){let r=t.get(n);if(r)return{from:r,name:n,sideEffects:e.importStyle?i(r):void 0}}}}function o(e={}){if(e.enabled!==!1)return e.factory?.()??e.plugin}exports.createLumalAliases=n,exports.createLumalComponentResolver=a,exports.resolveLumalDevtoolsPlugin=o;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require("node:path"),l=require("node:process");l=s(l,1);let u=require("picomatch");u=s(u,1);let d=require("postcss"),f=require("postcss-load-config");f=s(f,1);let p=require("postcss-value-parser");p=s(p,1);var m=[{dist:`packages/viewport/dist/index.js`,packageName:`viewport`,source:`packages/viewport/src/index.ts`,specifier:`@lumal/viewport`},...[`auth`,`components`,`composables`,`dictionary`,`directives`,`layout`,`minimal`,`permission`,`request`,`router`,`theme`,`utils`].map(e=>({dist:`packages/core/dist/${e}.js`,packageName:`core`,source:e===`components`?`packages/core/src/exports/components.ts`:`packages/core/src/${e}/index.ts`,specifier:`@lumal/core/${e}`})),{dist:`packages/core/dist/core.css`,packageName:`core`,source:`packages/core/src/source-style.css`,specifier:`@lumal/core/style.css`},{dist:`packages/core/theme-chalk/index.scss`,packageName:`core`,source:`packages/core/theme-chalk/index.scss`,specifier:`@lumal/core/theme-chalk/index.scss`},{dist:`packages/icons/dist/vite.js`,packageName:`icons`,source:`packages/icons/src/vite/index.ts`,specifier:`@lumal/icons/vite`},{dist:`packages/icons/dist/morph.js`,packageName:`icons`,source:`packages/icons/src/morph/index.ts`,specifier:`@lumal/icons/morph`},{dist:`packages/icons-vue/dist/icons-vue.css`,packageName:`icons-vue`,source:`packages/icons-vue/src/source-style.css`,specifier:`@lumal/icons-vue/style.css`},{dist:`packages/charts/dist/charts.css`,packageName:`charts`,source:`packages/charts/src/source-style.css`,specifier:`@lumal/charts/style.css`},{dist:`packages/datav/dist/datav.css`,packageName:`datav`,source:`packages/datav/src/source-style.css`,specifier:`@lumal/datav/style.css`},{dist:`packages/cockpit/dist/designer.js`,packageName:`cockpit`,source:`packages/cockpit/src/designer/index.ts`,specifier:`@lumal/cockpit/designer`},{dist:`packages/cockpit/dist/registry.js`,packageName:`cockpit`,source:`packages/cockpit/src/registry/index.ts`,specifier:`@lumal/cockpit/registry`},{dist:`packages/cockpit/dist/runtime.js`,packageName:`cockpit`,source:`packages/cockpit/src/runtime/index.ts`,specifier:`@lumal/cockpit/runtime`},{dist:`packages/cockpit/dist/cockpit.css`,packageName:`cockpit`,source:`packages/cockpit/src/source-style.scss`,specifier:`@lumal/cockpit/style.css`},{dist:`packages/vben-compat/dist/v5-router.js`,packageName:`vben-compat`,source:`packages/vben-compat/src/v5/router.ts`,specifier:`@lumal/vben-compat/v5/router`},{dist:`packages/vben-compat/dist/v5.js`,packageName:`vben-compat`,source:`packages/vben-compat/src/v5/index.ts`,specifier:`@lumal/vben-compat/v5`},{dist:`packages/vben-compat/dist/legacy.js`,packageName:`vben-compat`,source:`packages/vben-compat/src/legacy.ts`,specifier:`@lumal/vben-compat/legacy`},{dist:`packages/vben-compat/dist/vben-compat.css`,packageName:`vben-compat`,source:`packages/vben-compat/src/source-style.css`,specifier:`@lumal/vben-compat/style.css`},{dist:`packages/vben-compat/dist/index.js`,packageName:`vben-compat`,source:`packages/vben-compat/src/index.ts`,specifier:`@lumal/vben-compat`},{dist:`packages/charts/dist/index.js`,packageName:`charts`,source:`packages/charts/src/index.ts`,specifier:`@lumal/charts`},{dist:`packages/datav/dist/index.js`,packageName:`datav`,source:`packages/datav/src/index.ts`,specifier:`@lumal/datav`},{dist:`packages/icons/dist/index.js`,packageName:`icons`,source:`packages/icons/src/index.ts`,specifier:`@lumal/icons`},{dist:`packages/icons-vue/dist/index.js`,packageName:`icons-vue`,source:`packages/icons-vue/src/index.ts`,specifier:`@lumal/icons-vue`},{dist:`packages/core/dist/index.js`,packageName:`core`,source:`packages/core/src/index.ts`,specifier:`@lumal/core`},{dist:`packages/cockpit/dist/index.js`,packageName:`cockpit`,source:`packages/cockpit/src/index.ts`,specifier:`@lumal/cockpit`}];function h(e){let t=e.target??`source`,n=new Set(e.packages??[`charts`,`cockpit`,`core`,`datav`,`icons`,`icons-vue`,`vben-compat`,`viewport`]);return m.filter(e=>n.has(e.packageName)).map(n=>({find:n.specifier,replacement:(0,c.resolve)(e.workspaceRoot,n[t])})).sort((e,t)=>t.find.length-e.find.length)}var g=new Map([[`LumalAccessControl`,`@lumal/core/permission`],[`LumalBreadcrumb`,`@lumal/core/layout`],[`LumalChart`,`@lumal/charts`],[`LumalChartPanel`,`@lumal/charts`],[`LumalContent`,`@lumal/core/layout`],[`LumalCrudTable`,`@lumal/core/components`],[`LumalHeader`,`@lumal/core/layout`],[`LumalGlobalSearch`,`@lumal/core/layout`],[`LumalIcon`,`@lumal/icons-vue`],[`LumalIconPicker`,`@lumal/icons-vue`],[`LumalIconPickerDialog`,`@lumal/icons-vue`],[`LumalInfoTable`,`@lumal/core/components`],[`LumalLayout`,`@lumal/core/layout`],[`LumalPage`,`@lumal/core/components`],[`LumalPageLayout`,`@lumal/core/components`],[`LumalPagination`,`@lumal/core/components`],[`LumalRouterView`,`@lumal/core/layout`],[`LumalSchemaForm`,`@lumal/core/components`],[`LumalSchemaTable`,`@lumal/core/components`],[`LumalSidebar`,`@lumal/core/layout`],[`LumalTabs`,`@lumal/core/layout`],[`LumalThemeSettingsPanel`,`@lumal/core/theme`],[`LumalTopNav`,`@lumal/core/layout`]]);function _(e){if(e.startsWith(`@lumal/core`))return`@lumal/core/style.css`;if(e===`@lumal/icons-vue`||e===`@lumal/charts`)return`${e}/style.css`}function v(e={}){let t=new Map(g);for(let[n,r]of Object.entries(e.customComponents??{}))t.set(n,r);return{type:`component`,resolve(n){let r=t.get(n);if(r)return{from:r,name:n,sideEffects:e.importStyle?_(r):void 0}}}}function y(e={}){if(e.enabled!==!1)return e.factory?.()??e.plugin}function b(e){if(e.startsWith(`file:`)){let t=new URL(e);e=`${t.host?`//${t.host}`:``}${decodeURIComponent(t.pathname)}`}let t=e.replaceAll(`\\`,`/`).split(`?`)[0];return t.match(/(?:^|\/)([a-z]:\/.*)$/i)?.[1]??t}var x=[`scss`,`sass`,`less`,`styl`,`stylus`];function S(e){return e.match(/\.(scss|sass|less|styl|stylus)(?:$|[?&])/i)?.[1]?.toLowerCase()}function C(e,t){let n=b(/^[a-z]:[/\\]/i.test(t)?t:(0,c.resolve)(t)).replace(/\/$/,``),r=(0,u.default)(e.include??[],{dot:!0}),i=(0,u.default)(e.exclude??[],{dot:!0});return t=>{if(!t||!e.enabled)return!1;let a=b(t),o=a.toLowerCase().startsWith(`${n.toLowerCase()}/`)?a.slice(n.length+1):a;if(i(a)||i(o))return!1;let s=a.split(`/node_modules/`).at(-1);if(s!==a){let t=s.split(`/`),n=t[0].startsWith(`@`)?t.slice(0,2).join(`/`):t[0];return e.dependencies?.includes(n)??!1}return r(o)||r(a)}}function w(e,t,n){let r=e.viewportWidth??1920,i=e.precision??6;if(!(r>0)||!Number.isFinite(r))throw Error(`viewportWidth 必须为正数`);if(!Number.isInteger(i)||i<0||i>10)throw Error(`precision 必须为0到10的整数`);if(e.enabled&&!e.include?.length)throw Error(`视口转换必须显式指定 include 范围`);let a=C(e,t);function o(e){let t=e.source;if(!t)return;if(t.input.map){let e=t.start&&t.input.origin(t.start.line,t.start.column);return e?e.file??e.url:void 0}let r=t.input.file;if(!r)return;if(n)return n(r)?r:void 0;let i=/\.vue(?:$|\?)/i.test(r)&&!/[?&]lang\.css(?:&|$)/i.test(r);return S(r)||i?void 0:r}return{postcssPlugin:`lumal-scoped-viewport`,Declaration(t){if(!a(o(t))||!e.customProperties&&t.prop.startsWith(`--`)||!e.fontSize&&/^(?:font|font-size)$/i.test(t.prop))return;let n=(0,p.default)(t.value),s=!1;n.walk(t=>{if(t.type===`function`&&/^(?:url|var)$/i.test(t.value))return!1;if(t.type!==`word`||!/^-?(?:\d+(?:\.\d*)?|\.\d+)px$/i.test(t.value))return;let n=Number.parseFloat(t.value);Math.abs(n)<=(e.minPixelValue??1)||(t.value=`${Number((n/r*100).toFixed(i))}vw`,s=!0)}),s&&(t.value=n.toString())}}}function T(e,t=l.default.cwd()){return w(e,t)}function E(e){return new URLSearchParams(e.split(`?`)[1]).get(`index`)??``}function D(e,t){try{let n=!1;return(0,d.parse)(e,{from:t}).walkAtRules(/^(?:use|forward|import)$/i,e=>{let t=(0,p.default)(e.params).nodes,r=t.filter(e=>e.type===`string`);if(!r.length){let r=e.name.toLowerCase()===`import`&&t.some(e=>e.type===`function`&&e.value.toLowerCase()===`url`);n||=!r;return}for(let t of r){let r=t.value.startsWith(`sass:`),i=e.name.toLowerCase()===`import`&&/^(?:https?:)?\/\/|\.css(?:[?#]|$)/i.test(t.value);n||=!r&&!i}}),n}catch{return!0}}function O(e){let t=new Map,n=new Map,r=()=>!1;function i(e){let n=t.get(b(e));return n?.get(E(e))??[...n?.values()??[]].every(Boolean)}return{name:`lumal-scoped-viewport`,enforce:`pre`,transform(e,i){let a=S(i);if(!r(i)||!a)return;let o=n.get(a)!==!1&&!D(e,i),s=b(i),c=t.get(s)??new Map;c.set(E(i),o),t.set(s,c),o||this.warn(`跳过视口转换 ${s}：预处理样式含跨文件导入或无法可靠解析的语法；请将外部样式与 Screen 声明分离，避免无原始 source map 时越过转换边界。`)},configResolved(e){for(let t of x){let r=e.css.preprocessorOptions?.[t]?.additionalData;n.set(t,r===void 0||typeof r==`string`&&!D(r,`${e.root}/injected.${t}`))}},async config(t){if(!e.enabled)return;let n=(0,c.resolve)(t.root??l.default.cwd());r=C(e,n);let a=t.css?.postcss,o=typeof a==`object`?a:void 0;if(!o)try{let e=await(0,f.default)({},typeof a==`string`?(0,c.resolve)(n,a):n);o={...e.options,plugins:e.plugins}}catch(e){if(a||!(e instanceof Error)||!e.message.startsWith(`No PostCSS Config found`))throw e}t.css??={},t.css.postcss={...o,plugins:[...o?.plugins??[],w(e,n,i)]}}}}exports.createLumalAliases=h,exports.createLumalComponentResolver=v,exports.createViewportPostcssPlugin=T,exports.createViewportTransformPlugin=O,exports.resolveLumalDevtoolsPlugin=y;

package/dist/index.js

@@ -1,6 +1,17 @@
 import { resolve as e } from "node:path";
+import t from "node:process";
+import n from "picomatch";
+import { parse as r } from "postcss";
+import i from "postcss-load-config";
+import a from "postcss-value-parser";
 //#region src/aliases.ts
-var t = [
+var o = [
+	{
+		dist: "packages/viewport/dist/index.js",
+		packageName: "viewport",
+		source: "packages/viewport/src/index.ts",
+		specifier: "@lumal/viewport"
+	},
 	...[
 		"auth",
 		"components",
@@ -86,6 +97,30 @@ var t = [
 		source: "packages/cockpit/src/source-style.scss",
 		specifier: "@lumal/cockpit/style.css"
 	},
+	{
+		dist: "packages/vben-compat/dist/v5-router.js",
+		packageName: "vben-compat",
+		source: "packages/vben-compat/src/v5/router.ts",
+		specifier: "@lumal/vben-compat/v5/router"
+	},
+	{
+		dist: "packages/vben-compat/dist/v5.js",
+		packageName: "vben-compat",
+		source: "packages/vben-compat/src/v5/index.ts",
+		specifier: "@lumal/vben-compat/v5"
+	},
+	{
+		dist: "packages/vben-compat/dist/legacy.js",
+		packageName: "vben-compat",
+		source: "packages/vben-compat/src/legacy.ts",
+		specifier: "@lumal/vben-compat/legacy"
+	},
+	{
+		dist: "packages/vben-compat/dist/vben-compat.css",
+		packageName: "vben-compat",
+		source: "packages/vben-compat/src/source-style.css",
+		specifier: "@lumal/vben-compat/style.css"
+	},
 	{
 		dist: "packages/vben-compat/dist/index.js",
 		packageName: "vben-compat",
@@ -129,24 +164,25 @@ var t = [
 		specifier: "@lumal/cockpit"
 	}
 ];
-function n(n) {
-	let r = n.target ?? "source", i = new Set(n.packages ?? [
+function s(t) {
+	let n = t.target ?? "source", r = new Set(t.packages ?? [
 		"charts",
 		"cockpit",
 		"core",
 		"datav",
 		"icons",
 		"icons-vue",
-		"vben-compat"
+		"vben-compat",
+		"viewport"
 	]);
-	return t.filter((e) => i.has(e.packageName)).map((t) => ({
-		find: t.specifier,
-		replacement: e(n.workspaceRoot, t[r])
+	return o.filter((e) => r.has(e.packageName)).map((r) => ({
+		find: r.specifier,
+		replacement: e(t.workspaceRoot, r[n])
 	})).sort((e, t) => t.find.length - e.find.length);
 }
 //#endregion
 //#region src/component-resolver.ts
-var r = /* @__PURE__ */ new Map([
+var c = /* @__PURE__ */ new Map([
 	["LumalAccessControl", "@lumal/core/permission"],
 	["LumalBreadcrumb", "@lumal/core/layout"],
 	["LumalChart", "@lumal/charts"],
@@ -171,12 +207,12 @@ var r = /* @__PURE__ */ new Map([
 	["LumalThemeSettingsPanel", "@lumal/core/theme"],
 	["LumalTopNav", "@lumal/core/layout"]
 ]);
-function i(e) {
+function l(e) {
 	if (e.startsWith("@lumal/core")) return "@lumal/core/style.css";
 	if (e === "@lumal/icons-vue" || e === "@lumal/charts") return `${e}/style.css`;
 }
-function a(e = {}) {
-	let t = new Map(r);
+function u(e = {}) {
+	let t = new Map(c);
 	for (let [n, r] of Object.entries(e.customComponents ?? {})) t.set(n, r);
 	return {
 		type: "component",
@@ -185,15 +221,149 @@ function a(e = {}) {
 			if (r) return {
 				from: r,
 				name: n,
-				sideEffects: e.importStyle ? i(r) : void 0
+				sideEffects: e.importStyle ? l(r) : void 0
 			};
 		}
 	};
 }
 //#endregion
 //#region src/devtools.ts
-function o(e = {}) {
+function d(e = {}) {
 	if (e.enabled !== !1) return e.factory?.() ?? e.plugin;
 }
 //#endregion
-export { n as createLumalAliases, a as createLumalComponentResolver, o as resolveLumalDevtoolsPlugin };
+//#region src/viewport-transform.ts
+function f(e) {
+	if (e.startsWith("file:")) {
+		let t = new URL(e);
+		e = `${t.host ? `//${t.host}` : ""}${decodeURIComponent(t.pathname)}`;
+	}
+	let t = e.replaceAll("\\", "/").split("?")[0];
+	return t.match(/(?:^|\/)([a-z]:\/.*)$/i)?.[1] ?? t;
+}
+var p = [
+	"scss",
+	"sass",
+	"less",
+	"styl",
+	"stylus"
+];
+function m(e) {
+	return e.match(/\.(scss|sass|less|styl|stylus)(?:$|[?&])/i)?.[1]?.toLowerCase();
+}
+function h(t, r) {
+	let i = f(/^[a-z]:[/\\]/i.test(r) ? r : e(r)).replace(/\/$/, ""), a = n(t.include ?? [], { dot: !0 }), o = n(t.exclude ?? [], { dot: !0 });
+	return (e) => {
+		if (!e || !t.enabled) return !1;
+		let n = f(e), r = n.toLowerCase().startsWith(`${i.toLowerCase()}/`) ? n.slice(i.length + 1) : n;
+		if (o(n) || o(r)) return !1;
+		let s = n.split("/node_modules/").at(-1);
+		if (s !== n) {
+			let e = s.split("/"), n = e[0].startsWith("@") ? e.slice(0, 2).join("/") : e[0];
+			return t.dependencies?.includes(n) ?? !1;
+		}
+		return a(r) || a(n);
+	};
+}
+function g(e, t, n) {
+	let r = e.viewportWidth ?? 1920, i = e.precision ?? 6;
+	if (!(r > 0) || !Number.isFinite(r)) throw Error("viewportWidth 必须为正数");
+	if (!Number.isInteger(i) || i < 0 || i > 10) throw Error("precision 必须为0到10的整数");
+	if (e.enabled && !e.include?.length) throw Error("视口转换必须显式指定 include 范围");
+	let o = h(e, t);
+	function s(e) {
+		let t = e.source;
+		if (!t) return;
+		if (t.input.map) {
+			let e = t.start && t.input.origin(t.start.line, t.start.column);
+			return e ? e.file ?? e.url : void 0;
+		}
+		let r = t.input.file;
+		if (!r) return;
+		if (n) return n(r) ? r : void 0;
+		let i = /\.vue(?:$|\?)/i.test(r) && !/[?&]lang\.css(?:&|$)/i.test(r);
+		return m(r) || i ? void 0 : r;
+	}
+	return {
+		postcssPlugin: "lumal-scoped-viewport",
+		Declaration(t) {
+			if (!o(s(t)) || !e.customProperties && t.prop.startsWith("--") || !e.fontSize && /^(?:font|font-size)$/i.test(t.prop)) return;
+			let n = a(t.value), c = !1;
+			n.walk((t) => {
+				if (t.type === "function" && /^(?:url|var)$/i.test(t.value)) return !1;
+				if (t.type !== "word" || !/^-?(?:\d+(?:\.\d*)?|\.\d+)px$/i.test(t.value)) return;
+				let n = Number.parseFloat(t.value);
+				Math.abs(n) <= (e.minPixelValue ?? 1) || (t.value = `${Number((n / r * 100).toFixed(i))}vw`, c = !0);
+			}), c && (t.value = n.toString());
+		}
+	};
+}
+function _(e, n = t.cwd()) {
+	return g(e, n);
+}
+function v(e) {
+	return new URLSearchParams(e.split("?")[1]).get("index") ?? "";
+}
+function y(e, t) {
+	try {
+		let n = !1;
+		return r(e, { from: t }).walkAtRules(/^(?:use|forward|import)$/i, (e) => {
+			let t = a(e.params).nodes, r = t.filter((e) => e.type === "string");
+			if (!r.length) {
+				let r = e.name.toLowerCase() === "import" && t.some((e) => e.type === "function" && e.value.toLowerCase() === "url");
+				n ||= !r;
+				return;
+			}
+			for (let t of r) {
+				let r = t.value.startsWith("sass:"), i = e.name.toLowerCase() === "import" && /^(?:https?:)?\/\/|\.css(?:[?#]|$)/i.test(t.value);
+				n ||= !r && !i;
+			}
+		}), n;
+	} catch {
+		return !0;
+	}
+}
+function b(n) {
+	let r = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Map(), o = () => !1;
+	function s(e) {
+		let t = r.get(f(e));
+		return t?.get(v(e)) ?? [...t?.values() ?? []].every(Boolean);
+	}
+	return {
+		name: "lumal-scoped-viewport",
+		enforce: "pre",
+		transform(e, t) {
+			let n = m(t);
+			if (!o(t) || !n) return;
+			let i = a.get(n) !== !1 && !y(e, t), s = f(t), c = r.get(s) ?? /* @__PURE__ */ new Map();
+			c.set(v(t), i), r.set(s, c), i || this.warn(`跳过视口转换 ${s}：预处理样式含跨文件导入或无法可靠解析的语法；请将外部样式与 Screen 声明分离，避免无原始 source map 时越过转换边界。`);
+		},
+		configResolved(e) {
+			for (let t of p) {
+				let n = e.css.preprocessorOptions?.[t]?.additionalData;
+				a.set(t, n === void 0 || typeof n == "string" && !y(n, `${e.root}/injected.${t}`));
+			}
+		},
+		async config(r) {
+			if (!n.enabled) return;
+			let a = e(r.root ?? t.cwd());
+			o = h(n, a);
+			let c = r.css?.postcss, l = typeof c == "object" ? c : void 0;
+			if (!l) try {
+				let t = await i({}, typeof c == "string" ? e(a, c) : a);
+				l = {
+					...t.options,
+					plugins: t.plugins
+				};
+			} catch (e) {
+				if (c || !(e instanceof Error) || !e.message.startsWith("No PostCSS Config found")) throw e;
+			}
+			r.css ??= {}, r.css.postcss = {
+				...l,
+				plugins: [...l?.plugins ?? [], g(n, a, s)]
+			};
+		}
+	};
+}
+//#endregion
+export { s as createLumalAliases, u as createLumalComponentResolver, _ as createViewportPostcssPlugin, b as createViewportTransformPlugin, d as resolveLumalDevtoolsPlugin };

package/dist/src/aliases.d.ts

@@ -1,5 +1,5 @@
 export type LumalAliasTarget = 'dist' | 'source';
-export type LumalAliasPackage = 'charts' | 'cockpit' | 'core' | 'datav' | 'icons' | 'icons-vue' | 'vben-compat';
+export type LumalAliasPackage = 'charts' | 'cockpit' | 'core' | 'datav' | 'icons' | 'icons-vue' | 'vben-compat' | 'viewport';
 export interface LumalAliasEntry {
     find: string;
     replacement: string;

package/dist/src/aliases.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"aliases.d.ts","sourceRoot":"","sources":["../../src/aliases.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,CAAA;AAChD,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,WAAW,GAAG,aAAa,CAAA;AAE/G,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,WAAW,yBAAyB;IACxC,QAAQ,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAC9B,MAAM,CAAC,EAAE,gBAAgB,CAAA;IACzB,aAAa,EAAE,MAAM,CAAA;CACtB;AA+HD,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,yBAAyB,GAAG,eAAe,EAAE,CAWxF"}
+{"version":3,"file":"aliases.d.ts","sourceRoot":"","sources":["../../src/aliases.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,CAAA;AAChD,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,WAAW,GAAG,aAAa,GAAG,UAAU,CAAA;AAE5H,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,WAAW,yBAAyB;IACxC,QAAQ,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAC9B,MAAM,CAAC,EAAE,gBAAgB,CAAA;IACzB,aAAa,EAAE,MAAM,CAAA;CACtB;AA6JD,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,yBAAyB,GAAG,eAAe,EAAE,CAWxF"}

package/dist/src/index.d.ts

@@ -4,4 +4,6 @@ export { createLumalComponentResolver, } from './component-resolver';
 export type { CreateLumalComponentResolverOptions, LumalComponentResolver, LumalComponentResolverResult, } from './component-resolver';
 export { resolveLumalDevtoolsPlugin, } from './devtools';
 export type { ResolveLumalDevtoolsPluginOptions, } from './devtools';
+export { createViewportPostcssPlugin, createViewportTransformPlugin } from './viewport-transform';
+export type { ViewportTransformOptions } from './viewport-transform';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,GACnB,MAAM,WAAW,CAAA;AAClB,YAAY,EACV,yBAAyB,EACzB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,WAAW,CAAA;AAClB,OAAO,EACL,4BAA4B,GAC7B,MAAM,sBAAsB,CAAA;AAC7B,YAAY,EACV,mCAAmC,EACnC,sBAAsB,EACtB,4BAA4B,GAC7B,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EACL,0BAA0B,GAC3B,MAAM,YAAY,CAAA;AACnB,YAAY,EACV,iCAAiC,GAClC,MAAM,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,GACnB,MAAM,WAAW,CAAA;AAClB,YAAY,EACV,yBAAyB,EACzB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,WAAW,CAAA;AAClB,OAAO,EACL,4BAA4B,GAC7B,MAAM,sBAAsB,CAAA;AAC7B,YAAY,EACV,mCAAmC,EACnC,sBAAsB,EACtB,4BAA4B,GAC7B,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EACL,0BAA0B,GAC3B,MAAM,YAAY,CAAA;AACnB,YAAY,EACV,iCAAiC,GAClC,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,2BAA2B,EAAE,6BAA6B,EAAE,MAAM,sBAAsB,CAAA;AACjG,YAAY,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAA"}

package/dist/src/viewport-transform.d.ts

@@ -0,0 +1,22 @@
+import type { Plugin as PostcssPlugin } from 'postcss';
+import type { Plugin as VitePlugin } from 'vite';
+export interface ViewportTransformOptions {
+    /** 必须显式开启；不设置时不修改配置。 */
+    enabled?: boolean;
+    /** 相对 Vite root 的 glob，例如 src/screen/**，不允许隐式全项目转换。 */
+    include: string[];
+    exclude?: string[];
+    viewportWidth?: number;
+    precision?: number;
+    /** 默认保留 <=1px，避免细边框消失。 */
+    minPixelValue?: number;
+    fontSize?: boolean;
+    customProperties?: boolean;
+    /** 默认排除全部依赖；仅此处显式列出的包可以转换。 */
+    dependencies?: string[];
+}
+/** 在预处理后的 CSS AST 上操作，不扫描脚本、模板数字或任意文本。 */
+export declare function createViewportPostcssPlugin(options: ViewportTransformOptions, root?: string): PostcssPlugin;
+/** 保留已有 inline/file PostCSS 配置，开发和构建都在同一 CSS 管线上执行。 */
+export declare function createViewportTransformPlugin(options: ViewportTransformOptions): VitePlugin;
+//# sourceMappingURL=viewport-transform.d.ts.map

package/dist/src/viewport-transform.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewport-transform.d.ts","sourceRoot":"","sources":["../../src/viewport-transform.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,MAAM,IAAI,aAAa,EAAE,MAAM,SAAS,CAAA;AACnE,OAAO,KAAK,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,MAAM,CAAA;AAQhD,MAAM,WAAW,wBAAwB;IACvC,wBAAwB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,uDAAuD;IACvD,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,0BAA0B;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,8BAA8B;IAC9B,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;CACxB;AA8FD,0CAA0C;AAC1C,wBAAgB,2BAA2B,CAAC,OAAO,EAAE,wBAAwB,EAAE,IAAI,SAAgB,GAAG,aAAa,CAElH;AA+BD,uDAAuD;AACvD,wBAAgB,6BAA6B,CAAC,OAAO,EAAE,wBAAwB,GAAG,UAAU,CAwD3F"}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@lumal/vite",
   "type": "module",
-  "version": "0.0.4-beta",
-  "description": "Lumal Vite component resolver, workspace aliases and optional devtools helpers.",
+  "version": "0.0.6-beta",
+  "description": "Lumal Vite resolvers, workspace aliases, devtools helpers and scoped optional CSS viewport transforms.",
   "license": "MIT",
   "keywords": [
     "lumal",
@@ -29,6 +29,15 @@
     "README.md",
     "dist"
   ],
+  "dependencies": {
+    "picomatch": "^4.0.5",
+    "postcss": "^8.5.16",
+    "postcss-load-config": "^6.0.1",
+    "postcss-value-parser": "^4.2.0"
+  },
+  "devDependencies": {
+    "@types/picomatch": "^4.0.3"
+  },
   "scripts": {
     "build": "vite build --config vite.config.ts && tsc -p tsconfig.json --emitDeclarationOnly && node ../../scripts/clean-package-dist.mjs dist",
     "typecheck": "tsc --noEmit -p tsconfig.json",