Merge pull request #3 from rishichawda/improvements

major improvements:

- a lot of refactoring: there was a lot of html templating going on. but I found out that I need to properly implement markdown AST nodes.
- added a bunch of tests using fixtures.
- added proper configuration options to have more control over styles

Author: rishichawda

.github/workflows/test.yml

@@ -0,0 +1,74 @@
+name: Test
+
+on:
+  pull_request:
+    branches: [main]
+    paths:
+      - 'lib/**'
+      - 'index.ts'
+      - 'styles.css'
+      - 'package.json'
+      - '__tests__/**'
+      - 'tsconfig.json'
+      - '.github/workflows/test.yml'
+  push:
+    branches: [main]
+    paths:
+      - 'lib/**'
+      - 'index.ts'
+      - 'styles.css'
+      - 'package.json'
+      - '__tests__/**'
+      - 'tsconfig.json'
+      - '.github/workflows/test.yml'
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18, 20, 22]
+    
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build package
+        run: yarn build
+
+      - name: Run all tests
+        run: yarn test:all
+
+      - name: Check for TypeScript errors
+        run: yarn build:ts
+
+  lint:
+    runs-on: ubuntu-latest
+    
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build package
+        run: yarn build
+
+      - name: Check TypeScript types
+        run: yarn build:ts --noEmit

.gitignore

@@ -1,2 +1,3 @@
 dist
-node_modules
+node_modules
+.DS_Store

README.md

@@ -2,7 +2,7 @@
 
 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!
 
-![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/rishichawda/remark-notes-plugin/release.yml)
+![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)
 ![Website](https://img.shields.io/website?url=https%3A%2F%2Frishichawda.github.io%2Fremark-notes-plugin)

__tests__/README.md

@@ -0,0 +1,80 @@
+# Tests
+
+## Test Structure
+
+### Test Files
+
+- **`index.ts`**: Fixture-based tests for plugin transformation
+  - Tests each note type (note, tip, important, quote, bonus)
+  - Compares actual output against known-good expected output
+  - Uses `rehype-parse` to parse HTML into HAST for structural comparison
+  - Strips position data for stable comparisons
+
+- **`styles.ts`**: Tests for automatic style injection
+  - Verifies styles are automatically injected
+  - Ensures styles are injected only once per document
+  - Validates CSS content is not empty
+
+- **`generate-fixtures.ts`**: Utility script to regenerate expected outputs
+  - Run when you make intentional changes to plugin output. MUST be done with caution.
+  - Updates all fixture outputs to match current implementation
+
+### Fixtures Directory (`__fixtures__/`)
+
+Each note type has its own directory containing:
+
+- `input.md`: Sample markdown input for that note type
+- `output.html`: Expected HTML output (auto-generated)
+
+Structure:
+
+```
+__fixtures__/
+├── note/
+│   ├── input.md
+│   └── output.html
+├── tip/
+│   ├── input.md
+│   └── output.html
+├── important/
+│   ├── input.md
+│   └── output.html
+├── quote/
+│   ├── input.md
+│   └── output.html
+└── bonus/
+    ├── input.md
+    └── output.html
+```
+
+## Running Tests
+
+```bash
+# Run all tests
+yarn test
+
+# Run fixture tests only
+yarn test:fixtures
+
+# Run style injection tests only
+yarn test:styles
+
+# Regenerate expected outputs after changes
+yarn generate:fixtures
+```
+
+## Testing Approach
+
+1. **Fixture-based testing**: Instead of inline test data, we use separate files for inputs and expected outputs
+2. **Structural comparison**: Uses `rehype-parse` to parse HTML into HAST (Hypertext Abstract Syntax Tree) for comparison
+3. **Position-agnostic**: Strips position data from HAST to avoid tests that break on whitespace changes
+4. **Separation of concerns**: Plugin transformation tests are separate from style injection tests
+
+## Adding New Test Cases
+
+To add a new test case:
+
+1. Create a new directory in `__fixtures__/` (e.g., `__fixtures__/new-type/`)
+2. Add `input.md` with your test markdown
+3. Run `yarn generate:fixtures` to auto-generate the expected `output.html`
+4. Add the new type to the `FIXTURE_TYPES` array in `index.ts`

__tests__/__fixtures__/bonus/input.md

@@ -0,0 +1,3 @@
+> [!bonus]
+> This is a bonus block.
+> Extra info for advanced users.

__tests__/__fixtures__/bonus/output.html

@@ -0,0 +1,2 @@
+<blockquote class="remark-note remark-note-bonus"><div class="remark-note-header"><span class="remark-note-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-linecap="round" stroke-width="1.5"></path></g></svg></span><span class="remark-note-title">bonus</span></div><div class="remark-note-content"><p>This is a bonus block.
+Extra info for advanced users.</p></div></blockquote>

__tests__/__fixtures__/important/input.md

@@ -0,0 +1,3 @@
+> [!important]
+> This is an important block.
+> Pay attention to this!

__tests__/__fixtures__/important/output.html

@@ -0,0 +1,2 @@
+<blockquote class="remark-note remark-note-important"><div class="remark-note-header"><span class="remark-note-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></span><span class="remark-note-title">important</span></div><div class="remark-note-content"><p>This is an important block.
+Pay attention to this!</p></div></blockquote>

__tests__/__fixtures__/note/input.md

@@ -0,0 +1,3 @@
+> [!note]
+> This is a note block.
+> It supports **bold** and *italic* text.

__tests__/__fixtures__/note/output.html

@@ -0,0 +1,2 @@
+<blockquote class="remark-note remark-note-note"><div class="remark-note-header"><span class="remark-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></span><span class="remark-note-title">note</span></div><div class="remark-note-content"><p>This is a note block.
+It supports <strong>bold</strong> and <em>italic</em> text.</p></div></blockquote>