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 (type in [type="text"]), or a named namespace prefix (ns in [ns|attr]). The universal prefix (* in [*|attr]) emits as Selector.

  • AttributeValue(String)

    An unquoted attribute value (text in [type=text]). A quoted value emits as String.

  • AttributeFlag(String)

    The case-sensitivity flag (i or s) 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 !important annotation.

  • Operator(String)

    Arithmetic and combinators (+, -, *, /, >, ~, =, !), range comparisons (<, <=, >=), and | / || (namespace separator and column combinator). Nesting & is a Selector.

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

TokenColor
Selector, ClassSelector, IdSelector, PseudoSelector, AttributeName, AttributeFlag, Keywordyellow
Property, Variablecyan
String, Number, Unit, HexColor, AttributeValuegreen
Functionblue
AtRule, Operatormagenta
Importantbold red
Commentitalic gray
Whitespace, Punctuation, Otherreset

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.

TokenCSS class
Whitespace(no wrapper)
Commenthl-comment
Selectorhl-selector
ClassSelectorhl-class
IdSelectorhl-id
PseudoSelectorhl-pseudo
AttributeNamehl-attribute
AttributeValuehl-attribute-value
AttributeFlaghl-attribute-flag
AtRulehl-at-rule
Propertyhl-property
Variablehl-variable
Stringhl-string
Numberhl-number
Unithl-unit
HexColorhl-hex
Functionhl-function
Keywordhl-keyword
Importanthl-important
Operatorhl-operator
Punctuationhl-punctuation
Otherhl-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.

pub fn tokens_to_html(tokens: List(Token)) -> String

Render an already-tokenized list as HTML. Like to_html but skips re-tokenizing, for callers that already hold the token list.

Search Document