• This repository has been archived on 22/Sep/2022
  • Stars
    star
    359
  • Rank 118,521 (Top 3 %)
  • Language
    CSS
  • License
    Other
  • Created about 10 years ago
  • Updated about 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A build tool for checking your HTML templates for unused CSS classes

This library is no longer being maintained and as a result has been archived, it is recommended to use gulp-purgecss as an alternative

Build Status Coverage Status

gulp-check-unused-css

gulp-check-unused-css

This tool ensures that all of your defined CSS classes are used in your HTML files, and vice versa. If your HTML uses any classes that you have not defined in your CSS files, or if there are css definitions that aren't being used, they will be reported.

This allows for removal of unused and redundant code which will both improve the readability of your project while also slightly reducing file size (and therefore the amount of data being transferred on load).

Going forward I would like to collaborate openly with any open source developers interested in improving this tool, and discuss features that they think are missing for their own particular use case. Please create issues to get the conversation started! :)

Why gulp-check-unused-css

Consider this Venn diagram:

Explanation

Figure a) represents what you have now. Some classes are defined in your CSS, but never used in the templates. Some classes used in the templates don't appear in your CSS.

Figure b) represents what you actually want. Keeping your CSS and HTML clean improves the maintainability of your code. You don't want to send useless bytes to your users, because you want site loading to be as fast as possible.

gulp-check-unused-css aims to check for the not-overlapping parts of figure a) and throw an error if it encounters them.

Installation

npm install --save-dev gulp-check-unused-css

Upgrading

If you are upgrading from 0.0.x, you should really, REALLY read the docs again. Things that have changed since this plugin's original release:

  • How you put HTML files in the plugin
  • What this plugin actually checks
  • When the plugin throws errors
  • How to prevent those errors from breaking your build
  • Inverted meaning of angular option (now off by default)

I didn't publish the two 1.x.y versions, so no worries there.

Usage

Simple use:

var checkCSS = require( 'gulp-check-unused-css' );
gulp
    .src([ 'styles/*.css', 'templates/*.html' ])
    .pipe( checkCSS() );

For advanced use with gulp-watch check out the Gulpfile.

Depending on the gulp version, you may have to return the gulp command like below:

var checkCSS = require( 'gulp-check-unused-css' );
return gulp
    .src([ 'styles/*.css', 'templates/*.html' ])
    .pipe( checkCSS() );

Screenshot

The plugin will emit all files you put in, because it has to read all of them before checking. Occasionally, however, it will break your pipe. This is good for automated build processes, e.g. in CI systems like Jenkins or Travis.

Options

  • ignore: Array containing strings and/or regexes, if an unused class matches one of it, it is ignored.
  • globals: Array of strings identifying predefined sets of ignored classes.
  • angular: Boolean, passing true will turn the support for ng-class on.

Ignoring Classes

This plugin is inspired by the workflow at Github, where a build fails if the classes used in the CSS and the templates do not overlap exactly. However, most of us do not write 100% of the CSS ourselves but rely on frameworks such as Bootstrap. That's why there are some options available to ignore "global" or "vendor" classes.

You can provide a list of class names or regular expressions that should be ignored.

gulp
    .src( 'app.*' )
    .pipe( checkCSS({
        ignore: [ 'special-js-class', /^vendor-/ ]
    }));

Since 1.1.0 you can also add globals: [ '{framework}@{version}' ] to your options.

gulp
    .src( 'app.*' )
    .pipe( checkCSS({
        globals: [ '[email protected]' ]
    }));

And since 2.1.1, you can add your own globals. A "global" is only an array of strings or regexes, so you can do it like this:

gulp
    .src( 'app.*' )
    .pipe( checkCSS({
        globals: [ [ 'ignore', /^custom-/ ] ]
    }));

Or you can define a module that exports this array and require it:

// custom-global.js
module.exports = [ 'ignore', /^custom-/ ];

// Gulpfile
gulp
    .src( 'app.*' )
    .pipe( checkCSS({
        globals: [ require( './custom-global' ) ]
    }));

This way you could also automatically create your custom global.

Globals that Work out of the Box

Development

git clone gulp-check-unused-css
cd gulp-check-unused-css
npm install
# hack hack hack
npm test

Add a Global to the Project's Source

  1. Fork the project
  2. Acquire CSS file
  3. cd gulp-check-unused-css
  4. node util/extract.js --file { path to CSS file }
  5. Now there is a .ignore file (which is actually a CommonJS module) next to the file
  6. Rename it appropriately to {framework}@{version}.js
  7. Save it to src/global
  8. Commit and submit a Pull Request

Changelog

  • 2.1.1: Support for custom globals
  • 2.0.1: Fix main file for npm
  • 2.0.0: Check HTML files, other breaking changes. See Upgrading
  • 1.1.0: Add support for frameworks
  • 1.0.0: Join ignoreClassNames and ignoreClassPatterns to ignore
  • 0.0.8: Add support for AngularJS syntax
  • 0.0.7: I don't remember
  • 0.0.6: Add check for empty or invalid CSS files
  • 0.0.5: Fix bug where media queries in the CSS broke everything
  • 0.0.4: Fix bug where those options could not be used together
  • 0.0.3: Introduce ignoreClassNames, ignoreClassPatterns

Contributions/TODO List

This project was recently revived and is actively and enthusiastically seeking contributors. Here's the plan for its next development phase:

  • Improve code documentation
  • Update dependencies and gulp tasks
  • Add support for LESS/Sass
  • Add code coverage (Done)
  • Add project wiki

To get involved, just file a PR or ask for more information via Issues.

License

Copyright 2014 Zalando SE

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

More Repositories

1

patroni

A template for PostgreSQL High Availability with Etcd, Consul, ZooKeeper, or Kubernetes
Python
6,267
star
2

postgres-operator

Postgres operator creates and manages PostgreSQL clusters running in Kubernetes
Go
3,686
star
3

skipper

An HTTP router and reverse proxy for service composition, including use cases like Kubernetes Ingress
Go
3,088
star
4

restful-api-guidelines

A model set of guidelines for RESTful APIs and Events, created by Zalando
CSS
2,605
star
5

zalenium

A flexible and scalable container based Selenium Grid with video recording, live preview, basic auth & dashboard.
Java
2,385
star
6

SwiftMonkey

A framework for doing randomised UI testing of iOS apps
Swift
1,947
star
7

logbook

An extensible Java library for HTTP request and response logging
Java
1,788
star
8

tailor

A streaming layout service for front-end microservices
JavaScript
1,728
star
9

tech-radar

Visualizing our technology choices
1,581
star
10

spilo

Highly available elephant herd: HA PostgreSQL cluster using Docker
Python
1,225
star
11

intellij-swagger

A plugin to help you easily edit Swagger and OpenAPI specification files inside IntelliJ IDEA
Java
1,172
star
12

problem-spring-web

A library for handling Problems in Spring Web MVC
Java
1,031
star
13

nakadi

A distributed event bus that implements a RESTful API abstraction on top of Kafka-like queues
Java
928
star
14

zally

A minimalistic, simple-to-use API linter
Kotlin
903
star
15

problem

A Java library that implements application/problem+json
Java
869
star
16

zalando-howto-open-source

Open Source guidance from Zalando, Europe's largest online fashion platform
799
star
17

go-keyring

Cross-platform keyring interface for Go
Go
689
star
18

gin-oauth2

Middleware for Gin Framework users who also want to use OAuth2
Go
580
star
19

zappr

An agent that enforces guidelines for your GitHub repositories
JavaScript
542
star
20

pg_view

Get a detailed, real-time view of your PostgreSQL database and system metrics
Python
494
star
21

engineering-principles

Our guidelines for building new applications and managing legacy systems
376
star
22

zmon

Real-time monitoring of critical metrics & KPIs via elegant dashboards, Grafana3 visualizations & more
Shell
355
star
23

expan

Open-source Python library for statistical analysis of randomised control trials (A/B tests)
Python
325
star
24

PGObserver

A battle-tested, flexible & comprehensive monitoring solution for your PostgreSQL databases
Python
316
star
25

riptide

Client-side response routing for Spring
Java
292
star
26

jackson-datatype-money

Extension module to properly support datatypes of javax.money
Java
240
star
27

grafter

Grafter is a library to configure and wire Scala applications
Scala
240
star
28

opentracing-toolbox

Best-of-breed OpenTracing utilities, instrumentations and extensions
Java
180
star
29

elm-street-404

A fun WebGL game built with Elm
Elm
176
star
30

tokens

Java library for conveniently verifying and storing OAuth 2.0 service access tokens
Java
169
star
31

innkeeper

Simple route management API for Skipper
Scala
166
star
32

public-presentations

List of public talks by Zalando Tech: meetup presentations, recorded conference talks, slides
165
star
33

python-nsenter

Enter kernel namespaces from Python
Python
139
star
34

faux-pas

A library that simplifies error handling for Functional Programming in Java
Java
132
star
35

dress-code

The official style guide and framework for all Zalando Brand Solutions products
CSS
129
star
36

beard

A lightweight, logicless templating engine, written in Scala and inspired by Mustache
Scala
121
star
37

friboo

Utility library for writing microservices in Clojure, with support for Swagger and OAuth
Clojure
117
star
38

spring-cloud-config-aws-kms

Spring Cloud Config add-on that provides encryption via AWS KMS
Java
99
star
39

zalando.github.io

Open Source Documentation and guidelines for Zalando developers
HTML
86
star
40

failsafe-actuator

Endpoint library for the failsafe framework
Java
52
star
41

package-build

A toolset for building system packages using Docker and fpm-cookery
Ruby
35
star
42

ghe-backup

Github Enterprise backup at ZalandoTech (Kubernetes, AWS, Docker)
Shell
30
star
43

rds-health

discover anomalies, performance issues and optimization within AWS RDS
Go
26
star
44

backstage-plugin-api-linter

API Linter is a quality assurance tool that checks the compliance of API's specifications to Zalando's API rules.
TypeScript
12
star
45

.github

Standard github health files
1
star