1# cssesc [](https://travis-ci.org/mathiasbynens/cssesc) [](https://codecov.io/gh/mathiasbynens/cssesc) 2 3A JavaScript library for escaping CSS strings and identifiers while generating the shortest possible ASCII-only output. 4 5This is a JavaScript library for [escaping text for use in CSS strings or identifiers](https://mathiasbynens.be/notes/css-escapes) while generating the shortest possible valid ASCII-only output. [Here’s an online demo.](https://mothereff.in/css-escapes) 6 7[A polyfill for the CSSOM `CSS.escape()` method is available in a separate repository.](https://mths.be/cssescape) (In comparison, _cssesc_ is much more powerful.) 8 9Feel free to fork if you see possible improvements! 10 11## Installation 12 13Via [npm](https://www.npmjs.com/): 14 15```bash 16npm install cssesc 17``` 18 19In a browser: 20 21```html 22<script src="cssesc.js"></script> 23``` 24 25In [Node.js](https://nodejs.org/): 26 27```js 28const cssesc = require('cssesc'); 29``` 30 31In Ruby using [the `ruby-cssesc` wrapper gem](https://github.com/borodean/ruby-cssesc): 32 33```bash 34gem install ruby-cssesc 35``` 36 37```ruby 38require 'ruby-cssesc' 39CSSEsc.escape('I ♥ Ruby', is_identifier: true) 40``` 41 42In Sass using [`sassy-escape`](https://github.com/borodean/sassy-escape): 43 44```bash 45gem install sassy-escape 46``` 47 48```scss 49body { 50 content: escape('I ♥ Sass', $is-identifier: true); 51} 52``` 53 54## API 55 56### `cssesc(value, options)` 57 58This function takes a value and returns an escaped version of the value where any characters that are not printable ASCII symbols are escaped using the shortest possible (but valid) [escape sequences for use in CSS strings or identifiers](https://mathiasbynens.be/notes/css-escapes). 59 60```js 61cssesc('Ich ♥ Bücher'); 62// → 'Ich \\2665 B\\FC cher' 63 64cssesc('foo bar'); 65// → 'foo \\1D306 bar' 66``` 67 68By default, `cssesc` returns a string that can be used as part of a CSS string. If the target is a CSS identifier rather than a CSS string, use the `isIdentifier: true` setting (see below). 69 70The optional `options` argument accepts an object with the following options: 71 72#### `isIdentifier` 73 74The default value for the `isIdentifier` option is `false`. This means that the input text will be escaped for use in a CSS string literal. If you want to use the result as a CSS identifier instead (in a selector, for example), set this option to `true`. 75 76```js 77cssesc('123a2b'); 78// → '123a2b' 79 80cssesc('123a2b', { 81 'isIdentifier': true 82}); 83// → '\\31 23a2b' 84``` 85 86#### `quotes` 87 88The default value for the `quotes` option is `'single'`. This means that any occurences of `'` in the input text will be escaped as `\'`, so that the output can be used in a CSS string literal wrapped in single quotes. 89 90```js 91cssesc('Lorem ipsum "dolor" sit \'amet\' etc.'); 92// → 'Lorem ipsum "dolor" sit \\\'amet\\\' etc.' 93// → "Lorem ipsum \"dolor\" sit \\'amet\\' etc." 94 95cssesc('Lorem ipsum "dolor" sit \'amet\' etc.', { 96 'quotes': 'single' 97}); 98// → 'Lorem ipsum "dolor" sit \\\'amet\\\' etc.' 99// → "Lorem ipsum \"dolor\" sit \\'amet\\' etc." 100``` 101 102If you want to use the output as part of a CSS string literal wrapped in double quotes, set the `quotes` option to `'double'`. 103 104```js 105cssesc('Lorem ipsum "dolor" sit \'amet\' etc.', { 106 'quotes': 'double' 107}); 108// → 'Lorem ipsum \\"dolor\\" sit \'amet\' etc.' 109// → "Lorem ipsum \\\"dolor\\\" sit 'amet' etc." 110``` 111 112#### `wrap` 113 114The `wrap` option takes a boolean value (`true` or `false`), and defaults to `false` (disabled). When enabled, the output will be a valid CSS string literal wrapped in quotes. The type of quotes can be specified through the `quotes` setting. 115 116```js 117cssesc('Lorem ipsum "dolor" sit \'amet\' etc.', { 118 'quotes': 'single', 119 'wrap': true 120}); 121// → '\'Lorem ipsum "dolor" sit \\\'amet\\\' etc.\'' 122// → "\'Lorem ipsum \"dolor\" sit \\\'amet\\\' etc.\'" 123 124cssesc('Lorem ipsum "dolor" sit \'amet\' etc.', { 125 'quotes': 'double', 126 'wrap': true 127}); 128// → '"Lorem ipsum \\"dolor\\" sit \'amet\' etc."' 129// → "\"Lorem ipsum \\\"dolor\\\" sit \'amet\' etc.\"" 130``` 131 132#### `escapeEverything` 133 134The `escapeEverything` option takes a boolean value (`true` or `false`), and defaults to `false` (disabled). When enabled, all the symbols in the output will be escaped, even printable ASCII symbols. 135 136```js 137cssesc('lolwat"foo\'bar', { 138 'escapeEverything': true 139}); 140// → '\\6C\\6F\\6C\\77\\61\\74\\"\\66\\6F\\6F\\\'\\62\\61\\72' 141// → "\\6C\\6F\\6C\\77\\61\\74\\\"\\66\\6F\\6F\\'\\62\\61\\72" 142``` 143 144#### Overriding the default options globally 145 146The global default settings can be overridden by modifying the `css.options` object. This saves you from passing in an `options` object for every call to `encode` if you want to use the non-default setting. 147 148```js 149// Read the global default setting for `escapeEverything`: 150cssesc.options.escapeEverything; 151// → `false` by default 152 153// Override the global default setting for `escapeEverything`: 154cssesc.options.escapeEverything = true; 155 156// Using the global default setting for `escapeEverything`, which is now `true`: 157cssesc('foo © bar ≠ baz qux'); 158// → '\\66\\6F\\6F\\ \\A9\\ \\62\\61\\72\\ \\2260\\ \\62\\61\\7A\\ \\1D306\\ \\71\\75\\78' 159``` 160 161### `cssesc.version` 162 163A string representing the semantic version number. 164 165### Using the `cssesc` binary 166 167To use the `cssesc` binary in your shell, simply install cssesc globally using npm: 168 169```bash 170npm install -g cssesc 171``` 172 173After that you will be able to escape text for use in CSS strings or identifiers from the command line: 174 175```bash 176$ cssesc 'föo ♥ bår baz' 177f\F6o \2665 b\E5r \1D306 baz 178``` 179 180If the output needs to be a CSS identifier rather than part of a string literal, use the `-i`/`--identifier` option: 181 182```bash 183$ cssesc --identifier 'föo ♥ bår baz' 184f\F6o\ \2665\ b\E5r\ \1D306\ baz 185``` 186 187See `cssesc --help` for the full list of options. 188 189## Support 190 191This library supports the Node.js and browser versions mentioned in [`.babelrc`](https://github.com/mathiasbynens/cssesc/blob/master/.babelrc). For a version that supports a wider variety of legacy browsers and environments out-of-the-box, [see v0.1.0](https://github.com/mathiasbynens/cssesc/releases/tag/v0.1.0). 192 193## Author 194 195| [](https://twitter.com/mathias "Follow @mathias on Twitter") | 196|---| 197| [Mathias Bynens](https://mathiasbynens.be/) | 198 199## License 200 201This library is available under the [MIT](https://mths.be/mit) license. 202