Merge pull request #167 from Rubik0000/fix/import-multiple-dots

Issue #166 Fix import of sass files without extension containing multiple dots (like common.mixins.scss)

Author: glromeo

src/plugin.ts

@@ -1,13 +1,11 @@
 import {OnLoadResult, Plugin} from 'esbuild'
 import {dirname} from 'path'
 import {SassPluginOptions} from './index'
-import {getContext, makeModule, modulesPaths, parseNonce, posixRelative} from './utils'
+import {getContext, makeModule, modulesPaths, parseNonce, posixRelative, DEFAULT_FILTER} from './utils'
 import {useCache} from './cache'
 import {createRenderer} from './render'
 import {initAsyncCompiler} from 'sass-embedded'
 
-const DEFAULT_FILTER = /\.(s[ac]ss|css)$/
-
 /**
  *
  * @param options

src/render.ts

@@ -1,6 +1,6 @@
 import {dirname, parse, relative, resolve, sep} from 'path'
 import fs, {readFileSync} from 'fs'
-import {createResolver, fileSyntax, sourceMappingURL} from './utils'
+import {createResolver, fileSyntax, sourceMappingURL, DEFAULT_FILTER} from './utils'
 import {PartialMessage} from 'esbuild'
 import * as sass from 'sass-embedded'
 import {ImporterResult, initAsyncCompiler} from 'sass-embedded'
@@ -53,7 +53,7 @@ export function createRenderer(compiler: AsyncCompiler, options: SassPluginOptio
   function resolveRelativeImport(loadPath: string, filename: string): string | null {
     const absolute = resolve(loadPath, filename)
     const pathParts = parse(absolute)
-    if (pathParts.ext) {
+    if (DEFAULT_FILTER.test(pathParts.ext)) {
       return resolveImport(pathParts.dir + sep + pathParts.name, pathParts.ext)
     } else {
       return resolveImport(absolute)

src/utils.ts

@@ -9,6 +9,8 @@ import {SyncOpts} from 'resolve'
 
 const cwd = process.cwd()
 
+export const DEFAULT_FILTER = /\.(s[ac]ss|css)$/
+
 export const posixRelative = require('path').sep === '/'
   ? (path: string) => `css-chunk:${relative(cwd, path)}`
   : (path: string) => `css-chunk:${relative(cwd, path).replace(/\\/g, '/')}`

test/bugfixes.test.ts

@@ -311,4 +311,20 @@ describe('tests covering github issues', function () {
       'names': []
     })
   })
+
+  it('#166 Import of sass files without extension containing multiple dots (like common.mixins.scss)', async function () {
+    const options = useFixture('../issues/166')
+
+    await esbuild.build({
+      ...options,
+      entryPoints: ['./index.scss'],
+      outdir: './out',
+      bundle: true,
+      plugins: [
+        sassPlugin()
+      ]
+    })
+
+    expect(readTextFile('out/index.css')).to.equalIgnoreSpaces(readTextFile('snapshot/index.css'))
+  })
 })

test/issues/166/app.component.sass

@@ -0,0 +1,4 @@
+$_radius: 3px
+
+.button
+    border-radius: $_radius

test/issues/166/common.mixins.scss

@@ -0,0 +1,5 @@
+$_padding: 10px;
+
+@mixin padded {
+    padding: $_padding;
+}

test/issues/166/common.styles.css

@@ -0,0 +1,3 @@
+a:active {
+    color: crimson;
+}

test/issues/166/index.scss

@@ -0,0 +1,12 @@
+@use "./common.mixins" as c;
+@use "./app.component";
+@use "./common.styles";
+
+$font-stack: Helvetica, sans-serif;
+$primary-color: #333;
+
+body {
+  font: 100% $font-stack;
+  color: $primary-color;
+  @include c.padded;
+}

test/issues/166/snapshot/index.css

@@ -0,0 +1,12 @@
+/* index.scss */
+.button {
+  border-radius: 3px;
+}
+a:active {
+  color: crimson;
+}
+body {
+  font: 100% Helvetica, sans-serif;
+  color: #333;
+  padding: 10px;
+}