postcss-unicode-characters

An easier way to write unicode-range descriptors.

Install

With npm do:

npm install postcss-unicode-characters --save

Example

This module provides syntactic sugar for the unicode-range descriptor, inspired by @svgeesus' dotCSS talk. It provides three different ways to construct a standard unicode-range descriptor by using the non-standard unicode-characters descriptor.

The formal syntax for unicode-characters looks like this:

[ <string> | name( <string> ) | script( <string> ) ]#

Using literal characters

Write in the characters that you want to subset directly, using a string:

Input

@font-face {
    font-family: test;
    src: local("Baskerville");
    unicode-characters: "hello";
}

Output

@font-face {
    font-family: test;
    src: local("Baskerville");
    unicode-range: U+68, U+65, U+6C, U+6F;
}

Using this method, duplicate characters are automatically removed for you.

Using the name function

If you can remember a Unicode description for a character, using this function will save some time obtaining the literal:

Input

@font-face {
    font-family: test;
    src: local("Baskerville");
    unicode-characters: name("black star");
}

Output

@font-face {
    font-family: test;
    src: local("Baskerville");
    unicode-range: U+2605;
}

Using the script function

You can also use the script function for a range of characters.

Input

@font-face {
    font-family: test;
    src: local("Baskerville");
    unicode-characters: script("arrows");
}

Output

@font-face {
    font-family: test;
    src: local("Baskerville");
    unicode-range: U+2190-21FF;
}

Mix & match

Note that you can mix and match as many combinations as you like, even using the classic unicode-range syntax. Just remember that these should be separated by a comma:

Input

@font-face {
    font-family: test;
    src: local("Baskerville");
    unicode-characters: script("arrows"), "hello", U+26;
}

Output

@font-face {
    font-family: test;
    src: local("Baskerville");
    unicode-range: U+2190-21FF, U+68, U+65, U+6C, U+6F, U+26;
}

Usage

See the PostCSS documentation for examples for your environment.

Contributors

Thanks goes to these wonderful people (emoji key):

| Ben Briggs💻 📖 👀 ⚠️ | | :---: |

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT © Ben Briggs