Styles, `@import`'ed in `styles.scss` are not tree-shaked.

[Lonli-Lokli]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

No sure

Description

Any SCSS styles imported with @import remains in styles.css for production build with styles optimization

🔬 Minimal Reproduction

https://github.com/Lonli-Lokli/scss-ts

• Clone
• run ng build --prod

Expected - no ngx-toastr styles as we have styles optimization turned on
Current - all styles are presented

🌍 Your Environment

Angular CLI: 13.2.5
Node: 14.18.2
Package Manager: npm 6.14.15
OS: win32 x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1302.5
@angular-devkit/build-angular   13.2.5
@angular-devkit/core            13.2.5
@angular-devkit/schematics      13.2.5
@schematics/angular             13.2.5
rxjs                            7.5.4
typescript                      4.5.5

[alan-agius4]

This is expected as unused CSS is not tree-shaken away.

While there are ways to remove unused CSS, the Angular CLI doesn't offer this functionality out of the box.

[Lonli-Lokli]

@alan-agius4 webpack support this, why it's disabled via angular-cli?

[alan-agius4]

Webpack doesn’t support the this out of the box.

[Lonli-Lokli]

Are you sure? Here is my repro
https://github.com/Lonli-Lokli/webpack-styles-ts/blob/master/config/webpack.config.common.js#L28

Clone/npm i/npm run build

Produces result in build folder will be different based on this sideEffects flag.

[alan-agius4]

In your reproduction CSS is actually converted into a JavaScript module and is latter injected with style-loader into the HTML file. In the Angular CLI, we take a different approach where we extract and emit CSS into .css files. And since you are setting sideEffects: false this means that any imports that has potential side-effects Ex: import "./styles.scss"; will always be removed irrelevant if they are needed or not.

We also don't directly support importing a CSS file as an ECMA module IE: import "./styles.scss"; as this is a specific Webpack feature. The fact that the Angular CLI uses Webpack is an implementation detail which can change in the future.

[Lonli-Lokli]

I just give an example of what webpack supports, my original sample was without it, 9nly pure @imports.

So if you think it's completely different way of how AngularCLIl handles this, can you share please ways how not required styles can be excluded, which you mentioned in your first response?

And can I convert this issue into feature Request?

[alan-agius4]

One way would be to run purgecss, purify-css or similar tools either via a post-build script or through a customized buidler. We did try to explore removing unused CSS in the past but this is actually pretty challenging for certain cases such as when manipulating styles via JavaScript and therefore it would require fine-grain settings for each project (https://purgecss.com/configuration.html) which doesn't quite align with the Angular CLI model and goal.

In general I think this should be more of a linter approach were a developer is warning of unused CSS that can be removed directly from source instead of removing unused CSS during the build which does slow down the build quite a bit due to the nature of how these tools work which uses RegExp matching which is a bit brittle in nature.

There is more context in this thread #9650 (comment)

[alan-agius4]

Closing as per above.

[Lonli-Lokli]

@alan-agius4 I have tried approach with PurgeCSS and now I understand your concern regarding enabling this as a part of build and completely agree with linting proposal.

[angular-automatic-lock-bot]

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.}