Ordering issue when @import both less and css

[ajbeaven]

• Operating System: Windows 10
• Node Version: 12.18.3
• NPM Version: 6.14.6
• webpack Version: 5.18.0
• mini-css-extract-plugin Version: 1.3.5

Description

It appears that when both CSS and LESS files are imported using @import, the order is ignored and the CSS always appears first. If I rename first.less to first.css (or second.css to second.less), the output is as expected.

Expected Behavior

dist/main.css:

/* first.css */
/* second.css */

Actual Behavior

dist/main.css:

/* second.css */
/* first.css */

Code

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = () => ({
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.(less|css)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader'
        ]
      },
    ]
  },
  plugins: [
    new MiniCssExtractPlugin(),
  ]
});

src/index.js

import './index.less';

src/index.less

@import './first.less';
@import './second.css';

src/first.less

/* first.less */

src/second.css

/* second.css */

How Do We Reproduce?

1. Clone repo here: https://github.com/ajbeaven/broken-css-order
2. npm i
3. npm run build
4. Look at output in dist/main.css and note the order of the comments in the rendered output

Related issues

The last comments on #184 mentions this problem, but I didn't see anyone created a new issue.

[alexander-akait]

Please read how less works with @import on CSS files.

Original:

@import './first.less';
@import './second.css';

After less you have code:

/* Because `less` keep `@import` on CSS files as is */
@import './second.css';

/* first.less */

After css-loader you have:

/* second.css */
/* first.css */

same logic for sass/stylus because they don't touch @import with the css extension.

[ajbeaven]

Doh. This is pretty non-intuitive. After all, css imports in the correct order when using a module:

@import './first.less';
@import '~second/second.css';

Would be nice to get a warning about this, but alas - that's not your responsibility! Thanks for the confirmation :)

---

For anyone else that comes across this, the workarounds as I see them are:

1. Rename the local .css files to .less if you have control over them or;
2. Use (inline) or (less) import options depending on what you're wanting. eg:

@import (less) 'second.css'
@import (inline) 'second.css'

While both of the second options work to arrange the output CSS correctly in this small repo, just be careful using them as there are some gotchyas explained in various comments on this SO question.

[alexander-akait]

@ajbeaven We can improve docs for less-loader. What do you think?

[ajbeaven]

I think that'd be worthwhile. It's hard to know what repo it should go in since it's not immediately obvious to anyone that doesn't have deep knowledge of how these loaders and webpack plugins interact when it comes to imports in particular. While I doubt I would have come across something like this when searching for solutions to this problem, at least it'll be somewhere you can link to in future.

Probably makes sense under this heading. Feel free to use what I wrote above if you agree with those workarounds.

[alexander-akait]

@ajbeaven Yep, to be honestly I don't think it is the problem related to webpack/webpack plugins/webpack loaders, I think using other bundlers/tools you faced with the same problem.