openpencil/packages/dom-css/AGENTS.md
Danila Poyarkov 3e4e3d0b8b
refactor: rename @open-pencil/codegen to @open-pencil/emit (#822)
* refactor: rename @open-pencil/codegen to @open-pencil/emit

In design tools codegen means design-to-code, which is dom-css's job and
Core's codegen tools'. The package builds and prints the syntax trees
exporters emit, so name it for that. It has not been released yet.

* fix: alias @open-pencil/emit to its source in Vite

The rename missed the escaped regex, so Vite resolved the package through
its built dist output.
2026-10-04 11:22:20 +00:00

1.3 KiB

DOM/CSS

DOM, CSS, HTML, JSX, and Tailwind projection between documents and SceneGraph, with browser and headless CSS runtimes. Sources are grouped by direction:

  • src/import/ — HTML, CSS, JSX, and Tailwind to SceneGraph, including the jsx-runtime entries and CSS value parsing.
  • src/export/ — SceneGraph to HTML, Tailwind JSX, and Storybook: projection, CSS formatting, the HTML bundle, and printers. src/export/index.ts is the ./export entry.
  • src/runtime/ — browser and headless CSS runtimes.
  • src/tokens/ — variables as design tokens: CSS custom property names, Tailwind namespaces from twirlwind, and units. Shared by both directions and exported from ./export.

Rules:

  • Depend only on @open-pencil/scene-graph and @open-pencil/emit. Engine services such as web-font resolution come in as options; Core registers the HTML and Tailwind JSX formats (packages/core/AGENTS.md).
  • Keep the ./export entry browser-safe: load node:* modules and the headless CSS object model lazily inside the functions that need them, so the app never bundles them.
  • Build generated code as syntax trees with @open-pencil/emit (es for TypeScript modules, jsx for JSX), not string fragments.
  • Imported documents are untrusted: check Base64 with js-base64's isValid before decoding.