Support gh: specifiers

Author: oscarotero

CHANGELOG.md

@@ -7,6 +7,9 @@ Go to the `v2` branch to see the changelog of Lume 2.
 Go to the `v1` branch to see the changelog of Lume 1.
 
 ## [3.0.11] - Unreleased
+### Added
+- Support for `gh:` specifiers in Lightningcss, Postcss and Tailwindcss.
+
 ### Fixed
 - `tailwind` plugin: Support to import styles from npm. (i.e. `@import "npm:tw-animate-css"`)
 - `tailwind` plugin: Imports with relative paths don't work.

core/site.ts

@@ -5,7 +5,7 @@ import { env, setEnv } from "./utils/env.ts";
 import { log } from "./utils/log.ts";
 import { filter404page } from "./utils/page_url.ts";
 import { insertContent } from "./utils/page_content.ts";
-import { getFiles } from "./utils/cdn.ts";
+import { getFile, getFiles, isFromCdn } from "./utils/cdn.ts";
 
 import FS from "./fs.ts";
 import { compileCSS, compileJS, ComponentLoader } from "./components.ts";
@@ -553,8 +553,8 @@ export default class Site {
       return;
     }
 
-    // Remote files
-    if (from.startsWith("npm:") || from.startsWith("gh:")) {
+    // Remote files from NPM or GitHub CDN
+    if (isFromCdn(from)) {
       // It's a pattern
       if (from.includes("*")) {
         const specifier = from;
@@ -571,11 +571,7 @@ export default class Site {
       }
 
       // Copy only the main file
-      if (from.startsWith("npm:")) {
-        from = from.replace("npm:", "https://cdn.jsdelivr.net/npm/");
-      } else {
-        from = from.replace("gh:", "https://cdn.jsdelivr.net/gh/");
-      }
+      from = getFile(from);
     }
 
     if (isUrl(from)) {

core/utils/cdn.ts

@@ -49,6 +49,25 @@ export async function getFiles(
   return fileMap;
 }
 
+export function isFromCdn(specifier: string): boolean {
+  return specifier.startsWith("npm:") || specifier.startsWith("gh:");
+}
+
+export function getFile(specifier: string): string {
+  const result = parseNpm(specifier) || parseGh(specifier);
+  if (!result) {
+    throw new Error(`Invalid specifier: ${specifier}`);
+  }
+
+  const [type, name, version, filename] = result;
+
+  if (filename.includes("*")) {
+    throw new Error(`Specifier must not contain glob pattern: ${specifier}`);
+  }
+
+  return `https://cdn.jsdelivr.net/${type}/${name}@${version}${filename}`;
+}
+
 export async function getVersion(
   type: PackageType,
   name: string,

plugins/lightningcss.ts

@@ -9,6 +9,7 @@ import { warnUntil } from "../core/utils/log.ts";
 import { bytes } from "../core/utils/format.ts";
 import { log } from "../core/utils/log.ts";
 import { browsers, version } from "../core/utils/browsers.ts";
+import { getFile, isFromCdn } from "../core/utils/cdn.ts";
 
 import type { Item } from "../deps/debugbar.ts";
 import type Site from "../core/site.ts";
@@ -164,8 +165,8 @@ export function lightningCSS(userOptions?: Options) {
           ...options.options,
           resolver: {
             resolve(id: string, from: string) {
-              if (id.startsWith("npm:")) {
-                return id.replace("npm:", "https://cdn.jsdelivr.net/npm/");
+              if (isFromCdn(id)) {
+                return getFile(id);
               }
               return resolveInclude(id, includes, posix.dirname(from));
             },

plugins/postcss.ts

@@ -8,6 +8,7 @@ import { prepareAsset, saveAsset } from "./source_maps.ts";
 import { warnUntil } from "../core/utils/log.ts";
 import { bytes } from "../core/utils/format.ts";
 import { browsers, versionString } from "../core/utils/browsers.ts";
+import { getFile, isFromCdn } from "../core/utils/cdn.ts";
 
 import type Site from "../core/site.ts";
 import type { SourceMap } from "./source_maps.ts";
@@ -149,7 +150,7 @@ function configureImport(site: Site, includes: string) {
   return postcssImport({
     /** Resolve the import path */
     resolve(id: string, basedir: string) {
-      if (id.startsWith("npm:")) {
+      if (isFromCdn(id)) {
         return "/" + id;
       }
 
@@ -158,8 +159,8 @@ function configureImport(site: Site, includes: string) {
 
     /** Load the content (using the Lume reader) */
     async load(file: string) {
-      if (file.startsWith("/npm:")) {
-        const url = file.replace("/npm:", "https://cdn.jsdelivr.net/npm/");
+      if (file.startsWith("/") && isFromCdn(file.slice(1))) {
+        const url = getFile(file.slice(1));
         return await readFile(url);
       }
 

plugins/tailwindcss.ts

@@ -11,6 +11,7 @@ import { readFile } from "../core/utils/read.ts";
 import { resolveInclude } from "../core/utils/path.ts";
 import { prepareAsset, saveAsset } from "./source_maps.ts";
 import { Features, transform } from "../deps/lightningcss.ts";
+import { getFile, isFromCdn } from "../core/utils/cdn.ts";
 
 import type { ChangedContent } from "../deps/tailwindcss.ts";
 import type Site from "../core/site.ts";
@@ -115,8 +116,8 @@ export function tailwindCSS(userOptions?: Options) {
             }
 
             // Support npm: prefix to load from npm CDN (ex: npm:tw-animate-css)
-            if (id.startsWith("npm:")) {
-              id = id.replace("npm:", "https://cdn.jsdelivr.net/npm/");
+            if (isFromCdn(id)) {
+              id = getFile(id);
               const content = await readFile(id);
               return { content, path: id, base };
             }