esbuild-sass-plugin - npm Package Compare versions

Comparing version 3.1.0 to 3.2.0

lib/index.d.ts

 import { OnLoadResult } from 'esbuild';
 import { StringOptions } from 'sass';
 import { sassPlugin } from './plugin';
-export type Type = 'css' | 'style' | 'css-text' | 'lit-css' | ((cssText: string, nonce?: string) => string);
+export type Type = 'css' | 'local-css' | 'style' | 'css-text' | 'lit-css' | ((cssText: string, nonce?: string) => string);
 export type SassPluginOptions = StringOptions<'sync' | 'async'> & {
@@ -6,0 +6,0 @@ filter?: RegExp;

lib/plugin.js

@@ -99,5 +99,5 @@ "use strict";
                     }
-                    return type === 'css' ? {
+                    return type === 'css' || type === 'local-css' ? {
                         contents: cssText,
-                        loader: 'css',
+                        loader: type,
                         resolveDir,
@@ -104,0 +104,0 @@ warnings,

lib/utils.js

@@ -116,2 +116,3 @@ "use strict";
         case 'css':
+        case 'local-css':
             return contents;
@@ -118,0 +119,0 @@ default:

package.json

 {
   "name": "esbuild-sass-plugin",
-  "version": "3.1.0",
+  "version": "3.2.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

@@ -107,2 +107,23 @@ ![cooltext394785080075403](https://user-images.githubusercontent.com/160981/136289874-26ce7269-ea08-47dd-be31-9bf0ef7a0b8d.png)
 
+#### `type: "local-css"`
+This mode uses esbuild's built-in CSS modules support (i.e. the [`local-css` loader](https://esbuild.github.io/content-types/#local-css)).
+Use this for lightweight Sass integration that then leverages esbuild's [built-in CSS processing features](https://esbuild.github.io/content-types/#css):
+
+```javascript
+await esbuild.build({
+  ...
+  plugins: [
+    sassPlugin({
+      filter: /\.module\.scss$/,
+      type: 'local-css'
+    }),
+    sassPlugin({
+      filter: /\.scss$/
+      type: 'css'
+    }),
+  ],
+  ...   
+})
+```
+
 #### `type: "style"`
@@ -109,0 +130,0 @@ In this mode the stylesheet will be in the javascript bundle

src/index.ts

@@ -5,3 +5,3 @@ import {OnLoadResult} from 'esbuild'
 
-export type Type = 'css' | 'style' | 'css-text' | 'lit-css' | ((cssText: string, nonce?: string) => string)
+export type Type = 'css' | 'local-css' | 'style' | 'css-text' | 'lit-css' | ((cssText: string, nonce?: string) => string)
 
@@ -8,0 +8,0 @@ export type SassPluginOptions = StringOptions<'sync'|'async'> & {

src/plugin.ts

@@ -121,5 +121,5 @@ import {OnLoadResult, Plugin} from 'esbuild'
 
-          return type === 'css' ? {
+          return type === 'css' || type === 'local-css' ? {
             contents: cssText,
-            loader: 'css',
+            loader: type,
             resolveDir,
@@ -126,0 +126,0 @@ warnings,

src/utils.ts

@@ -128,2 +128,3 @@ import {SassPluginOptions, Type} from './index'
     case 'css':
+    case 'local-css':
       return contents
@@ -130,0 +131,0 @@ default:

No alert changes

Improved metrics

Total package byte prevSize

86901

increased by0.82%

Lines of code

1322

increased by0.15%

Number of lines in readme file

400

increased by5.54%

No dependency changes