Introducing the @knighted/jsx + @knighted/css Stack: Standards-Based Flexibility for Modern Web Development

Source: Dev.to

Demo App

Experience the stack in action: Live demo – morganney/css-jsx-app

1. The “Native” Philosophy – Standards‑First

Unlike Rust‑based frameworks that replace web standards with macros and WASM abstractions, @knighted embraces the browser‑native model:

• Standards as authoring – Write plain JavaScript, CSS, and DOM code. If you know MDN, you’re already up to speed.
• Shadow DOM as default – Every component is automatically encapsulated, aligning with the modern evolution of Web Components.
• Future‑proof – Features such as Constructable Stylesheets and Shadow DOM are baked into browsers, guaranteeing long‑term compatibility.
• Lightweight by design – No heavy runtime, no proprietary syntax – just tools that accelerate the standards you already use.

2. The Oxc Toolchain (Oxidation Compiler)

@knighted uses the Rust‑powered Oxc toolchain for the heavy lifting at build time:

• Instant builds – Rust‑driven parsing, scoping, and transpilation produce near‑instant builds and minified outputs.
• Bridge architecture – Performance‑critical tasks (CSS scoping, selector mapping, etc.) run in Rust, then hand off clean, optimized JavaScript for the runtime. No WASM memory‑heap management required.

3. TypeScript Integration – A Closed‑Loop for Safety

• Virtual JSX mapping – The TypeScript Language Service Plugin treats tagged templates (jsx, reactJsx) as real JSX, giving you in‑template autocompletion, red‑line errors, and refactoring.
• Shadow‑DOM‑driven selectors – Type‑safe CSS selectors are derived directly from scoped Shadow DOM styles, eliminating broken class references at runtime.

The result: unmatched confidence, productivity, and type safety with a simple workflow.

4. Interoperability – No Proprietary Silos

• Switchable runtimes – Use jsx for lightweight DOM manipulation/Web Components or reactJsx for React‑based legacy code.
• SSR via shims – @knighted/jsx/node enables native DOM code to run out‑of‑the‑box on the server using high‑performance shims (e.g., linkedom, jsdom). No custom rendering engines needed.

5. Styling Paradigms – Flexible, Type‑Safe, and Encapsulated

@knighted works with CSS Modules, Sass, Less, Vanilla Extract, and surfaces both hashed and stable class names when required.

• One loader for all styling – Switch paradigms as your project evolves or as you absorb legacy code.
• Predictable, type‑safe selectors – Full autocompletion and error checking inside .js, .ts, or .tsx files.
• Encapsulation + flexibility – Styles work in global, Shadow DOM, or any context without rewrites.

6. Tag‑Based Components & Styles – Browser‑Native Syntax

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>
`;

• Tagged template literals – Simple, readable, and interoperable with both DOM and React runtimes.
• Scoped Shadow DOM styles – Achieve isolation and reusability without extra tooling.

7. Ultra‑Thin Runtime Layers

• Native DOM objects – Outputs real Node, DocumentFragment, SVGElement, avoiding unnecessary abstraction layers.
• True Shadow DOM styling – Guarantees encapsulated component state, eliminates global style conflicts, and improves overall reliability.

8. Intelligent Development Tooling

• In‑template type checking – Catch errors in template literals at compile time.
• IDE intelligence – Refactoring, autocomplete, and go‑to‑definition work inside templates.

9. Solving the “Mystery Meat” Problem of CSS‑in‑JS

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

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

Automatically typed styles give you the safety of CSS‑in‑JS without the runtime overhead.

@knighted – A Game‑Changer in 2026

By accelerating native web standards, providing first‑class Shadow DOM support, and leveraging Rust‑speed tooling, @knighted offers a lightweight yet powerful web‑development toolchain that feels like a modern framework—without sacrificing performance, type safety, or future‑proofness.

Predictable and Scoped Button

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

Key Benefits

• Shadow DOM selectors stay type‑safe – Predictive autocompletion of Shadow DOM class names.
• Encapsulate styles – Avoid global style bleeding between React and other app parts using Shadow DOM isolation.
• Maximize component reusability – Use React components both globally and in Shadow DOM contexts.
• Simplify build tooling – Bypass .tsx quirks, TypeScript decorators, and complex loader setups.

Define a Component with JSX and Export Its Scoped Styles, Then Consume Both via a Combined Query Import

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>
  `;
}

Consume the component and its stylesheet

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);

One import gives you both the DOM factory (Button) and the Shadow‑DOM‑ready stylesheet string (knightedCss), so scoped styling stays with the component wherever you mount it.

Minimal Webpack Module Rule Setup

export default {
  module: {
    rules: [
      {
        test: /\.[mc]?jsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: '@knighted/jsx/loader',
            options: {
              runtime: 'dom', // switch to 'react' when emitting React JSX templates
              // 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'], // optional: add custom script extensions
              },
              // Docs: https://github.com/knightedcodemonkey/css/blob/main/docs/loader.md
            },
          },
        ],
      },
    ],
  },
};

This keeps JSX transpilation and Shadow‑DOM‑safe styling in a single place while remaining easy to expand with additional loaders later.

How the @knighted Stack Differs

The @knighted/jsx + @knighted/css stack is the premier choice for developers who want modern web‑development productivity without compromising on speed or compatibility. It sits in the “Goldilocks zone” for the web—a high‑performance accelerator that resists both proprietary silos and unmanaged manual workflows.

Looking Ahead to 2026

The @knighted stack empowers developers to:

• Build with true Shadow DOM encapsulation for predictable, isolated styling.
• Ship lightweight, standards‑compliant applications with ultra‑fast build times.
• Deliver type‑safe, scoped styles for fully portable and reusable CSS.
• Transition seamlessly between DOM‑first and React‑centric workflows.

Ready to adopt the future of web development?

Scaffold a New Project

npx @knighted/jsx init

• See the @knighted/css loader docs.
• Explore the demo app for more examples.

Documentation

• @knighted/jsx documentation
• @knighted/css documentation
• Complete working example – Demo App