@import invalidates @charset declaration #1212

markuslewin · 2020-10-19T16:08:09Z

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.

The text was updated successfully, but these errors were encountered:

alexander-akait · 2020-10-19T16:13:26Z

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

SLKnutson · 2021-02-25T19:03:12Z

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

alexander-akait · 2021-02-26T12:37:44Z

We can't change your headers

MitchTalmadge · 2021-03-07T04:52:17Z

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.

markuslewin · 2021-03-09T07:07:18Z

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.

alexander-akait · 2021-03-10T12:54:40Z

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>

markuslewin · 2021-03-10T18:22:20Z

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.

MitchTalmadge · 2021-03-10T18:27:07Z

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.

alexander-akait · 2021-03-11T12:18:04Z

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

markuslewin · 2021-03-11T15:22:51Z

Updated my repo.

Without import:

With import:

alexander-akait · 2021-03-11T16:39:30Z

Oh, I see

xqk1 · 2021-06-01T12:41:52Z

The same problem

…irst rule in the file warning esbuild will issue a warning when `@charset` is in the middle of the file. This is caused by css-loader will concats the file and doesn't hoist `@charset`, (webpack-contrib/css-loader#1212). While, esbuild will issue a warning regarding the above, it will hoist to the very top. In many cases, this warning is not actionable by the users as the `@charset` would be likely specified in 3rd party libs. Closes #22097 (cherry picked from commit b3e5888)

…irst rule in the file warning esbuild will issue a warning when `@charset` is in the middle of the file. This is caused by css-loader will concats the file and doesn't hoist `@charset`, (webpack-contrib/css-loader#1212). While, esbuild will issue a warning regarding the above, it will hoist to the very top. In many cases, this warning is not actionable by the users as the `@charset` would be likely specified in 3rd party libs. Closes #22097

sirsimon · 2022-02-04T08:45:14Z

I have the same problem

alessandro308 · 2022-02-10T14:30:08Z

Any news on that?

ArtemNikolaev · 2022-02-10T23:54:19Z

Have same issue when trying to add bundled bootstrap css, so there's no way i can just remove it from my css, because it's not my css

ericwfisher · 2022-11-03T13:43:53Z

Are there plans to address this?

alexander-akait · 2022-11-16T18:16:09Z

The only possible solution is removing @charset "utf-8";, you can solve it on postcss-loader level, just simple plugin, we can't move @charset at the top, because you can have more modules and we don't know the final order of them (you can always load them dynamically)

alexander-akait · 2022-11-16T18:16:46Z

But removing is not safe, because if you have characters which are more them ascii they will be broken, but now they are broken too 😄

mikekscholz · 2022-11-26T12:59:57Z

For anyone else trying to deal with this I made it go away by adding charset: false to my sass options in webpack.config.js
At the very least its a step in figuring out which package is the cause, looking like sass itself.

  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          {
            loader: "sass-loader",
            options: {
              sassOptions: {
                charset: false
              },
              // Prefer `dart-sass`
              implementation: require("sass"),
            },
          }
        ],
      },
    ],
  }

alexander-akait added the type: Bug label Oct 19, 2020

alexander-akait closed this as completed Mar 10, 2021

alexander-akait reopened this Mar 11, 2021

alexander-akait mentioned this issue Sep 4, 2021

Should output UTF-8 BOM when input contains UTF-8 BOM webpack-contrib/mini-css-extract-plugin#821

Open

alan-agius4 mentioned this issue Nov 5, 2021

fix(@angular-devkit/build-angular): suppress "@charset" must be the first rule in the file warning angular/angular-cli#22098

Merged

robinp mentioned this issue Sep 16, 2022

Add ASCII output support sass/dart-sass#568

Open

ericwfisher mentioned this issue Oct 27, 2022

Console Errors flackr/scroll-timeline#93

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

@import invalidates @charset declaration #1212

@import invalidates @charset declaration #1212

markuslewin commented Oct 19, 2020

alexander-akait commented Oct 19, 2020

SLKnutson commented Feb 25, 2021

alexander-akait commented Feb 26, 2021

MitchTalmadge commented Mar 7, 2021

markuslewin commented Mar 9, 2021

alexander-akait commented Mar 10, 2021

markuslewin commented Mar 10, 2021

MitchTalmadge commented Mar 10, 2021

alexander-akait commented Mar 11, 2021

markuslewin commented Mar 11, 2021 •

edited

Loading

alexander-akait commented Mar 11, 2021

xqk1 commented Jun 1, 2021

sirsimon commented Feb 4, 2022

alessandro308 commented Feb 10, 2022

ArtemNikolaev commented Feb 10, 2022

ericwfisher commented Nov 3, 2022

alexander-akait commented Nov 16, 2022 •

edited

Loading

alexander-akait commented Nov 16, 2022 •

edited

Loading

mikekscholz commented Nov 26, 2022

@import invalidates @charset declaration #1212

@import invalidates @charset declaration #1212

Comments

markuslewin commented Oct 19, 2020

Expected Behavior

Actual Behavior

Code

How Do We Reproduce?

alexander-akait commented Oct 19, 2020

SLKnutson commented Feb 25, 2021

alexander-akait commented Feb 26, 2021

MitchTalmadge commented Mar 7, 2021

markuslewin commented Mar 9, 2021

alexander-akait commented Mar 10, 2021

markuslewin commented Mar 10, 2021

MitchTalmadge commented Mar 10, 2021

alexander-akait commented Mar 11, 2021

markuslewin commented Mar 11, 2021 • edited Loading

alexander-akait commented Mar 11, 2021

xqk1 commented Jun 1, 2021

sirsimon commented Feb 4, 2022

alessandro308 commented Feb 10, 2022

ArtemNikolaev commented Feb 10, 2022

ericwfisher commented Nov 3, 2022

alexander-akait commented Nov 16, 2022 • edited Loading

alexander-akait commented Nov 16, 2022 • edited Loading

mikekscholz commented Nov 26, 2022

markuslewin commented Mar 11, 2021 •

edited

Loading

alexander-akait commented Nov 16, 2022 •

edited

Loading

alexander-akait commented Nov 16, 2022 •

edited

Loading