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.
|
---|