From 1655baf9438c5f544751f2293c7d06ff2aa511df Mon Sep 17 00:00:00 2001 From: Evilebot Tnawi Date: Thu, 16 Apr 2020 19:09:23 +0300 Subject: [PATCH] fix: resolution logic (#831) --- src/getPossibleRequests.js | 38 +++++++----------------- test/__snapshots__/loader.test.js.snap | 40 ++++++++++++++++++++++++++ test/loader.test.js | 16 +++++++++++ test/sass/__file.sass | 2 ++ test/sass/import-underscore-file.sass | 1 + test/scss/__file.scss | 3 ++ test/scss/import-underscore-file.scss | 1 + 7 files changed, 74 insertions(+), 27 deletions(-) create mode 100644 test/sass/__file.sass create mode 100644 test/sass/import-underscore-file.sass create mode 100644 test/scss/__file.scss create mode 100644 test/scss/import-underscore-file.scss diff --git a/src/getPossibleRequests.js b/src/getPossibleRequests.js index 77f34841..0cb54c94 100644 --- a/src/getPossibleRequests.js +++ b/src/getPossibleRequests.js @@ -22,15 +22,16 @@ const matchModuleImport = /^~([^/]+|[^/]+\/|@[^/]+[/][^/]+|@[^/]+\/?|@[^/]+[/][^ */ export default function getPossibleRequests(url) { const request = utils.urlToRequest(url); - // Keep in mind: ext can also be something like '.datepicker' when the true extension is omitted and the filename contains a dot. - // @see https://github.com/webpack-contrib/sass-loader/issues/167 - const ext = path.extname(request).toLowerCase(); // In case there is module request, send this to webpack resolver if (matchModuleImport.test(url)) { return [request, url]; } + // Keep in mind: ext can also be something like '.datepicker' when the true extension is omitted and the filename contains a dot. + // @see https://github.com/webpack-contrib/sass-loader/issues/167 + const ext = path.extname(request).toLowerCase(); + // Because @import is also defined in CSS, Sass needs a way of compiling plain CSS @imports without trying to import the files at compile time. // To accomplish this, and to ensure SCSS is as much of a superset of CSS as possible, Sass will compile any @imports with the following characteristics to plain CSS imports: // - imports where the URL ends with .css. @@ -55,34 +56,17 @@ export default function getPossibleRequests(url) { return [`${dirname}/_${basename}`, `${dirname}/${basename}`, url]; } - // In case there is no file extension and filename starts with `_`: - // - // 1. Try to resolve files with `scss`, `sass` and `css` extensions. - // 2. Try to resolve directory with `_index` or `index` filename. - // 3. Send the original url to webpack resolver, maybe it's alias. - if (basename.startsWith('_')) { - return [ - `${request}.scss`, - `${request}.sass`, - `${request}.css`, - request, - url, - ]; - } - - // In case there is no file extension and filename doesn't start with `_`: + // In case there is no file extension // - // 1. Try to resolve file starts with `_` and with extensions - // 2. Try to resolve file with extensions - // 3. Try to resolve directory with `_index` or `index` filename. - // 4. Send a original url to webpack resolver, maybe it is alias. + // 1. Try to resolve files starts with `_` and normal with order `sass`, `scss` and `css` + // 2. Send a original url to webpack resolver, maybe it is alias. return [ - `${dirname}/_${basename}.scss`, `${dirname}/_${basename}.sass`, + `${dirname}/${basename}.sass`, + `${dirname}/_${basename}.scss`, + `${dirname}/${basename}.scss`, `${dirname}/_${basename}.css`, - `${request}.scss`, - `${request}.sass`, - `${request}.css`, + `${dirname}/${basename}.css`, request, url, ]; diff --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap index 934b8bf5..25bfa367 100644 --- a/test/__snapshots__/loader.test.js.snap +++ b/test/__snapshots__/loader.test.js.snap @@ -1,5 +1,45 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`loader should load files with underscore in the name (dart-sass) (sass): css 1`] = ` +"a { + color: red; +}" +`; + +exports[`loader should load files with underscore in the name (dart-sass) (sass): errors 1`] = `Array []`; + +exports[`loader should load files with underscore in the name (dart-sass) (sass): warnings 1`] = `Array []`; + +exports[`loader should load files with underscore in the name (dart-sass) (scss): css 1`] = ` +"a { + color: red; +}" +`; + +exports[`loader should load files with underscore in the name (dart-sass) (scss): errors 1`] = `Array []`; + +exports[`loader should load files with underscore in the name (dart-sass) (scss): warnings 1`] = `Array []`; + +exports[`loader should load files with underscore in the name (node-sass) (sass): css 1`] = ` +"a { + color: red; } +" +`; + +exports[`loader should load files with underscore in the name (node-sass) (sass): errors 1`] = `Array []`; + +exports[`loader should load files with underscore in the name (node-sass) (sass): warnings 1`] = `Array []`; + +exports[`loader should load files with underscore in the name (node-sass) (scss): css 1`] = ` +"a { + color: red; } +" +`; + +exports[`loader should load files with underscore in the name (node-sass) (scss): errors 1`] = `Array []`; + +exports[`loader should load files with underscore in the name (node-sass) (scss): warnings 1`] = `Array []`; + exports[`loader should load only sass/scss files for the "mainFiles" (dart-sass) (sass): css 1`] = ` "a { color: red; diff --git a/test/loader.test.js b/test/loader.test.js index 9283c66b..b9dd21dd 100644 --- a/test/loader.test.js +++ b/test/loader.test.js @@ -639,6 +639,22 @@ describe('loader', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); + it(`should load files with underscore in the name (${implementationName}) (${syntax})`, async () => { + const testId = getTestId('import-underscore-file', syntax); + const options = { + implementation: getImplementationByName(implementationName), + }; + const compiler = getCompiler(testId, { loader: { options } }); + const stats = await compile(compiler); + const codeFromBundle = getCodeFromBundle(stats, compiler); + const codeFromSass = getCodeFromSass(testId, options); + + expect(codeFromBundle.css).toBe(codeFromSass.css); + expect(codeFromBundle.css).toMatchSnapshot('css'); + expect(getWarnings(stats)).toMatchSnapshot('warnings'); + expect(getErrors(stats)).toMatchSnapshot('errors'); + }); + if (implementation === dartSass) { it(`should output an understandable error with a problem in "@use" (${implementationName}) (${syntax})`, async () => { const testId = getTestId('error-use', syntax); diff --git a/test/sass/__file.sass b/test/sass/__file.sass new file mode 100644 index 00000000..aabe2c18 --- /dev/null +++ b/test/sass/__file.sass @@ -0,0 +1,2 @@ +a + color: red diff --git a/test/sass/import-underscore-file.sass b/test/sass/import-underscore-file.sass new file mode 100644 index 00000000..b67f24f9 --- /dev/null +++ b/test/sass/import-underscore-file.sass @@ -0,0 +1 @@ +@import '_file' diff --git a/test/scss/__file.scss b/test/scss/__file.scss new file mode 100644 index 00000000..fdece7b4 --- /dev/null +++ b/test/scss/__file.scss @@ -0,0 +1,3 @@ +a { + color: red; +} diff --git a/test/scss/import-underscore-file.scss b/test/scss/import-underscore-file.scss new file mode 100644 index 00000000..aa9ccc85 --- /dev/null +++ b/test/scss/import-underscore-file.scss @@ -0,0 +1 @@ +@import '_file';