Loaders are not compiled chronologically

Question

From docs:

A chain of loaders are compiled chronologically. The first loader in a chain of loaders returns a value to the next.

Let's take the following webpack config, for example.

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader'},
          { loader: 'css-loader'}
        ]
      }
    ]
  }

According to the docs the style-loader runs first then pipes its output to css-loader (because of the chronological order). But it's not how it works. In reality css-loader loads stylesheets first then pipes the result to style-loader which then appends them to a html page.

If I change the order of loaders I get an error when building:

 { loader: 'css-loader'},
 { loader: 'style-loader'}

Error:

ERROR in ./src/style.css
Module build failed: Unknown word (5:1)

  3 | // load the styles
  4 | var content = require("!!./style.css");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
    | ^
  6 | // Prepare cssTransformation
  7 | var transform;
  8 | 

 @ ./src/index.js 1:14-36

What am I missing? Am I not undestanding chronological order correctly?

Answer 1

Here are different docs

When multiple loaders are chained, it is important to remember that they are executed in reverse order -- either right to left or bottom to top depending on array format.

Now it makes sense