Angular Class List Extractor

Determine what CSS classes an Angular Template or Component uses

Deprecated

With Tailwind the 3.0 release, extractors changed from a per-file basis to a per-line basis. There's tons of edge cases when it comes to extracting class names from a single line with no context, so this library is essentially moot.

If you're interested in the package name, or have any questions, feel free to reach out!

Purpose

The tl;dr is this package was written for compatibility with TailwindCSS, specifically purging unused styles

This package has 0 additional dependencies aside from Angular's dependencies - There are 2 peer dependencies, Typescript and @angular/compiler which are used to create an AST of the component / template. Both peer dependencies are required to compile Angular.

Usage

// Example file: tailwind.config.js - compatible w/ Tailwind 1.x
const {extractClassesFromTemplate, extractClassesFromComponent} = require('ng-class-list-extractor');

module.exports = {
	purge: {
		// This is a liberal glob - it might include tests or modules.
		// You can probably get away with limiting ts files to `**/*.component.ts`
		content: ['./relative/path/to/app/**/*.html', './relative/path/to/app/**/*.ts'],
		options: {
			extractors: [{
				// Returns a list of classes used in a html template
				extractor: extractClassesFromTemplate,
				extensions: ['html']
			}, {
				// Returns a list of classes used in an inline component template
				extractor: extractClassesFromComponent,
				extensions: ['ts']
			}]
		}
	},
	theme: {
		extend: {},
	},
	variants: {},
	plugins: [],
};