diff --git a/src/utils.js b/src/utils.js index 56464c20..e96bca54 100644 --- a/src/utils.js +++ b/src/utils.js @@ -379,8 +379,9 @@ function getPossibleRequests( // - imports that have media queries. // // The `node-sass` package sends `@import` ending on `.css` to importer, it is bug, so we skip resolve + // Also sass outputs as is `@import "style.css"`, but `@use "style.css"` should include CSS content if (extension === ".css") { - return []; + return fromImport ? [] : [url]; } const dirname = path.dirname(request); @@ -710,7 +711,12 @@ function getWebpackImporter(loaderContext, implementation, includePaths) { return function importer(originalUrl, prev, done) { const { fromImport } = this; - resolve(prev, originalUrl, fromImport) + resolve( + prev, + originalUrl, + // For `node-sass` + typeof fromImport === "undefined" ? true : fromImport, + ) .then((result) => { // Add the result as dependency. // Although we're also using stats.includedFiles, this might come in handy when an error occurs. diff --git a/test/__snapshots__/loader.test.js.no-node-sass.snap b/test/__snapshots__/loader.test.js.no-node-sass.snap index 710c7b3b..6a162a3f 100644 --- a/test/__snapshots__/loader.test.js.no-node-sass.snap +++ b/test/__snapshots__/loader.test.js.no-node-sass.snap @@ -21303,6 +21303,10 @@ exports[`loader should work when "@use" at-rules with extensions ('dart-sass', ' .example-5 { color: aquamarine; +} + +.some-css-module { + background: hotpink; }" `; @@ -21325,6 +21329,10 @@ exports[`loader should work when "@use" at-rules with extensions ('dart-sass', ' .example-5 { color: aquamarine; +} + +.some-css-module { + background: hotpink; }" `; @@ -21347,6 +21355,10 @@ exports[`loader should work when "@use" at-rules with extensions ('dart-sass', ' .example-5 { color: aquamarine; +} + +.some-css-module { + background: hotpink; }" `; @@ -21369,6 +21381,10 @@ exports[`loader should work when "@use" at-rules with extensions ('dart-sass', ' .example-5 { color: aquamarine; +} + +.some-css-module { + background: hotpink; }" `; @@ -21391,6 +21407,10 @@ exports[`loader should work when "@use" at-rules with extensions ('dart-sass', ' .example-5 { color: aquamarine; +} + +.some-css-module { + background: hotpink; }" `; @@ -21413,6 +21433,10 @@ exports[`loader should work when "@use" at-rules with extensions ('dart-sass', ' .example-5 { color: aquamarine; +} + +.some-css-module { + background: hotpink; }" `; @@ -21435,6 +21459,10 @@ exports[`loader should work when "@use" at-rules with extensions ('sass-embedded .example-5 { color: aquamarine; +} + +.some-css-module { + background: hotpink; }" `; @@ -21457,6 +21485,10 @@ exports[`loader should work when "@use" at-rules with extensions ('sass-embedded .example-5 { color: aquamarine; +} + +.some-css-module { + background: hotpink; }" `; @@ -21479,6 +21511,10 @@ exports[`loader should work when "@use" at-rules with extensions ('sass-embedded .example-5 { color: aquamarine; +} + +.some-css-module { + background: hotpink; }" `; @@ -21501,6 +21537,10 @@ exports[`loader should work when "@use" at-rules with extensions ('sass-embedded .example-5 { color: aquamarine; +} + +.some-css-module { + background: hotpink; }" `; @@ -21523,6 +21563,10 @@ exports[`loader should work when "@use" at-rules with extensions ('sass-embedded .example-5 { color: aquamarine; +} + +.some-css-module { + background: hotpink; }" `; @@ -21545,6 +21589,10 @@ exports[`loader should work when "@use" at-rules with extensions ('sass-embedded .example-5 { color: aquamarine; +} + +.some-css-module { + background: hotpink; }" `; diff --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap index e3384832..77ff7805 100644 --- a/test/__snapshots__/loader.test.js.snap +++ b/test/__snapshots__/loader.test.js.snap @@ -23711,6 +23711,10 @@ exports[`loader should work when "@use" at-rules with extensions ('dart-sass', ' .example-5 { color: aquamarine; +} + +.some-css-module { + background: hotpink; }" `; @@ -23733,6 +23737,10 @@ exports[`loader should work when "@use" at-rules with extensions ('dart-sass', ' .example-5 { color: aquamarine; +} + +.some-css-module { + background: hotpink; }" `; @@ -23755,6 +23763,10 @@ exports[`loader should work when "@use" at-rules with extensions ('dart-sass', ' .example-5 { color: aquamarine; +} + +.some-css-module { + background: hotpink; }" `; @@ -23777,6 +23789,10 @@ exports[`loader should work when "@use" at-rules with extensions ('dart-sass', ' .example-5 { color: aquamarine; +} + +.some-css-module { + background: hotpink; }" `; @@ -23799,6 +23815,10 @@ exports[`loader should work when "@use" at-rules with extensions ('dart-sass', ' .example-5 { color: aquamarine; +} + +.some-css-module { + background: hotpink; }" `; @@ -23821,6 +23841,10 @@ exports[`loader should work when "@use" at-rules with extensions ('dart-sass', ' .example-5 { color: aquamarine; +} + +.some-css-module { + background: hotpink; }" `; @@ -23843,6 +23867,10 @@ exports[`loader should work when "@use" at-rules with extensions ('sass-embedded .example-5 { color: aquamarine; +} + +.some-css-module { + background: hotpink; }" `; @@ -23865,6 +23893,10 @@ exports[`loader should work when "@use" at-rules with extensions ('sass-embedded .example-5 { color: aquamarine; +} + +.some-css-module { + background: hotpink; }" `; @@ -23887,6 +23919,10 @@ exports[`loader should work when "@use" at-rules with extensions ('sass-embedded .example-5 { color: aquamarine; +} + +.some-css-module { + background: hotpink; }" `; @@ -23909,6 +23945,10 @@ exports[`loader should work when "@use" at-rules with extensions ('sass-embedded .example-5 { color: aquamarine; +} + +.some-css-module { + background: hotpink; }" `; @@ -23931,6 +23971,10 @@ exports[`loader should work when "@use" at-rules with extensions ('sass-embedded .example-5 { color: aquamarine; +} + +.some-css-module { + background: hotpink; }" `; @@ -23953,6 +23997,10 @@ exports[`loader should work when "@use" at-rules with extensions ('sass-embedded .example-5 { color: aquamarine; +} + +.some-css-module { + background: hotpink; }" `; diff --git a/test/helpers/getCodeFromSass.js b/test/helpers/getCodeFromSass.js index 9c922e16..435224be 100644 --- a/test/helpers/getCodeFromSass.js +++ b/test/helpers/getCodeFromSass.js @@ -452,6 +452,10 @@ async function getCodeFromSass(testId, options, context = {}) { testFolder, "node_modules/webpack-export-field/dist/styles/webpack/file.scss", ); + const pathToCSSModule = path.resolve( + testFolder, + "node_modules/css/some-css-module.css", + ); // Pseudo importer for tests const testImporter = function testImporter(url) { @@ -858,7 +862,6 @@ async function getCodeFromSass(testId, options, context = {}) { } } } - // eslint-disable-next-line no-param-reassign url = url .replace( @@ -939,6 +942,15 @@ async function getCodeFromSass(testId, options, context = {}) { .replace(/^~/, testNodeModules); } + const fromImport = + typeof this.fromImport === "undefined" ? true : this.fromImport; + + if (!fromImport && /css\/some-css-module\.css/.test(url)) { + return { + file: url.replace(/css\/some-css-module\.css/, pathToCSSModule), + }; + } + return { file: url, }; @@ -956,6 +968,7 @@ async function getCodeFromSass(testId, options, context = {}) { } sassOptions.logger = { debug: () => {}, warn: () => {} }; + sassOptions.silenceDeprecations = ["legacy-js-api"]; let css; let map; diff --git a/test/sass/use-with-extension.sass b/test/sass/use-with-extension.sass index 656a3540..05ae32fe 100644 --- a/test/sass/use-with-extension.sass +++ b/test/sass/use-with-extension.sass @@ -16,3 +16,4 @@ @use "../sass/nested/example-5.sass" as module14 // TODO https://github.com/sass/dart-sass/issues/798#issuecomment-521229911 // @use "nested/example-6.SASS" as module15 +@use 'css/some-css-module.css' diff --git a/test/scss/use-with-extension.scss b/test/scss/use-with-extension.scss index a1a7a549..7d5dde99 100644 --- a/test/scss/use-with-extension.scss +++ b/test/scss/use-with-extension.scss @@ -16,3 +16,4 @@ @use "../scss/nested/example-5.scss" as module14; // TODO https://github.com/sass/dart-sass/issues/798#issuecomment-521229911 // @use "nested/example-6.SCSS" as module15; +@use 'css/some-css-module.css';