diff --git a/README.md b/README.md
index 895834f..e91530a 100644
--- a/README.md
+++ b/README.md
@@ -104,6 +104,27 @@ In all other cases `esbuild` won't process the CSS content which instead will be
with any transformation function by keeping an internal cache of CSS chunks (virtual CSS files)
importing them in the module wrapping the contents
+#### `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"`
In this mode the stylesheet will be in the javascript bundle
and will be dynamically added to the page when the bundle is loaded.
diff --git a/src/index.ts b/src/index.ts
index af6892d..f0b38ce 100755
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,7 +2,7 @@ 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'> & {
diff --git a/src/plugin.ts b/src/plugin.ts
index d2ee38e..5f1b57e 100755
--- a/src/plugin.ts
+++ b/src/plugin.ts
@@ -118,9 +118,9 @@ export function sassPlugin(options: SassPluginOptions = {}): Plugin {
}
}
- return type === 'css' ? {
+ return type === 'css' || type === 'local-css' ? {
contents: cssText,
- loader: 'css',
+ loader: type,
resolveDir,
warnings,
watchFiles
diff --git a/src/utils.ts b/src/utils.ts
index 238105c..1cccdc3 100755
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -125,6 +125,7 @@ export function makeModule(contents: string, type: Type, nonce?: string):string
case 'css-text':
return cssTextModule(contents)
case 'css':
+ case 'local-css':
return contents
default:
return type(contents, nonce)
diff --git a/test/e2e.test.ts b/test/e2e.test.ts
index b07b2eb..bdbaa28 100644
--- a/test/e2e.test.ts
+++ b/test/e2e.test.ts
@@ -333,6 +333,35 @@ describe('e2e tests', function () {
`)
})
+ it('local-css', async function () {
+ const options = useFixture('local-css')
+
+ await esbuild.build({
+ ...options,
+ entryPoints: ['./src/index.js'],
+ outdir: './out',
+ bundle: true,
+ format: 'esm',
+ plugins: [
+ sassPlugin({
+ type: 'local-css'
+ }),
+ ]
+ })
+
+ const bundle = readTextFile('./out/index.js')
+
+ expect(bundle).to.containIgnoreSpaces('class="${message} ${message2}"')
+
+ expect(bundle).to.containIgnoreSpaces(`
+ var message = "example_module_message";
+ `)
+
+ expect(bundle).to.containIgnoreSpaces(`
+ var message2 = "common_module_message";
+ `)
+ })
+
it('open-iconic (dealing with relative paths & data urls)', async function () {
const options = useFixture('open-iconic')
diff --git a/test/fixture/local-css/README.md b/test/fixture/local-css/README.md
new file mode 100644
index 0000000..27aa8e4
--- /dev/null
+++ b/test/fixture/local-css/README.md
@@ -0,0 +1,31 @@
+### Example `build.js`
+```javascript
+const esbuild = require("esbuild");
+const {sassPlugin, postcssModules} = require("esbuild-sass-plugin");
+
+esbuild.build({
+ entryPoints: ["./src/index.js"],
+ outdir: "build/",
+ bundle: true,
+ format: "esm",
+ plugins: [
+ sassPlugin({
+ type: 'local-css'
+ }),
+ ]
+}).catch(() => process.exit(1));
+```
+
+### ...remember the dependencies in `package.json`
+```json
+ "dependencies": {
+ ...
+ "esbuild": "^0.12.20",
+ "esbuild-sass-plugin": "^1.5.0"
+ ...
+ }
+```
+
+**Note**:
+
+This project is slightly different from the example because it's part of the fixtures
diff --git a/test/fixture/local-css/build.js b/test/fixture/local-css/build.js
new file mode 100644
index 0000000..ba56a18
--- /dev/null
+++ b/test/fixture/local-css/build.js
@@ -0,0 +1,17 @@
+const esbuild = require('esbuild')
+const {sassPlugin} = require('../../../lib')
+const {cleanFixture, logSuccess, logFailure} = require('../utils')
+
+cleanFixture(__dirname)
+
+esbuild.build({
+ entryPoints: ['./src/index.js'],
+ outdir: './out',
+ bundle: true,
+ format: 'esm',
+ plugins: [
+ sassPlugin({
+ type: 'local-css'
+ }),
+ ]
+}).then(logSuccess, logFailure)
\ No newline at end of file
diff --git a/test/fixture/local-css/index.html b/test/fixture/local-css/index.html
new file mode 100644
index 0000000..e3ed70a
--- /dev/null
+++ b/test/fixture/local-css/index.html
@@ -0,0 +1,11 @@
+
+
+
+
+ Bootstrap Example
+
+
+
+
+
+
\ No newline at end of file
diff --git a/test/fixture/local-css/package.json b/test/fixture/local-css/package.json
new file mode 100755
index 0000000..18f8a31
--- /dev/null
+++ b/test/fixture/local-css/package.json
@@ -0,0 +1,9 @@
+{
+ "name": "local-css-fixture",
+ "version": "1.0.0",
+ "license": "MIT",
+ "scripts": {
+ "build": "node ./build",
+ "serve": "node ../serve css-modules"
+ }
+}
diff --git a/test/fixture/local-css/src/common.module.scss b/test/fixture/local-css/src/common.module.scss
new file mode 100755
index 0000000..2825bde
--- /dev/null
+++ b/test/fixture/local-css/src/common.module.scss
@@ -0,0 +1,3 @@
+.message {
+ font-family: Roboto, sans-serif;
+}
\ No newline at end of file
diff --git a/test/fixture/local-css/src/example.module.scss b/test/fixture/local-css/src/example.module.scss
new file mode 100755
index 0000000..826dd30
--- /dev/null
+++ b/test/fixture/local-css/src/example.module.scss
@@ -0,0 +1,5 @@
+.message {
+ color: white;
+ background-color: red;
+ font-size: 24px;
+}
\ No newline at end of file
diff --git a/test/fixture/local-css/src/index.js b/test/fixture/local-css/src/index.js
new file mode 100755
index 0000000..d31fb7a
--- /dev/null
+++ b/test/fixture/local-css/src/index.js
@@ -0,0 +1,6 @@
+import { message } from "./example.module.scss";
+import * as common from "./common.module.scss";
+
+document.body.insertAdjacentHTML("afterbegin", `
+ Hello World
+`);
\ No newline at end of file