swatch
Swatch is a CSS syntax highlighter.
Use to_tokens for classified tokens, or
to_html / to_ansi to render directly.
Based on CSS Syntax Level 3.
Types
A CSS token.
pub type Token {
Whitespace(String)
Comment(String)
Selector(String)
ClassSelector(String)
IdSelector(String)
PseudoSelector(String)
AttributeName(String)
AttributeValue(String)
AttributeFlag(String)
AtRule(String)
Property(String)
Variable(String)
String(String)
Number(String)
Unit(String)
HexColor(String)
Function(String)
Keyword(String)
Important(String)
Operator(String)
Punctuation(String)
Other(String)
}
Constructors
-
Whitespace(String)Spaces, tabs, newlines.
-
Comment(String)A
/* ... */block comment, including the delimiters. -
Selector(String)An element selector (
div,h1,*) or other bare selector identifier. -
ClassSelector(String)A class selector, including the leading
.(e.g..btn). -
IdSelector(String)An id selector, including the leading
#(e.g.#header). -
PseudoSelector(String)A pseudo-class or pseudo-element (e.g.
:hover,::before). -
AttributeName(String)The attribute name in an attribute selector (
typein[type="text"]), or a named namespace prefix (nsin[ns|attr]). The universal prefix (*in[*|attr]) emits asSelector. -
AttributeValue(String)An unquoted attribute value (
textin[type=text]). A quoted value emits asString. -
AttributeFlag(String)The case-sensitivity flag (
iors) at the end of an attribute selector. -
AtRule(String)An at-rule keyword, including the leading
@(e.g.@media). -
Property(String)A property name on the left-hand side of a declaration (e.g.
color). -
Variable(String)A custom property name, including the leading
--(e.g.--brand). -
String(String)A quoted string (including the quotes), or the unquoted body of a
url(...)call. -
Number(String)A numeric literal (e.g.
10,1.5,-2). -
Unit(String)A unit attached to a number (e.g.
px,em,%). -
HexColor(String)A
#followed by hex digits in value position (e.g.#fff). -
Function(String)A function name immediately followed by
((e.g.rgb,var,calc). -
Keyword(String)An identifier in value position or at-rule prelude (e.g.
red,print,and), or a<urange>(e.g.U+0025-00FF). -
Important(String)The
!importantannotation. -
Operator(String)Arithmetic and combinators (
+,-,*,/,>,~,=,!), range comparisons (<,<=,>=), and|/||(namespace separator and column combinator). Nesting&is aSelector. -
Punctuation(String)Structural punctuation:
{,},;,:,,,(,), and[/]or.outside selector contexts. -
Other(String)Anything that did not match a more specific category.
Values
pub fn to_ansi(code: String) -> String
Render CSS source for the terminal using ANSI color escapes.
| Token | Color |
|---|---|
| Selector, ClassSelector, IdSelector, PseudoSelector, AttributeName, AttributeFlag, Keyword | yellow |
| Property, Variable | cyan |
| String, Number, Unit, HexColor, AttributeValue | green |
| Function | blue |
| AtRule, Operator | magenta |
| Important | bold red |
| Comment | italic gray |
| Whitespace, Punctuation, Other | reset |
Structural tokens use ansi.reset so an unclosed attribute from
upstream text can’t bleed into characters like { and }.
pub fn to_html(code: String) -> String
Render CSS source as HTML. Each token is wrapped in a <span> with a
CSS class describing its kind. Wrap the result in
<pre><code>...</code></pre> and style the classes below.
| Token | CSS class |
|---|---|
| Whitespace | (no wrapper) |
| Comment | hl-comment |
| Selector | hl-selector |
| ClassSelector | hl-class |
| IdSelector | hl-id |
| PseudoSelector | hl-pseudo |
| AttributeName | hl-attribute |
| AttributeValue | hl-attribute-value |
| AttributeFlag | hl-attribute-flag |
| AtRule | hl-at-rule |
| Property | hl-property |
| Variable | hl-variable |
| String | hl-string |
| Number | hl-number |
| Unit | hl-unit |
| HexColor | hl-hex |
| Function | hl-function |
| Keyword | hl-keyword |
| Important | hl-important |
| Operator | hl-operator |
| Punctuation | hl-punctuation |
| Other | hl-other |
Starter stylesheet:
pre code .hl-comment { color: #6a737d; font-style: italic }
pre code .hl-selector { color: #d73a49 }
pre code .hl-class { color: #6f42c1 }
pre code .hl-id { color: #6f42c1 }
pre code .hl-pseudo { color: #6f42c1 }
pre code .hl-attribute { color: #6f42c1 }
pre code .hl-attribute-value { color: #032f62 }
pre code .hl-attribute-flag { color: #6f42c1 }
pre code .hl-at-rule { color: #d73a49 }
pre code .hl-property { color: #005cc5 }
pre code .hl-variable { color: #e36209 }
pre code .hl-string { color: #032f62 }
pre code .hl-number { color: #005cc5 }
pre code .hl-unit { color: #005cc5 }
pre code .hl-hex { color: #005cc5 }
pre code .hl-function { color: #6f42c1 }
pre code .hl-keyword { color: #22863a }
pre code .hl-important { color: #d73a49; font-weight: bold }
pre code .hl-operator { color: #d73a49 }
pre code .hl-punctuation { color: #24292e }
pre code .hl-other { color: #24292e }
pub fn to_source(tokens: List(Token)) -> String
Concatenate a token list back into source text — the inverse of
to_tokens. to_source(to_tokens(css)) == css holds for
any input.
pub fn to_tokens(code: String) -> List(Token)
Tokenize some CSS source. The returned tokens, concatenated, will reproduce the original source.
pub fn token_to_source(token: Token) -> String
The verbatim source text a token was cut from, including any sigil or
delimiters (. for a class, the quotes of a string, /* */ for a
comment).
pub fn tokens_to_ansi(tokens: List(Token)) -> String
Render an already-tokenized list for the terminal. Like
to_ansi, but skips re-tokenizing for callers that already
hold the token list.