angular / angular-cli

CLI tool for Angular
https://cli.angular.io
MIT License
26.73k stars 11.98k forks source link

Special comments /*! are removed from the styles.css #26432

Closed CarlosTorrecillas closed 9 months ago

CarlosTorrecillas commented 9 months ago

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

compiler-cli

Is this a regression?

No

Description

I'm not sure if that's a regression, but having a brand new Angular 17 application created from the ng new command is not keeping the comments written in the styles.scss even if they are done in the "special" way of /*!

If you inspect the styles.scss you will see two sections of special comments that should be respected after build. When you perform a prod build you will see they are not.

Please provide a link to a minimal reproduction of the bug

https://github.com/CarlosTorrecillas/angular17

Please provide the exception or error you saw

There are no exceptions. If you run "ng build" and go to the dist folder and inspect the styles.XXX.css file generated you will see the CSS that does not contain the special comment that should have.

Please provide the environment you discovered this bug in (run ng version)

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 17.0.1
Node: 18.13.0
Package Manager: npm 8.19.3
OS: win32 x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.1
@angular-devkit/build-angular   17.0.1
@angular-devkit/core            17.0.1
@angular-devkit/schematics      17.0.1
@angular/cli                    17.0.1
@angular/ssr                    17.0.1
@schematics/angular             17.0.1
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

Anything else?

That has happened to me with a single file or multiple (css) files included in the angular.json project. I can also see that on recently migrated Angular solutions from v16 to v17 and on brand new A17 applications. I would need to test it on A16 applications to verify if that's a regression or not but what I can see, if I don't use the target browser application to compile is that when I have multiple files, I do see some comments respected, but only in one file. The rest of the files are removed.

dgp1130 commented 9 months ago

Why do you want to retain these comments? I'd love to better understand the use case here. I believe we retain @license comments since that's necessary for legal reasons.

@clydin did we ever intentionally retain /*! comments or was this just an artifact of Webpack?

CarlosTorrecillas commented 9 months ago

What happens here is that I recently changed the build process so that I ran a post build step that takes the outputted css to remove the unused one via PurgeCSS. I have a few CSS files that get combined into the final one and some of them have the / purgecss start ignore / and end ignore sections so that some classes are kept after the removal.

Today I migrated to Angular 17 and noticed I had some css missing - I don’t want to say it’s a regression because I haven’t tested yet on v16. But it was not working on v17. Then I tried the special comment syntax /*! But it didn’t work either.

Hope I gave you enough context.

dgp1130 commented 9 months ago

Why are you building in CSS you don't need in the first place? Why do these styles exist if you're just going to purge them? I get the impression there's a deeper styling problem you're trying to solve here.

CarlosTorrecillas commented 9 months ago

I have bootstrap included in my main styles.scss and the CSS I want to keep is because I’m applying custom styling to certain third party components that cannot be customized (for example recaptcha). I also have ng-select and font awesome. All my CSS is in use. The external css that is referenced in my styles.scss is mainly what I want to remove.

CarlosTorrecillas commented 9 months ago

Hey @alan-agius4 , when do you guys expect to be able to merge this PR in?

angular-automatic-lock-bot[bot] commented 8 months ago

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.