Webflags: g

CSS Custom Property (Variable)

Match CSS custom properties (variables) like `--brand-color` or `--font-size-lg`.

Available in

JavaScript / ECMAScript code

jsJavaScript

const re = new RegExp("--[a-zA-Z][a-zA-Z0-9\\-]*", "g");
const input = ":root { --brand-color: #10b981; --space-4: 1rem; }";
const matches = [...input.matchAll(re)];
console.log(matches.map(m => m[0]));

Uses `String.prototype.matchAll` for global iteration (Node 12+ / all modern browsers).

Python (re) code

pyPython

import re

pattern = re.compile(r"--[a-zA-Z][a-zA-Z0-9\-]*")
input_text = ":root { --brand-color: #10b981; --space-4: 1rem; }"
for m in pattern.finditer(input_text):
    print(m.group(0))

Stdlib `re` module — no third-party dependency. Works on Python 3.6+.

Go (RE2) code

goGo

package main

import (
	"fmt"
	"regexp"
)

func main() {
	re := regexp.MustCompile(`--[a-zA-Z][a-zA-Z0-9\-]*`)
	input := `:root { --brand-color: #10b981; --space-4: 1rem; }`
	for _, match := range re.FindAllString(input, -1) {
		fmt.Println(match)
	}
}

Uses `regexp.MustCompile` (panics on bad patterns at startup) and `FindAllString` for all matches.

Pattern

regexengine-agnostic

--[a-zA-Z][a-zA-Z0-9\-]*   (flags: g)

Raw source: --[a-zA-Z][a-zA-Z0-9\-]*

How it works

-- is the literal double-dash that prefixes every CSS custom property. [a-zA-Z] requires the next character to be a letter (digits and hyphens are allowed elsewhere but not in lead position by convention). [a-zA-Z0-9\-]* allows the rest of the name: any combination of letters, digits, and hyphens.