You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

201 lines
6.4 KiB

5 years ago
  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. A JavaScript library for escaping CSS strings and identifiers while generating the shortest possible ASCII-only output.
  3. 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)
  4. [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.)
  5. Feel free to fork if you see possible improvements!
  6. ## Installation
  7. Via [npm](https://www.npmjs.com/):
  8. ```bash
  9. npm install cssesc
  10. ```
  11. In a browser:
  12. ```html
  13. <script src="cssesc.js"></script>
  14. ```
  15. In [Node.js](https://nodejs.org/):
  16. ```js
  17. const cssesc = require('cssesc');
  18. ```
  19. In Ruby using [the `ruby-cssesc` wrapper gem](https://github.com/borodean/ruby-cssesc):
  20. ```bash
  21. gem install ruby-cssesc
  22. ```
  23. ```ruby
  24. require 'ruby-cssesc'
  25. CSSEsc.escape('I ♥ Ruby', is_identifier: true)
  26. ```
  27. In Sass using [`sassy-escape`](https://github.com/borodean/sassy-escape):
  28. ```bash
  29. gem install sassy-escape
  30. ```
  31. ```scss
  32. body {
  33. content: escape('I ♥ Sass', $is-identifier: true);
  34. }
  35. ```
  36. ## API
  37. ### `cssesc(value, options)`
  38. 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).
  39. ```js
  40. cssesc('Ich ♥ Bücher');
  41. // → 'Ich \\2665 B\\FC cher'
  42. cssesc('foo 𝌆 bar');
  43. // → 'foo \\1D306 bar'
  44. ```
  45. 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).
  46. The optional `options` argument accepts an object with the following options:
  47. #### `isIdentifier`
  48. 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`.
  49. ```js
  50. cssesc('123a2b');
  51. // → '123a2b'
  52. cssesc('123a2b', {
  53. 'isIdentifier': true
  54. });
  55. // → '\\31 23a2b'
  56. ```
  57. #### `quotes`
  58. 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.
  59. ```js
  60. cssesc('Lorem ipsum "dolor" sit \'amet\' etc.');
  61. // → 'Lorem ipsum "dolor" sit \\\'amet\\\' etc.'
  62. // → "Lorem ipsum \"dolor\" sit \\'amet\\' etc."
  63. cssesc('Lorem ipsum "dolor" sit \'amet\' etc.', {
  64. 'quotes': 'single'
  65. });
  66. // → 'Lorem ipsum "dolor" sit \\\'amet\\\' etc.'
  67. // → "Lorem ipsum \"dolor\" sit \\'amet\\' etc."
  68. ```
  69. If you want to use the output as part of a CSS string literal wrapped in double quotes, set the `quotes` option to `'double'`.
  70. ```js
  71. cssesc('Lorem ipsum "dolor" sit \'amet\' etc.', {
  72. 'quotes': 'double'
  73. });
  74. // → 'Lorem ipsum \\"dolor\\" sit \'amet\' etc.'
  75. // → "Lorem ipsum \\\"dolor\\\" sit 'amet' etc."
  76. ```
  77. #### `wrap`
  78. 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.
  79. ```js
  80. cssesc('Lorem ipsum "dolor" sit \'amet\' etc.', {
  81. 'quotes': 'single',
  82. 'wrap': true
  83. });
  84. // → '\'Lorem ipsum "dolor" sit \\\'amet\\\' etc.\''
  85. // → "\'Lorem ipsum \"dolor\" sit \\\'amet\\\' etc.\'"
  86. cssesc('Lorem ipsum "dolor" sit \'amet\' etc.', {
  87. 'quotes': 'double',
  88. 'wrap': true
  89. });
  90. // → '"Lorem ipsum \\"dolor\\" sit \'amet\' etc."'
  91. // → "\"Lorem ipsum \\\"dolor\\\" sit \'amet\' etc.\""
  92. ```
  93. #### `escapeEverything`
  94. 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.
  95. ```js
  96. cssesc('lolwat"foo\'bar', {
  97. 'escapeEverything': true
  98. });
  99. // → '\\6C\\6F\\6C\\77\\61\\74\\"\\66\\6F\\6F\\\'\\62\\61\\72'
  100. // → "\\6C\\6F\\6C\\77\\61\\74\\\"\\66\\6F\\6F\\'\\62\\61\\72"
  101. ```
  102. #### Overriding the default options globally
  103. 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.
  104. ```js
  105. // Read the global default setting for `escapeEverything`:
  106. cssesc.options.escapeEverything;
  107. // → `false` by default
  108. // Override the global default setting for `escapeEverything`:
  109. cssesc.options.escapeEverything = true;
  110. // Using the global default setting for `escapeEverything`, which is now `true`:
  111. cssesc('foo © bar ≠ baz 𝌆 qux');
  112. // → '\\66\\6F\\6F\\ \\A9\\ \\62\\61\\72\\ \\2260\\ \\62\\61\\7A\\ \\1D306\\ \\71\\75\\78'
  113. ```
  114. ### `cssesc.version`
  115. A string representing the semantic version number.
  116. ### Using the `cssesc` binary
  117. To use the `cssesc` binary in your shell, simply install cssesc globally using npm:
  118. ```bash
  119. npm install -g cssesc
  120. ```
  121. After that you will be able to escape text for use in CSS strings or identifiers from the command line:
  122. ```bash
  123. $ cssesc 'föo ♥ bår 𝌆 baz'
  124. f\F6o \2665 b\E5r \1D306 baz
  125. ```
  126. If the output needs to be a CSS identifier rather than part of a string literal, use the `-i`/`--identifier` option:
  127. ```bash
  128. $ cssesc --identifier 'föo ♥ bår 𝌆 baz'
  129. f\F6o\ \2665\ b\E5r\ \1D306\ baz
  130. ```
  131. See `cssesc --help` for the full list of options.
  132. ## Support
  133. 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).
  134. ## Author
  135. | [![twitter/mathias](https://gravatar.com/avatar/24e08a9ea84deb17ae121074d0f17125?s=70)](https://twitter.com/mathias "Follow @mathias on Twitter") |
  136. |---|
  137. | [Mathias Bynens](https://mathiasbynens.be/) |
  138. ## License
  139. This library is available under the [MIT](https://mths.be/mit) license.