Css-loader: @import invalidates @charset declaration

Created on 19 Oct 2020 · 12Comments · Source: webpack-contrib/css-loader

Operating System: Windows 10
Node Version: v14.14.0
NPM Version: 6.14.8
webpack Version: 5.1.3
css-loader Version: 5.0.0

Expected Behavior

The @charset declaration at the top of the generated CSS file.

Actual Behavior

The @charset declaration is below the imported CSS. To determine fallback encoding the @charset declaration must be at the start of the file (https://drafts.csswg.org/css-syntax-3/#determine-the-fallback-encoding).

The sass-loader automatically prepends @charset "UTF-8" (or BOM if in compressed mode). This information seems to be lost after sending the CSS string through the css-loader.

Code

Expected CSS:

@charset "utf-8";

p {
    color: red;
    font-size: 72px;
}

.greet::before {
    color: blue;
    content: 'Привет, ';
}

Actual CSS:

p {
    color: red;
    font-size: 72px;
}
@charset "utf-8";

.greet::before {
    color: blue;
    content: 'Привет, ';
}

How Do We Reproduce?

https://github.com/intemarkus/css-loader-charset-error

npm install
npm run build
Open dist/index.html in browser with file://.../css-loader-charset-error/dist/index.html

In some browsers (Chrome, IE, Edge) the CSS content isn't read as UTF-8.

The CSS file is generated with the MiniCssExtractPlugin, but the direct result of the css-loader is printed in the console window.

Bug

Source

markuslewin

👍2

All 12 comments

Do not use @charset, it is always utf-8 for webpack, but we should fix it

alexander-akait on 19 Oct 2020

It would be nice to have this fixed. Relying on returning the correct http headers is painful when hosting a static app.

SLKnutson on 25 Feb 2021

👍1

We can't change your headers

alexander-akait on 26 Feb 2021

I'm having this problem too. A bunch of @font-face imports from open-sans are included before the @charset from sass-loader. I'm not sure what to do about this.

MitchTalmadge on 7 Mar 2021

As a workaround one could use a plugin such as https://github.com/cqqccqc/webpack-utf8-bom to prepend a UTF-8 BOM to the generated files.

markuslewin on 9 Mar 2021

Without webpack you will faced with the same issue, no problems on webpack side, modify src/index.html

<!DOCTYPE html>
<html>
    <head>
        <title>css-loader @charset error</title>
        <script defer src="./index.js"></script>
        <link href="./style-css-loader-only.css" rel="stylesheet">
    </head>
    <body>
        <p class="greet">Markus</p>
    </body>
</html>

How to fix? Just add <meta charset="UTF-8">, i.e.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css-loader @charset error</title>
        <script defer src="./index.js"></script>
        <link href="./style-css-loader-only.css" rel="stylesheet">
    </head>
    <body>
        <p class="greet">Markus</p>
    </body>
</html>

alexander-akait on 10 Mar 2021

👎3

Yes! If you control the HTML you can set charset to UTF-8. If you control the server you can set the charset in the Content-Type HTTP header.

However, I ran into this issue when I tried to open a print popup in Safari. I had no control over the server, so I couldn't set any HTTP headers. On top of that, the <meta> tag seems to be ignored by Safari when the document is opened with window.open(). The encoding of the document is then determined by the Safari setting "Default encoding" which defaults to "Western (ISO Latin 1)".

I added the print popup to my repository. The CSS is served with an empty Content-Type header and the document that is opened in a new window contains <meta charset="UTF-8" />.

The problem is that in some (rare) cases I need to be able to specify the charset of the file in the CSS.

markuslewin on 10 Mar 2021

👍1

Exactly, sometimes I do not have the ability to control the HTML or headers, and I must rely on this feature of CSS which is currently not usable.

Right now this plugin is resulting in CSS which is technically broken -- the charset tag cannot be placed in the middle of a file. Browsers are forgiving about this, but they will not parse the charset tag. Changing the HTML may be a solution for some people, but it does not fix the fact that the charset tag is in the middle of the file which is the primary problem here.

MitchTalmadge on 10 Mar 2021

👍1

Converting from one charset to another is out of scope, you can write postcss plugin for this.

Changing the HTML may be a solution for some people, but it does not fix the fact that the charset tag is in the middle of the file which is the primary problem here.

Can you provide link/screenshot where tag in the middle, I can't reproduce using repo above

alexander-akait on 11 Mar 2021

Updated my repo.

Without import:
without-import