npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ngx-unused-css

v4.0.0-1

Published

Detect unused CSS in angular components

Downloads

3,721

Readme

Build Status Inline docs

npm

Angular unused css detection

Breaking changes in version >= 4.0.0

  • sass lib has been upgraded to latest version therefore custom importer configuration needs to be changed, refer to: https://sass-lang.com/documentation/js-api/interfaces/FileImporter

Quick setup

Run via API

import { NgxUnusedCSS } from 'ngx-unused-css';

const result = new NgxUnusedCSS(config).instance.run();

Run via CLI

npx ngx-unused-css --init

npm i -D ngx-unused-css

Add script into package.json and run it:

"scripts": { ... "unused-css": "ngx-unused-css" ... }

How does it works

  • it finds all .html files inside the project and then pairs it with their styling files; e.g. app.component.html > app.component.scss
  • if pair is matched then it will compare unused css using PurgeCSS library
  • SCSS will be automatically compiled before the matching phase
  • some system selectors like :host or ::ng-deep will be ignored
  • with configuration it is possible to extend global selectors to ignore
  • configure ignore per file in case CSS class is applied dynamically; ENUMS or based on backend model

Installation

Global: npm install -g ngx-unused-css

or

Local: npm install ngx-unused-css --save-dev

Add configuration file in the root of the project

.ngx-unused-css.json

Usage

Run in CLI if installed globally like: ngx-unused-css

or add it to package.json > scripts: "unused-css": "ngx-unused-css" and run in CLI: npm run unused-css

Optionally, override config path with CLI param: ngx-unused-css --config=otherConfig

Options

path

  • Type: String
  • Default: null

Path to a project, for Angular it is usually src/app

styleExt

  • Type: String
  • Default: .scss

Styling extension used in the project, options are: scss | sass | css

globalStyles

  • Type: String
  • Default: null

Path to global styles, usally it is src/styles.scss

importer

Custom importer handler, more details here: https://sass-lang.com/documentation/js-api/interfaces/FileImporter

includePaths

Refer to original documentation: https://github.com/sass/node-sass#includepaths

ignore

  • Type: Array<String | Object>
  • Default: null

Selectors to ignore, they can be defined globally (as an string) or specific per file (as an object). This comes useful when class is applied based on the value from the backend, e.g.

[ngClass]="model.status.toLowerCase()" class is dervied from the backend so there is no possibility to do the analysis.

Special: global as a string, or Object as a file specific

Object

file

  • Type: String
  • Default: null

Path to css file, relative to projectPath

selectors

  • Type: Array<String>
  • Default: null

Array of selectors inside the file

all

  • Type: Boolean
  • Default: false

If set as true it will ignore selectors property (if defined) and will ignore whole file

Example: Ignore .dynamic-class in app.component.scss:

{
  file: "app.component.scss",
  selectors: [".dynamic-class"]
}

Example: Ignore whole app.component.scss:

{
  file: "app.component.scss",
  all: true
}

Example: Ignore ng-star globally and .test-2 inside test.component.scss file:

{
    "path": "src/app",
    "ignore": [
        "ng-star",
        {
            "file": "test.component.scss",
            "selectors": [".test-2"]
        }
    ]
}

ngClass handling

If ngClass is found on the element, same element will be duplicated with all possible combination of the classes on the same level and template will be then compared with css definition to match if all possible combinations are used

Example:

<div class="test">
     <div class="test" [ngClass]="{ class1: var1, class2: var2 }"></div>
</div>

To compare against CSS it will recompile html with all possible cases:

<div class="test">
     <div class="test" [ngClass]="{ class1: var1, class2: var2 }"></div>
     <div class="test class1"></div>
     <div class="test class2"></div>
     <div class="test class1 class2"></div>
</div>

NOTE: This library will not detect nested ngClasses

Special cases

Template files that are not matching their styling counter part will be ignored