diff --git a/package.json b/package.json index 01f2876..2530cc7 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "esbuild-sass-plugin", - "version": "2.12.0", + "version": "2.13.0", "description": "esbuild plugin for sass/scss files supporting both css loader and css result import (lit-element)", "main": "lib/index.js", "keywords": [ diff --git a/src/plugin.ts b/src/plugin.ts index 93517f2..a91d9b4 100755 --- a/src/plugin.ts +++ b/src/plugin.ts @@ -56,13 +56,15 @@ export function sassPlugin(options: SassPluginOptions = {}): Plugin { if (transform) { const namespace = 'esbuild-sass-plugin' - onResolve({filter: /^css-chunk:/}, ({path}) => ({ + onResolve({filter: /^css-chunk:/}, ({path, resolveDir}) => ({ path, - namespace + namespace, + pluginData: {resolveDir} })) - onLoad({filter: /./, namespace}, ({path}) => ({ + onLoad({filter: /./, namespace}, ({path, pluginData: {resolveDir}}) => ({ contents: cssChunks[path], + resolveDir, loader: 'css' })) } diff --git a/test/issues/146/build.js b/test/issues/146/build.js new file mode 100644 index 0000000..b96de57 --- /dev/null +++ b/test/issues/146/build.js @@ -0,0 +1,28 @@ +import * as esbuild from 'esbuild'; +import { sassPlugin, postcssModules } from '../../../lib/index.js'; +import fs from 'node:fs/promises' +import path from 'node:path'; + +await fs.rm('dist', { recursive: true, force: true }); + +await esbuild.build({ + entryPoints: ['./src/index.js'], + format: 'esm', + target: ['esnext'], + outdir: 'dist', + sourcemap: true, + bundle: true, + loader: { + '.svg': 'dataurl', + }, + plugins: [ + sassPlugin({ + filter: /\.module\.scss$/, + transform: postcssModules({}), + precompile(source, pathname) { + const basedir = path.dirname(pathname); + return source.replace(/(url\(['"]?)(\.\.?\/)([^'")]+['"]?\))/g, `$1${basedir}/$2$3`); + }, + }), + ], +}); diff --git a/test/issues/146/package.json b/test/issues/146/package.json new file mode 100644 index 0000000..ad8ccd7 --- /dev/null +++ b/test/issues/146/package.json @@ -0,0 +1,13 @@ +{ + "private": true, + "type": "module", + "scripts": { + "build": "node build.js" + }, + "dependencies": { + "esbuild": "^0.19.2", + "esbuild-sass-plugin": "^2.13.0", + "postcss": "^8.4.29", + "postcss-modules": "^6.0.0" + } +} diff --git a/test/issues/146/readme.md b/test/issues/146/readme.md new file mode 100644 index 0000000..4fa7471 --- /dev/null +++ b/test/issues/146/readme.md @@ -0,0 +1,8 @@ +# Repro: resolving `url()` with esbuild-sass-plugin + +To reproduce the issue, run: + +``` +npm install +npm run build +``` diff --git a/test/issues/146/src/close.svg b/test/issues/146/src/close.svg new file mode 100644 index 0000000..fe05c8a --- /dev/null +++ b/test/issues/146/src/close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/test/issues/146/src/icons.module.scss b/test/issues/146/src/icons.module.scss new file mode 100644 index 0000000..5901cb6 --- /dev/null +++ b/test/issues/146/src/icons.module.scss @@ -0,0 +1,4 @@ +.close { + background-image: url('./close.svg'); + background-repeat: no-repeat; +} diff --git a/test/issues/146/src/index.js b/test/issues/146/src/index.js new file mode 100644 index 0000000..1a56726 --- /dev/null +++ b/test/issues/146/src/index.js @@ -0,0 +1,3 @@ +import styles from './icons.module.scss' + +console.log(styles)