added support for npm specifiers to postcss and lightningcss #621

CHANGELOG.md

@@ -8,6 +8,7 @@ Go to the `v1` branch to see the changelog of Lume 1.
 ## [2.2.3] - Unreleased
 ### Added
 - New option `caseSensitiveUrls` to allow to export two urls with the same name but different cases [#625].
+- Support for `npm` specifiers to postcss and lightningcss plugins [#621].
 
 ### Changed
 - Nav plugin: Improved behavior for sites with pretty urls disabled.
@@ -427,6 +428,7 @@ Go to the `v1` branch to see the changelog of Lume 1.
 [#617]: https://github.com/lumeland/lume/issues/617
 [#618]: https://github.com/lumeland/lume/issues/618
 [#619]: https://github.com/lumeland/lume/issues/619
+[#621]: https://github.com/lumeland/lume/issues/621
 [#625]: https://github.com/lumeland/lume/issues/625
 
 [2.2.3]: https://github.com/lumeland/lume/compare/v2.2.2...HEAD

core/utils/read.ts

@@ -84,6 +84,16 @@ export async function read(
     : response.text();
 }
 
+/** Read a text file like a browser */
+export async function readFile(path: string): Promise<string> {
+  return await read(path, false, {
+    headers: {
+      "User-Agent":
+        "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/115.0",
+    },
+  });
+}
+
 /**
  * Clear the cache of remote files.
  */

plugins/esbuild.ts

@@ -7,7 +7,7 @@ import {
 import { merge } from "../core/utils/object.ts";
 import { readDenoConfig } from "../core/utils/deno_config.ts";
 import { log } from "../core/utils/log.ts";
-import { read } from "../core/utils/read.ts";
+import { readFile } from "../core/utils/read.ts";
 import { build, BuildOptions, OutputFile, stop } from "../deps/esbuild.ts";
 import { extname, fromFileUrl, posix, toFileUrl } from "../deps/path.ts";
 import { prepareAsset, saveAsset } from "./source_maps.ts";
@@ -334,15 +334,6 @@ function pathWithoutExtension(path: string): string {
   return path.replace(/\.\w+$/, "");
 }
 
-export async function readFile(path: string): Promise<string> {
-  return await read(path, false, {
-    headers: {
-      "User-Agent":
-        "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/115.0",
-    },
-  });
-}
-
 function resolveImports(content: string, esm: EsmOptions): string {
   return content.replaceAll(
     /(from\s*)["']([^"']+)["']/g,

plugins/lightningcss.ts

@@ -1,7 +1,7 @@
 import { bundleAsync, transform } from "../deps/lightningcss.ts";
 import { resolveInclude } from "../core/utils/path.ts";
 import { merge } from "../core/utils/object.ts";
-import { read } from "../core/utils/read.ts";
+import { readFile } from "../core/utils/read.ts";
 import textLoader from "../core/loaders/text.ts";
 import { Page } from "../core/file.ts";
 import { prepareAsset, saveAsset } from "./source_maps.ts";
@@ -119,6 +119,9 @@ export default function (userOptions?: Options) {
           ...options.options,
           resolver: {
             resolve(id: string, from: string) {
+              if (id.startsWith("npm:")) {
+                return `https://esm.sh/${id.slice(4)}`;
+              }
               return resolveInclude(id, includes, posix.dirname(from));
             },
             async read(file: string) {
@@ -127,12 +130,7 @@ export default function (userOptions?: Options) {
               }
 
               if (file.startsWith("http")) {
-                return read(file, false, {
-                  headers: {
-                    "User-Agent":
-                      "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/115.0",
-                  },
-                });
+                return readFile(file);
               }
 
               return await site.getContent(file, textLoader) as string;

plugins/postcss.ts

@@ -2,6 +2,7 @@ import { autoprefixer, postcss, postcssImport } from "../deps/postcss.ts";
 import { merge } from "../core/utils/object.ts";
 import { concurrent } from "../core/utils/concurrent.ts";
 import { resolveInclude } from "../core/utils/path.ts";
+import { readFile } from "../core/utils/read.ts";
 import { Page } from "../core/file.ts";
 import { prepareAsset, saveAsset } from "./source_maps.ts";
 import textLoader from "../core/loaders/text.ts";
@@ -114,11 +115,20 @@ function configureImport(site: Site, includes: string) {
   return postcssImport({
     /** Resolve the import path */
     resolve(id: string, basedir: string) {
+      if (id.startsWith("npm:")) {
+        return "/" + id;
+      }
+
       return resolveInclude(id, includes, basedir);
     },
 
     /** Load the content (using the Lume reader) */
     async load(file: string) {
+      if (file.startsWith("/npm:")) {
+        const url = `https://esm.sh/${file.slice(5)}`;
+        return await readFile(url);
+      }
+
       const content = await site.getContent(file, textLoader);
       if (content === undefined) {
         throw new Error(`File ${file} not found`);

tests/__snapshots__/lightningcss.test.ts.snap

@@ -151,10 +151,12 @@ snapshot[`lightningcss plugin (only transform) 3`] = `
     },
   },
   {
-    content: ".text{font-family:var(--font-family)}.text p{color:var(--color);box-shadow:0 0 .5em var(--background);-webkit-backface-visibility:hidden;backface-visibility:hidden}",
+    content: '@import "npm:[email protected]";.text{font-family:var(--font-family)}.text p{color:var(--color);box-shadow:0 0 .5em var(--background);-webkit-backface-visibility:hidden;backface-visibility:hidden}',
     data: {
       basename: "text",
-      content: ".text {
+      content: '@import "npm:[email protected]";
+
+.text {
   font-family: var(--font-family);
 
   & p {
@@ -163,7 +165,7 @@ snapshot[`lightningcss plugin (only transform) 3`] = `
     backface-visibility: hidden;
   }
 }
-",
+',
       date: [],
       mergedKeys: [
         "tags",
@@ -311,7 +313,8 @@ snapshot[`lightningcss plugin (bundle mode) 2`] = `[]`;
 snapshot[`lightningcss plugin (bundle mode) 3`] = `
 [
   {
-    content: "::root{--color:#333;--background:#fff;--font-family:sans-serif}.text{font-family:var(--font-family)}.text p{color:var(--color);box-shadow:0 0 .5em var(--background);-webkit-backface-visibility:hidden;backface-visibility:hidden}",
+    content: "/*! modern-normalize v2.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
+::root{--color:#333;--background:#fff;--font-family:sans-serif}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;tab-size:4;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;line-height:1.15}body{margin:0}hr{color:inherit;height:0}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:1.15}button,select{text-transform:none}button{-webkit-appearance:button}[type=button]{-webkit-appearance:button}[type=reset]{-webkit-appearance:button}[type=submit]{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted buttontext}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}.text{font-family:var(--font-family)}.text p{color:var(--color);box-shadow:0 0 .5em var(--background);-webkit-backface-visibility:hidden;backface-visibility:hidden}",
     data: {
       basename: "index",
       content: '@import "variables.css";
@@ -339,10 +342,13 @@ snapshot[`lightningcss plugin (bundle mode) 3`] = `
     },
   },
   {
-    content: ".text{font-family:var(--font-family)}.text p{color:var(--color);box-shadow:0 0 .5em var(--background);-webkit-backface-visibility:hidden;backface-visibility:hidden}",
+    content: "/*! modern-normalize v2.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
+*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;tab-size:4;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;line-height:1.15}body{margin:0}hr{color:inherit;height:0}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:1.15}button,select{text-transform:none}button{-webkit-appearance:button}[type=button]{-webkit-appearance:button}[type=reset]{-webkit-appearance:button}[type=submit]{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted buttontext}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}.text{font-family:var(--font-family)}.text p{color:var(--color);box-shadow:0 0 .5em var(--background);-webkit-backface-visibility:hidden;backface-visibility:hidden}",
     data: {
       basename: "text",
-      content: ".text {
+      content: '@import "npm:[email protected]";
+
+.text {
   font-family: var(--font-family);
 
   & p {
@@ -351,7 +357,7 @@ snapshot[`lightningcss plugin (bundle mode) 3`] = `
     backface-visibility: hidden;
   }
 }
-",
+',
       date: [],
       mergedKeys: [
         "tags",