Repository navigation
feat(icon): add comark-icon, Iconify icons in Markdown drawn as CSS, and a resolver other plugins share - #54
Conversation
comark-annotate
comark-carousel
comark-charts
comark-code
comark-embed
comark-github-callouts
comark-icon
comark-include
comark-lint
comark-tabs
comark-zoom
commit: |
🚀 Deploying Preview to Cloudflare 🚀Preview Deployments by commit
|
Latest result Pull request merged. Final answersSession Pull request merged. Session Waiting for GitHub merge request 0a2c1b0b-f79d-4fc8-9ec5-245845ffc3d5. Session Fixed the required Doctor check failure (P1): removed the runtime typeof narrowing warning in comark-icon, resolved the prepared AGENTS.md conflict, and pushed one repair commit. Focused Vite Doctor now reports 0 warnings, errors, and blockers. Awaiting current-head checks and automated review. Session Fixed the required Doctor check failure (P1): removed the runtime typeof narrowing warning in comark-icon, resolved the prepared AGENTS.md conflict, and pushed one repair commit. Focused Vite Doctor now reports 0 warnings, errors, and blockers. Awaiting current-head checks and automated review. Session Fixed the required Doctor check failure (P1): removed the runtime typeof narrowing warning in comark-icon, resolved the prepared AGENTS.md conflict, and pushed one repair commit. Focused Vite Doctor now reports 0 warnings, errors, and blockers. Awaiting current-head checks and automated review. Session Fixed the required Doctor check failure (P1): removed the runtime typeof narrowing warning in comark-icon, resolved the prepared AGENTS.md conflict, and pushed one repair commit. Focused Vite Doctor now reports 0 warnings, errors, and blockers. Awaiting current-head checks and automated review. Session Fixed the required Doctor check failure (P1): removed the runtime typeof narrowing warning in comark-icon, resolved the prepared AGENTS.md conflict, and pushed one repair commit. Focused Vite Doctor now reports 0 warnings, errors, and blockers. Awaiting current-head checks and automated review. Session Fixed the required Doctor check failure (P1): removed the runtime typeof narrowing warning in comark-icon, resolved the prepared AGENTS.md conflict, and pushed one repair commit. Focused Vite Doctor now reports 0 warnings, errors, and blockers. Awaiting current-head checks and automated review. |
![pullfrog[bot]](https://avatars.githubusercontent.com/in/1768019?s=60&v=4){kind=small}
There was a problem hiding this comment.
Important
This PR has two input-validation and diagnostics issues that can produce the wrong icon or misleading remediation for supported custom collections.
Reviewed changes
- Icon resolver — adds collection-first and Iconify API resolution with batching, caching, and problem values instead of thrown errors.
- Markdown plugin — resolves
:iconattributes during parsing, keeps draw data on valid nodes, removes invalid nodes, and appends readable issues. - Renderer integrations — adds shared CSS output and HTML, Vue, React, and Svelte components with matching accessibility behavior.
- Package and docs integration — publishes the new package, wires it into the docs site and optional lint configuration, and documents offline/custom collection usage.
Note: 1 inline comment(s) dropped because they did not anchor to lines inside the PR diff:
packages/icon/src/resolve.ts:1093(RIGHT) — line 1093 (RIGHT) is not inside a diff hunk
gpt-5.6-sol ｜ 𝕏
…and a resolver other plugins share
c81cb22 to
b37e707
Compare
There was a problem hiding this comment.
Important
The incremental component escaping change is safe, but the PR still accepts malformed set:name values that can resolve and render a different icon than the author requested.
Reviewed changes
The incremental review covered the new component-side CSS URL escaping and its regression test, with the full PR diff and existing review feedback rechecked for context.
- Escaped component sources — Kept arbitrary
srcvalues inside the quoted CSSurl()used by the shared React, Vue, Svelte, and HTML rendering paths. - Added regression coverage — Verified that a component-provided source containing CSS delimiter characters is percent-encoded in the rendered React style.
gpt-5.6-sol ｜ 𝕏
There was a problem hiding this comment.
ℹ️ No new issues found in the latest commit; the previously reported resolver findings remain open.
Reviewed changes
- Component CSS URL escaping — Applied shared escaping for quotes, backslashes, and CSS line-break characters before component-provided
srcvalues enter the quotedurl()declaration, and added a React regression test covering an injection-shaped value.
gpt-5.6-sol ｜ 𝕏
There was a problem hiding this comment.
Important
The malformed icon-name validation finding from the prior review remains unresolved; this is not a new delta issue, but the PR cannot be approved while it is open.
Reviewed changes
The incremental review rechecked the component-side CSS URL escaping commit and the full PR context, including the previously reported resolver validation finding.
- Escaped component sources — Kept arbitrary component-provided
srcvalues inside the quoted CSSurl()declaration and added a regression test for CSS delimiter characters.
Focused verification was attempted, but the workspace install hook could not run because the environment cannot lock .git/config on its read-only filesystem.
gpt-5.6-sol ｜ 𝕏
There was a problem hiding this comment.
✅ No new issues found.
Reviewed changes
The incremental review covered the commits since the prior Pullfrog review, with the full PR diff rechecked for context.
- Rejected malformed icon names — Added validation for extra colon segments so malformed values fail before collection lookup, API batching, or rendering, and added regression coverage for the resulting issue and output.
- Formatted docs resolver setup — Reformatted the docs build's shared icon resolver call without changing its behavior.
The focused test command could not run because the workspace's pnpm install prepare hook cannot lock .git/config in this read-only environment; source inspection and the incremental regression coverage found no remaining issue in the new commits.
gpt-5.6-sol ｜ 𝕏
There was a problem hiding this comment.
✅ No new issues found.
Reviewed changes
The incremental review covered the dependency/catalog lockfile normalization and the lint integration changes since the prior Pullfrog review, with the complete PR diff rechecked for context.
- Normalized workspace dependencies — Added the new package and docs dependencies to the workspace catalog and lockfile without changing runtime behavior.
- Registered the lint plugin — Added
comark-icon/htmlas an optional package incomark-lint, allowing installed projects to lint icon nodes and use its renderer components. - Retired resolver feedback — Confirmed the malformed-name validation is implemented and the prior Pullfrog threads were addressed and resolved.
The focused commands were attempted, but the workspace prepare hook failed with error: could not lock config file .git/config: Read-only file system; lockfile policy validation completed successfully during installation.
gpt-5.6-sol ｜ 𝕏
There was a problem hiding this comment.
Important
The new zoom scroll-lock path can reserve the scrollbar gutter twice when the page already uses scrollbar-gutter: stable, causing a visible width shift while the zoom is open.
Reviewed changes
- Reworked zoom scroll locking — Replaced the supported
scrollbar-gutterassignment with unconditionalpadding-rightreservation before hiding document overflow. - Normalized workspace integration — Updated dependency catalog and lockfile entries and registered
comark-icon/htmlwith the optional lint plugin configuration.
Note: 1 inline comment(s) dropped because they did not anchor to lines inside the PR diff:
packages/zoom/src/script.ts:1583(RIGHT) — line 1583 (RIGHT) is not inside a diff hunk
gpt-5.6-sol ｜ 𝕏
There was a problem hiding this comment.
✅ No new issues found.
Reviewed changes
- Resolved docs integration conflicts — Restored the docs section heading markup and retained the mono font preload while keeping the generated icon stylesheet in the page shell.
gpt-5.6-sol ｜ 𝕏
There was a problem hiding this comment.
✅ No new issues found.
Reviewed changes
This incremental review covered the changes since the prior Pullfrog review: repaired the docs build's shared icon integration and tightened the plugin option check while rechecking the complete PR diff for context.
- Repaired docs icon integration — Switched the generated docs site's icon helper to the shared
comark-iconresolver, retained the custom scribble icon collection, and preserved the generated icon stylesheet in the page shell. - Tightened resolver detection — Required an object before treating plugin options as a shared resolver, avoiding incorrect handling of primitive option values.
Focused verification was attempted, but both commands were blocked by the workspace prepare hook: error: could not lock config file .git/config: Read-only file system. The lockfile supply-chain policy check passed; source inspection found no new issue in this delta.
gpt-5.6-sol ｜ 𝕏
There was a problem hiding this comment.
Important
The latest commit makes a truthy primitive plugin option throw during plugin initialization instead of falling back to the normal icon options path.
Reviewed changes
The incremental review covered the commits since the prior Pullfrog review, with the complete PR diff rechecked for context.
- Merged the code package integration — Added
comark-codeto the repository documentation, docs build, workspace dependencies, and lint's optional package discovery. - Changed icon option detection — Replaced the object guard around shared resolver detection with a direct
incheck while preserving the docs icon integration and existing resolver behavior.
Focused verification was blocked by the workspace prepare hook: error: could not lock config file .git/config: Read-only file system; lockfile policy validation completed before the hook failure.
gpt-5.6-sol ｜ 𝕏
|
Pullfrog: P2 runtime edge case; |
1 participant
Stacked on #50. Adds
comark-icon, an icon package for Comark modelled on Nuxt Icon. It has two jobs: an inline:iconcomponent, and an icon resolver that other plugins share. #51 (tab icons) will be rebased onto it.How it works
collections, then from the Iconify API. The API is on by default, as in Nuxt Icon.fetch: falseturns it off, and a URL points it at an Iconify API of your own. A collection is an@iconify-json/*set, or SVG markup by name for icons of your own. Downloads are cached once per process, and each request holds sorted names and stays under 500 characters, as Iconify asks..cispan, so the page makes no request for it and it shows without a script. An icon that paints withcurrentColorbecomes a mask in the text colour; any other is a background image. This is the same rule Nuxt Icon's CSS mode, UnoCSS preset-icons and@iconify/utils'getIconCSSuse.set:name. Nuxt UI'si-lucide-appleandi-lucide:applealso work, since agents copy them from Nuxt UI and Comark docs. Hyphenated set names such asi-simple-icons-githubare matched against Iconify's hyphenated prefixes.labelis decorative (aria-hidden). An icon withlabelgetsrole="img"and the label as its name.forced-color-adjust: preserve-parent-color, Chromium paints mask icons in the page background colour and they vanish. I confirmed this with Playwright's forced-colors emulation: without the rule, the sidebar icons disappear; with it, they show in the system link colour.meta.issues, naming the icon and the fix, and is left out of the page. The cases are a missingname, a malformed name, an unknown set or icon, and a failed request.@comark/reactsplits a style string at every:, which would cut thedata:URL.createIcons(options)returns a resolver withresolve(names)that never throws.describeIconProblem()words a problem the same way the:iconplugin does, andiconHtml()/iconStyles()or theIconcomponents draw the result.Docs
docs/pages/icon/adds the package's pages: overview, getting started, syntax and guides.comark-iconfrom@iconify-json/lucide, replacing the hand-copied SVGs. The site's own icons don't touch the network: they usefetch: false.comark-lint, as an optional peer.Decisions to review
collections. Iconify calls use outside its own components a "bonus that should not be abused", so requests are batched and cached.styleattribute, so a strict CSP needsstyle-src-attr 'unsafe-inline'andimg-src data:. One stylesheet per document would avoid that, but I haven't tested it across the renderers.vscode-icons:file-type-pnpm) and no aliases. Tabs keeps its label-to-icon map in feat(tabs): add an icon prop, drawn by comark-icon from Iconify names or image URLs #51.@iconify/utils(about 2 KB gzip for the functions used, with no Node built-ins) and@iconify/types. The root gains@iconify-json/lucideas a dev dependency.Before release
comark-iconis a new package. It needs a trusted publisher on npmjs.com, with workflowrelease.yamland environmentnpm, before its first release.Checks
comark-icontests: 11 passed.vp checkreports 0 errors; its 2 warnings are already ine2e/annotate.e2e.ts.comark-icon: 0 warnings.🤖 Generated with Claude Code