Can angular-cli remove unused css?

Question

so far the smallest bundle I can create with angular cli is by running

ng build --aot true -prod

I was wondering if the build process also removes unused css classes e.g. from bootstrap?

If not how can I add libraries like purifycss to it?

EDIT April 2018

I still did not find any satisfying solution to his problem, especially one that is compatible with the lazy loading modules with angular...

Cheers

Have you managed to find an answer to this? Currently having the same issue. I would like to either use PurifyCss or UnCss — DVM, Mar 22 '17 at 08:26
I added a Feature Request for this. Please vote for the issue. Since Angular will add state dependent classes to element at runtime, it's tricky to use automation at the moment. https://github.com/angular/angular-cli/issues/24851 — Ole, Mar 14 '23 at 18:33

score 11 · Answer 1 · answered Mar 29 '20 at 23:18

11

I did some research recently about this, but I could not find any really safe way of how to remove unused CSS. However I came across some tools which would help you detect dead-code in VS Code. There is an extention which is not perfect but looks promising. Also I did some investigation of how to remove unused Angular Material CSS (if you use it) and created a video about it. You can check this out here.

But at least now (in 2020) there is no any reliable way to achieve what you want and see also an answer from Angular Core Team member about this topic

answered Mar 29 '20 at 23:18

Dmytro Mezhenskyi

265
2
11

2

What about using [ngx-unused-css](https://github.com/ivanblazevic/ngx-unused-css) to detect unused properties ? it is using [PurgeCSS](https://purgecss.com/) behind the hood. – Flavien Volken Mar 31 '20 at 06:16
3

@FlavienVolken Well, it does extra improvements comparing to PurgeCSS but still... There is a statement from ngx-unused-css docs: "it finds all .html files inside the project and then pairs it with their styling files; e.g. app.component.html > app.component.scss", so it means, that *.ts files will be ignored but we can set css classes with Renderer as example, which means that the CSS class will be considered as unused when actually it is not true. So that's why I would not consider it as a 'safe' solutions, especially for medium and big projects :) – Dmytro Mezhenskyi Mar 31 '20 at 13:21

score 1 · Answer 2 · answered Sep 22 '19 at 10:48

module.export={
  plugins: [
    new ExtractTextPlugin('[name].[contenthash].css'),
    // Make sure this is after ExtractTextPlugin!
    new PurifyCSSPlugin({
      // Give paths to parse for rules. These should be absolute!
      paths: glob.sync(path.join(__dirname, 'app/*.html')),
    })
  ]

};

install purifycss webpack first

score 0 · Answer 3 · answered Apr 28 '17 at 10:07

0

If you are using web pack then you can do it as:-

First, install purifycss-webpackusing npm i -D purifycss-webpack

module.export={
  plugins: [
    new ExtractTextPlugin('[name].[contenthash].css'),
    // Make sure this is after ExtractTextPlugin!
    new PurifyCSSPlugin({
      // Give paths to parse for rules. These should be absolute!
      paths: glob.sync(path.join(__dirname, 'app/*.html')),
    })
  ]

};

Visit the link below for the detailed understanding.

https://github.com/webpack-contrib/purifycss-webpack

answered Apr 28 '17 at 10:07

Yashwardhan Pauranik

5,370
5
42
65

1

webpack is not exposed in angular-cli sadly – el-davo Jul 20 '17 at 07:33
1

@DaveAhern Try `ng eject`. If you want more control over the webpack process, that's the way to do it. Read more here https://github.com/angular/angular-cli/wiki/eject. – Corey Sery Aug 13 '17 at 16:05
This didn't work for me. Most of the styles are being removed. I supposed the plugin is checking against the index.html (it's empty, all the html will inject by angular) . Did any one find a solution? – marianocodes Aug 24 '17 at 23:32
Try this https://github.com/meltedspark/angular-builders/tree/master/packages/custom-webpack – Walter Luszczyk Feb 12 '19 at 11:00
there is prob;em with this solution, if you sue angular-material these days, its styling will be killed by purifycss, I established a site one firebase, the nav tab style is totally gone – Ali Saberi Feb 21 '20 at 17:41

score 0 · Answer 4 · answered Aug 17 '17 at 17:50

If you are ejected, i.e. ng eject. Then you can customize the webpack build to do most anything. I have a couple options turned on to minimize styles as part of the build with minifyCSS in two of the plugins.

LoaderOptionsPlugin

new LoaderOptionsPlugin({
  "sourceMap": false,
  "options": {
    "html-minifier-loader": {
        "removeComments": true,
        "collapseWhitespace": true,
        "conservativeCollapse": true,
        "preserveLineBreaks": true,
        "caseSensitive": true,
        "minifyCSS": true
    },

HtmlWebpackPlugin

new HtmlWebpackPlugin({
  "template": "./src\\index.ejs",
  "filename": "./index.html",
  "hash": true,
  "inject": true,
  "compile": true,
  "favicon": 'src/assets/Flag.png',
  "minify": {
      collapseWhitespace: true,
      removeComments: true,
      minifyCSS: true
    },

score 0 · Answer 5 · answered Jul 10 '19 at 11:34

0

Don't know if this count as an answer because it's not really related to angular-cli, but I open my project in sublime text, and I launch UnusedCssFinder, which highlight all the unused properties in my css file.

answered Jul 10 '19 at 11:34

sodimel

864
2
11
24

score -1 · Answer 6 · answered Oct 07 '20 at 12:26

In Angular the best option you have is to create a separate CSS file for each component and use ViewEncapsulated.Emulated.

And in this file you will add just CSS used by this component. You can discover styles used by each page with "coverge" from Google Chrome

Can angular-cli remove unused css?

6 Answers6

Linked