Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

warning: "@charset" must be the first rule in the file #22097

Closed
ssougnez opened this issue Nov 4, 2021 · 10 comments · Fixed by #22098
Closed

warning: "@charset" must be the first rule in the file #22097

ssougnez opened this issue Nov 4, 2021 · 10 comments · Fixed by #22098

Comments

@ssougnez
Copy link

ssougnez commented Nov 4, 2021

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

I'm not sure as the issue didn't occur with ng12 but maybe just because I was building in development mode by default (and the issue only occurs on production mode)

Description

I'm using the "styles" section of the angular.json file to include additional (s)css files:

"styles": [
  "node_modules/@sfpd/ng-ui/themes/default.scss",
  "node_modules/font-awesome/css/font-awesome.min.css",
  "node_modules/tippy.js/dist/tippy.css",
  "src/styles.scss"
],

When trying to build the solution with this, I get a lot of warnings like this:

Warning:  > styles.65c1c4ac510bd85a.css:384:0: warning: "@charset" must be the first rule in the file
    384 │ @charset "UTF-8";
        ╵ ~~~~~~~~
   styles.65c1c4ac510bd85a.css:383:1350: note: This rule cannot come before a "@charset" rule
    383 │ ...:transparent;border-style:solid}.tippy-content{position:relative...

The weird thing is that this happens whatever the order of the pathes in the array expect when "src/syles.scss" comes first. However, this is not an option for me as I override some styles in this file, so it needs to come last.

Another weird thing is that if I open the corresponding generated styles file, "@charset" only appears as the first rule of the file...

I also tried to duplicate the "styles.scss" file, rename it in "styles2.scss" and add it as the first entry of the styles array (to see if it somehow fixes the issue) but it didn't.

Note there is no "@charset" rule in my "styles.scss", so I really don't understand why the issue does not appear when it comes first in the array.

These are only warnings and the build is valid, however, it creates a lot of noise during the compilation.

Last remark is that it only occurs in production mode, not in development.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in

Angular CLI: 13.0.1
Node: 14.16.1
Package Manager: yarn 1.22.4
OS: win32 x64

Angular: 13.0.0
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1300.1
@angular-devkit/build-angular   13.0.1
@angular-devkit/core            13.0.1
@angular-devkit/schematics      13.0.1
@angular/cli                    13.0.1
@schematics/angular             13.0.1
rxjs                            6.6.7
typescript                      4.4.4

Anything else?

No response

@ArtVS
Copy link

ArtVS commented Nov 6, 2021

A quick fix I found is to put "src/styles.scss" at the beginning of the "styles" array, then you'd get only one warning or so... Otherwise there're hundreds of warnings

@ssougnez
Copy link
Author

ssougnez commented Nov 6, 2021

A quick fix I found is to put "src/styles.scss" at the beginning of the "styles" array, then you'd get only one warning or so... Otherwise there're hundreds of warnings

Indeed but this is not a solution for me as I override some css variables in the styles.scss fils so it must be at the end ;-)

@neo-xy
Copy link

neo-xy commented Nov 7, 2021

same here:/

@SamerX
Copy link

SamerX commented Nov 8, 2021

I confirm the issue .. the problem is there is no way so far to eliminate the warnings by the compiler options.

clydin pushed a commit that referenced this issue Nov 8, 2021
…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)
clydin pushed a commit that referenced this issue Nov 8, 2021
…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
@egos-dev
Copy link

egos-dev commented Nov 9, 2021

So what is the solution here ? I have the same issue once i migrated to version 13

@ssougnez
Copy link
Author

ssougnez commented Nov 9, 2021

It seems that they implemented a fix so I guess we have to wait for the next version to be released.

@manu1080
Copy link

I have the same problem migrating from angular 12 to 13

@alan-agius4
Copy link
Collaborator

This should not longer be an issue since 13.0.2.

Please see https://github.com/angular/angular-cli/releases/tag/13.0.2 for more information about this release.

@wis-dev
Copy link

wis-dev commented Nov 15, 2021

It's already fixed on version 13.0.1.
After update, i remove node_modules and package-lock.json then run npm i.

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Dec 16, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants