v3

Author: glromeo

README.md

@@ -8,19 +8,13 @@ A plugin for [esbuild](https://esbuild.github.io/) to handle Sass & SCSS files.
 ### Features
 * **PostCSS** & **CSS modules**
 * support for **constructable stylesheet** to be used in custom elements or `dynamic style` to be added to the html page
-* uses the **new [Dart Sass](https://www.npmjs.com/package/sass) Js API**.
+* **[Sass Embedded](https://github.com/sass/sass/issues/3296) Async API**. (Thank you @NathanBeddoeWebDev)
 * caching
 * **url rewriting**
 * pre-compiling (to add **global resources** to the sass files)
 
-### Breaking Changes
-* `type` has been simplified and now accepts only a string. If you need different types in a project [you can use more
-  than one instance](https://github.com/glromeo/esbuild-sass-plugin/issues/60) of the plugin. 
-  You can have a look at the [**multiple** fixture](https://github.com/glromeo/esbuild-sass-plugin/blob/main/test/fixture/multiple) 
-  for an example where **lit CSS** and **CSS modules** are both used in the same app
-* The support for [node-sass](https://github.com/sass/node-sass) has been removed and for good.
-  Sadly, node-sass is at a dead end and so it's 1.x.
-* `transform` now is expected to send back the CSS text in contents and anything that has to be default exported in `pluginData`.
+### Breaking Changes (...maybe)
+* upgraded to esbuild 0.20
 
 ### Install
 
@@ -353,19 +347,18 @@ There's a working example of using `pnpm` with `@material` design
 in [issue/38](https://github.com/glromeo/esbuild-sass-plugin/tree/main/test/issues/38)
 
 ### Benchmarks
-**Windows 10** Pro - **i7-4770K** CPU @ **3.50**GHz - RAM **24**GB - SSD **500**GB
+**Windows 11** Pro - **i7-490K** CPU @ **4.00**GHz - RAM **32**GB - SSD **500**GB
 
 Given 24 × 24 = 576 lit-element files & 576 imported CSS styles plus the import of the full bootstrap 5.1
 
-|                        | dart sass | dart sass (no cache)  | node-sass*  | node-sass (no cache) |
-|------------------------|-----------|-----------------------|-------------|----------------------|
-| **initial build**      | 2.750s    | 2.750s                | 1.903s      | 1.858s               |
-| rebuild (.ts change)   | 285.959ms | 1.950s                | 797.098ms   | 1.689s               |
-| rebuild (.ts change)   | 260.791ms | 1.799s                | 768.213ms   | 1.790s               |
-| rebuild (.scss change) | 234.152ms | 1.801s                | 770.619ms   | 1.652s               |
-| rebuild (.scss change) | 267.857ms | 1.738s                | 750.743ms   | 1.682s               |
+|                        | sass-embedded  | sass-embedded (no cache) | dart sass | dart sass (no cache) |
+|------------------------|----------------|--------------------------|-----------|----------------------|
+| **initial build**      | 731.312ms      | 779.363ms                | 2.450s    | 2.450s               |
+| rebuild (.ts change)   | 170.35ms       | 188.861ms                | 179.125ms | 1.710s               |
+| rebuild (.ts change)   | 155.802ms      | 167.413ms                | 176.849ms | 1.576s               |
+| rebuild (.scss change) | 203.746ms      | 160.601ms                | 188.164ms | 1.575s               |
+| rebuild (.scss change) | 152.733ms      | 144.754ms                | 145.835ms | 1.520s               |
 
-(*) node-sass is here just to give a term of comparison ...those samples were taken from 1.8.x
 
 [travis-url]: https://app.travis-ci.com/glromeo/esbuild-sass-plugin
 [travis-image]: https://app.travis-ci.com/glromeo/esbuild-sass-plugin.svg?branch=main

package.json

@@ -1,6 +1,6 @@
 {
   "name": "esbuild-sass-plugin",
-  "version": "2.16.1",
+  "version": "3.0.0",
   "description": "esbuild plugin for sass/scss files supporting both css loader and css result import (lit-element)",
   "main": "lib/index.js",
   "keywords": [
@@ -42,21 +42,21 @@
   },
   "dependencies": {
     "resolve": "^1.22.6",
-    "sass-embedded": "1.70.0"
+    "sass-embedded": "^1.70.0"
   },
   "devDependencies": {
-    "@types/node": "^18.15.12",
-    "@types/resolve": "^1.20.2",
-    "esbuild": "^0.19.4",
+    "@types/node": "^20.11.10",
+    "@types/resolve": "^1.20.6",
+    "esbuild": "^0.20.0",
     "mocha-toolkit": "^1.0.7",
     "postcss": "^8.4.31",
     "postcss-modules": "^6.0.0",
     "postcss-url": "^10.1.3",
     "source-map": "^0.7.4",
-    "ts-node": "^10.9.1",
-    "typescript": "^5.0.4"
+    "ts-node": "^10.9.2",
+    "typescript": "^5.3.3"
   },
   "peerDependencies": {
-    "esbuild": "^0.19.4"
+    "esbuild": "^0.20.0"
   }
 }

test/e2e.test.ts

@@ -96,7 +96,7 @@ describe('e2e tests', function () {
       })
 
       expect(
-        consumer.originalPositionFor({line: 10263, column: 0})
+        consumer.originalPositionFor({line: 10286, column: 0})
       ).to.eql({
         source: `../src/entrypoint.scss`,
         line: 3,
@@ -358,7 +358,7 @@ describe('e2e tests', function () {
     })
 
     const outCSS = readTextFile('./out/styles.css')
-    expect(outCSS).to.match(/url\(\.\/open-iconic-[^.]+\.eot\?#iconic-sm\) format\("embedded-opentype"\)/)
+    expect(outCSS).to.match(/url\("\.\/open-iconic-[^.]+\.eot\?#iconic-sm"\) format\("embedded-opentype"\)/)
 
     await esbuild.build({
       ...options,

test/fixture/benchmark/build.js

@@ -19,7 +19,7 @@ esbuild.context({
         sassPlugin({
             'filter': /^\.\.\/index.scss$/,
             'type': 'style',
-            'cache': true
+            'cache': false
         }),
         sassPlugin({
             'type': 'lit-css',