fix: allow to import CSS using @use with css extension (#1254)

Author: alexander-akait

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.

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;
 }"
 `;
 

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;
 }"
 `;
 

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;

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'

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';