diff --git a/src/plugin.ts b/src/plugin.ts index a267798..2698898 100755 --- a/src/plugin.ts +++ b/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 diff --git a/src/render.ts b/src/render.ts index 0465537..f105f10 100644 --- a/src/render.ts +++ b/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) diff --git a/src/utils.ts b/src/utils.ts index 272f6cd..bfc6bf3 100755 --- a/src/utils.ts +++ b/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, '/')}` diff --git a/test/bugfixes.test.ts b/test/bugfixes.test.ts index 651329e..76f6f97 100644 --- a/test/bugfixes.test.ts +++ b/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')) + }) }) diff --git a/test/issues/166/app.component.sass b/test/issues/166/app.component.sass new file mode 100644 index 0000000..6207a3d --- /dev/null +++ b/test/issues/166/app.component.sass @@ -0,0 +1,4 @@ +$_radius: 3px + +.button + border-radius: $_radius \ No newline at end of file diff --git a/test/issues/166/common.mixins.scss b/test/issues/166/common.mixins.scss new file mode 100644 index 0000000..5d27d0d --- /dev/null +++ b/test/issues/166/common.mixins.scss @@ -0,0 +1,5 @@ +$_padding: 10px; + +@mixin padded { + padding: $_padding; +} \ No newline at end of file diff --git a/test/issues/166/common.styles.css b/test/issues/166/common.styles.css new file mode 100644 index 0000000..d5fa135 --- /dev/null +++ b/test/issues/166/common.styles.css @@ -0,0 +1,3 @@ +a:active { + color: crimson; +} \ No newline at end of file diff --git a/test/issues/166/index.scss b/test/issues/166/index.scss new file mode 100644 index 0000000..dea4840 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/test/issues/166/snapshot/index.css b/test/issues/166/snapshot/index.css new file mode 100644 index 0000000..48bd2dd --- /dev/null +++ b/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; +}