From 4a51b54095012beda1135a6ce8d1266d080c035d Mon Sep 17 00:00:00 2001 From: Julien Oculi Date: Mon, 5 Feb 2024 17:04:54 +0100 Subject: [PATCH] ci: add recursivity to bundle css plugin --- plugins/css_bundler/src/builder.ts | 88 ++++++++++++++++++++---------- 1 file changed, 60 insertions(+), 28 deletions(-) diff --git a/plugins/css_bundler/src/builder.ts b/plugins/css_bundler/src/builder.ts index 9e09875..b7150d2 100644 --- a/plugins/css_bundler/src/builder.ts +++ b/plugins/css_bundler/src/builder.ts @@ -1,12 +1,13 @@ import { join, parse, resolve, toFileUrl } from '$std/path/mod.ts' import { bundleAsync } from 'lightningcss' -import { cssImports, hashFile, Logger } from './helpers.ts' +import { cssImports, Logger, uInt8ArrayConcat } from './helpers.ts' export async function builder( - { filename, dev, assetDir }: { + { filename, dev, assetDir, remote }: { filename: string dev: boolean assetDir: string + remote?: string }, ) { const { code, map } = await bundleAsync({ @@ -14,43 +15,74 @@ export async function builder( minify: true, sourceMap: dev, resolver: { - read(path) { - return Deno.readTextFile(path) + async read(pathOrUrl) { + if (pathOrUrl.startsWith('https%3A%2F%2F')) { + pathOrUrl = decodeURIComponent(pathOrUrl) + } + if (pathOrUrl.startsWith('https://')) { + //use cache for remote + if (cssImports.has(pathOrUrl)) { + Logger.info('using cache for', `${pathOrUrl}`) + const filepath = cssImports.get(pathOrUrl)! + return Deno.readTextFile(filepath) + } + + //update cache for new remote + Logger.info('fetching and caching', `${pathOrUrl}`) + const response = await fetch(pathOrUrl) + const file = await response.arrayBuffer() + const filename = encodeURIComponent(pathOrUrl.toString()) + + const filepath = join(assetDir, `${filename}.css`) + await Deno.writeFile(filepath, new Uint8Array(file)) + + setTimeout(() => {}, 3_000) + const { code, map } = await builder({ + filename: filepath, + dev, + assetDir, + remote: pathOrUrl, + }) + + if (map) { + const sourceMappingURL = new TextEncoder().encode( + `\n/*# sourceMappingURL=${filepath}.map.css */`, + ) + await Deno.writeFile( + filepath, + uInt8ArrayConcat(code, sourceMappingURL), + ) + await Deno.writeFile(`${filepath}.map.css`, map) + } else { + await Deno.writeFile(filepath, code) + } + + cssImports.set(pathOrUrl, filepath) + + return new TextDecoder().decode(file) + } + return Deno.readTextFile(pathOrUrl) }, - async resolve(specifier, from) { + resolve(specifier, from) { + if (remote) { + const url = new URL(specifier, remote) + Logger.info('resolve remote imports', url.toString()) + + return url.toString() + } + //resolve local files normally if (!specifier.startsWith('https://') && !from.startsWith('https://')) { Logger.info('resolve local file', specifier) return resolve(parse(from).dir, specifier) } - //use cache for remote - if (cssImports.has(`${from}/${specifier}`)) { - Logger.info('using cache for', `${from}/${specifier}`) - return cssImports.get(`${from}/${specifier}`) - } - - //update cache for new remote - Logger.info('fetching and caching', `${from}/${specifier}`) //construct asset url const baseUrl = from.startsWith('https://') ? from : toFileUrl(from) const url = new URL(specifier, baseUrl) + Logger.info('resolve remote file', url.toString()) - //fetch asset - const response = await fetch(url) - const file = await response.arrayBuffer() - const filename = await hashFile(file) - - //!TODO recursive bundle to cache all remote imports - // bundleAsync({ minify: true, sourceMap: true, '' }) - // const { code, map } = transform({ minify: true, sourceMap: dev, code: new Uint8Array(file), filename: url.toString() }) - - // const { code, map } = await builder({ filename: url.toString(), assetDir, dev }) - - const filepath = join(assetDir, `${filename}.css`) - await Deno.writeFile(filepath, new Uint8Array(file)) - cssImports.set(`${from}/${specifier}`, filepath) - return filepath + return url.toString() }, }, })