@birtycom/omniacs-migrate (英语)

切换 a Laravel, Vue 或反应 从 Tailwind CSS 到 OmniaCSS 的项目 并保留您的类名。 。 。 . flex items-center gap-4 p-4 md:p-8 bg-white dark:bg-gray-900 hover:bg-red-500/50 w-[37px] 继续工作:这些课程按要求解决,并作为只使用OmniaCSS令牌(OKLCH中的Omnia调色板, rem 天平,奥姆尼亚阴影和断点).

来自 诱饵3、4或5看到了吗 从靴子。 。 。 .

这是唯一一个给Tailwind和Bootstrap命名的软件包,因为它是一个迁移工具.

三步内拉拉维尔

# 1. see what changes (dry run, nothing is written) and how much of your markup is covered
npx @birdycom/omniacss-migrate scan .
npx @birdycom/omniacss-migrate setup .

# 2. apply the switch: removes the Tailwind packages from package.json, swaps the Vite/PostCSS plugin, carries your theme into CSS
npx @birdycom/omniacss-migrate setup . --write
npm uninstall tailwindcss @tailwindcss/vite @tailwindcss/postcss && npm install -D @birdycom/omniacss-migrate

# 3. build as usual
npm run dev

你的"刀锋","Vue"和"React"文件保持原样. 用手做两个编辑:

// vite.config.js
import omniaMigrate from "@birdycom/omniacss-migrate/vite";   // was: import tailwindcss from "@tailwindcss/vite"
export default defineConfig({ plugins: [laravel({ input: ["resources/css/app.css", "resources/js/app.js"] }), omniaMigrate()] });

/* resources/css/app.css: the entry, under our own name (setup --write renames @import "tailwindcss" to it): */
@import "@birdycom/omniacss-migrate";
/* the Tailwind forms keep working too: */
@import "tailwindcss";
@tailwind base; @tailwind components; @tailwind utilities;

不使用维特? 使用 PostCSS 插件代替 :

// postcss.config.js
import omniaMigrate from "@birdycom/omniacss-migrate/postcss";
export default { plugins: [omniaMigrate({ content: ["resources/views/**/*.blade.php", "resources/js/**/*.{vue,tsx,jsx,js}"] })] };

插件会做什么

• 替换 @import "@birdycom/omniacss-migrate" 编号 : @import "tailwindcss" 编号 : @tailwind base|components|utilities 与 Omnia 核心(tokens + 您使用的 Omnia 类) , 一个小基重置, 以及您在内容中找到的类的兼容 CSS .
• 扩展 @apply (带有变体, !important还有你们自己的班级, theme(colors.red.500), (中文(简体) ), --spacing(4), (中文(简体) ), @theme, (中文(简体) ), @custom-variant, (中文(简体) ), @variant, (中文(简体) ), @source, (中文(简体) ), @source inline("…"); 忽略 @plugin 财务报告和审定财务报表 @config。 。 。 .
• 读取 tailwind.config.{js,cjs,mjs} (单位:千美元)darkMode, (中文(简体) ), theme.colors编号 :extend.colors, (中文(简体) ), fontFamily, (中文(简体) ), borderRadius, (中文(简体) ), spacing, (中文(简体) ), boxShadow, (中文(简体) ), screens, (中文(简体) ), container, (中文(简体) ), prefix, (中文(简体) ), important还有你 @theme 块.
• 输出以级联层包裹 omnia, theme, base, components, utilities: Omnia 重置和符号最低; Omnia 类(例如代码所写的)和 Tailwind 风格的名称一起在 utilities,排序 Tailwind 方式(基类之后的变量,长手之前的短手,类优先具有更多的属性). 所以,奥姆尼亚级击败 每一个重置和你自己 @layer components,在同级赛中胜败 class 和代码之前一样.

类别覆盖面:布局、弹性/网格、间隔、尺寸、打字、颜色(文字、bg、边框、环、轮廓、填充、中风、分音、口音、护身、装饰、梯度) from-编号 :via-编号 :to-),边框,半径,阴影,环,不透明,滤波器和背景滤波器,过渡,动画,变形,显示,位置,z-index,溢出,光标,滚动坐标, tailwindcss-animate 类,任意值(w-[37px], (中文(简体) ), bg-(--brand), (中文(简体) ), [mask-type:luminance]),不透明度修改器(bg-red-500/50),负数(-mt-2, (中文(简体) ), !important变量 hover: focus: active: disabled: first: odd: before: after: placeholder: file: marker: selection:, (中文(简体) ), sm: md: lg: xl: 2xl: max-md: min-[…]:, (中文(简体) ), @md: 集装箱查询, dark:, (中文(简体) ), group-*, (中文(简体) ), peer-*, (中文(简体) ), data-[…]:, (中文(简体) ), aria-*:, (中文(简体) ), has-[…]:, (中文(简体) ), not-*, (中文(简体) ), in-*, (中文(简体) ), supports-[…]:, (中文(简体) ), *:,任意变体 [&>svg]:, (中文(简体) ), motion-safe:, (中文(简体) ), print:, (中文(简体) ), rtl:。 。 。 .

颜色

尾风调色板名称映射到 最近的奥姆尼亚调色板符号 (单位:千美元)src/data/colors.json,生成于 scripts/build-color-map.mjs 与 nearestOmnia(): bg-red-500 变成 var(--color-red-50). 任意颜色bg-[#0041a7])也被映射到最近的符号(arbitraryColors: "keep" 保持字迹。 使用不透明修饰器 color-mix(in oklab, <token> 50%, transparent)。 。 。 . 颜色来自 tailwind.config 被映射到奥姆尼亚地标上--keep-brand-colors 编号 : keepBrandColors ; 值为 var(...)编号 :hsl(var(...)) (shadcn风格) 保持你写的.

缩放

间距、尺寸、字体大小、半径、模糊和容器使用熟悉的数字(p-4 =: 1rem) (中文(简体) ). 阴影重用奥姆尼亚自己的阴影值. 断点跟随OmniaCSS(sm -36雷姆 -对, md 50雷姆(50雷姆), lg 64雷姆语; xl 80雷姆和 2xl 96rem 为相容性存在). 使用 breakpoints: "tailwind" 中文无改动.

两个系统中都存在的名称(p-4, (中文(简体) ), flex, (中文(简体) ), shadow-md .) 永不相撞: 类相配层解脱出Omnia核心输出.

国 际

omniacss-migrate scan <dir>                    coverage: % of class occurrences supported + the unsupported list
omniacss-migrate setup <project> [--write]     plan (dry run) or apply: package.json, vite/postcss config, CSS @theme + dark mode
omniacss-migrate codemod <dir> [--write]       rewrite to native OmniaCSS class names where the CSS is identical
omniacss-migrate build [-c glob] [-o file]     write the CSS once (no Vite or PostCSS)
omniacss-migrate css "md:hover:bg-red-500/50"  print the CSS for one class

omniacss migrate scan . 通过主要的CLI(npm i -D @birdycom/omniacss-migrate) (中文(简体) ).

setup 财务报告和审定财务报表 codemod 是干线,除非你通过 --write。先提交:文件已更改.

代码 (可选)

codemod 重写 class编号 :className编号 :cn()编号 :cva() 字符串为 本地语言 OmniaCSS 当一个 Omnia 类有完全相同的声明时命名( 例如) items-center 变成 align-items-center, (中文(简体) ), p-4 变成 p-1) (中文(简体) ). 其他一切皆为所出并列. 之后 --write 文件 omniacss-migrate.manifest.json 告诉比较图层 哪些名称是本地的, 所以 p-1 (奥姆尼亚, 1rem从来没有与旧混淆 p-1 (单位:千美元)0.25rem) (中文(简体) ). 运行它在整个项目,不是一个文件夹。 测试和脚本tests/, (中文(简体) ), scripts/, (中文(简体) ), *.test.*, (中文(简体) ), *.spec.* (.)被跳过并列出,因为他们经常将类名作为数据;添加 --include-tests 来重写它们.

从靴子

npx @birdycom/omniacss-migrate bootstrap scan .              # report only
npx @birdycom/omniacss-migrate bootstrap codemod . --write   # apply (commit first)
npx omniacss build -o css/omnia.css                          # OmniaCSS for exactly the classes you use

HTML、PHP、Blade、Twig、ERB、Vue和JSX模板;类属性内的模板代码(<?php … ?>, (中文(简体) ), {{ … }})是未触及的.

• 公用事业 在已安装的 OmniaCSS 构建中查阅: mt-3 (1雷姆)变成 mt-1, (中文(简体) ), d-md-none 变成 md:d-none, (中文(简体) ), justify-content-between 变成 justify-between。主题颜色(text-primary, (中文(简体) ), bg-dark, (中文(简体) ), border-danger)地图到最近的奥姆尼亚地标.
• 构成部分 成为 OmniaUI 类 : btn btn-primary → oc-btn, (中文(简体) ), alert alert-danger → oc-alert oc-alert--danger, (中文(简体) ), form-control → oc-input (单位:千美元)oc-select 编号 <select>, (中文(简体) ), card-body编号 :panel-body → oc-card-content, (中文(简体) ), table table-striped → oc-table oc-table--striped。 。 。 .
• 网格 类别(container, (中文(简体) ), row, (中文(简体) ), col-*, (中文(简体) ), offset-*, (中文(简体) ), g-*, (中文(简体) ), row-cols-*停留,由产生的服务 bootstrap-compat.css 在OmniaCSS的断点。 没有OmniaCSS双胞胎的公用事业(border 1个px, z-1, (中文(简体) ), mt-n1)将其精确的CSS保存在同一文件中.
• JavaScript 组件 (模式、倒地、倒塌、旋转木马、导航、制表板、离地扫描、土司)和图标字体都与本地替换(<dialog> + 键 commandfor波波尔, <details>卷轴.
• 靴子圈 <link> 改为: omnia.css,奥姆尼亚UI CSS和 bootstrap-compat.css 在同一资产文件夹中.
• 报告列出您的 JavaScript 切换类(classList.add('btn-primary'))和"靴子"(Bootstrap 3 class in a new site)分出"仍然被你的CSS所风格"和"安全删除".
• --write 记录其生产的类别 omniacss-migrate.bootstrap.json,所以运行它再次 从来没有读新 mt-1 (OmniaCSS, 1rem) 作为靴子的 mt-1 (0.25雷姆语).

选项 : --bs 3|4|5 (默认:从 package.json,则 <link>,当地 bootstrap.css 或加分, --breakpoints exact (把靴子的像素断点保持为 min-[48rem]:, (中文(简体) ), --compat <file>, (中文(简体) ), --omnia-href, (中文(简体) ), --omniaui-href, (中文(简体) ), --compat-href。 。 。 .

选项( 后CSS / Vite)

已知差距

• 除了插件类 tailwindcss-animate (打字法) prose,窗体,图标 icon-[…],没有生成容器-水槽插件).
• theme.extend.keyframes编号 :animation 从 tailwind.config 未结转.
• bg-opacity-*编号 :text-opacity-* (Tailwind 2 风格)和 mask-* 公用事业没有产生.
• 运行时从碎片组装的类别("bg-" + color + "-500") 无法被任何扫描仪找到: 添加到 safelist。 。 。 .
• 断点,阴影和相距最近的相片颜色在设计上与Tailwind略有不同:通过视觉检查结果.
• 第一个构建解析了完整的Omnia CSS(几秒);后来构建被缓存. core: "tokens" 是即时的.

节点.js 22+. 麻省理工学院