remark-notes-plugin 1.0.1 → 2.0.0

package/README.md

@@ -2,11 +2,10 @@
 
 A powerful TypeScript remark plugin that transforms markdown blockquotes into beautifully styled note elements. Add professional-looking notes, tips, quotes, and more to your markdown documentation with minimal effort!
 
+![Test Status](https://img.shields.io/github/actions/workflow/status/rishichawda/remark-notes-plugin/test.yml?branch=main&label=tests)
 ![npm](https://img.shields.io/npm/v/remark-notes-plugin)
 ![License](https://img.shields.io/npm/l/remark-notes-plugin)
-
-> [!note]
-> This was built for my AstroJS website but should work with any project.
+![Website](https://img.shields.io/website?url=https%3A%2F%2Frishichawda.github.io%2Fremark-notes-plugin)
 
 ## ✨ Features
 

package/dist/index.d.ts

@@ -1,2 +1,5 @@
 import type { Node } from 'unist';
-export default function remarkNotes(): (tree: Node) => void;
+import type { RemarkNotesOptions } from './lib/types/options.js';
+export type { RemarkNotesOptions } from './lib/types/options.js';
+export type { ValidNoteType } from './lib/icons-hast.js';
+export default function remarkNotes(options?: RemarkNotesOptions): (tree: Node) => void;

package/dist/index.js

@@ -1,166 +1,71 @@
 import { visit } from 'unist-util-visit';
-import { readFileSync } from 'fs';
-import { fileURLToPath } from 'url';
-import { dirname, join } from 'path';
-import { toHtml } from 'hast-util-to-html';
-import { toHast } from 'mdast-util-to-hast';
-const noteTypes = {
-    'note': {
-        icon: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g stroke-linecap="round" stroke-linejoin="round" stroke-width="0.048">
-    </g>
-    <g>
-        <path d="M8 2V5" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round">
-        </path>
-        <path d="M16 2V5" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round">
-        </path>
-        <path d="M21 8.5V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V8.5C3 5.5 4.5 3.5 8 3.5H16C19.5 3.5 21 5.5 21 8.5Z"
-            stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round">
-        </path>
-        <path d="M8 11H16" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round">
-        </path>
-        <path d="M8 16H12" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round">
-        </path>
-    </g>
-</svg>`,
-        type: 'note'
-    },
-    'tip': {
-        icon: `<svg viewBox="-0.5 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g stroke-linecap="round" stroke-linejoin="round"></g>
-    <g>
-        <path
-            d="M19.0006 9.03002C19.0007 8.10058 18.8158 7.18037 18.4565 6.32317C18.0972 5.46598 17.5709 4.68895 16.9081 4.03734C16.2453 3.38574 15.4594 2.87265 14.5962 2.52801C13.7331 2.18336 12.8099 2.01409 11.8806 2.03002C10.0966 2.08307 8.39798 2.80604 7.12302 4.05504C5.84807 5.30405 5.0903 6.98746 5.00059 8.77001C4.95795 9.9595 5.21931 11.1402 5.75999 12.2006C6.30067 13.2609 7.10281 14.1659 8.09058 14.83C8.36897 15.011 8.59791 15.2584 8.75678 15.5499C8.91565 15.8415 8.99945 16.168 9.00059 16.5V18.03H15.0006V16.5C15.0006 16.1689 15.0829 15.843 15.24 15.5515C15.3971 15.26 15.6241 15.0121 15.9006 14.83C16.8528 14.1911 17.6336 13.328 18.1741 12.3167C18.7147 11.3054 18.9985 10.1767 19.0006 9.03002Z"
-            stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
-        <path d="M15 21.04C14.1345 21.6891 13.0819 22.04 12 22.04C10.9181 22.04 9.86548 21.6891 9 21.04"
-            stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
-        <path
-            d="M11.9901 5.64001L10.3301 8.41998C10.2549 8.54184 10.2138 8.68167 10.2111 8.82483C10.2084 8.96799 10.2441 9.10925 10.3146 9.23389C10.3851 9.35852 10.4877 9.46195 10.6118 9.53339C10.7359 9.60482 10.8769 9.64165 11.0201 9.64001H13.0201C13.1617 9.63947 13.301 9.67657 13.4237 9.7475C13.5463 9.81843 13.6479 9.92063 13.7181 10.0437C13.7883 10.1668 13.8245 10.3063 13.8231 10.4479C13.8217 10.5896 13.7827 10.7283 13.7101 10.85L12.0301 13.64"
-            stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
-    </g>
-</svg>`,
-        type: 'tip'
-    },
-    'important': {
-        icon: `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
-    <g stroke-width="0"></g>
-    <g stroke-linecap="round" stroke-linejoin="round"></g>
-    <g>
-        <path fill="currentColor" d="M9,14a1.5,1.5,0,1,1,1.5068-1.5A1.5035,1.5035,0,0,1,9,14Z"></path>
-        <path fill="currentColor" d="M9,2A7,7,0,1,1,2,9,7.0079,7.0079,0,0,1,9,2M9,0a9,9,0,1,0,9,9A9,9,0,0,0,9,0Z"></path>
-        <path fill="currentColor" d="M10,4H8a1,1,0,0,0-.97,1.2425l1,4a1,1,0,0,0,1.94,0l1-4A1,1,0,0,0,10,4Zm0,2h0Z"></path>
-    </g>
-</svg>`,
-        type: 'important'
-    },
-    'quote': {
-        icon: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g stroke-linecap="round" stroke-linejoin="round"></g>
-    <g>
-        <path
-            d="M14 15V14C14 13.0681 14 12.6022 14.1522 12.2346C14.3552 11.7446 14.7446 11.3552 15.2346 11.1522C15.6022 11 16.0681 11 17 11H17.5C18.9045 11 19.6067 11 20.1111 11.3371C20.3295 11.483 20.517 11.6705 20.6629 11.8889C21 12.3933 21 13.0955 21 14.5V15.3431C21 16.1606 21 16.5694 20.8478 16.9369C20.6955 17.3045 20.4065 17.5935 19.8284 18.1716L19.2396 18.7604C18.7822 19.2178 18 18.8938 18 18.2469V17.8787C18 17.3934 17.6066 17 17.1213 17H16C14.8954 17 14 16.1046 14 15Z"
-            stroke-width="1.5" stroke-linejoin="round"></path>
-        <path
-            d="M3 9V8C3 7.06812 3 6.60218 3.15224 6.23463C3.35523 5.74458 3.74458 5.35523 4.23463 5.15224C4.60218 5 5.06812 5 6 5H6.5C7.90446 5 8.60669 5 9.11114 5.33706C9.32952 5.48298 9.51702 5.67048 9.66294 5.88886C10 6.39331 10 7.09554 10 8.5V9.34315C10 10.1606 10 10.5694 9.84776 10.9369C9.69552 11.3045 9.40649 11.5935 8.82843 12.1716L8.23965 12.7604C7.78219 13.2178 7 12.8938 7 12.2469V11.8787C7 11.3934 6.6066 11 6.12132 11H5C3.89543 11 3 10.1046 3 9Z"
-            stroke-width="1.5" stroke-linejoin="round"></path>
-    </g>
-</svg>`,
-        type: 'quote'
-    },
-    'bonus': {
-        icon: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g stroke-linecap="round" stroke-linejoin="round"></g>
-    <g>
-        <path
-            d="M9.23163 8.61762C7.26389 9.06284 6.28001 9.28545 6.04594 10.0382C5.81186 10.7909 6.4826 11.5753 7.82408 13.1439L8.17113 13.5498C8.55234 13.9955 8.74294 14.2184 8.82869 14.4942C8.91444 14.7699 8.88562 15.0673 8.82799 15.662L8.77552 16.2035C8.5727 18.2965 8.4713 19.343 9.08412 19.8082C9.69694 20.2734 10.6181 19.8492 12.4605 19.0009L12.9372 18.7815C13.4607 18.5404 13.7225 18.4199 14 18.4199C14.2775 18.4199 14.5393 18.5404 15.0628 18.7815L15.5395 19.0009C17.3819 19.8492 18.3031 20.2734 18.9159 19.8082C19.5287 19.343 19.4273 18.2965 19.2245 16.2035M20.1759 13.1439C21.5174 11.5753 22.1881 10.7909 21.9541 10.0382C21.72 9.28545 20.7361 9.06284 18.7684 8.61762L18.2593 8.50244C17.7001 8.37592 17.4205 8.31266 17.196 8.14225C16.9716 7.97183 16.8276 7.71355 16.5396 7.19699L16.2775 6.7267C15.2641 4.9089 14.7575 4 14 4C13.2425 4 12.7359 4.9089 11.7225 6.7267"
-            stroke-width="1.5" stroke-linecap="round"></path>
-        <path d="M2.08887 16C3.20445 15.121 4.68639 14.7971 6.08887 15.1257" stroke-width="1.5"
-            stroke-linecap="round"></path>
-        <path d="M2.08887 10.5C3.08887 10 3.37862 10.0605 4.08887 10" stroke-width="1.5"
-            stroke-linecap="round"></path>
-        <path d="M2 5.60867L2.20816 5.48676C4.41383 4.19506 6.75032 3.84687 8.95304 4.48161L9.16092 4.54152"
-            stroke-width="1.5" stroke-linecap="round"></path>
-    </g>
-</svg>`,
-        type: 'bonus'
-    }
-};
-// Get the styles content
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-// Look for styles.css in the package root (one level up from dist)
-const stylesPath = join(__dirname, 'styles.css');
-const styles = readFileSync(stylesPath, 'utf-8');
-export default function remarkNotes() {
+import { styles } from './lib/styles.js';
+import { createNoteStructure } from './lib/node-structure.js';
+import { isValidNoteType } from './lib/validation.js';
+export default function remarkNotes(options = {}) {
+    // Extract options with defaults
+    const classPrefix = options.classPrefix ?? '';
+    const injectStyles = options.injectStyles ?? true;
+    let hasInjectedStyles = false;
     return (tree) => {
-        let hasInjectedStyles = false;
-        visit(tree, 'root', (node) => {
-            if (!hasInjectedStyles) {
-                // Inject styles at the beginning of the document
-                node.children.unshift({
-                    type: 'html',
-                    value: `<style>${styles}</style>`
+        // Inject styles at the beginning of the document (only once) if enabled
+        // Using proper mdast node instead of HTML string for MDX compatibility
+        if (injectStyles && !hasInjectedStyles) {
+            const root = tree;
+            if (root.children) {
+                // Create a proper mdast node that will be transformed to <style> tag
+                root.children.unshift({
+                    type: 'paragraph',
+                    data: {
+                        hName: 'style',
+                        hProperties: {}
+                    },
+                    children: [{
+                            type: 'text',
+                            value: styles
+                        }]
                 });
                 hasInjectedStyles = true;
             }
-        });
-        visit(tree, 'blockquote', (node) => {
+        }
+        visit(tree, 'blockquote', (node, index, parent) => {
+            // Validate we have parent and index for proper node replacement
+            if (!parent || index === null || index === undefined)
+                return;
             const firstParagraph = node.children[0];
-            if (!firstParagraph)
+            if (!firstParagraph || firstParagraph.type !== 'paragraph')
                 return;
             const firstChild = firstParagraph.children[0];
             if (!firstChild || firstChild.type !== 'text')
                 return;
             const textNode = firstChild;
-            if (!textNode)
-                return;
-            // Updated pattern to match [!type]
+            // Match [!type] pattern
             const match = textNode.value.match(/^\[!(\w+)\]/);
             if (!match)
                 return;
-            const noteType = match[1].toLowerCase(); // Convert to lowercase to match our types
-            if (noteType in noteTypes) {
-                const noteConfig = noteTypes[noteType];
-                // Create a clone of the blockquote children to preserve markdown structure
-                const children = [...node.children];
-                // Process the first paragraph to remove the note marker
-                if (children.length > 0 && children[0].type === 'paragraph') {
-                    const firstPara = children[0];
-                    const firstTextNode = firstPara.children[0];
-                    if (firstTextNode && firstTextNode.type === 'text') {
-                        // Only remove the marker from the text content
-                        firstTextNode.value = firstTextNode.value.replace(/^\[!\w+\]\s*/, '');
-                        // If the text node is now empty and it's the only child, remove it
-                        if (firstTextNode.value === '' && firstPara.children.length === 1) {
-                            children.shift();
-                        }
+            const noteType = match[1].toLowerCase();
+            // Validate note type - skip transformation if invalid (graceful degradation)
+            if (!isValidNoteType(noteType))
+                return;
+            // Clone children to preserve original markdown structure
+            const children = [...node.children];
+            // Process the first paragraph to remove the note marker
+            if (children.length > 0 && children[0].type === 'paragraph') {
+                const firstPara = children[0];
+                const firstTextNode = firstPara.children[0];
+                if (firstTextNode && firstTextNode.type === 'text') {
+                    // Remove the [!type] marker and any trailing whitespace
+                    firstTextNode.value = firstTextNode.value.replace(/^\[!\w+\]\s*/, '');
+                    // If the text node is now empty and it's the only child, remove the paragraph
+                    if (firstTextNode.value === '' && firstPara.children.length === 1) {
+                        children.shift();
                     }
                 }
-                // Convert the modified markdown structure to HTML
-                const contentHast = toHast({
-                    type: 'root',
-                    children: children
-                });
-                // Convert hast to HTML string
-                const contentHtml = contentHast ? toHtml(contentHast) : '';
-                // Create HTML structure using classes
-                const html = {
-                    type: 'html',
-                    value: `
-            <div class="remark-note ${noteConfig.type}">
-              <div class="remark-note-header">
-                <span class="remark-note-icon" data-type="${noteConfig.type}">${noteConfig.icon}</span>
-                <span class="remark-note-title">${noteType}</span>
-              </div>
-              <div class="remark-note-content">
-                ${contentHtml}
-              </div>
-            </div>
-          `
-                };
-                // Replace the blockquote with our HTML
-                Object.assign(node, html);
             }
+            // Create the note structure using proper mdast nodes (with hast-converted SVG icons)
+            const noteContainer = createNoteStructure(noteType, children, classPrefix);
+            // Replace the blockquote with the container
+            parent.children[index] = noteContainer;
         });
     };
 }

package/dist/lib/icons-hast.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Hast (Hypertext Abstract Syntax Tree) representations of note icons
+ *
+ * This module defines SVG icons as proper hast element nodes instead of HTML strings.
+ * These can be converted to mdast using hast-util-to-mdast for proper AST manipulation.
+ *
+ * @module lib/icons-hast
+ */
+import type { Element } from 'hast';
+/**
+ * Valid note types supported by the plugin
+ */
+export declare const VALID_NOTE_TYPES: readonly ["note", "tip", "important", "quote", "bonus"];
+/**
+ * Type for valid note type strings
+ */
+export type ValidNoteType = typeof VALID_NOTE_TYPES[number];
+/**
+ * Note icon - Calendar/document icon
+ */
+export declare const noteIcon: Element;
+/**
+ * Tip icon - Lightbulb icon
+ */
+export declare const tipIcon: Element;
+/**
+ * Important icon - Exclamation circle icon
+ */
+export declare const importantIcon: Element;
+/**
+ * Quote icon - Quote marks icon
+ */
+export declare const quoteIcon: Element;
+/**
+ * Bonus icon - Star/sparkle icon
+ */
+export declare const bonusIcon: Element;
+/**
+ * Map of note types to their hast icon representations
+ */
+export declare const ICON_HAST_MAP: Record<ValidNoteType, Element>;

package/dist/lib/icons-hast.js

@@ -0,0 +1,361 @@
+/**
+ * Hast (Hypertext Abstract Syntax Tree) representations of note icons
+ *
+ * This module defines SVG icons as proper hast element nodes instead of HTML strings.
+ * These can be converted to mdast using hast-util-to-mdast for proper AST manipulation.
+ *
+ * @module lib/icons-hast
+ */
+/**
+ * Valid note types supported by the plugin
+ */
+export const VALID_NOTE_TYPES = ['note', 'tip', 'important', 'quote', 'bonus'];
+/**
+ * Note icon - Calendar/document icon
+ */
+export const noteIcon = {
+    type: 'element',
+    tagName: 'svg',
+    properties: {
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        xmlns: 'http://www.w3.org/2000/svg'
+    },
+    children: [
+        {
+            type: 'element',
+            tagName: 'g',
+            properties: {
+                strokeLinecap: 'round',
+                strokeLinejoin: 'round',
+                strokeWidth: '0.048'
+            },
+            children: []
+        },
+        {
+            type: 'element',
+            tagName: 'g',
+            properties: {},
+            children: [
+                {
+                    type: 'element',
+                    tagName: 'path',
+                    properties: {
+                        d: 'M8 2V5',
+                        strokeWidth: '1.5',
+                        strokeMiterlimit: '10',
+                        strokeLinecap: 'round',
+                        strokeLinejoin: 'round'
+                    },
+                    children: []
+                },
+                {
+                    type: 'element',
+                    tagName: 'path',
+                    properties: {
+                        d: 'M16 2V5',
+                        strokeWidth: '1.5',
+                        strokeMiterlimit: '10',
+                        strokeLinecap: 'round',
+                        strokeLinejoin: 'round'
+                    },
+                    children: []
+                },
+                {
+                    type: 'element',
+                    tagName: 'path',
+                    properties: {
+                        d: 'M21 8.5V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V8.5C3 5.5 4.5 3.5 8 3.5H16C19.5 3.5 21 5.5 21 8.5Z',
+                        strokeWidth: '1.5',
+                        strokeMiterlimit: '10',
+                        strokeLinecap: 'round',
+                        strokeLinejoin: 'round'
+                    },
+                    children: []
+                },
+                {
+                    type: 'element',
+                    tagName: 'path',
+                    properties: {
+                        d: 'M8 11H16',
+                        strokeWidth: '1.5',
+                        strokeMiterlimit: '10',
+                        strokeLinecap: 'round',
+                        strokeLinejoin: 'round'
+                    },
+                    children: []
+                },
+                {
+                    type: 'element',
+                    tagName: 'path',
+                    properties: {
+                        d: 'M8 16H12',
+                        strokeWidth: '1.5',
+                        strokeMiterlimit: '10',
+                        strokeLinecap: 'round',
+                        strokeLinejoin: 'round'
+                    },
+                    children: []
+                }
+            ]
+        }
+    ]
+};
+/**
+ * Tip icon - Lightbulb icon
+ */
+export const tipIcon = {
+    type: 'element',
+    tagName: 'svg',
+    properties: {
+        viewBox: '-0.5 0 25 25',
+        fill: 'none',
+        xmlns: 'http://www.w3.org/2000/svg'
+    },
+    children: [
+        {
+            type: 'element',
+            tagName: 'g',
+            properties: {
+                strokeLinecap: 'round',
+                strokeLinejoin: 'round'
+            },
+            children: []
+        },
+        {
+            type: 'element',
+            tagName: 'g',
+            properties: {},
+            children: [
+                {
+                    type: 'element',
+                    tagName: 'path',
+                    properties: {
+                        d: 'M19.0006 9.03002C19.0007 8.10058 18.8158 7.18037 18.4565 6.32317C18.0972 5.46598 17.5709 4.68895 16.9081 4.03734C16.2453 3.38574 15.4594 2.87265 14.5962 2.52801C13.7331 2.18336 12.8099 2.01409 11.8806 2.03002C10.0966 2.08307 8.39798 2.80604 7.12302 4.05504C5.84807 5.30405 5.0903 6.98746 5.00059 8.77001C4.95795 9.9595 5.21931 11.1402 5.75999 12.2006C6.30067 13.2609 7.10281 14.1659 8.09058 14.83C8.36897 15.011 8.59791 15.2584 8.75678 15.5499C8.91565 15.8415 8.99945 16.168 9.00059 16.5V18.03H15.0006V16.5C15.0006 16.1689 15.0829 15.843 15.24 15.5515C15.3971 15.26 15.6241 15.0121 15.9006 14.83C16.8528 14.1911 17.6336 13.328 18.1741 12.3167C18.7147 11.3054 18.9985 10.1767 19.0006 9.03002Z',
+                        strokeWidth: '1.5',
+                        strokeLinecap: 'round',
+                        strokeLinejoin: 'round'
+                    },
+                    children: []
+                },
+                {
+                    type: 'element',
+                    tagName: 'path',
+                    properties: {
+                        d: 'M15 21.04C14.1345 21.6891 13.0819 22.04 12 22.04C10.9181 22.04 9.86548 21.6891 9 21.04',
+                        strokeWidth: '1.5',
+                        strokeLinecap: 'round',
+                        strokeLinejoin: 'round'
+                    },
+                    children: []
+                },
+                {
+                    type: 'element',
+                    tagName: 'path',
+                    properties: {
+                        d: 'M11.9901 5.64001L10.3301 8.41998C10.2549 8.54184 10.2138 8.68167 10.2111 8.82483C10.2084 8.96799 10.2441 9.10925 10.3146 9.23389C10.3851 9.35852 10.4877 9.46195 10.6118 9.53339C10.7359 9.60482 10.8769 9.64165 11.0201 9.64001H13.0201C13.1617 9.63947 13.301 9.67657 13.4237 9.7475C13.5463 9.81843 13.6479 9.92063 13.7181 10.0437C13.7883 10.1668 13.8245 10.3063 13.8231 10.4479C13.8217 10.5896 13.7827 10.7283 13.7101 10.85L12.0301 13.64',
+                        strokeWidth: '1.5',
+                        strokeLinecap: 'round',
+                        strokeLinejoin: 'round'
+                    },
+                    children: []
+                }
+            ]
+        }
+    ]
+};
+/**
+ * Important icon - Exclamation circle icon
+ */
+export const importantIcon = {
+    type: 'element',
+    tagName: 'svg',
+    properties: {
+        viewBox: '0 0 18 18',
+        xmlns: 'http://www.w3.org/2000/svg',
+        fill: 'currentColor'
+    },
+    children: [
+        {
+            type: 'element',
+            tagName: 'g',
+            properties: {
+                strokeWidth: '0'
+            },
+            children: []
+        },
+        {
+            type: 'element',
+            tagName: 'g',
+            properties: {
+                strokeLinecap: 'round',
+                strokeLinejoin: 'round'
+            },
+            children: []
+        },
+        {
+            type: 'element',
+            tagName: 'g',
+            properties: {},
+            children: [
+                {
+                    type: 'element',
+                    tagName: 'path',
+                    properties: {
+                        fill: 'currentColor',
+                        d: 'M9,14a1.5,1.5,0,1,1,1.5068-1.5A1.5035,1.5035,0,0,1,9,14Z'
+                    },
+                    children: []
+                },
+                {
+                    type: 'element',
+                    tagName: 'path',
+                    properties: {
+                        fill: 'currentColor',
+                        d: 'M9,2A7,7,0,1,1,2,9,7.0079,7.0079,0,0,1,9,2M9,0a9,9,0,1,0,9,9A9,9,0,0,0,9,0Z'
+                    },
+                    children: []
+                },
+                {
+                    type: 'element',
+                    tagName: 'path',
+                    properties: {
+                        fill: 'currentColor',
+                        d: 'M10,4H8a1,1,0,0,0-.97,1.2425l1,4a1,1,0,0,0,1.94,0l1-4A1,1,0,0,0,10,4Zm0,2h0Z'
+                    },
+                    children: []
+                }
+            ]
+        }
+    ]
+};
+/**
+ * Quote icon - Quote marks icon
+ */
+export const quoteIcon = {
+    type: 'element',
+    tagName: 'svg',
+    properties: {
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        xmlns: 'http://www.w3.org/2000/svg'
+    },
+    children: [
+        {
+            type: 'element',
+            tagName: 'g',
+            properties: {
+                strokeLinecap: 'round',
+                strokeLinejoin: 'round'
+            },
+            children: []
+        },
+        {
+            type: 'element',
+            tagName: 'g',
+            properties: {},
+            children: [
+                {
+                    type: 'element',
+                    tagName: 'path',
+                    properties: {
+                        d: 'M14 15V14C14 13.0681 14 12.6022 14.1522 12.2346C14.3552 11.7446 14.7446 11.3552 15.2346 11.1522C15.6022 11 16.0681 11 17 11H17.5C18.9045 11 19.6067 11 20.1111 11.3371C20.3295 11.483 20.517 11.6705 20.6629 11.8889C21 12.3933 21 13.0955 21 14.5V15.3431C21 16.1606 21 16.5694 20.8478 16.9369C20.6955 17.3045 20.4065 17.5935 19.8284 18.1716L19.2396 18.7604C18.7822 19.2178 18 18.8938 18 18.2469V17.8787C18 17.3934 17.6066 17 17.1213 17H16C14.8954 17 14 16.1046 14 15Z',
+                        strokeWidth: '1.5',
+                        strokeLinejoin: 'round'
+                    },
+                    children: []
+                },
+                {
+                    type: 'element',
+                    tagName: 'path',
+                    properties: {
+                        d: 'M3 9V8C3 7.06812 3 6.60218 3.15224 6.23463C3.35523 5.74458 3.74458 5.35523 4.23463 5.15224C4.60218 5 5.06812 5 6 5H6.5C7.90446 5 8.60669 5 9.11114 5.33706C9.32952 5.48298 9.51702 5.67048 9.66294 5.88886C10 6.39331 10 7.09554 10 8.5V9.34315C10 10.1606 10 10.5694 9.84776 10.9369C9.69552 11.3045 9.40649 11.5935 8.82843 12.1716L8.23965 12.7604C7.78219 13.2178 7 12.8938 7 12.2469V11.8787C7 11.3934 6.6066 11 6.12132 11H5C3.89543 11 3 10.1046 3 9Z',
+                        strokeWidth: '1.5',
+                        strokeLinejoin: 'round'
+                    },
+                    children: []
+                }
+            ]
+        }
+    ]
+};
+/**
+ * Bonus icon - Star/sparkle icon
+ */
+export const bonusIcon = {
+    type: 'element',
+    tagName: 'svg',
+    properties: {
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        xmlns: 'http://www.w3.org/2000/svg'
+    },
+    children: [
+        {
+            type: 'element',
+            tagName: 'g',
+            properties: {
+                strokeLinecap: 'round',
+                strokeLinejoin: 'round'
+            },
+            children: []
+        },
+        {
+            type: 'element',
+            tagName: 'g',
+            properties: {},
+            children: [
+                {
+                    type: 'element',
+                    tagName: 'path',
+                    properties: {
+                        d: 'M9.23163 8.61762C7.26389 9.06284 6.28001 9.28545 6.04594 10.0382C5.81186 10.7909 6.4826 11.5753 7.82408 13.1439L8.17113 13.5498C8.55234 13.9955 8.74294 14.2184 8.82869 14.4942C8.91444 14.7699 8.88562 15.0673 8.82799 15.662L8.77552 16.2035C8.5727 18.2965 8.4713 19.343 9.08412 19.8082C9.69694 20.2734 10.6181 19.8492 12.4605 19.0009L12.9372 18.7815C13.4607 18.5404 13.7225 18.4199 14 18.4199C14.2775 18.4199 14.5393 18.5404 15.0628 18.7815L15.5395 19.0009C17.3819 19.8492 18.3031 20.2734 18.9159 19.8082C19.5287 19.343 19.4273 18.2965 19.2245 16.2035M20.1759 13.1439C21.5174 11.5753 22.1881 10.7909 21.9541 10.0382C21.72 9.28545 20.7361 9.06284 18.7684 8.61762L18.2593 8.50244C17.7001 8.37592 17.4205 8.31266 17.196 8.14225C16.9716 7.97183 16.8276 7.71355 16.5396 7.19699L16.2775 6.7267C15.2641 4.9089 14.7575 4 14 4C13.2425 4 12.7359 4.9089 11.7225 6.7267',
+                        strokeWidth: '1.5',
+                        strokeLinecap: 'round'
+                    },
+                    children: []
+                },
+                {
+                    type: 'element',
+                    tagName: 'path',
+                    properties: {
+                        d: 'M2.08887 16C3.20445 15.121 4.68639 14.7971 6.08887 15.1257',
+                        strokeWidth: '1.5',
+                        strokeLinecap: 'round'
+                    },
+                    children: []
+                },
+                {
+                    type: 'element',
+                    tagName: 'path',
+                    properties: {
+                        d: 'M2.08887 10.5C3.08887 10 3.37862 10.0605 4.08887 10',
+                        strokeWidth: '1.5',
+                        strokeLinecap: 'round'
+                    },
+                    children: []
+                },
+                {
+                    type: 'element',
+                    tagName: 'path',
+                    properties: {
+                        d: 'M2 5.60867L2.20816 5.48676C4.41383 4.19506 6.75032 3.84687 8.95304 4.48161L9.16092 4.54152',
+                        strokeLinecap: 'round',
+                        strokeWidth: '1.5'
+                    },
+                    children: []
+                }
+            ]
+        }
+    ]
+};
+/**
+ * Map of note types to their hast icon representations
+ */
+export const ICON_HAST_MAP = {
+    note: noteIcon,
+    tip: tipIcon,
+    important: importantIcon,
+    quote: quoteIcon,
+    bonus: bonusIcon
+};

package/dist/lib/node-structure.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Creates the mdast node structure for a note callout
+ *
+ * This module handles the creation of proper mdast nodes with transformation hints
+ * that tell remark-rehype how to convert them to the appropriate HTML structure.
+ *
+ * @module lib/create-note-structure
+ */
+import type { Node } from 'unist';
+import { ValidNoteType } from './icons-hast.js';
+/**
+ * Creates a properly structured mdast node for a note callout
+ *
+ * The structure uses standard mdast node types (paragraph, text) with data hints
+ * (hName, hProperties) to tell remark-rehype how to transform them into the
+ * desired HTML structure without requiring manual handlers.
+ *
+ * SVG icons are embedded as hast nodes using data.hast property for direct transformation.
+ *
+ * @param noteType - The type of note (note, tip, important, etc.)
+ * @param children - The content nodes (markdown) to include in the note
+ * @param classPrefix - The prefix for all CSS class names (default: 'remark-note')
+ * @returns A mdast node that will be transformed to the note HTML structure
+ */
+export declare function createNoteStructure(noteType: ValidNoteType, children: Node[], classPrefix?: string): any;

package/dist/lib/node-structure.js

@@ -0,0 +1,94 @@
+/**
+ * Creates the mdast node structure for a note callout
+ *
+ * This module handles the creation of proper mdast nodes with transformation hints
+ * that tell remark-rehype how to convert them to the appropriate HTML structure.
+ *
+ * @module lib/create-note-structure
+ */
+import { ICON_HAST_MAP } from './icons-hast.js';
+/**
+ * Creates a properly structured mdast node for a note callout
+ *
+ * The structure uses standard mdast node types (paragraph, text) with data hints
+ * (hName, hProperties) to tell remark-rehype how to transform them into the
+ * desired HTML structure without requiring manual handlers.
+ *
+ * SVG icons are embedded as hast nodes using data.hast property for direct transformation.
+ *
+ * @param noteType - The type of note (note, tip, important, etc.)
+ * @param children - The content nodes (markdown) to include in the note
+ * @param classPrefix - The prefix for all CSS class names (default: 'remark-note')
+ * @returns A mdast node that will be transformed to the note HTML structure
+ */
+export function createNoteStructure(noteType, children, classPrefix = '') {
+    // Build class names: prefix is prepended to standard 'remark-note' names
+    // Default: 'remark-note-icon', With prefix 'my': 'my-remark-note-icon'
+    const baseClass = classPrefix ? `${classPrefix}-remark-note` : 'remark-note';
+    const makeClass = (suffix) => classPrefix ? `${classPrefix}-remark-note-${suffix}` : `remark-note-${suffix}`;
+    // Get the hast representation of the icon
+    const iconHast = ICON_HAST_MAP[noteType];
+    // Create icon span with embedded hast node
+    // Using data.hast tells remark-rehype to use this hast node directly
+    const iconNode = {
+        type: 'paragraph',
+        data: {
+            hName: 'span',
+            hProperties: {
+                className: [makeClass('icon')]
+            },
+            hChildren: [iconHast] // Embed hast node directly
+        },
+    };
+    // Create title span
+    const titleNode = {
+        type: 'paragraph',
+        data: {
+            hName: 'span',
+            hProperties: {
+                className: [makeClass('title')]
+            }
+        },
+        children: [
+            {
+                type: 'text',
+                value: noteType
+            }
+        ]
+    };
+    // Create header div
+    const headerNode = {
+        type: 'paragraph',
+        data: {
+            hName: 'div',
+            hProperties: {
+                className: [makeClass('header')]
+            }
+        },
+        children: [iconNode, titleNode]
+    };
+    // Create content wrapper div
+    const contentNode = {
+        type: 'paragraph',
+        data: {
+            hName: 'div',
+            hProperties: {
+                className: [makeClass('content')]
+            }
+        },
+        children: children
+    };
+    // Build the structure: wrap everything in a blockquote container with data hints
+    // Using blockquote for semantic HTML since the source is a blockquote
+    const noteContainer = {
+        type: 'paragraph', // Use a standard mdast type
+        data: {
+            hName: 'blockquote', // Transform to blockquote for semantic HTML
+            hProperties: {
+                className: [baseClass, makeClass(noteType)]
+            }
+        },
+        children: [headerNode, contentNode]
+    };
+    return noteContainer;
+}

package/dist/lib/styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * CSS styles for remark-notes
+ * Loaded once at module initialization
+ */
+export declare const styles: string;
+export default styles;

package/dist/lib/styles.js

@@ -0,0 +1,13 @@
+/**
+ * CSS styles for remark-notes
+ * Loaded once at module initialization
+ */
+import { readFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+// Read CSS file once at module load time
+const cssPath = join(__dirname, '..', 'styles.css');
+export const styles = readFileSync(cssPath, 'utf-8');
+export default styles;

package/dist/lib/types/options.d.ts

@@ -0,0 +1,93 @@
+/**
+ * Configuration options for the remark-notes plugin
+ *
+ * @module lib/types/options
+ */
+/**
+ * Options for configuring the remark-notes plugin behavior
+ *
+ * @example
+ * ```typescript
+ * import remarkNotes from 'remark-notes-plugin'
+ *
+ * // Using default options
+ * unified().use(remarkNotes)
+ *
+ * // With custom class prefix
+ * unified().use(remarkNotes, { classPrefix: 'my-callout' })
+ *
+ * // Disable automatic style injection
+ * unified().use(remarkNotes, { injectStyles: false })
+ *
+ * // Both options
+ * unified().use(remarkNotes, {
+ *   classPrefix: 'custom-note',
+ *   injectStyles: false
+ * })
+ * ```
+ */
+export interface RemarkNotesOptions {
+    /**
+     * Custom prefix for all generated CSS class names
+     *
+     * This prefix is **prepended** to the standard 'remark-note' class names.
+     *
+     * **Default (no prefix):**
+     * - Container: `remark-note` and `remark-note-{noteType}`
+     * - Elements: `remark-note-header`, `remark-note-icon`, etc.
+     *
+     * **With prefix (e.g., 'my'):**
+     * - Container: `my-remark-note` and `my-remark-note-{noteType}`
+     * - Elements: `my-remark-note-header`, `my-remark-note-icon`, etc.
+     *
+     * @default '' (empty string - no prefix)
+     *
+     * @example
+     * ```typescript
+     * // No prefix (default)
+     * { classPrefix: '' }
+     * // Generates: class="remark-note remark-note-tip"
+     *
+     * // Custom prefix
+     * { classPrefix: 'my' }
+     * // Generates: class="my-remark-note my-remark-note-tip"
+     * ```
+     *
+     * @remarks
+     * The shipped CSS uses attribute selectors (e.g., `[class*="remark-note-icon"]`)
+     * and will work with any prefix automatically.
+     */
+    classPrefix?: string;
+    /**
+     * Controls whether the plugin automatically injects styles into the document
+     *
+     * When `true` (default), the plugin injects a `<style>` tag containing the note styles
+     * directly into the AST. This is convenient for most use cases.
+     *
+     * When `false`, styles are not injected and you must manually import the CSS file:
+     * `import 'remark-notes-plugin/styles.css'`
+     *
+     * Set to `false` when:
+     * - Using Server-Side Rendering (SSR) with separate CSS extraction
+     * - Building with tools that handle CSS imports separately (Vite, Webpack, etc.)
+     * - Providing completely custom styles
+     * - You want more control over style loading order
+     *
+     * @default true
+     *
+     * @example
+     * ```typescript
+     * // Automatic style injection (default)
+     * { injectStyles: true }
+     *
+     * // Manual CSS import
+     * { injectStyles: false }
+     * // Then in your code:
+     * // import 'remark-notes-plugin/styles.css'
+     * ```
+     *
+     * @remarks
+     * The CSS file is available at the package export: `remark-notes-plugin/styles.css`
+     */
+    injectStyles?: boolean;
+}

package/dist/lib/types/options.js

@@ -0,0 +1,6 @@
+/**
+ * Configuration options for the remark-notes plugin
+ *
+ * @module lib/types/options
+ */
+export {};

package/dist/lib/validation.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Validation utilities for note types and error message generation
+ *
+ * @module lib/validation
+ */
+import type { Position } from 'unist';
+import { ValidNoteType } from './icons-hast.js';
+/**
+ * Type guard to check if a string is a valid note type
+ *
+ * @param type - The string to check
+ * @returns True if the type is a valid note type, false otherwise
+ *
+ * @example
+ * ```typescript
+ * if (isValidNoteType(noteType)) {
+ *   // TypeScript now knows noteType is ValidNoteType
+ *   createNoteStructure(noteType, ...)
+ * }
+ * ```
+ */
+export declare function isValidNoteType(type: string): type is ValidNoteType;
+/**
+ * Creates a descriptive error message for invalid note types
+ *
+ * @param invalidType - The invalid note type that was encountered
+ * @param position - Optional position information from the AST node
+ * @returns A formatted error message with context
+ *
+ * @example
+ * ```typescript
+ * const error = createInvalidTypeError('warn', node.position)
+ * // Returns: "Invalid note type 'warn' at line 5, column 3. Valid types are: note, tip, important, quote, bonus"
+ * ```
+ */
+export declare function createInvalidTypeError(invalidType: string, position?: Position): string;
+/**
+ * Validates a note type and throws an error if invalid
+ *
+ * @param type - The note type to validate
+ * @param position - Optional position information for error messages
+ * @throws {Error} If the note type is invalid
+ *
+ * @example
+ * ```typescript
+ * try {
+ *   validateNoteType(noteType, node.position)
+ *   // If we get here, noteType is valid
+ * } catch (error) {
+ *   console.error(error.message)
+ * }
+ * ```
+ */
+export declare function validateNoteType(type: string, position?: Position): asserts type is ValidNoteType;

package/dist/lib/validation.js

@@ -0,0 +1,65 @@
+/**
+ * Validation utilities for note types and error message generation
+ *
+ * @module lib/validation
+ */
+import { VALID_NOTE_TYPES } from './icons-hast.js';
+/**
+ * Type guard to check if a string is a valid note type
+ *
+ * @param type - The string to check
+ * @returns True if the type is a valid note type, false otherwise
+ *
+ * @example
+ * ```typescript
+ * if (isValidNoteType(noteType)) {
+ *   // TypeScript now knows noteType is ValidNoteType
+ *   createNoteStructure(noteType, ...)
+ * }
+ * ```
+ */
+export function isValidNoteType(type) {
+    return VALID_NOTE_TYPES.includes(type);
+}
+/**
+ * Creates a descriptive error message for invalid note types
+ *
+ * @param invalidType - The invalid note type that was encountered
+ * @param position - Optional position information from the AST node
+ * @returns A formatted error message with context
+ *
+ * @example
+ * ```typescript
+ * const error = createInvalidTypeError('warn', node.position)
+ * // Returns: "Invalid note type 'warn' at line 5, column 3. Valid types are: note, tip, important, quote, bonus"
+ * ```
+ */
+export function createInvalidTypeError(invalidType, position) {
+    const validTypes = VALID_NOTE_TYPES.join(', ');
+    const positionInfo = position?.start
+        ? ` at line ${position.start.line}, column ${position.start.column}`
+        : '';
+    return `Invalid note type '${invalidType}'${positionInfo}. Valid types are: ${validTypes}`;
+}
+/**
+ * Validates a note type and throws an error if invalid
+ *
+ * @param type - The note type to validate
+ * @param position - Optional position information for error messages
+ * @throws {Error} If the note type is invalid
+ *
+ * @example
+ * ```typescript
+ * try {
+ *   validateNoteType(noteType, node.position)
+ *   // If we get here, noteType is valid
+ * } catch (error) {
+ *   console.error(error.message)
+ * }
+ * ```
+ */
+export function validateNoteType(type, position) {
+    if (!isValidNoteType(type)) {
+        throw new Error(createInvalidTypeError(type, position));
+    }
+}

package/dist/styles.css

@@ -1 +1 @@
-.remark-note{border:1px solid;border-radius:.5rem;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;margin:1.5rem 0;padding:1.25rem;transition:all .2s ease-in-out}.remark-note-header{align-items:center;display:flex;gap:.75rem;margin-bottom:1rem}.remark-note-icon{align-items:center;border-radius:.5rem;display:flex;font-size:1.25rem;height:1.25rem;justify-content:center;width:1.25rem}.remark-note-icon>svg{height:100%;width:auto;fill:none}.remark-note-title{font-size:.85rem;font-weight:700;letter-spacing:.025em;line-height:.85rem;text-transform:uppercase}.remark-note-content{color:#1f2937;font-size:1rem;line-height:1.625}.remark-note.note{background-color:#318ce710;border-color:#318ce7;box-shadow:0 4px 6px -1px rgba(59,130,246,.1),0 2px 4px -2px rgba(59,130,246,.1)}.remark-note.note .remark-note-icon{stroke:#318ce7}.remark-note.note .remark-note-title{color:#318ce7}.remark-note.important{background-color:#ef9b0f10;border-color:#ef9b0f;box-shadow:0 4px 6px -1px rgba(147,51,234,.1),0 2px 4px -2px rgba(147,51,234,.1)}.remark-note.important .remark-note-icon,.remark-note.important .remark-note-title{color:#ef9b0f}.remark-note.quote{background-color:#8c92ac10;border-color:#8c92ac;box-shadow:0 4px 6px -1px rgba(75,85,99,.1),0 2px 4px -2px rgba(75,85,99,.1)}.remark-note.quote .remark-note-icon{stroke:#8c92ac}.remark-note.quote .remark-note-title{color:#8c92ac}.remark-note.bonus{background-color:#9966cc10;border-color:#96c;box-shadow:0 4px 6px -1px rgba(219,39,119,.1),0 2px 4px -2px rgba(219,39,119,.1)}.remark-note.bonus .remark-note-icon{stroke:#96c}.remark-note.bonus .remark-note-title{color:#96c}.remark-note.tip{background-color:#00b7eb10;border-color:#00b7eb;box-shadow:0 4px 6px -1px rgba(59,130,246,.1),0 2px 4px -2px rgba(59,130,246,.1)}.remark-note.tip .remark-note-icon>svg{stroke:#00b7eb}.remark-note.tip .remark-note-title{color:#00b7eb}
+blockquote[class*=remark-note]{border:1px solid;border-radius:.5rem;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-style:normal;font-weight:400;margin:1.5rem 0;padding:1.25rem;quotes:none;transition:all .2s ease-in-out}[class*=remark-note-header]{align-items:center;display:flex;gap:.75rem;margin-bottom:1rem}[class*=remark-note-icon]{align-items:center;border-radius:.5rem;display:flex;font-size:1.25rem;height:1.25rem;justify-content:center;width:1.25rem}[class*=remark-note-icon]>svg{height:100%;width:auto;fill:none}[class*=remark-note-title]{font-size:.85rem;font-weight:700;letter-spacing:.025em;line-height:.85rem;text-transform:uppercase}[class*=remark-note-content]{color:#1f2937;font-size:1rem;line-height:1.625}blockquote[class*=remark-note-note]{background-color:#318ce710;border-color:#318ce7;box-shadow:0 4px 6px -1px rgba(59,130,246,.1),0 2px 4px -2px rgba(59,130,246,.1)}blockquote[class*=remark-note-note] [class*=remark-note-icon]{stroke:#318ce7}blockquote[class*=remark-note-note] [class*=remark-note-title]{color:#318ce7}blockquote[class*=remark-note-important]{background-color:#ef9b0f10;border-color:#ef9b0f;box-shadow:0 4px 6px -1px rgba(147,51,234,.1),0 2px 4px -2px rgba(147,51,234,.1)}blockquote[class*=remark-note-important] [class*=remark-note-icon],blockquote[class*=remark-note-important] [class*=remark-note-title]{color:#ef9b0f}blockquote[class*=remark-note-quote]{background-color:#8c92ac10;border-color:#8c92ac;box-shadow:0 4px 6px -1px rgba(75,85,99,.1),0 2px 4px -2px rgba(75,85,99,.1)}blockquote[class*=remark-note-quote] [class*=remark-note-icon]{stroke:#8c92ac}blockquote[class*=remark-note-quote] [class*=remark-note-title]{color:#8c92ac}blockquote[class*=remark-note-bonus]{background-color:#9966cc10;border-color:#96c;box-shadow:0 4px 6px -1px rgba(219,39,119,.1),0 2px 4px -2px rgba(219,39,119,.1)}blockquote[class*=remark-note-bonus] [class*=remark-note-icon]{stroke:#96c}blockquote[class*=remark-note-bonus] [class*=remark-note-title]{color:#96c}blockquote[class*=remark-note-tip]{background-color:#7ccf0010;border-color:#7ccf00;box-shadow:0 4px 6px -1px rgba(59,130,246,.1),0 2px 4px -2px rgba(59,130,246,.1)}blockquote[class*=remark-note-tip] [class*=remark-note-icon]>svg{stroke:#7ccf00}blockquote[class*=remark-note-tip] [class*=remark-note-title]{color:#7ccf00}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "remark-notes-plugin",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "A remark plugin that transforms markdown quotes into styled note elements",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/rishichawda/remark-notes-plugin/issues"
   },
-  "homepage": "https://github.com/rishichawda/remark-notes-plugin#readme",
+  "homepage": "https://rishichawda.github.io/remark-notes-plugin/",
   "author": "rishichawda",
   "repository": {
     "url": "https://github.com/rishichawda/remark-notes-plugin.git"
@@ -14,6 +14,15 @@
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
   "files": [
     "dist/",
     "LICENSE",
@@ -26,7 +35,13 @@
     "watch:css": "postcss styles.css -o dist/styles.css --watch",
     "build": "yarn build:ts && yarn build:css",
     "watch": "yarn watch:ts & yarn watch:css",
-    "test": "node --loader ts-node/esm test.ts"
+    "test": "node --loader ts-node/esm __tests__/index.ts",
+    "test:styles": "node --loader ts-node/esm __tests__/styles.ts",
+    "test:custom-prefix": "node --loader ts-node/esm __tests__/custom-prefix.ts",
+    "test:validation": "node --loader ts-node/esm __tests__/validation.ts",
+    "test:edge-cases": "node --loader ts-node/esm __tests__/edge-cases.ts",
+    "test:all": "yarn test && yarn test:styles && yarn test:custom-prefix && yarn test:validation && yarn test:edge-cases",
+    "generate:fixtures": "node --loader ts-node/esm __tests__/generate-fixtures.ts"
   },
   "keywords": [
     "remark",
@@ -36,11 +51,10 @@
     "astro"
   ],
   "dependencies": {
-    "hast-util-to-html": "^9.0.5",
+    "hast": "^1.0.0",
     "mdast": "^3.0.0",
-    "mdast-util-to-hast": "^13.2.0",
-    "remark": "^15.0.1",
     "unified": "^11.0.4",
+    "unist": "^0.0.1",
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
@@ -49,6 +63,11 @@
     "cssnano": "^7.0.6",
     "postcss": "^8.5.3",
     "postcss-cli": "^11.0.1",
+    "rehype-parse": "^9.0.1",
+    "rehype-raw": "^7.0.0",
+    "rehype-stringify": "^10.0.1",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.2",
     "ts-node": "^10.9.2",
     "typescript": "^5.3.3"
   }

package/dist/test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/test.js

@@ -1,57 +0,0 @@
-import { unified } from 'unified';
-import remarkParse from 'remark-parse';
-import remarkStringify from 'remark-stringify';
-import remarkNotes from './index.js';
-const markdown = `
-# Test Document
-
-> [!Note]
-> This is a note about something important.
-
-> [!tip]
-> Here's a helpful tip for you.
-
-> [!important]
-> This is a very important message!
-
-> [!quote]
-> Here's a memorable quote.
-
-> [!bonus]
-> Here's some extra content for you!
-`;
-async function main() {
-    try {
-        // Convert to HTML
-        const file = await unified()
-            .use(remarkParse)
-            .use(remarkNotes)
-            .use(remarkStringify)
-            .process(markdown);
-        const output = String(file);
-        console.log('Final output:', output);
-        // Basic validation
-        if (!output.includes('<style>')) {
-            throw new Error('Styles were not injected');
-        }
-        if (!output.includes('remark-note')) {
-            throw new Error('Note classes were not properly added');
-        }
-        // Test for content
-        if (!output.includes('This is a note about something important')) {
-            throw new Error('Note content is missing');
-        }
-        // Test for each note type
-        ['note', 'tip', 'important', 'quote', 'bonus'].forEach(type => {
-            if (!output.includes(`remark-note ${type}`)) {
-                throw new Error(`${type} note was not properly transformed`);
-            }
-        });
-        console.log('✅ Test passed: Styles were injected and notes were transformed with content');
-    }
-    catch (error) {
-        console.error('❌ Test failed:', error);
-        process.exit(1);
-    }
-}
-main().catch(console.error);