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

[ssougnez]

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]

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]

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]

same here:/

[SamerX]

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