w3c-css

Validate CSS using W3C CSS Validation Service

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
w3c-css
1562.0.25 years ago9 years agoMinified + gzip package size for w3c-css in KB

Readme

w3c-css logo
w3c-css Build Status
Validate CSS using W3C CSS Validation Service.

w3c-css will check the compliance against CSS profile specified (CSS3 by default) and report errors and potential problems in Cascading Style Sheets. There are two types of validation events: errors and warnings.
  • Errors are reported when the checked CSS does not respect the CSS recommendation.
  • Warnings do not state a problem regarding the specification. They are used to notify that some CSS-input and could lead to a strange behaviour on some user agents.

Installation

$ npm install w3c-css

Usage

'use strict';
var validator = require('w3c-css');

validator.validate('https://github.com/', function(err, data) {
  if(err) {
    // an error happened
    console.error(err);
  } else {
    // validation errors
    console.log('validation errors', data.errors);

    // validation warnings
    console.log('validation warnings', data.warnings);
  }

});

OR listen for events:
'use strict';
var validator = require('w3c-css');

validator.validate('https://github.com/')
  .on('error', function(err) {
    // an error happened
    console.error(err);
  })
  .on('validation-error', function(data) {
    // validation error
    console.log(data);
  })
  .on('validation-warning', function(data) {
    // validation warning
    console.log(data);
  })
  .on('end', function() {
    // validation complete
  });

Public vs. Private CSS Validator

Private CSS Validator

To deploy a private CSS Validator, use the following npm commands below to run a Docker-based instance locally or use an official guideline to download and install it.
Building a docker image of the CSS Validator:
$ npm run validator:build

Running the container:
$ npm run validator:run
or
$ npm run validator:run:detach

Locating IP:PORT of the running docker container:
$ npm run validator:find
Prints an object, like { "hostname": "172.17.0.2", "port": 8080 } if the container is running. Pass the returned object as a value for the server argument to the validate function.

Public CSS Validator

Please make sure your script sleep for at least 1 second between requests. The CSS Validation service is a free, public service for all, your respect is appreciated.
To validate multiple links, use async + setTimeout or any related way to pause between the requests:
'use strict';

var async = require('async');
var validator = require('w3c-css');

var hrefs = ['http://google.com', 'https://developer.mozilla.org', 'http://www.microsoft.com/'];

async.eachSeries(hrefs, function(href, next) {
  validator.validate(href, function(err, data) {
    if(err) {
      console.log('Failed to process: ' + href, err);
    } else {
      console.log('validation errors on ' + href, data.errors);
      console.log('validation warnings on ' + href, data.warnings);
    }

    setTimeout(function() { next(err); }, 1500); // sleep for 1.5 second between the requests
  });
}, function(err) {
  if(err) {
    console.log('Failed to process a url', err);
  } else {
    console.log('All urls have been processed successfully');
  }
});

Arguments

The first argument to the validate function can be either an URL or an options object. The only required option is uri or text; all others are optional.
Options supported:
  • uri || url - the URL of the document to validate
  • text - CSS document or fragment to validate. Only CSS-content is allowed
  • profile - the CSS profile used for the validation: css1, css2, css21, css3 default: 'css3'
  • usermedium - the medium used for the validation: screen, print, ... default: 'all', which is suitable for all devices
  • warning - the warning level, "no" for no warnings, 0 for less warnings, 1or 2 for more warnings default: 2
  • server - the "IP:PORT" string or the URL object of a custom validation server, e.g, '172.17.0.2:8080' or { host: '172.17.0.2:8080' }

The optional callback argument gets 2 arguments:
  • err - an error
  • data - a result object with errors and warnings properties.

CSS Errors & Warnings

errors and warnings reported by the library are the arrays of following objects:
{
  line: '...',      // refers to the line where the error or warning was detected
  message: '...'    // the error or warning message

  // additional properties:
  errorType: '...', // type of the error
  context: '...',   // context of the error
  level: '...',     // the level of the warning
  uri: '...'        // URL of the stylesheet
}

Events

All events are emitted with a single argument. The list of supported events are exported in the EVENTS array. Assign handlers using the EventEmitter on function.
  • validation-error - raised on CSS-validation error
  • validation-warning - raised on CSS-validation warning
  • error - raised when a problem with validator is encountered, e.g. an invalid URL was specified
  • end - raised on completion. There will be no other events raised after this one.

CLI

As an alternative, validator can be invoked from the command line.
Options supported:
  • summary - print only the number of errors and warnings
  • host - defines a custom validation server, e.g.: 172.17.0.2:8080

For local installs:
$ ./node_modules/.bin/w3c-css example-site.com --summary

For global installs (-g):
$ w3c-css example-site.com

With custom validation server:
$ w3c-css example-site.com --host=172.17.0.2:8080

Sample output:
$ ./node_modules/.bin/w3c-css example-site.com --summary
validating: http://example-site.com
validation complete
css-errors: 207, css-warnings: 270

Plugins

Contact

Grigoriy Chudnov (mailto:g.chudnov@gmail.com)

License

Distributed under the The MIT License (MIT).