|
1 |
| -# w3c-css-validator |
2 |
| -Validates CSS using W3C's public CSS validator service |
| 1 | +# W3C CSS Validator |
| 2 | +A modern package for validating CSS using [W3C's public CSS validator service](https://jigsaw.w3.org/css-validator/). It simplifies and standardizes the API that W3C exposes to follow newer and more JavaScript-specific conventions. The package is written entirely in TypeScript, is thoroughly tested, has zero dependencies, and uses an asynchronous design. |
| 3 | + |
| 4 | +## Getting started |
| 5 | + |
| 6 | +Install with Yarn or npm: |
| 7 | + |
| 8 | +``` |
| 9 | +yarn add w3c-css-validator |
| 10 | +``` |
| 11 | + |
| 12 | +``` |
| 13 | +npm install w3c-css-validator |
| 14 | +``` |
| 15 | + |
| 16 | +Import or require: |
| 17 | + |
| 18 | +```ts |
| 19 | +import validator from 'w3c-css-validator'; |
| 20 | +``` |
| 21 | + |
| 22 | +```ts |
| 23 | +const validator = require('w3c-css-validator'); |
| 24 | +``` |
| 25 | + |
| 26 | +Validate some CSS: |
| 27 | + |
| 28 | +```ts |
| 29 | +const result = await cssValidator.validateText('.foo { text-align: center; }'); |
| 30 | + |
| 31 | +/* |
| 32 | +Result will be: |
| 33 | +
|
| 34 | +{ |
| 35 | + valid: true, |
| 36 | + errors: [], |
| 37 | +} |
| 38 | +*/ |
| 39 | +``` |
| 40 | + |
| 41 | +## `cssValidator.validateText()` |
| 42 | + |
| 43 | +This function is used to validate CSS contained within a string. |
| 44 | + |
| 45 | +### Options |
| 46 | + |
| 47 | +You can customize the behavior with options, passed as the second argument. |
| 48 | + |
| 49 | +Option | Default | Possible values |
| 50 | +--- | --- | --- |
| 51 | +`medium` | `all` | `all`, `braille`, `embossed`, `handheld`, `print`, `projection`, `screen`, `speech`, `tty`, `tv` |
| 52 | +`warningLevel` | `0` | `0`, `1`, `2`, `3` |
| 53 | + |
| 54 | +Option | Explanation |
| 55 | +--- | --- |
| 56 | +`medium` | The equivalent of the `@media` rule, applied to all of the CSS |
| 57 | +`warningLevel` | `0` means don't return any warnings; `1`, `2`, `3` will return warnings (if any), with higher numbers corresponding to more warnings |
| 58 | + |
| 59 | +Example: |
| 60 | + |
| 61 | +```ts |
| 62 | +const result = await cssValidator.validateText(css, { |
| 63 | + medium: 'print', |
| 64 | + warningLevel: 3, |
| 65 | +}); |
| 66 | +``` |
| 67 | + |
| 68 | +### Response structure |
| 69 | + |
| 70 | +By default, the function returns a Promise, which resolves to an object that looks like: |
| 71 | + |
| 72 | +```ts |
| 73 | +{ |
| 74 | + valid: boolean; |
| 75 | + errors: { |
| 76 | + line: number; |
| 77 | + message: string; |
| 78 | + }[]; |
| 79 | +} |
| 80 | +``` |
| 81 | + |
| 82 | +If you ask it to return warnings via `warningLevel`, it will also include a `warnings` key: |
| 83 | + |
| 84 | +```ts |
| 85 | +{ |
| 86 | + ... |
| 87 | + warnings: { |
| 88 | + line: number; |
| 89 | + level: 1 | 2 | 3; |
| 90 | + message: string; |
| 91 | + }[]; |
| 92 | +} |
| 93 | +``` |
| 94 | + |
| 95 | +## Errors vs. warnings |
| 96 | + |
| 97 | +From W3C's [manual](https://jigsaw.w3.org/css-validator/manual.html): |
| 98 | + |
| 99 | +> The validator can give you two types of messages: errors and warnings. Errors are given when the checked CSS does not respect the CSS recommendation. Warnings are different from errors since they do not state a problem regarding the specification. They are here to warn that some points might be dangerous and could lead to a strange behavior on some user agents. |
| 100 | +
|
| 101 | +## Throttling |
| 102 | + |
| 103 | +You should not call the validator more often than **1 req/sec**. From W3C's [manual](https://jigsaw.w3.org/css-validator/manual.html): |
| 104 | + |
| 105 | +> If you wish to call the validator programmatically for a batch of documents, please make sure that your script will sleep for at least 1 second between requests. The CSS Validation service is a free, public service for all, your respect is appreciated. thanks. |
| 106 | +
|
| 107 | +## Local development |
| 108 | + |
| 109 | +To prep a just-cloned or just-cleaned repository for local development, run `yarn dev`. |
| 110 | + |
| 111 | +To test the whole project, run `yarn test`. |
| 112 | + |
| 113 | +To format the code, run `yarn format`. |
| 114 | + |
| 115 | +To clean the repository (removes any programmatically generated files), run `yarn clean`. |
0 commit comments