Screenshot Tests

March 24, 2026 · View on GitHub

Visual regression tests for every parser and display mode. Each test is CI-generated from a config in scripts/screenshots/configs.lua that enables one option against a fixture file, showing exactly which strings it highlights and which it does not.

Report an issue: click the [N] link next to any test to open a pre-filled issue.

Table of Contents

Default

css = true preset — enables names, hex, rgb, hsl, oklch, css_var all at once.

[1] default
css = true (names + hex + rgb + hsl + oklch + css_var)

Config 
parsers = { css = true }

Presets

The css and css_fn presets enable groups of parsers with a single flag. Each test shows what the preset enables and what it does not.

[2] preset_css
css = true preset (names + hex + rgb + hsl + oklch + css_var)

Config 
parsers = { css = true }
[3] preset_css_fn
css_fn = true preset (rgb + hsl + oklch only)

Config 
parsers = {
  css_fn = true,
  hex = { default = false },
  names = { enable = false },
}

Hex Colors

Each test enables one hex.* option. The hex_all test enables all hex formats together.

[4] hex_rgb
#RGB (3-digit)

Config 
parsers = {
  hex = { default = false, rgb = true },
  names = { enable = false },
}
[5] hex_rgba
#RGBA (4-digit)

Config 
parsers = {
  hex = { default = false, rgba = true },
  names = { enable = false },
}
[6] hex_rrggbb
#RRGGBB (6-digit)

Config 
parsers = {
  hex = { default = false, rrggbb = true },
  names = { enable = false },
}
[7] hex_rrggbbaa
#RRGGBBAA (8-digit)

Config 
parsers = {
  hex = { default = false, rrggbbaa = true },
  names = { enable = false },
}
[8] hex_hash_aarrggbb
#AARRGGBB (QML 8-digit)

Config 
parsers = {
  hex = { default = false, hash_aarrggbb = true },
  names = { enable = false },
}
[9] hex_0x_aarrggbb
0xAARRGGBB (prefix hex)

Config 
parsers = {
  hex = { aarrggbb = true, default = false },
  names = { enable = false },
}
[10] hex_no_hash
RRGGBB without # prefix

Config 
parsers = {
  hex = { default = false, no_hash = true },
  names = { enable = false },
}
[11] hex_default
hex.default (all common formats)

Config 
parsers = { hex = { default = true }, names = { enable = false } }
[12] hex_all
All hex formats combined

Config 
parsers = {
  hex = { default = true, hash_aarrggbb = true, no_hash = true },
  names = { enable = false },
}

CSS Functions

Each test enables one CSS function parser. The css_all test enables all CSS functions together.

[13] css_rgb
rgb() / rgba() functions

Config 
parsers = { rgb = { enable = true } }
[14] css_hsl
hsl() / hsla() functions

Config 
parsers = { hsl = { enable = true } }
[15] css_oklch
oklch() function

Config 
parsers = { oklch = { enable = true } }
[16] css_hwb
hwb() function (CSS Color Level 4)

Config 
parsers = { hwb = { enable = true } }
[17] css_lab
lab() function (CIE Lab)

Config 
parsers = { lab = { enable = true } }
[18] css_lch
lch() function (CIE LCH)

Config 
parsers = { lch = { enable = true } }
[19] css_color_fn
color() function (srgb, display-p3, a98-rgb, etc.)

Config 
parsers = { css_color = { enable = true } }
[20] css_hsluv
hsluv() / hsluvu() functions

Config 
parsers = { hsluv = { enable = true } }
[21] css_all
All CSS color functions combined

Config 
parsers = {
  css_color = { enable = true },
  hsl = { enable = true },
  hsluv = { enable = true },
  hwb = { enable = true },
  lab = { enable = true },
  lch = { enable = true },
  oklch = { enable = true },
  rgb = { enable = true },
}

Named Colors

Each test enables one name case variant or tailwind. The names_all test enables all name styles together.

[22] names_lowercase
lowercase named colors only

Config 
parsers = {
  names = {
    camelcase = false,
    enable = true,
    lowercase = true,
    uppercase = false,
  },
}
[23] names_camelcase
CamelCase named colors only

Config 
parsers = {
  names = {
    camelcase = true,
    enable = true,
    lowercase = false,
    uppercase = false,
  },
}
[24] names_uppercase
UPPERCASE named colors only

Config 
parsers = {
  names = {
    camelcase = false,
    enable = true,
    lowercase = false,
    uppercase = true,
  },
}
[25] names_tailwind
Tailwind CSS color names

Config 
parsers = { names = { enable = false }, tailwind = { enable = true } }
[26] names_tailwind_lsp_config
Tailwind with lsp table config (parser names only)

Config 
parsers = {
  names = { enable = false },
  tailwind = {
    enable = true,
    lsp = {
      disable_document_color = true,
      enable = false,
      update_names = false,
    },
  },
}
[27] names_strip_digits
strip_digits rejects names ending in digits

Config 
parsers = {
  names = { enable = true, lowercase = true, strip_digits = true },
}
[28] names_custom
User-defined custom color names

Config 
parsers = {
  names = {
    camelcase = false,
    custom = {
      ["brand-primary"] = "#E63946",
      ["brand-secondary"] = "#457B9D",
      ["ui-danger"] = "#F4A261",
      ["ui-success"] = "#2A9D8F",
      ["ui-warning"] = "#E9C46A",
    },
    enable = true,
    extra_word_chars = "",
    lowercase = false,
    uppercase = false,
  },
}
[29] names_extra_word_chars
extra_word_chars = "-" (hyphens in names)

Config 
parsers = {
  names = {
    camelcase = false,
    custom = {
      ["brand-primary"] = "#E63946",
      ["brand-secondary"] = "#457B9D",
      ["ui-success"] = "#2A9D8F",
      ["ui-warning"] = "#E9C46A",
    },
    enable = true,
    extra_word_chars = "-",
    lowercase = false,
    uppercase = false,
  },
}
[30] names_all
All name styles combined

Config 
parsers = {
  names = {
    camelcase = true,
    enable = true,
    lowercase = true,
    uppercase = true,
  },
  tailwind = { enable = true },
}

Special Parsers

Each test enables one special parser (xterm, xcolor, css_var_rgb, sass, hooks) with its own fixture.

[31] special_xterm
Xterm 256-color (#xN)

Config 
parsers = { xterm = { enable = true } }
[32] special_xcolor
XColor blending (name!percent)

Config 
parsers = { names = { enable = false }, xcolor = { enable = true } }
[33] special_css_var_rgb
CSS variable RGB (--var: r,g,b;)

Config 
parsers = { css_var_rgb = { enable = true } }
[34] special_css_var
CSS custom properties var(--name) resolution

Config 
parsers = {
  css = true,
  css_var = { enable = true, parsers = { css = true } },
}
[35] special_sass
Sass $variable color resolution

Config 
parsers = {
  names = { enable = false },
  sass = { enable = true, parsers = { css = true } },
}
[36] special_sass_pattern
variable_pattern restricts to alpha-only names

Config 
parsers = {
  names = { enable = false },
  sass = {
    enable = true,
    parsers = { css = true },
    variable_pattern = "^%$([%a]+)",
  },
}
[37] special_hooks_line_filter
should_highlight_line skips comment lines

Config 
parsers = { css = true }
hooks = {
  should_highlight_line = function(...) end -- see configs.lua,
}
[38] special_hooks_color_filter
should_highlight_color skips black and white

Config 
parsers = { css = true }
hooks = {
  should_highlight_color = function(...) end -- see configs.lua,
}
[39] special_hooks_transform
transform_color converts all colors to grayscale

Config 
parsers = { css = true }
hooks = { transform_color = function(...) end -- see configs.lua }

Display Modes

All display tests use the same fixture with css = true, showing how different display.mode settings render the same colors.

[40] display_background
mode = background (default)

Config 
parsers = { css = true }
display = { mode = "background" }
[41] display_foreground
mode = foreground (colored text)

Config 
parsers = { css = true }
display = { mode = "foreground" }
[42] display_underline
mode = underline (colored underline via sp)

Config 
parsers = {
  names = { camelcase = true, enable = true, lowercase = true },
}
display = { mode = "underline" }
[43] display_virtualtext_eol
virtualtext at end of line

Config 
parsers = { css = true }
display = { mode = "virtualtext", virtualtext = { position = "eol" } }
[44] display_virtualtext_inline
virtualtext inline after color

Config 
parsers = { css = true }
display = {
  mode = "virtualtext",
  virtualtext = { position = "after" },
}
[45] display_virtualtext_before
virtualtext before color

Config 
parsers = { css = true }
display = {
  mode = "virtualtext",
  virtualtext = { position = "before" },
}
[46] display_virtualtext_hl_bg
virtualtext eol with hl_mode = background

Config 
parsers = { css = true }
display = {
  mode = "virtualtext",
  virtualtext = { hl_mode = "background", position = "eol" },
}
[47] display_vt_before_hl_bg
virtualtext before with hl_mode = background

Config 
parsers = { css = true }
display = {
  mode = "virtualtext",
  virtualtext = { hl_mode = "background", position = "before" },
}
[48] display_vt_after_hl_bg
virtualtext after with hl_mode = background

Config 
parsers = { css = true }
display = {
  mode = "virtualtext",
  virtualtext = { hl_mode = "background", position = "after" },
}
[49] display_vt_char_circle
virtualtext with char = ●

Config 
parsers = { css = true }
display = {
  mode = "virtualtext",
  virtualtext = { char = "●", position = "eol" },
}
[50] display_vt_char_block
virtualtext with char = █

Config 
parsers = { css = true }
display = {
  mode = "virtualtext",
  virtualtext = { char = "█", position = "eol" },
}
[51] display_bg_contrast
background mode with custom contrast colors

Config 
parsers = { css = true }
display = {
  background = { bright_fg = "#1a1a2e", dark_fg = "#e0e0ff" },
  mode = "background",
}
[52] display_priority
custom priority (default=50, lsp=300)

Config 
parsers = { css = true }
display = {
  mode = "background",
  priority = { default = 50, lsp = 300 },
}
[53] display_bg_vt
combined: background + virtualtext

Config 
parsers = { css = true }
display = {
  mode = { [1] = "background", [2] = "virtualtext" },
  virtualtext = { position = "after" },
}
[54] display_fg_underline
combined: foreground + underline

Config 
parsers = { css = true }
display = { mode = { [1] = "foreground", [2] = "underline" } }
[55] display_bg_underline
combined: background + underline

Config 
parsers = { css = true }
display = { mode = { [1] = "background", [2] = "underline" } }
[56] display_bg_underline_vt
combined: background + underline + virtualtext (eol)

Config 
parsers = { css = true }
display = {
  mode = {
    [1] = "background",
    [2] = "underline",
    [3] = "virtualtext",
  },
}