Bundling @import'ed CSS files into single file

[lukaswagner]

First off, thank you for this great plugin. I'm glad to finally switch away from the outdated pug-loader.

One use case that doesn't seem to be supported, however, is the combination of @import'ed CSS files into a single file. Splitting these files up may happen for different reasons, e.g. separating semantically distinct chunks (styling navbar/content/footer) for easier maintainability, or to reuse sections in multiple entry points. However, when bundling, I'd prefer to resolve the @import statements into a single file. Especially for multiple small CSS files, this improves loading times by reducing the number of requests necessary. The bundled file may also yield a better compression ratio when hosting gzip'ed files.

Previously, I've been using mini-css-extract-plugin, which provided the behavior described above. As pug-plugin claims to be a replacement, I'd expect there to be a way to imitate this. However, the best I could achieve is outputting all CSS files separately (which may be unintended, see below).

When trying to use @import-rules, an error is thrown. Is this based on a deliberate decision to not support this CSS feature, or is it just not yet implemented? If this is working as intended, it would be great to clearly state this in the README.md. I've only found a note about using @use instead of @import in SASS, however, I'm using plain CSS (where @import isn't deprecated).

config/error inconsistencies

There seems to be an unintended way of circumventing the @import-error. Again, if this is indeed intended, it would be great if this behaviour was documented somewhere.

first case: css-loader options configured as requested

{
    test: /\.css$/,
    use: { loader: 'css-loader', options: { import: false } }
},

This results in only the main CSS file being emitted, with unhandled @import rules. This fails at runtime, as the required sub files aren't emitted.

second case: empty css-loader options

{
    test: /\.css$/,
    use: { loader: 'css-loader', options: { } }
},

As expected, this fails at build time with the following error:

The handling of @import at-rules in CSS is not supported. Disable the 'import' option in 'css-loader':

third case: no css-loader options

{
    test: /\.css$/,
    use: { loader: 'css-loader' }
},

When not providing any options to css-loader, pug-plugin handles the imported files without issue. Both the main file and the sub files are emitted. While this configuration works, this behavior does not seem to be intended, as it is fairly surprising that providing an empty config differs from providing no config.

[webdiscus]

Hallo Lukas,

using @import in pure CSS is not deprecated but nobody use it. It's very very bad practice.
Every @import in CSS make extra new request to server and CSS will be loaded with a lag, what for UX is very ugly.
All web developers strongly not recommend to use @import in CSS.
Also, today using of @import in CSS is forbidden.

The Pug plugin deliberately does not support this dead feature because it is difficult to implement the resolving of imported CSS and never used by anyone.

If you will use separate CSS files, then use sass with sass-loader.

For example, you has a CSS main.css file:

@import 'button.css';
h1 {
  color: red;
}

then change the extension to main.scss and replace @import with @use

@use 'path/to/button.css';
h1 {
  color: red;
}

The path for included file via @use is a relative path on the server.

But, you can pass throw the unhandled @import 'style.css' into resulting CSS file.
Add the import: false option to css-loader to disable handling of @import at-rules in css-loader:

{
  test: /.(css)$/i,
  use: [
    {
      loader: 'css-loader',
      options: {
        import: false,
      },
    },
  ],
},

Note: in this case imported CSS file must be manually copied to dist folder using the copy-webpack-plugin.

Please try this trick.

P.S. I will update README with this info.

[lukaswagner]

Thanks for your reply. I understand your point and completely agree that using @import at runtime is bad practice. mini-css-extract-plugin basically allowed me to use @import as a plain CSS version of SASS @use. But I can totally understand that you don't want to support this approach. I will look to SASS to solve this issue, thank you for the hint.

[webdiscus]

I wanted to implement @import support in CSS, but it's really very difficult. I tried but it wasn't easy and I gave up. I simply did not have time for this unimportant function.

The problem is with css-loader. It interprets @import in a very complex way.

And yes, mini-css-extract-plugin has mega complex logic to support @import in CSS.
The sass-loader implement the @import and @use in very easy way.

[lukaswagner]

I solved this with a simple custom loader which is run before css-loader. It uses a crude file concatenation approach, but works for my use case.

[webdiscus]

@lukaswagner

thanks for your solution!