[6a3a178] | 1 | # cssesc [![Build status](https://travis-ci.org/mathiasbynens/cssesc.svg?branch=master)](https://travis-ci.org/mathiasbynens/cssesc) [![Code coverage status](https://img.shields.io/codecov/c/github/mathiasbynens/cssesc.svg)](https://codecov.io/gh/mathiasbynens/cssesc)
|
---|
| 2 |
|
---|
| 3 | A JavaScript library for escaping CSS strings and identifiers while generating the shortest possible ASCII-only output.
|
---|
| 4 |
|
---|
| 5 | This 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 |
|
---|
| 9 | Feel free to fork if you see possible improvements!
|
---|
| 10 |
|
---|
| 11 | ## Installation
|
---|
| 12 |
|
---|
| 13 | Via [npm](https://www.npmjs.com/):
|
---|
| 14 |
|
---|
| 15 | ```bash
|
---|
| 16 | npm install cssesc
|
---|
| 17 | ```
|
---|
| 18 |
|
---|
| 19 | In a browser:
|
---|
| 20 |
|
---|
| 21 | ```html
|
---|
| 22 | <script src="cssesc.js"></script>
|
---|
| 23 | ```
|
---|
| 24 |
|
---|
| 25 | In [Node.js](https://nodejs.org/):
|
---|
| 26 |
|
---|
| 27 | ```js
|
---|
| 28 | const cssesc = require('cssesc');
|
---|
| 29 | ```
|
---|
| 30 |
|
---|
| 31 | In Ruby using [the `ruby-cssesc` wrapper gem](https://github.com/borodean/ruby-cssesc):
|
---|
| 32 |
|
---|
| 33 | ```bash
|
---|
| 34 | gem install ruby-cssesc
|
---|
| 35 | ```
|
---|
| 36 |
|
---|
| 37 | ```ruby
|
---|
| 38 | require 'ruby-cssesc'
|
---|
| 39 | CSSEsc.escape('I ♥ Ruby', is_identifier: true)
|
---|
| 40 | ```
|
---|
| 41 |
|
---|
| 42 | In Sass using [`sassy-escape`](https://github.com/borodean/sassy-escape):
|
---|
| 43 |
|
---|
| 44 | ```bash
|
---|
| 45 | gem install sassy-escape
|
---|
| 46 | ```
|
---|
| 47 |
|
---|
| 48 | ```scss
|
---|
| 49 | body {
|
---|
| 50 | content: escape('I ♥ Sass', $is-identifier: true);
|
---|
| 51 | }
|
---|
| 52 | ```
|
---|
| 53 |
|
---|
| 54 | ## API
|
---|
| 55 |
|
---|
| 56 | ### `cssesc(value, options)`
|
---|
| 57 |
|
---|
| 58 | This 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
|
---|
| 61 | cssesc('Ich ♥ Bücher');
|
---|
| 62 | // → 'Ich \\2665 B\\FC cher'
|
---|
| 63 |
|
---|
| 64 | cssesc('foo 𝌆 bar');
|
---|
| 65 | // → 'foo \\1D306 bar'
|
---|
| 66 | ```
|
---|
| 67 |
|
---|
| 68 | By 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 |
|
---|
| 70 | The optional `options` argument accepts an object with the following options:
|
---|
| 71 |
|
---|
| 72 | #### `isIdentifier`
|
---|
| 73 |
|
---|
| 74 | The 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
|
---|
| 77 | cssesc('123a2b');
|
---|
| 78 | // → '123a2b'
|
---|
| 79 |
|
---|
| 80 | cssesc('123a2b', {
|
---|
| 81 | 'isIdentifier': true
|
---|
| 82 | });
|
---|
| 83 | // → '\\31 23a2b'
|
---|
| 84 | ```
|
---|
| 85 |
|
---|
| 86 | #### `quotes`
|
---|
| 87 |
|
---|
| 88 | The 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
|
---|
| 91 | cssesc('Lorem ipsum "dolor" sit \'amet\' etc.');
|
---|
| 92 | // → 'Lorem ipsum "dolor" sit \\\'amet\\\' etc.'
|
---|
| 93 | // → "Lorem ipsum \"dolor\" sit \\'amet\\' etc."
|
---|
| 94 |
|
---|
| 95 | cssesc('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 |
|
---|
| 102 | If 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
|
---|
| 105 | cssesc('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 |
|
---|
| 114 | The `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
|
---|
| 117 | cssesc('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 |
|
---|
| 124 | cssesc('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 |
|
---|
| 134 | The `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
|
---|
| 137 | cssesc('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 |
|
---|
| 146 | The 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`:
|
---|
| 150 | cssesc.options.escapeEverything;
|
---|
| 151 | // → `false` by default
|
---|
| 152 |
|
---|
| 153 | // Override the global default setting for `escapeEverything`:
|
---|
| 154 | cssesc.options.escapeEverything = true;
|
---|
| 155 |
|
---|
| 156 | // Using the global default setting for `escapeEverything`, which is now `true`:
|
---|
| 157 | cssesc('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 |
|
---|
| 163 | A string representing the semantic version number.
|
---|
| 164 |
|
---|
| 165 | ### Using the `cssesc` binary
|
---|
| 166 |
|
---|
| 167 | To use the `cssesc` binary in your shell, simply install cssesc globally using npm:
|
---|
| 168 |
|
---|
| 169 | ```bash
|
---|
| 170 | npm install -g cssesc
|
---|
| 171 | ```
|
---|
| 172 |
|
---|
| 173 | After 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'
|
---|
| 177 | f\F6o \2665 b\E5r \1D306 baz
|
---|
| 178 | ```
|
---|
| 179 |
|
---|
| 180 | If 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'
|
---|
| 184 | f\F6o\ \2665\ b\E5r\ \1D306\ baz
|
---|
| 185 | ```
|
---|
| 186 |
|
---|
| 187 | See `cssesc --help` for the full list of options.
|
---|
| 188 |
|
---|
| 189 | ## Support
|
---|
| 190 |
|
---|
| 191 | This 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 | | [![twitter/mathias](https://gravatar.com/avatar/24e08a9ea84deb17ae121074d0f17125?s=70)](https://twitter.com/mathias "Follow @mathias on Twitter") |
|
---|
| 196 | |---|
|
---|
| 197 | | [Mathias Bynens](https://mathiasbynens.be/) |
|
---|
| 198 |
|
---|
| 199 | ## License
|
---|
| 200 |
|
---|
| 201 | This library is available under the [MIT](https://mths.be/mit) license.
|
---|