推出 @knighted/jsx + @knighted/css Stack：基于标准的灵活性，面向现代 Web 开发

Source: Dev.to

请提供您希望翻译的具体文本内容，我将按照要求把它翻译成简体中文并保留原始的格式、Markdown 语法以及技术术语。谢谢！

演示应用

体验堆栈的实际运行：实时演示 – morganney/css-jsx-app

1. “原生”哲学 – 标准优先

• Standards as authoring – 编写纯 JavaScript、CSS 和 DOM 代码。如果你熟悉 MDN，就已经掌握要领。
• Shadow DOM as default – 每个组件都会自动封装，符合 Web Components 的现代演进。
• Future‑proof – 如 Constructable Stylesheets 和 Shadow DOM 等特性已内置于浏览器，确保长期兼容性。
• Lightweight by design – 没有沉重的运行时，也没有专有语法——只有加速你已在使用的标准的工具。

2. Oxc 工具链（Oxidation 编译器）

@knighted 在 构建时 使用基于 Rust 的 Oxc 工具链来完成繁重的工作：

• 即时构建 – 由 Rust 驱动的解析、作用域分析和转译实现近乎瞬时的构建和压缩输出。
• 桥接架构 – 性能关键任务（CSS 作用域、选择器映射等）在 Rust 中运行，然后交付干净、优化的 JavaScript 用于运行时。无需 WASM 内存堆管理。

3. TypeScript 集成 – 安全的闭环

• Virtual JSX mapping – TypeScript 语言服务插件将标记模板（jsx、reactJsx）视为真实 JSX，提供模板内自动补全、错误红线和重构。
• Shadow‑DOM‑driven selectors – 类型安全的 CSS 选择器直接从作用域 Shadow DOM 样式中生成，消除运行时的类引用错误。

结果：以简单的工作流实现无与伦比的信心、生产力和类型安全。

4. 互操作性 – 无专有孤岛

• 可切换运行时 – 使用 jsx 进行轻量级 DOM 操作/Web 组件，或使用 reactJsx 处理基于 React 的旧代码。
• 通过 shim 实现 SSR – @knighted/jsx/node 使原生 DOM 代码能够开箱即用地在服务器上运行，使用高性能 shim（例如 linkedom、jsdom）。无需自定义渲染引擎。

5. 样式范式 – 灵活、类型安全且封装

@knighted 支持 CSS Modules、Sass、Less、Vanilla Extract，并在需要时提供哈希和稳定的类名。

• 一次加载器搞定所有样式 – 随着项目演进或引入旧代码时，可随意切换范式。
• 可预测、类型安全的选择器 – 在 .js、.ts 或 .tsx 文件中实现完整的自动补全和错误检查。
• 封装 + 灵活性 – 样式可在全局、Shadow DOM 或任何上下文中使用，无需重写。

6. 基于标签的组件与样式 – 浏览器原生语法

import { jsx } from '@knighted/jsx/index.js';
import styles from './theme.knighted-css.js';

jsx`
  /* Encapsulated, Predictable Styles */
  <button class="${styles.button}" onClick={() => console.log('tapped')}>
    tap me
  </button>
`;

• 标签模板字面量 – 简单、易读，并且可在 DOM 和 React 运行时之间互操作。
• 作用域化 Shadow DOM 样式 – 在无需额外工具的情况下实现隔离和可复用性。

7. 超薄运行时层

• 原生 DOM 对象 – 输出真实的 Node、DocumentFragment、SVGElement，避免不必要的抽象层。
• 真正的 Shadow DOM 样式 – 确保组件状态封装，消除全局样式冲突，提升整体可靠性。

8. 智能开发工具

• 模板内类型检查 – 在编译时捕获模板字面量中的错误。
• IDE 智能 – 重构、自动完成和跳转到定义在模板内部也能工作。

9. 解决 CSS‑in‑JS 的 “神秘肉块” 问题

import styles from './theme.knighted-css.js';

<button class="${styles.button}">Click me</button>

自动类型化的样式让你拥有 CSS‑in‑JS 的安全性，同时没有运行时开销。

@knighted – 2026 年的游戏规则改变者

通过加速原生 Web 标准、提供一流的 Shadow DOM 支持，并利用 Rust 速度的工具链，@knighted 提供了一套轻量却强大的 Web 开发工具链，使用体验像现代框架——但不牺牲性能、类型安全或未来兼容性。

可预测且作用域限定的按钮

<button className="scoped-button">Predictable and Scoped Button</button>

关键优势

• Shadow DOM 选择器保持类型安全 – 对 Shadow DOM 类名进行预测性自动补全。
• 封装样式 – 使用 Shadow DOM 隔离，避免 React 与应用其他部分之间的全局样式泄漏。
• 最大化组件可复用性 – 在全局和 Shadow DOM 环境中都可以使用 React 组件。
• 简化构建工具链 – 绕过 .tsx 的怪癖、TypeScript 装饰器以及复杂的 loader 配置。

使用 JSX 定义组件并导出其作用域样式，然后通过组合查询导入同时使用两者

components/native_button.js

import { jsx } from '@knighted/jsx/index.js';
import styles from './native_button.knighted-css.js';

export default function Button({ label, onClick }) {
  return jsx`
    <button class="${styles.button}" onClick="${onClick}">
      ${label}
    </button>
  `;
}

消费组件及其样式表

import Button, {
  knightedCss as buttonCss,
} from './components/native_button.js?knighted-css&combined';

const host = document.createElement('div');
const shadow = host.attachShadow({ mode: 'open' });
const sheet = new CSSStyleSheet();

sheet.replaceSync(buttonCss);
shadow.adoptedStyleSheets = [sheet];

const handleClick = () => console.log('shadow button tapped');

shadow.append(
  Button({ label: 'Shadow‑scoped button', onClick: handleClick })
);
document.body.append(host);

一个导入即可同时获得 DOM 工厂函数（Button）以及适用于 Shadow‑DOM 的样式表字符串（knightedCss），从而保证样式随组件一起被作用域限定，无论你把它挂载到哪里。

最小化的 Webpack 模块规则配置

export default {
  module: {
    rules: [
      {
        test: /\.[mc]?jsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: '@knighted/jsx/loader',
            options: {
              runtime: 'dom', // 在生成 React JSX 模板时切换为 'react'
              // Docs: https://github.com/knightedcodemonkey/jsx/blob/main/src/loader/README.md
            },
          },
        ],
      },
      {
        resourceQuery: /\?knighted-css(?:&.*)?$/,
        use: [
          {
            loader: '@knighted/css/loader',
            options: {
              moduleGraph: {
                extensions: ['.ts', '.tsx'], // 可选：添加自定义脚本扩展名
              },
              // Docs: https://github.com/knightedcodemonkey/css/blob/main/docs/loader.md
            },
          },
        ],
      },
    ],
  },
};

这让 JSX 转译和 Shadow‑DOM‑安全样式统一管理，同时保持后续可轻松添加其他 loader 的扩展性。

@knighted 堆栈的区别

@knighted/jsx + @knighted/css 堆栈是希望实现现代 Web 开发生产力且不牺牲速度或兼容性的开发者的首选。它位于 Web 的“恰到好处区”，是一个高性能加速器，既能避免专有孤岛，也能规避未受管理的手动工作流。

Source: …

展望 2026

@knighted 堆栈为开发者提供：

• 使用真正的 Shadow DOM 封装，实现可预测、隔离的样式。
• 交付轻量、符合标准的应用，拥有超快的构建时间。
• 提供类型安全、作用域化的样式，实现 CSS 的完全可移植和可复用。
• 在 DOM‑first 与 React‑centric 工作流之间无缝切换。

准备好采用 Web 开发的未来了吗？

脚手架新项目

npx @knighted/jsx init

• 查看 @knighted/css 加载器文档。
• 浏览演示应用获取更多示例。

文档

• @knighted/jsx 文档
• @knighted/css 文档
• 完整可运行示例 – 演示应用