esbuild-sass-plugin - npm Package Compare versions

Comparing version 1.6.1 to 1.6.2

lib/importer.d.ts

 import { SassPluginOptions } from "./index";
-export declare function createSassImporter({ basedir, importMapper }: SassPluginOptions): (url: any) => {
+export declare function createSassImporter({ basedir, importMapper, implementation }: SassPluginOptions): (url: any) => {
     file: string;
-};
+} | null;

lib/importer.js

@@ -8,3 +8,3 @@ "use strict";
 const resolve_1 = __importDefault(require("resolve"));
-function createSassImporter({ basedir = process.cwd(), importMapper }) {
+function createSassImporter({ basedir = process.cwd(), importMapper, implementation }) {
     const opts = { basedir, extensions: [".scss", ".sass", ".css"] };
@@ -22,5 +22,15 @@ return function importer(url) {
         catch (e) {
-            const index = url.lastIndexOf("/");
-            const fragment = url.slice(0, index) + "/_" + url.slice(index + 1);
-            return { file: resolve_1.default.sync(fragment, opts) };
+            try {
+                const index = url.lastIndexOf("/");
+                const fragment = url.slice(0, index) + "/_" + url.slice(index + 1);
+                return { file: resolve_1.default.sync(fragment, opts) };
+            }
+            catch (e) {
+                if (implementation === "node-sass") {
+                    return null;
+                }
+                else {
+                    throw e;
+                }
+            }
         }
@@ -27,0 +37,0 @@ };

lib/index.d.ts

@@ -0,0 +0,0 @@ import { OnLoadResult, OnResolveArgs } from "esbuild";

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

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

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.6.1",
+  "version": "1.6.2",
   "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

@@ -1,16 +0,16 @@
-![logo created with https://cooltext.com](https://images.cooltext.com/5500652.png)
+![cooltext394785080075403](https://user-images.githubusercontent.com/160981/136289874-26ce7269-ea08-47dd-be31-9bf0ef7a0b8d.png)
 
 [![Build Status][travis-image]][travis-url]
 
-A plugin for [esbuild](https://esbuild.github.io/) to handle sass & scss files.
+A plugin for [esbuild](https://esbuild.github.io/) to handle Sass & SCSS files.
 
 ### Features
 * support for `constructable stylesheet` to be used in custom elements or `dynamic style` to be added to the html page
-* comes with [dart sass](https://www.npmjs.com/package/sass) but can be easily switched to [node-sass](https://github.com/sass/node-sass)
+* comes with [Dart Sass](https://www.npmjs.com/package/sass) but can be easily switched to [node-sass](https://github.com/sass/node-sass)
 * caching
-* **postCSS** & **css modules**
+* **PostCSS** & **CSS modules**
 
 ### Install
-```bash
-npm i esbuild-sass-plugin
+```console
+$ npm i esbuild-sass-plugin
 ```
@@ -28,3 +28,3 @@
 ```
-this will use `loader: "css"` and your transpiled sass will be included in index.css.
+this will use `loader: "css"` and your transpiled Sass will be included in index.css.
 
@@ -80,3 +80,3 @@ If you specify `type: "style"` then the stylesheet will be dynamically added to the page.
 
-The **options** passed to the plugin are a superset of the sass [Options](https://sass-lang.com/documentation/js-api#options).
+The **options** passed to the plugin are a superset of the Sass [Options](https://sass-lang.com/documentation/js-api#options).
 
@@ -107,3 +107,3 @@ |Option|Type|Default|
 >         type: [                                     // this is somehow like a case 'switch'...
->             ["css", "bootstrap/**"],                // ...all bootstrap scss files (args.path) 
+>             ["css", "bootstrap/**"],                // ...all bootstrap SCSS files (args.path) 
 >             ["style", ["src/nomod/**"]],            // ...all files imported from files in 'src/nomod' (args.importer) 
@@ -121,7 +121,7 @@ >             ["style", ["**/index.ts","**/*.scss"]], // all scss files imported from files name index.ts (both params)
 > 
-> _have a look at the **exclude** fixture for an example_ where **lit css** and **css modules** are both used in the same app
+> _have a look at the **exclude** fixture for an example_ where **lit CSS** and **CSS modules** are both used in the same app
 
 
 ### Exclude Option
-Used to exclude paths from the plugin. It can either be **a simple regex** and that applies to the path 
+Used to exclude paths from the plugin. It can either be **a simple regex** which applies to the path 
 ```javascript
@@ -146,4 +146,4 @@ await esbuild.build({
 ### ImportMapper Option
-Function to customize re-map import path, both `import` in ts code and `@import` 
-in scss coverd.   
+A function to customize/re-map the import path, both `import` statements in JavaScript/TypeScript code and `@import` 
+in Sass/SCSS are covered.   
 You can use this option to re-map import paths like tsconfig's `paths` option.   
@@ -178,3 +178,3 @@
 It's a function which will be invoked before passing the css to esbuild or wrapping it in a module.\
-It can be used to do **postcss** processing and/or to create **modules** like in the following examples.
+It can be used to do **PostCSS** processing and/or to create **modules** like in the following examples.
 
@@ -200,3 +200,3 @@ #### PostCSS
 #### CSS Modules
-A helper function is available to do all the work of calling postcss to create a css module. The usage is something like:
+A helper function is available to do all the work of calling PostCSS to create a CSS module. The usage is something like:
 ```javascript
@@ -221,6 +221,6 @@ const {sassPlugin, postcssModules} = require("esbuild-sass-plugin");
 
-### Use node-sass instead of sass
+### Use node-sass instead of Dart Sass
 Remember to add the dependency
-```bash
-npm i esbuild-sass-plugin node-sass
+```console
+$ npm i esbuild-sass-plugin node-sass
 ```
@@ -237,10 +237,27 @@ and to specify the implementation in the options:
 ```
+When compared to dart sass, node-sass is not only behind and lacking features but it's also 
+behaving slightly differently. If you experience [issues](https://github.com/glromeo/esbuild-sass-plugin/issues/34#issue-1029351164) 
+try and replace the built-in importer with [magic importer](https://www.npmjs.com/package/node-sass-magic-importer) 
+which is slower but better suited for node-sass
 
-### CACHING
+```javascript
+const magicImporter = require('node-sass-magic-importer');
 
-It greatly improves the performance in incremental builds or watch mode.
+await esbuild.build({
+    ...
+    plugins: [sassPlugin({
+        implementation: "node-sass",
+        importer: magicImporter()
+    })]
+});
+```
 
-It has to be enabled with `cache: true` in the options. 
 
-You can pass your own map instead of true if you want to recycle it across different builds.
+### Caching
+
+Chaching greatly improves the performance in incremental builds or watch mode.
+
+It must be enabled with `cache: true` in the options. 
+
+You can pass your own map instead of `true` if you want to recycle it across different builds.
 ```javascript
@@ -258,3 +275,3 @@ const pluginCache = new Map();
 ### Benchmarks
-Given 24 x 24 = 576 lit-element files & 576 imported css styles
+Given 24 × 24 = 576 lit-element files & 576 imported CSS styles
 #### cache: true
@@ -261,0 +278,0 @@ ```

src/importer.ts

 import {SassPluginOptions} from "./index";
 import resolve from "resolve";
 
-export function createSassImporter({basedir = process.cwd(), importMapper }: SassPluginOptions) {
+export function createSassImporter({basedir = process.cwd(), importMapper, implementation }: SassPluginOptions) {
 
@@ -18,7 +18,15 @@ const opts = {basedir, extensions: [".scss", ".sass", ".css"]};
         } catch (e) {
-            const index = url.lastIndexOf("/");
-            const fragment = url.slice(0, index)+"/_"+url.slice(index+1)
-            return {file: resolve.sync(fragment, opts)};
+            try {
+                const index = url.lastIndexOf("/");
+                const fragment = url.slice(0, index)+"/_"+url.slice(index+1)
+                return {file: resolve.sync(fragment, opts)};
+            } catch (e:any) {
+                if (implementation === "node-sass") {
+                    return null;
+                } else {
+                    throw e;
+                }
+            }
         }
     }
 }

src/index.ts

@@ -0,0 +0,0 @@ import {OnLoadResult, OnResolveArgs} from "esbuild";

src/plugin.ts

@@ -0,0 +0,0 @@ import {OnLoadArgs, OnLoadResult, OnResolveArgs, Plugin} from "esbuild";

src/utils.ts

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

No alert changes

Improved metrics

Total package byte prevSize

53465

increased by0.34%

Lines of code

800

increased by2.3%

Number of lines in readme file

294

increased by6.14%

No dependency changes