[next-css] broken escaped characters

[acelaya]

I'm using next-css to load external stylesheets on a next.js site and some special characters are getting broken after being processed by the plugin.

For example, I have a selector like this .\31 2u\28medium\29 which is getting compiled to .\31 2u28medium29.

These selectors are using special characters, like (->\28 or )->\29. It's not probably the best decission, but this is coming from a third party library.

The weird thing is that not all the escaped characters are broken. The \31 one is properly kept.

I guess the issue is more related with webpack's mini-css-extract-plugin, but I didn't find a workaround so far.

[acelaya]

The issue seems to be on webpack's css-loader webpack-contrib/css-loader#578

[acelaya]

Apparently, by installing css-loader ^2.0, the issue is resolved.

However, it produces a new error (ValidationError: CSS Loader Invalid Options) because next-css passes the minimize option to css-loader, which has been removed in this version.

Are there any plans to release a new version of next-css which makes use of the newer version?

[timneutkens]

Hi, thanks for creating an issue. We currently recommend using https://nextjs.org/docs/basic-features/built-in-css-support as the plugins have been deprecated in favor of the built-in support.