Vite 的 EuropaCSS 本地编译器适配器
原生β包. 支持22.12+和24+节点上的Vite 6.4.3和8.3.0+. 编译器仍然是 独立 Rust 可执行文件; 此可选 JavaScript 适配器只将其连接到 维特。 没有N-API绑定或JavaScript配置评价.
在应用程序中安装匹配的适配器和 CLI β :
pnpm add -D --save-exact @brandocms/[email protected] @brandocms/[email protected]
适配器精确依赖CLI包. 它解决了原住民
不搜索 PATH 就可执行该依赖 。 安装 CLI
也直接暴露 pnpm exec europa 用于迁移和其他命令.
平台二进制来自npm可选依赖,没有安装脚本,
Rust工具链或单独的二进制下载. 继续启用可选依赖性 .
这个 HTML 文件来源 拥有完整的应用程序工作流程.
import { defineConfig } from 'vite';
import europa from '@brandocms/vite-plugin-europacss';
export default defineConfig({
plugins: [europa({
config: './europa.json5',
targets: ['defaults'], // One CSS policy for Europa and Vite.
// Optional: only compile your own stylesheet entry points.
include: (filename) => filename.replaceAll('\\', '/').endsWith('/css/app.css'),
})],
css: {
devSourcemap: true,
// Suppresses discovery of an old postcss.config.cjs.
postcss: { plugins: [] },
},
build: { sourcemap: true, cssMinify: 'lightningcss' },
});
保持原样 import '../css/app.css'删除旧的 Europa PostCSS 插件
和任何自定义的 Europa 配置重装插件 。 首先转换静态配置 :
europa migrate-config europa.config.cjs -o europa.json5
如果还需要其他 PostCSS 插件, 请保留您的 PostCSS 配置和
删除空内行 css.postcss 设置。 适配器不修改 Vite 的
PostCSS 设置 。 维特本身仍然可以在内部使用PostCSS.
选项在 index.d.ts。默认可执行文件是包件
编译器; 默认配置为 europa.json5 相对于维特根. 使用
config: false europa 默认值。 浏览器目标查询进入 targets。 。 。 .
本地可执行文件确定 CSS 政策在 Vite 启动时一次 。 适配器
与Europa共享引擎地板, build.cssTarget 财务报告和审定财务报表
css.lightningcss.targets,替换单独的CSS目标和遗留插件CSS
默认值。 JavaScript目标和遗产捆绑不变. CSS两个通行证
继续启用。 Vite 6 需要安装 lightningcss 在申请中
上文所示的最后修改; Vite 8 将它列为正常依赖。适配器保留了您的修饰选择.
现代Android和三星互联网目标映射到Chromium;补丁地板圆形
至主/小于两道道. 无支持的Android和未知的三星
释放明显失败。 见 目标政策细节。 。 。 .
对于编译器开发, binary: '/absolute/path/to/europacss/target/release/europa'
覆盖已包装的编译器。 可执行文件必须支持 europa bridge targets。 。 。 .
CSS是在Vite的CSS管道之前编译而成. Vite仍然处理 CSS 模块,
资产URL,提取,微缩和样式注入. 普通CSS进口
由Rust捆绑。 对于不精确本地文件的导入, 适配器
请 Vite 解决软件包导出和别名, 然后传递绝对路径到
生锈. 图层/支持/媒体限定符、源地图和每个文件资产重置
页:1 Globs和虚拟/SFC的导入不支持. ?raw 财务报告和审定财务报表 ?url 请求
被故意留给维特.
当地进口和JSON5配置,包括完整 extends 链条,
被监视着 正常编辑通过 HMR 更新受影响的 CSS 模块; 文件
创建/删除使用全重载来恢复缺失的输入. Vite 忽略
node_modules,因此适配器的民调 仅使用那里的依赖文件
变化时会重新装入. 删除的依赖关系停止触发更新,以及
server.watch: null 禁用此民调 。 见 配置继承
用于与本地覆盖共享预设。 编译器错误保留原文件名/行/栏.
原始地图如果来源明确,则查找个人申报和欧罗巴指令。 几个作者声明的简写合在一起保留了包含规则的位置. Lightning CSS 不映射的规则,例如键框步骤,仍然未映射 。 在同一生成的行上非ASCII文本之后的不可靠的后端列也会被留作未映射,而不是指向一个无关的规则.
对于Chrome's Styles相框中的字体符号标签,启用 europa({ debugTokens: true })开发CSS包括下列评论:
font-size: 20px; /* --ec-font-token: "typography.sizes.body"; */
Chrome 承认此注释中的声明为已禁用属性, 因此符号标签与大小并列, 不改变计算样式 。 标签标识大小 @fontsize 大小参数 @font包括反应性变体。 字形大小和模棱两可的合并起源没有标签. 标签在Vite生产建筑中总是被省略,包括使用 cssMinify: false。 。 。 .
使用 Vite 默认 CSS 变压器 css.devSourcemap: true后置变压器,例如 css.transformer: 'lightningcss' 可以去除这些注释并降低源图精确度. 生产环境 build.cssMinify: 'lightningcss' 没事.
适配器在启动时启动一个目标分辨率进程,每集CSS编译一个进程(30秒超时)
没有生成 CSS 文件 。 这个 europa bridge 协议在
stdin并发布了一个版本的JSON在stdout上的反应. 失败的答复包括
尝试导入路径, 因此新创建的缺失依赖可以恢复一个构建 .
本地测试,运行 cargo build -p europacss,则 npm ci 财务报告和审定财务报表 npm test 内
亲子关系 packages/ 使用22号或24号节点的工作空间. EUROPA_BINARY 能够选择
另一个编译可执行文件。 释放出柏油丸
python3 scripts/package-npm.py --shared 从寄存器根.