A JavaScript library for escaping CSS strings and identifiers while generating the shortest possible ASCII-only output.
The cssesc npm package is a utility for escaping strings to be used in CSS selectors and strings. It provides a way to generate CSS-compatible strings, ensuring that any input can be safely used in CSS contexts without causing syntax errors or unintended behaviors.
Escaping strings for CSS identifiers
This feature allows you to escape strings to be safely used as CSS identifiers, such as class names or IDs. The code sample demonstrates escaping a string that starts with a digit, which would normally not be valid as a CSS identifier without escaping.
cssesc('123abc'); // Returns '\31 23abc'Escaping strings for CSS strings
This feature is used for escaping strings to be included in CSS string values. The code sample shows how to escape quotes within a string, making it safe to use within CSS string contexts, such as in the content property.
cssesc('"Hello, world!"', {isIdentifier: false}); // Returns '"\"Hello, world!\""'Customizing escape options
This feature allows for customization of the escaping behavior, such as wrapping the output in quotes. The code sample demonstrates how to automatically wrap the escaped string in quotes, which is useful for generating CSS string values.
cssesc('Hello, world!', {wrap: true}); // Returns '"Hello, world!"'The 'he' package is an HTML entity encoder/decoder. While it focuses on HTML rather than CSS, it serves a similar purpose in providing safe strings for web contexts. Compared to cssesc, 'he' is more suited for HTML content encoding and decoding rather than CSS-specific escaping.
This package provides a simple method to escape HTML characters. Like cssesc, it ensures that strings can be safely inserted into web contexts, but it is specifically tailored for HTML rather than CSS. It lacks the CSS-specific options and escaping rules provided by cssesc.
A JavaScript library for escaping CSS strings and identifiers while generating the shortest possible ASCII-only output.
This is a JavaScript library for escaping text for use in CSS strings or identifiers while generating the shortest possible valid ASCII-only output. Here’s an online demo.
A polyfill for the CSSOM CSS.escape() method is available in a separate repository. (In comparison, cssesc is much more powerful.)
Feel free to fork if you see possible improvements!
Via npm:
npm install cssesc
In a browser:
<script src="cssesc.js"></script>
In Node.js:
const cssesc = require('cssesc');
In Ruby using the ruby-cssesc wrapper gem:
gem install ruby-cssesc
require 'ruby-cssesc'
CSSEsc.escape('I ♥ Ruby', is_identifier: true)
In Sass using sassy-escape:
gem install sassy-escape
body {
content: escape('I ♥ Sass', $is-identifier: true);
}
cssesc(value, options)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.
cssesc('Ich ♥ Bücher');
// → 'Ich \\2665 B\\FC cher'
cssesc('foo 𝌆 bar');
// → 'foo \\1D306 bar'
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).
The optional options argument accepts an object with the following options:
isIdentifierThe 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.
cssesc('123a2b');
// → '123a2b'
cssesc('123a2b', {
'isIdentifier': true
});
// → '\\31 23a2b'
quotesThe 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.
cssesc('Lorem ipsum "dolor" sit \'amet\' etc.');
// → 'Lorem ipsum "dolor" sit \\\'amet\\\' etc.'
// → "Lorem ipsum \"dolor\" sit \\'amet\\' etc."
cssesc('Lorem ipsum "dolor" sit \'amet\' etc.', {
'quotes': 'single'
});
// → 'Lorem ipsum "dolor" sit \\\'amet\\\' etc.'
// → "Lorem ipsum \"dolor\" sit \\'amet\\' etc."
If you want to use the output as part of a CSS string literal wrapped in double quotes, set the quotes option to 'double'.
cssesc('Lorem ipsum "dolor" sit \'amet\' etc.', {
'quotes': 'double'
});
// → 'Lorem ipsum \\"dolor\\" sit \'amet\' etc.'
// → "Lorem ipsum \\\"dolor\\\" sit 'amet' etc."
wrapThe 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.
cssesc('Lorem ipsum "dolor" sit \'amet\' etc.', {
'quotes': 'single',
'wrap': true
});
// → '\'Lorem ipsum "dolor" sit \\\'amet\\\' etc.\''
// → "\'Lorem ipsum \"dolor\" sit \\\'amet\\\' etc.\'"
cssesc('Lorem ipsum "dolor" sit \'amet\' etc.', {
'quotes': 'double',
'wrap': true
});
// → '"Lorem ipsum \\"dolor\\" sit \'amet\' etc."'
// → "\"Lorem ipsum \\\"dolor\\\" sit \'amet\' etc.\""
escapeEverythingThe 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.
cssesc('lolwat"foo\'bar', {
'escapeEverything': true
});
// → '\\6C\\6F\\6C\\77\\61\\74\\"\\66\\6F\\6F\\\'\\62\\61\\72'
// → "\\6C\\6F\\6C\\77\\61\\74\\\"\\66\\6F\\6F\\'\\62\\61\\72"
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.
// Read the global default setting for `escapeEverything`:
cssesc.options.escapeEverything;
// → `false` by default
// Override the global default setting for `escapeEverything`:
cssesc.options.escapeEverything = true;
// Using the global default setting for `escapeEverything`, which is now `true`:
cssesc('foo © bar ≠ baz 𝌆 qux');
// → '\\66\\6F\\6F\\ \\A9\\ \\62\\61\\72\\ \\2260\\ \\62\\61\\7A\\ \\1D306\\ \\71\\75\\78'
cssesc.versionA string representing the semantic version number.
cssesc binaryTo use the cssesc binary in your shell, simply install cssesc globally using npm:
npm install -g cssesc
After that you will be able to escape text for use in CSS strings or identifiers from the command line:
$ cssesc 'föo ♥ bår 𝌆 baz'
f\F6o \2665 b\E5r \1D306 baz
If the output needs to be a CSS identifier rather than part of a string literal, use the -i/--identifier option:
$ cssesc --identifier 'föo ♥ bår 𝌆 baz'
f\F6o\ \2665\ b\E5r\ \1D306\ baz
See cssesc --help for the full list of options.
This library supports Node.js v4+ only. For a version that supports browser and environments out-of-the-box, see v0.1.0.
 |
|---|
| Mathias Bynens |
This library is available under the MIT license.
FAQs
A JavaScript library for escaping CSS strings and identifiers while generating the shortest possible ASCII-only output.
The npm package cssesc receives a total of 27,215,941 weekly downloads. As such, cssesc popularity was classified as popular.
We found that cssesc demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Malicious PyPI checkers validate stolen emails against TikTok and Instagram APIs, enabling targeted account attacks and dark web credential sales.
Security News
The Node.js TSC opted not to endorse a feature bounty program, citing concerns about incentives, governance, and project neutrality.
Research
Security News
A look at the top trends in how threat actors are weaponizing open source packages to deliver malware and persist across the software supply chain.