vite-plugin-qingkuai 1.0.0

package/.prettierrc

@@ -0,0 +1,7 @@
+{
+    "tabWidth": 4,
+    "semi": false,
+    "printWidth": 120,
+    "arrowParens": "avoid",
+    "trailingComma": "none"
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+    "name": "vite-plugin-qingkuai",
+    "author": "mlgq",
+    "license": "MIT",
+    "version": "1.0.0",
+    "type": "module",
+    "keywords": [
+        "vite",
+        "qingkuai",
+        "vite plugin",
+        "vite-plugin"
+    ],
+    "exports": {
+        ".": {
+            "import": "./dist/index.js",
+            "require": "./dist/index.cjs"
+        }
+    },
+    "scripts": {
+        "dev": "rollup -c -w",
+        "build": "rimraf dist && rollup -c"
+    },
+    "devDependencies": {
+        "@types/fs-extra": "^11.0.4",
+        "@types/node": "^22.13.14",
+        "fs-extra": "^11.3.0",
+        "qingkuai": "^1.0.24",
+        "rimraf": "^6.0.1",
+        "rollup": "^4.38.0",
+        "rollup-plugin-esbuild": "^6.2.1",
+        "vite": "^6.2.4"
+    },
+    "peerDependencies": {
+        "qingkuai": "^1.0.24",
+        "vite": "^6.2.4"
+    },
+    "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "postcss": "^8.5.3",
+        "postcss-selector-parser": "^7.1.0",
+        "source-map-js": "^1.2.1"
+    }
+}

package/rollup.config.js

@@ -0,0 +1,41 @@
+import * as rollup from "rollup"
+import esbuild from "rollup-plugin-esbuild"
+
+export default rollup.defineConfig(() => {
+    const inputOptions = {
+        external: [
+            "vite",
+            "postcss",
+            "node:path",
+            "merge-source-map",
+            "qingkuai/compiler",
+            "@ampproject/remapping",
+            "postcss-selector-parser",
+            "@jridgewell/sourcemap-codec"
+        ],
+        input: {
+            index: "./src/index.ts"
+        },
+        output: {
+            dir: "dist",
+            format: "es",
+            sourcemap: true
+        },
+        plugins: [
+            esbuild({
+                target: "esNext"
+            })
+        ]
+    }
+
+    return [
+        inputOptions,
+        Object.assign({}, inputOptions, {
+            output: {
+                dir: "dist",
+                format: "cjs",
+                entryFileNames: "[name].cjs"
+            }
+        })
+    ]
+})

package/src/create-sourcemap-files.ts

@@ -0,0 +1,24 @@
+import type { SourceMap } from "./types"
+
+import fs from "fs-extra"
+import path from "node:path"
+
+export function generateSourceMapFiles(generate: string, map: SourceMap) {
+    const sourcemapPath = path.resolve(__dirname, "../sourcemap-test")
+    const gpath = path.resolve(sourcemapPath, "./g.css")
+    const mpath = path.resolve(sourcemapPath, "./s.css.map")
+    fs.removeSync(gpath)
+    fs.removeSync(mpath)
+    fs.writeFileSync(gpath, generate, "utf-8")
+    fs.writeFileSync(
+        mpath,
+        JSON.stringify({
+            version: 3,
+            names: map.names,
+            sources: map.sources,
+            mappings: map.mappings,
+            sourcesContent: map.sourcesContent
+        }),
+        "utf-8"
+    )
+}

package/src/index.ts

@@ -0,0 +1,256 @@
+import type { CompileResult } from "qingkuai/compiler"
+import type { QingkuaiConfiguration, SourceMap } from "./types"
+import type { Plugin, ResolvedConfig, ViteDevServer } from "vite"
+
+import { findFilesByName } from "./util"
+import { randomBytes } from "node:crypto"
+import { offsetSourceMap } from "./sourcemap"
+import { compile, util } from "qingkuai/compiler"
+import { existsSync, readFileSync } from "node:fs"
+import { encode } from "@jridgewell/sourcemap-codec"
+import { basename, dirname, extname } from "node:path"
+import { attachScopeForStyleSelectors } from "./scope"
+import { transformWithEsbuild, preprocessCSS } from "vite"
+
+export default function qingkuaiPlugin(): Plugin {
+    let isDev: boolean
+    let sourcemap: boolean
+    let cssSourcemap: boolean
+    let viteConfig: ResolvedConfig
+
+    const parseFailedConfigFiles: string[] = []
+    const compileResultCache = new Map<string, CompileResult>()
+    const qingkuaiConfigurations = new Map<string, QingkuaiConfiguration>()
+    const styleIdRE = /^virtual:\[\d+\].*?\.qk.(?:css|s[ac]ss|less|stylus|postcss)\?\d{13}$/
+
+    return {
+        name: "qingkuai-compiler",
+
+        config(_, env) {
+            isDev = env.command === "serve"
+        },
+
+        configureServer(server) {
+            createQingkuaiConfigurationWatcher(server)
+        },
+
+        configResolved(config) {
+            viteConfig = config
+            if (isDev) {
+                sourcemap = true
+                cssSourcemap = !!config.css.devSourcemap
+            } else {
+                cssSourcemap = true
+                sourcemap = config.build.sourcemap !== false
+            }
+            loadAllQingkuaiConfigurations(config.root)
+        },
+
+        resolveId(id, importer) {
+            if (styleIdRE.test(id)) {
+                return id
+            }
+            if (importer?.endsWith(".qk") && !extname(id)) {
+                const qingkuaiConfig = getQingkuaiConfiguration(id)
+                return id + (qingkuaiConfig.resolveImportExtension ? ".qk" : "")
+            }
+        },
+
+        async load(id) {
+            if (styleIdRE.test(id)) {
+                const { fileId, index } = parseStyleId(id)
+                if (index === -1) {
+                    return ""
+                }
+
+                let virtualFileName: string
+                const compileRes = compileResultCache.get(fileId)!
+                const style = compileRes.inputDescriptor.style[index]
+
+                // create a relative and not existing file name
+                while (true) {
+                    const hash = randomBytes(6).toString("hex")
+                    virtualFileName = `${fileId}.${hash}.${style.lang}`
+                    if (!existsSync(virtualFileName)) {
+                        break
+                    }
+                }
+
+                const preprocessRes = await preprocessCSS(style.code, virtualFileName, viteConfig)
+                if (!cssSourcemap) {
+                    return preprocessRes.code
+                }
+
+                const assertedPreprocessMap = preprocessRes.map as SourceMap
+                const attachScopeResult = await attachScopeForStyleSelectors(
+                    preprocessRes.code,
+                    compileRes.hashId,
+                    assertedPreprocessMap,
+                    virtualFileName
+                )
+                const offsetMappings = encode(
+                    offsetSourceMap(
+                        attachScopeResult.mappings,
+                        preprocessRes.deps?.size || 0,
+                        style.loc.start.line - 1,
+                        style.loc.start.column - 1
+                    )
+                )
+                return {
+                    code: attachScopeResult.code,
+                    map: {
+                        version: 3,
+                        mappings: offsetMappings,
+                        names: assertedPreprocessMap.names,
+                        sources: [...assertedPreprocessMap.sources.slice(0, -1), fileId]
+                    }
+                }
+            }
+        },
+
+        async transform(src, id) {
+            if (!id.endsWith(".qk")) {
+                return
+            }
+
+            const qingkuaiConfig = getQingkuaiConfiguration(id)
+            const compileRes = compile(src, {
+                sourcemap,
+                debug: isDev,
+                hashId: compileResultCache.get(id)?.hashId || undefined,
+                reserveTemplateComment: getReserveHtmlComments(qingkuaiConfig),
+                componentName: util.kebab2Camel(basename(id, extname(id)), true)
+            })
+            compileRes.messages.forEach(({ type, value: warning }) => {
+                if (type === "warning") {
+                    this.warn(warning.message)
+                }
+            })
+            compileResultCache.set(id, compileRes)
+
+            const compiledCodeArr = [compileRes.code]
+            compileRes.inputDescriptor.style.forEach((_, index) => {
+                compiledCodeArr.push(`import "virtual:[${index}]${id}.css?${Date.now()}"`)
+            })
+
+            const baseMap: any = {
+                version: 3,
+                sources: [id],
+                sourcesContent: [src]
+            }
+            const compiledCode = compiledCodeArr.join("\n")
+            if (!compileRes.inputDescriptor.script.isTS) {
+                if (!sourcemap) {
+                    return compiledCode
+                }
+                return {
+                    code: compiledCode,
+                    map: Object.assign(baseMap, {
+                        mappings: compileRes.mappings
+                    })
+                }
+            }
+
+            const esBuildCompileRes = await transformWithEsbuild(
+                compiledCode,
+                id,
+                {
+                    sourcemap,
+                    loader: "ts",
+                    target: "esnext"
+                },
+                sourcemap
+                    ? {
+                          version: 3,
+                          sources: [id],
+                          sourcesContent: [src],
+                          mappings: compileRes.mappings
+                      }
+                    : undefined
+            )
+
+            if (!sourcemap) {
+                return esBuildCompileRes.code
+            }
+            return {
+                code: esBuildCompileRes.code,
+                map: Object.assign(baseMap, {
+                    mappings: esBuildCompileRes.map.mappings
+                })
+            }
+        }
+    }
+
+    function getQingkuaiConfiguration(id: string) {
+        let config: QingkuaiConfiguration = {
+            insertTipComments: true,
+            exposeDestruction: isDev,
+            exposeDependencies: isDev,
+            resolveImportExtension: true,
+            reserveHtmlComments: "development"
+        }
+        while (true) {
+            const dir = dirname(id)
+            if (dir === id) {
+                break
+            }
+
+            const got = qingkuaiConfigurations.get((id = dir))
+            if (got) {
+                config = got
+                break
+            }
+        }
+        return config
+    }
+
+    function getReserveHtmlComments(config: QingkuaiConfiguration) {
+        switch (config.reserveHtmlComments) {
+            case "all":
+                return true
+            case "never":
+                return false
+            case "production":
+                return !isDev
+            default:
+                return isDev
+        }
+    }
+
+    function createQingkuaiConfigurationWatcher(server: ViteDevServer) {
+        const watcher = server.watcher.add([".qingkuairc", "!**/node_modules/**"])
+        watcher.on("unlink", path => qingkuaiConfigurations.delete(dirname(path)))
+        watcher.on("change", recordQingkuaiConfiguration)
+        watcher.on("add", recordQingkuaiConfiguration)
+    }
+
+    function loadAllQingkuaiConfigurations(workspaceDir: string) {
+        findFilesByName(workspaceDir, ".qingkuairc", new Set(["node_modules"])).forEach(fileName => {
+            recordQingkuaiConfiguration(fileName)
+        })
+    }
+
+    function recordQingkuaiConfiguration(fileName: string) {
+        try {
+            qingkuaiConfigurations.set(dirname(fileName), JSON.parse(readFileSync(fileName, "utf-8")))
+        } catch {
+            parseFailedConfigFiles.push(fileName)
+        }
+    }
+}
+
+function parseStyleId(id: string) {
+    const m1 = /^virtual:\[(\d+)\]/.exec(id)!
+    const m2 = /\.[a-z]+\?\d{13}$/.exec(id)!
+    if (!m1 || !m2) {
+        return {
+            index: -1,
+            fileId: ""
+        }
+    }
+
+    return {
+        index: parseInt(m1[1]),
+        fileId: id.slice(m1.index + m1[0].length, m2.index)
+    }
+}

package/src/scope.ts

@@ -0,0 +1,46 @@
+import type { SourceMap } from "./types"
+
+import postcss from "postcss"
+import { getSourceFile } from "./sourcemap"
+import selectorParser from "postcss-selector-parser"
+
+export async function attachScopeForStyleSelectors(code: string, hash: string, map: SourceMap, sourceFile: string) {
+    const processor = postcss([
+        {
+            postcssPlugin: "postcss-attach-scope-qingkuai",
+            Rule(rule) {
+                const { line, column } = rule.source!.start!
+                if (getSourceFile(map, line, column) !== sourceFile) {
+                    return
+                }
+
+                rule.selector = selectorParser(selectors => {
+                    selectors.each(selector => {
+                        const index = selector.nodes.findLastIndex(({ type }) => {
+                            return type === "class" || type === "tag" || type === "id" || type === "universal"
+                        })
+                        if (index !== -1) {
+                            const lastNode = selector.nodes[index]!
+                            lastNode.parent?.insertAfter(
+                                lastNode,
+                                selectorParser.attribute({
+                                    attribute: `qk-${hash}`,
+                                    value: undefined,
+                                    raws: {}
+                                })
+                            )
+                        }
+                    })
+                }).processSync(rule.selector)
+            }
+        }
+    ])
+
+    const ret = await processor.process(code, {
+        map: {
+            prev: map,
+            annotation: false
+        }
+    })
+    return { code: ret.css, mappings: ret.map.toJSON().mappings }
+}

package/src/sourcemap.ts

@@ -0,0 +1,38 @@
+import type { SourceMap } from "./types"
+import type { SourceMapMappings } from "@jridgewell/sourcemap-codec"
+
+import { SourceMapConsumer } from "source-map-js"
+import { decode } from "@jridgewell/sourcemap-codec"
+
+export function offsetSourceMap(
+    mappings: string,
+    sourceIndex: number,
+    preLine: number,
+    preColumn: number
+): SourceMapMappings {
+    return decode(mappings).map(line => {
+        return line.map(segment => {
+            if (segment.length === 1 || segment[1] !== sourceIndex) {
+                return segment
+            }
+            if (segment[2] === preLine) {
+                segment[3] += preColumn
+            } else {
+                segment[2] += preLine
+            }
+            return segment
+        })
+    })
+}
+
+export function getSourceFile(sourcemap: SourceMap, line: number, column: number) {
+    const consumer = new SourceMapConsumer({
+        ...sourcemap,
+        version: sourcemap.version.toString()
+    })
+
+    return consumer.originalPositionFor({
+        line: line,
+        column: column
+    }).source
+}

package/src/types.ts

@@ -0,0 +1,19 @@
+export interface SourceMap {
+    version: number
+    file?: string
+    names: string[]
+    mappings: string
+    sources: string[]
+    sourceRoot?: string
+    sourcesContent?: string[]
+    x_google_ignoreList?: number[]
+}
+
+export type QingkuaiConfiguration = Partial<{
+    exposeDestruction: boolean
+    exposeDependencies: boolean
+    insertTipComments: boolean
+    resolveImportExtension: boolean
+    convenientDerivedDeclaration: boolean
+    reserveHtmlComments: "all" | "never" | "development" | "production"
+}>

package/src/util.ts

@@ -0,0 +1,21 @@
+import { join } from "node:path"
+import { readdirSync } from "node:fs"
+
+export function findFilesByName(dir: string, targetFileName: string, ignoreList: Set<string>) {
+    const result: string[] = []
+    const entries = readdirSync(dir, { withFileTypes: true })
+
+    for (const entry of entries) {
+        if (ignoreList.has(entry.name)) {
+            continue
+        }
+
+        const fullPath = join(dir, entry.name)
+        if (entry.name === targetFileName) {
+            result.push(fullPath)
+        } else if (entry.isDirectory()) {
+            result.push(...findFilesByName(fullPath, targetFileName, ignoreList))
+        }
+    }
+    return result
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+        "strict": true,
+        "noEmit": true,
+        "target": "ESNext",
+        "skipLibCheck": true,
+        "moduleResolution": "bundler"
+    }
+}