esbuild-sass-plugin - npm Package Compare versions

Comparing version 1.5.5 to 1.6.0

lib/importer.d.ts

@@ -0,0 +0,0 @@ import { SassPluginOptions } from "./index";

lib/importer.js

@@ -0,0 +0,0 @@ "use strict";

lib/index.d.ts

@@ -1,2 +0,2 @@
-import { OnLoadResult } from "esbuild";
+import { OnLoadResult, OnResolveArgs } from "esbuild";
 import { Importer, types } from "sass";
@@ -6,3 +6,6 @@ export declare type Type = "css" | "style" | "css-text" | "lit-css";
     importMapper?: (url: string) => string;
-    exclude?: RegExp;
+    exclude?: RegExp | ((args: OnResolveArgs) => boolean) | {
+        path?: RegExp;
+        resolveDir?: RegExp;
+    };
     implementation?: string;
@@ -9,0 +12,0 @@ basedir?: string;

lib/index.js

@@ -0,0 +0,0 @@ "use strict";

lib/plugin.d.ts

 import { Plugin } from "esbuild";
 import { SassPluginOptions } from "./index";
 export declare function sassPlugin(options?: SassPluginOptions): Plugin;

lib/plugin.js

@@ -12,2 +12,3 @@ "use strict";
 const importer_1 = require("./importer");
+let pluginIndex = 0;
 function sassPlugin(options = {}) {
@@ -95,5 +96,11 @@ if (!options.basedir) {
         const exclude = options.exclude;
-        if (exclude) {
+        if (exclude instanceof RegExp) {
             return (args) => exclude.test(args.path) ? null : callback(args);
         }
+        else if (typeof exclude === "function") {
+            return (args) => exclude(args) ? null : callback(args);
+        }
+        else if (typeof exclude === "object") {
+            throw new Error("invalid exclude option");
+        }
         else {
@@ -104,2 +111,3 @@ return callback;
     const RELATIVE_PATH = /^\.\.?\//;
+    const namespace = `sass-plugin-${pluginIndex++}`;
     return {
@@ -110,6 +118,6 @@ name: "sass-plugin",
                 if (RELATIVE_PATH.test(args.path)) {
-                    return { path: pathResolve(args), namespace: "sass", pluginData: args };
+                    return { path: pathResolve(args), namespace, pluginData: args };
                 }
                 else {
-                    return { path: requireResolve(args), namespace: "sass", pluginData: args };
+                    return { path: requireResolve(args), namespace, pluginData: args };
                 }
@@ -201,3 +209,3 @@ }));
             }
-            build.onLoad({ filter: /./, namespace: "sass" }, cached(transform));
+            build.onLoad({ filter: /./, namespace }, cached(transform));
         }
@@ -204,0 +212,0 @@ };

lib/utils.d.ts

@@ -0,0 +0,0 @@ import { SassPluginOptions, Type } from "./index";

lib/utils.js

@@ -0,0 +0,0 @@ "use strict";

package.json

 {
   "name": "esbuild-sass-plugin",
-  "version": "1.5.5",
+  "version": "1.6.0",
   "description": "esbuild plugin for sass/scss files supporting both css loader and css result import (lit-element)",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -84,17 +84,41 @@ ![logo created with https://cooltext.com](https://images.cooltext.com/5500652.png)
 |cache|boolean or Map|true|
-|type|string or array|`"css"`|
+|type|string or ~~array~~*|`"css"`|
 |implementation|string|`"sass"`|
 |transform|function|undefined|
-|exclude|regex|undefined|
+|exclude|regex or function|undefined|
 |importMapper|function|undefined|
 
 
-If you want to have different loaders for different parts of your code you can pass `type` an array. 
+> **WARNING**: _The **array** version of **type** is **deprecated**_
+> 
+> It was meant to have different loaders for different parts of the code passing an array to `type` where each item 
+> was:
+> * the type (one of: `css`, `css-text`, `lit-css` or `style`)
+> * a valid [picomatch](https://github.com/micromatch/picomatch) glob, an array of one such glob or an array of two.
+> 
+> e.g. You can still do:
+>
+> ```javascript
+> await esbuild.build({
+>     ...
+>     plugins: [sassPlugin({
+>         type: [                                     // this is somehow like a case 'switch'...
+>             ["css", "bootstrap/**"],                // ...all bootstrap scss files (args.path) 
+>             ["style", ["src/nomod/**"]],            // ...all files imported from files in 'src/nomod' (args.importer) 
+>             ["style", ["**/index.ts","**/*.scss"]], // all scss files imported from files name index.ts (both params)
+>             ["lit-css"]                             // this matches all, similar to a case 'default'
+>         ],
+>     })]
+> })
+> ```
+> 
+> ...but **I am planning to remove this complicated way of defining different behaviours in v2.0** \
+> I haven't decided the new option format yet but, please, try and use the single string version of type \
+> and rely on exclude to switch behaviour if possible!
+> 
+> _have a look at the **exclude** fixture for an example_ where **lit css** and **css modules** are both used in the same app
 
-Each item is going
-to be: 
-* the type (one of: `css`, `css-text`, `lit-css` or `style`)
-* a valid [picomatch](https://github.com/micromatch/picomatch) glob, an array of one such glob or an array of two. 
 
-e.g.
+### Exclude Option
+Used to exclude paths from the plugin. It can either be **a simple regex** and that applies to the path 
 ```javascript
@@ -104,17 +128,7 @@ await esbuild.build({
     plugins: [sassPlugin({
-        type: [                                     // this is somehow like a case 'switch'...
-            ["css", "bootstrap/**"],                // ...all bootstrap scss files (args.path) 
-            ["style", ["src/nomod/**"]],            // ...all files imported from files in 'src/nomod' (args.importer) 
-            ["style", ["**/index.ts","**/*.scss"]], // all scss files imported from files name index.ts (both params)
-            ["lit-css"]                             // this matches all, similar to a case 'default'
-        ],
+        exclude: /^http:\/\//,  // ignores urls
     })]
 })
 ```
-**NOTE**: last type applies to all the files that don't match any matchers.
-
-### Exclude Option
-Used to exclude paths from the plugin
-
-e.g.
+**or a function** which receives the whole set of args that esbuild passes on resolve.
 ```javascript
@@ -124,3 +138,3 @@ await esbuild.build({
     plugins: [sassPlugin({
-        exclude: /^http:\/\//,  // ignores urls
+        exclude: ({resolveDir}) => !/\\lit$/.test(resolveDir),  // ignores files outside lit directory
     })]
@@ -135,5 +149,4 @@ })
 
-e.g.
+e.g. given this `tsconfig.json` which maps image files paths
 ```json
-//tsconfig
 {
@@ -143,3 +156,3 @@ "compilerOptions": {
     "paths": {
-      "@img/*": ["./assets/images/*"] //map image files
+      "@img/*": ["./assets/images/*"]
     }
@@ -149,3 +162,3 @@ }
 ```
-Now you can resolve these paths with `importMapper`
+now you can resolve these paths with `importMapper`
 ```javascript
@@ -152,0 +165,0 @@ await esbuild.build({

src/importer.ts

@@ -0,0 +0,0 @@ import {SassPluginOptions} from "./index";

src/index.ts

@@ -1,2 +0,2 @@
-import {OnLoadResult} from "esbuild";
+import {OnLoadResult, OnResolveArgs} from "esbuild";
 import {Importer, types} from "sass";
@@ -16,3 +16,3 @@
      */
-    exclude?: RegExp;
+    exclude?: RegExp | ((args:OnResolveArgs) => boolean) | {path?:RegExp, resolveDir?:RegExp}
 
@@ -19,0 +19,0 @@ /**

src/plugin.ts

@@ -9,2 +9,4 @@ import {OnLoadArgs, OnLoadResult, OnResolveArgs, Plugin} from "esbuild";
 
+let pluginIndex: number = 0;
+
 /**
@@ -113,6 +115,10 @@ *
         const exclude = options.exclude;
-        if (exclude) {
-            return (args: OnResolveArgs) => exclude.test(args.path) ? null : callback(args)
+        if (exclude instanceof RegExp) {
+            return (args: OnResolveArgs) => exclude.test(args.path) ? null : callback(args);
+        } else if (typeof exclude === "function") {
+            return (args: OnResolveArgs) => exclude(args) ? null : callback(args);
+        } else if (typeof exclude === "object") {
+            throw new Error("invalid exclude option");
         } else {
-            return callback
+            return callback;
         }
@@ -123,2 +129,4 @@ }
 
+    const namespace = `sass-plugin-${pluginIndex++}`;
+
     return {
@@ -130,5 +138,5 @@ name: "sass-plugin",
                 if (RELATIVE_PATH.test(args.path)) {
-                    return {path: pathResolve(args), namespace: "sass", pluginData: args};
+                    return {path: pathResolve(args), namespace, pluginData: args};
                 } else {
-                    return {path: requireResolve(args), namespace: "sass", pluginData: args};
+                    return {path: requireResolve(args), namespace, pluginData: args};
                 }
@@ -200,3 +208,3 @@ }));
                                 watchFiles
-                            }
+                            };
                         } else {
@@ -222,9 +230,9 @@ css = out;
                         watchFiles: lastWatchFiles?.[path] ?? [path]
-                    }
+                    };
                 }
             }
 
-            build.onLoad({filter: /./, namespace: "sass"}, cached(transform));
+            build.onLoad({filter: /./, namespace}, cached(transform));
         }
     };
 }

src/utils.ts

@@ -0,0 +0,0 @@ import {SassPluginOptions, Type} from "./index";

No alert changes

Improved metrics

Total package byte prevSize

53119

increased by6.38%

Lines of code

782

increased by2.22%

Number of lines in readme file

277

increased by4.92%

No dependency changes