Cannot @import "bar.scss" when the extension is not .css (4.0.0 regression)

[andersk]

css-loader ≥ 4.0.0 gives Error: Can't resolve 'bar.scss' when I try to @import "bar.scss". It works when the extension is .css but not when it’s .scss. I bisected this to commit edf5347 (#1099). The problem is triggered by the restrictions: [/\.css$/i] setting that was hard-coded here:

css-loader/src/index.js

Lines 50 to 56 in edf5347

	const resolver = this.getResolve({
	mainFields: ['css', 'style', 'main', '...'],
	mainFiles: ['index', '...'],
	extensions: ['.css'],
	restrictions: [/\.css$/i],
	conditionNames: ['style'],
	});

• Operating System: NixOS 20.09
• Node Version: 14.7.0
• NPM Version: 6.14.7
• webpack Version: 4.44.1
• css-loader Version: 4.2.1

Expected Behavior

With css-loader 3.6.0:

$ npx webpack
Hash: 18aeb4131231a0da692b
Version: webpack 4.44.1
Time: 122ms
Built at: 08/12/2020 4:28:49 PM
  Asset      Size  Chunks             Chunk Names
main.js  8.05 KiB    main  [emitted]  main
Entrypoint main = main.js
[./foo.scss] 396 bytes {main} [built]
[./node_modules/css-loader/dist/cjs.js!./bar.scss] 278 bytes {main} [built]
    + 1 hidden module
Done in 0.46s.

Actual Behavior

With css-loader ≥ 4.0.0:

$ npx webpack 
Hash: 8a377e383c6ebf971c58
Version: webpack 4.44.1
Time: 120ms
Built at: 08/12/2020 4:30:02 PM
  Asset      Size  Chunks             Chunk Names
main.js  6.36 KiB    main  [emitted]  main
Entrypoint main = main.js
[./foo.scss] 2.58 KiB {main} [built] [failed] [1 error]

ERROR in ./foo.scss
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve 'bar.scss' in '/tmp/b'
    at /tmp/b/node_modules/enhanced-resolve/lib/Resolver.js:209:21
    at /tmp/b/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/tmp/b/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /tmp/b/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
    at /tmp/b/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/tmp/b/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /tmp/b/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/tmp/b/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
    at /tmp/b/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
    at /tmp/b/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/tmp/b/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:26:1)
    at /tmp/b/node_modules/enhanced-resolve/lib/ModuleKindPlugin.js:30:40
    at /tmp/b/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/tmp/b/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /tmp/b/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/tmp/b/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /tmp/b/node_modules/enhanced-resolve/lib/forEachBail.js:30:14
    at /tmp/b/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/tmp/b/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /tmp/b/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
    at /tmp/b/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/tmp/b/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /tmp/b/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/tmp/b/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
    at /tmp/b/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
    at /tmp/b/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/tmp/b/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:14:1)
    at /tmp/b/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/tmp/b/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
    at /tmp/b/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43

Code

// webpack.config.js
module.exports = {
  mode: "development",
  entry: "./foo.scss",
  module: {
    rules: [{ test: /\.s?css$/, use: "css-loader" }],
  },
};

/* foo.scss */
@import "bar.scss"

/* bar.scss */
html {
  background: red;
}

How Do We Reproduce?

Create the three files above and run npm i webpack webpack-cli css-loader; npx webpack.

[catLotto]

Same in 4.2.1.

[alexander-akait]

Yes, it is expected, I recommended refactor code and avoid it, without restrictions you can import JS file, one of the reasons why ES modules require extensions import test from '/scripts/test.mjs' is same, it is not safe, it is misleading, it is weird

[andersk]

I’m confused by this response…surely you aren’t recommending that all Webpack users abandon Sass, SCSS, Less, Stylus, PostCSS merely because “it is weird”? If not, how would you like this to be solved?

Note that my proposed patch does not allow @import "test" to implicitly import a file named test.js or test.mjs—it removes restrictions, not extensions. It allows you to explicitly @import "test.js", in which case test.js will be interpreted with CSS syntax (or whatever syntax is expected by importLoaders), which is exactly what would happen in a browser if a bundler were not in use.

[alexander-akait]

I’m confused by this response…surely you aren’t recommending that all Webpack users abandon Sass, SCSS, Less, Stylus, PostCSS merely because “it is weird”? If not, how would you like this to be solved?

Where I say it? I recommend do not use @import './file.scss' inside CSS file, it is weird, if you try to use it in browser, it was broken. Just migrate on SCSS fully, don't mix CSS and SCSS imports

Note that my proposed patch does not allow @import "test" to implicitly import a file named test.js or test.mjs—it removes restrictions, not extensions. It allows you to explicitly @import "test.js", in which case test.js will be interpreted with CSS syntax (or whatever syntax is expected by importLoaders), which is exactly what would happen in a browser if a bundler were not in use.

test doesn't mark sense here, when you write @import 'bootstrap', we should load CSS version, not SCSS, without restrictions we will do invalid resolution and you will open issue about it

[andersk]

Just migrate on SCSS fully, don't mix CSS and SCSS imports

I’m not mixing CSS and SCSS; this is about importing bar.scss from foo.scss. It’s true that I’ve omitted the configuration for SCSS above in the interest of minimizing the test case, but my actual configuration has

{
  loader: "css-loader",
  options: {
    importLoaders: 1,
    sourceMap: true,
  },
},
{
  loader: "postcss-loader",
  options: {
    sourceMap: true,
  },
},

with PostCSS using the postcss-scss parser.

/* postcss.config.js */
module.exports = ({file}) => ({
  parser: file.extname === ".scss" ? "postcss-scss" : false,
  plugins: {
    "postcss-nested": {},
    "postcss-extend-rule": {},
    "postcss-simple-vars": {},
    "postcss-calc": {},
    autoprefixer: {},
  },
});

Perhaps this is different from a typical sass-loader configuration in that sass-loader resolves @import itself and this PostCSS configuration does not. This is intentional in order to allow Webpack chunk splitting to work. Is that weird?

test doesn't mark sense here, when you write @import 'bootstrap', we should load CSS version, not SCSS, without restrictions we will do invalid resolution and you will open issue about it

In what way would @import 'bootstrap' get the SCSS version? The resolver configuration has mainFields: ['css', 'style', 'main', '...'], and bootstrap/package.json has "style": "dist/css/bootstrap.css" (and "sass": "scss/bootstrap.scss", but nothing in the configuration causes that to be used).

[alexander-akait]

Please create reproducible test repo, restriction for css-loader do nothing for sass-loader, they used different resolvers and have different logic

[alexander-akait]

You should not use postcss-scss parser for scsswhen you use postcss, because sass-loader return only valid CSS