v2.1.0

* removed onResolve and namespaces
* cross env fixes
* issue 48 leftovers

.gitignore

@@ -47,3 +47,4 @@ lib/
 *.iml
 
 .idea/
+/.nyc_output/

package.json

@@ -1,6 +1,6 @@
 {
   "name": "esbuild-sass-plugin",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "description": "esbuild plugin for sass/scss files supporting both css loader and css result import (lit-element)",
   "main": "lib/index.js",
   "keywords": [
@@ -37,18 +37,18 @@
     ]
   },
   "dependencies": {
-    "esbuild": "^0.14.8",
-    "sass": "^1.45.1"
+    "esbuild": "^0.14.13",
+    "sass": "^1.49.0"
   },
   "devDependencies": {
-    "@types/node": "^17.0.4",
+    "@types/node": "^17.0.10",
     "@types/sass": "^1.43.1",
     "mocha-toolkit": "^1.0.7",
     "postcss": "^8.4.5",
     "postcss-modules": "^4.3.0",
     "postcss-url": "^10.1.3",
     "source-map": "^0.7.3",
     "ts-node": "^10.4.0",
-    "typescript": "^4.5.4"
+    "typescript": "^4.5.5"
   }
 }

src/plugin.ts

@@ -1,10 +1,12 @@
-import {OnLoadResult, OnResolveArgs, Plugin} from 'esbuild'
+import {OnLoadResult, Plugin} from 'esbuild'
 import {dirname, resolve} from 'path'
 import {SassPluginOptions} from './index'
 import {getContext, makeModule, modulesPaths, RELATIVE_PATH} from './utils'
 import {useCache} from './cache'
 import {createRenderer} from './render'
 
+const DEFAULT_FILTER = /\.(s[ac]ss|css)$/
+
 /**
  *
  * @param options
@@ -43,26 +45,21 @@ export function sassPlugin(options: SassPluginOptions = {}): Plugin {
     }
   }
 
+  const pluginName = 'sass-plugin'
+
   return {
-    name: 'sass-plugin',
-    setup({initialOptions, onLoad, onResolve}) {
+    name: pluginName,
+    setup({initialOptions, onLoad}) {
 
       const {
-        namespace,
         sourcemap,
         watched
       } = getContext(initialOptions)
 
-      onResolve({filter: options.filter ?? /\.(s[ac]ss|css)$/}, (args) => {
-        const {resolveDir, path, importer}: OnResolveArgs = args
-        const basedir = resolveDir || dirname(importer)
-        return {path: resolvePath(basedir, path), namespace, pluginData: args}
-      })
-
-      const renderSync = createRenderer(options, options.sourceMap ?? sourcemap)
+      const renderSync = createRenderer(options, sourcemap)
       const transform = options.transform
 
-      onLoad({filter: /./, namespace}, useCache(options, async path => {
+      onLoad({filter: options.filter ?? DEFAULT_FILTER}, useCache(options, async path => {
         try {
           let {css, watchFiles} = renderSync(path)
 

src/render.ts

@@ -1,9 +1,9 @@
-import {dirname, resolve, sep, parse} from 'path'
+import {dirname, resolve, sep, parse, relative} from 'path'
 import fs, {readFileSync} from 'fs'
 import {fileSyntax, sourceMappingURL} from './utils'
 import * as sass from 'sass'
 import {ImporterResult} from 'sass'
-import {pathToFileURL} from 'url'
+import {fileURLToPath, pathToFileURL} from 'url'
 import {SassPluginOptions} from './index'
 
 export type RenderSync = (path: string) => RenderResult
@@ -142,6 +142,14 @@ export function createRenderer(options: SassPluginOptions = {}, sourcemap: boole
 
     const cssText = css.toString()
 
+    if (sourceMap) {
+      sourceMap.sourceRoot = basedir
+      sourceMap.sources[sourceMap.sources.length-1] = pathToFileURL(path).href
+      sourceMap.sources = sourceMap.sources.map(source => {
+        return source.startsWith('file://') ? relative(basedir, fileURLToPath(source)) : source
+      })
+    }
+
     return {
       css: sourcemap ? `${cssText}\n${sourceMappingURL(sourceMap)}` : cssText,
       watchFiles: [path, ...loadedUrls.map(url => sep === '/' ? url.pathname : url.pathname.slice(1))]

test/e2e.test.ts

@@ -3,7 +3,7 @@ import {postcssModules, sassPlugin} from '../src'
 import {statSync} from 'fs'
 import {consumeSourceMap, readCssFile, readJsonFile, readTextFile, useFixture} from './test-toolkit'
 
-describe('unit tests', function () {
+describe('e2e tests', function () {
 
   this.timeout(5000)
 
@@ -41,7 +41,7 @@ describe('unit tests', function () {
 
     await esbuild.build({
       ...options,
-      entryPoints: ['./index.js'],
+      entryPoints: ['./src/index.js'],
       outdir: './out',
       bundle: true,
       sourcemap: 'both',
@@ -89,16 +89,10 @@ describe('unit tests', function () {
         line: 4, column: 0, lastColumn: null
       })
 
-      let expected = `data:;charset=utf-8,@import%20%22~bootstrap/scss/bootstrap.scss%22;${
-        process.platform === 'win32'
-          ? '%0D%0A%0D%0Abody%20%7B%0D%0A%20%20padding:%201em;%0D%0A%7D'
-          : '%0A%0Abody%20%7B%0A%20%20padding:%201em;%0A%7D'
-      }`
-
       expect(
         consumer.originalPositionFor({line: 9749, column: 0})
       ).to.eql({
-        source: expected,
+        source: `../src/entrypoint.scss`,
         line: 3,
         column: 0,
         name: null

test/fixture/bootstrap/build.js

@@ -5,7 +5,7 @@ const {cleanFixture, logSuccess, logFailure} = require('../utils')
 cleanFixture(__dirname)
 
 esbuild.build({
-  entryPoints: ['index.js'],
+  entryPoints: ['src/index.js'],
   outdir: 'out',
   bundle: true,
   format: 'esm',

test/fixture/bootstrap/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bootstrap-fixture",
   "version": "1.0.0",
-  "main": "index.js",
+  "main": "src/index.js",
   "license": "MIT",
   "dependencies": {
     "bootstrap": "^5.1.3"

test/fixture/bootstrap/src/entrypoint.scss

@@ -0,0 +1,5 @@
+@import "../../node_modules/bootstrap/scss/bootstrap";
+
+body {
+  padding: 1em;
+}

test/fixture/variables/snapshot/index-css.css

@@ -1,4 +1,4 @@
-/* sass-plugin-0:D:\Workspace\esbuild-sass-plugin\test\fixture\variables\style.css */
+/* style.css */
 body {
   font: 100% Helvetica, sans-serif;
   color: #333;

test/fixture/variables/snapshot/index-sass.css

@@ -1,4 +1,4 @@
-/* sass-plugin-0:D:\Workspace\esbuild-sass-plugin\test\fixture\variables\style.sass */
+/* style.sass */
 body {
   font: 100% Helvetica, sans-serif;
   color: #333;

test/fixture/variables/snapshot/index-scss.css

@@ -1,4 +1,4 @@
-/* sass-plugin-0:D:\Workspace\esbuild-sass-plugin\test\fixture\variables\style.scss */
+/* style.scss */
 body {
   font: 100% Helvetica, sans-serif;
   color: #333;

test/issues/48/.gitignore

@@ -0,0 +1,2 @@
+/build
+!/lib

test/issues/48/build.js

@@ -0,0 +1,47 @@
+const path = require('path')
+const esbuild = require('esbuild')
+const { sassPlugin, postcssModules } = require('../../../lib')
+
+const build = async () => {
+  const isProd = process.env.NODE_ENV === 'production'
+
+  const result = await esbuild.build({
+    platform: 'browser',
+    entryPoints: [`${__dirname}/src/index.js`],
+    publicPath: '/',
+    outdir: `${__dirname}/build`,
+    legalComments: 'external',
+    bundle: true,
+    treeShaking: true,
+    minify: isProd,
+    write: true,
+    format: 'esm',
+    loader: {
+      '.js': 'jsx',
+      // '.jsx': 'jsx',
+      // '.ts': 'ts',
+      // '.tsx': 'ts',
+      '.png': 'file',
+      '.jpg': 'file',
+      '.jpeg': 'file',
+      '.svg': 'file',
+      '.woff2': 'file',
+      '.ttf': 'file'
+    },
+    target: 'es2018',
+    plugins: [
+      sassPlugin({
+        // outputStyle: isProd ? 'compressed' : 'expanded',
+        // transform: postcssModules({
+        //   // ...put here the options for postcss-modules: https://github.com/madyankin/postcss-modules
+        // })
+        precompile(source, pathname) {
+          console.log("precompile:", pathname)
+          return source.replace(/(url\(['"]?)(\.\.?\/)([^'")]+['"]?\))/g, `$1${path.dirname(pathname)}/$2$3`)
+        }
+      })
+    ]
+  })
+}
+
+build()

test/issues/48/fonts/fonts.scss

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: 'Nunito Sans';
+  src: url('./NunitoSans-Light.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+

test/issues/48/lib/SomeLib/builtIn.css

@@ -0,0 +1,3 @@
+body {
+  background: #ccc;
+}

test/issues/48/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "issue-48",
+  "version": "1.0.0",
+  "private": true
+}

test/issues/48/src/_variables.scss

@@ -0,0 +1 @@
+$bgColor: #ccc;

test/issues/48/src/components/TestComponent/TestComponent.js

@@ -0,0 +1,3 @@
+import './TestComponent.scss'
+
+console.info('Hello from TestComponent')

test/issues/48/src/components/TestComponent/TestComponent.scss

@@ -0,0 +1,5 @@
+@import '../../variables.scss';
+
+body {
+  background: $bgColor;
+}

test/issues/48/src/index.js

@@ -0,0 +1,6 @@
+import './style.scss'
+
+import './components/TestComponent/TestComponent'
+
+console.info('Hello world')
+

test/issues/48/src/style.scss

@@ -0,0 +1,6 @@
+@import '../fonts/fonts.scss';
+
+html.darkMode {
+  @import '../lib/SomeLib/builtIn'; // Note the extension should not be added, this is intended to use namespace feature
+}
+

test/issues/61/build.js

@@ -0,0 +1,17 @@
+const {build} = require("esbuild");
+const {sassPlugin} = require("../../../lib");
+const path = require("path");
+const {cleanFixture, logSuccess, logFailure} = require('../../fixture/utils')
+
+cleanFixture(__dirname)
+
+let last;
+
+build({
+    entryPoints: ["src/index.jsx"],
+    outdir: "out",
+    bundle: true,
+    plugins: [
+        sassPlugin({})
+    ]
+}).then(logSuccess, logFailure)

test/issues/61/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Issue 61</title>
+    <link rel="stylesheet" href="out/index.css">
+</head>
+<body>
+    <h1>TODO: THIS TEST IS WIP</h1>
+    <div id="app"></div>
+    <script src="out/index.js"></script>
+</body>
+</html>

test/issues/61/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "issue-61",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "swiper": "^7.4.1"
+  }
+}

test/issues/61/src/index.jsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import ReactDOM from "react-dom";
+import Swiper, {Navigation, Pagination} from 'swiper';
+import 'swiper/scss';
+
+import 'swiper/scss/navigation';
+import 'swiper/css/pagination';
+
+Swiper.use([Navigation, Pagination]);
+
+function App() {
+    return (
+        <div className="swiper">
+            <div className="swiper-wrapper">
+                <div className="swiper-slide">Slide 1</div>
+                <div className="swiper-slide">Slide 2</div>
+                <div className="swiper-slide">Slide 3</div>
+            </div>
+            <div className="swiper-pagination"/>
+            <div className="swiper-button-prev"/>
+            <div className="swiper-button-next"/>
+            <div className="swiper-scrollbar"/>
+        </div>
+    )
+}
+
+ReactDOM.render(<App/>, document.querySelector("#app"));

test/issues/package.json

@@ -11,6 +11,7 @@
     "48"
   ],
   "dependencies": {
+    "esbuild": "^0.14.13",
     "postcss": "^8.3.11",
     "postcss-modules": "^4.2.2",
     "postcss-url": "^10.1.3",