Custom Vite Plugin Transforming Markdown into Vue Components not applying CSS

[dotnetcadet]

I wrote a small plugin for Vite.js to transform markdown files into Vue.js components. For whatever reason, the styling is not being applied after transformation. Everything is statically assigned, but not sure what is going on. I've also compared some of the code within @vitejs/plugin-vue and how it applies transformation on serve and build.

Is there something I need to account for that's not in the code below

// src/index.ts

import { Plugin } from "vite"
import vue, { Options as markdownVueOptions } from "@vitejs/plugin-vue"
import { compileTemplate } from "@vue/compiler-sfc"
import { markdownOptions } from "./types"
import MarkdownIt, { } from "markdown-it"
import Token from "markdown-it/lib/token"
import { SourceMapInput } from "rollup"
import { SFCTemplateCompileResults } from '@vue/compiler-sfc'

const normalizeSourceMap = (map: SFCTemplateCompileResults['map']): SourceMapInput => {
    if (!map) return null as any
    return {
        ...map,
        version: Number(map.version),
        mappings: typeof map.mappings === 'string' ? map.mappings : '',
    }
}

export type ProcessToken = (token: Token) => void
export type MarkdownTokenProcessor = {
    push: (condition: (token: Token) => boolean, process: ProcessToken) => MarkdownTokenProcessor
    run: (token: Token) => void
}
const processor = () => {
    let processes: { condition: (token: Token) => boolean, process: ProcessToken }[] = []
    let mtp: MarkdownTokenProcessor
    const push = (condition: (token: Token) => boolean, process: ProcessToken): MarkdownTokenProcessor => {
        processes.push({ condition, process })
        return mtp
    }
    const run = (token: Token): void => {
        for (let i = 0; i < processes.length; i++) {
            let process = processes[i]
            if (process.condition(token)) {
                process.process(token)
                break
            }
        }
    }
    mtp = {
        push,
        run
    }
    return mtp
}
const markdown = (options?: markdownOptions): Plugin => {
    const handle = processor()
        .push(
            token => token.type === 'heading_open' && token.tag === 'h1',
            token => token.attrSet('class', options?.header1 ?? '')
        )
        .push(
            token => token.type === 'heading_open' && token.tag === 'h2',
            token => token.attrSet('class', 'webui-markdown-h2')
        )
        .push(
            token => token.type === 'heading_open' && token.tag === 'h3',
            token => token.attrSet('class', 'webui-markdown-h3')
        )

    const markdownIt = new MarkdownIt()
        .use((markdown) => {
            markdown.core.ruler.push('styling', (state) => {
                state.tokens.forEach((token) => {
                    handle.run(token)
                })
            })
        })

    const extension: RegExp = /\.(md)$/
    return {
        name: 'Markdown',
        enforce: 'pre',
        transform(code, file, options) {
            // id = the file path being processed
            if (!extension.test(file)) return
            let content = markdownIt.render(code)
            let result = compileTemplate({
                id: file,
                source: `<div>${content}</div>`,
                filename: file,
                transformAssetUrls: false
            })
            return {
                code:  '<script>' + result.code + '\nexport default { render: render } \n</script>',
                map: normalizeSourceMap(result.map)
            }
        },
        async handleHotUpdate({ file, read, server, modules, timestamp }) {
            if (!extension.test(file)) return
            server.ws.send({
                type: 'full-reload',
                path: '*'
            })
        }
    }
}
const markdownVue = (options?: markdownVueOptions): Plugin => {
    const spreadInclude = (value: string | RegExp | (string | RegExp)[] | undefined): (string | RegExp)[] => {
        if (!value) return []
        if (typeof value === "string") return [value]
        if (Array.isArray(value)) return value
        return [value]
    }
    let ops = options ?? {}
    ops = {
        include: [
            ...spreadInclude(ops.include),
            /\.vue$/,
            /\.md$/
        ]
    }
    return vue(ops)
}
export {
    markdown,
    markdownVue
}

// package.json
{
    "main": "./dist/index.cjs",
    "module": "./dist/index.mjs",
    "types": "./dist/index.d.ts",
    "exports": {
        ".": {
            "import": "./dist/index.mjs",
            "require": "./dist/index.cjs"
        }
    },
    "files": [
        "dist",
        "README.md"
    ],
    "scripts": {
        "build": "unbuild"
    },
    "peerDependencies": {
        "vite": "^4",
        "vue": "^3",
        "vue-router": "^4"
    },
    "devDependencies": {
        "@types/markdown-it": "^13.0.0",
        "@types/node": "^20.5.7",
        "rollup": "^3.28.1",
        "typescript": "^5.1.6",
        "unbuild": "^2.0.0",
        "vue": "^3.3.4",
        "vue-router": "^4.2.4"
    },
    "dependencies": {
        "@vitejs/plugin-vue": "^4.3.4",
        "@vue/compiler-sfc": "^3.3.4",
        "markdown-it": "^13.0.1"
    }
}

[wongjn]

How does your question relate to Tailwind please?

[dotnetcadet]

@wongjn sorry, I'm an idiot 🤦. I meant to post this on Vitejs.