simple regex matching biome linter

[lukepighetti]

struggling to implement a simple regex matching linter for biome.

the goal is to ban custom tailwind colors like text-[#FF0000] from *.js, *.ts, *.jsx, *.tsx files . here's what i have so far

r"text-(\[.*\])$"($props) where {
    register_diagnostic(
        span = $props,
        message = "don't use custom tailwind colors"
    )
}

export function StyledHeader({ title }: StyledHeaderProps) {
  const tailwindClass = "text-[#FF0000]" // < expecting to highlight this
  return <h1 className={"text-5xl text-[#FF0000]"}>{title}</h1> // < and this
}

the regex pattern is known to work via regex101.com, but for some reason when i try running biome check it doesn't work.

i can get it to work when capturing console.log($props) though, just to test that my environment is working

does anyone happen to have an example of a very simple regex matching grit file for biome linter?

[lukepighetti]

i tried this

$s where {
  $s <: r".*(text-\[#.*\]).*",

  register_diagnostic(
    span = $foo,
    message = "Avoid custom Tailwind color `text-[#FF0000]`. Use a design-token class instead.",
  )
}

but it matches multiple times on a single line

and if i try to capture a span i get no hits

$s where {
  $s <: r".*(text-\[#.*\]).*" ($span),
  register_diagnostic(
    span = $span,
    message = "Avoid custom Tailwind color `text-[#FF0000]`. Use a design-token class instead.",
  )
}

[lukepighetti]

i think the reason why i'm getting multiple hits is because it's capturing multiple parts of the AST tree, ie

• const tailwindClass = "text-[#FF0000]"
• tailwindClass = "text-[#FF0000]"
• = "text-[#FF0000]"
• "text-[#FF0000]"

i also tried binding to a JS string literal but that didn't work

`"$contents"` where {
...
}

[morgante]

You could try using an AST node:

JsStringLiteralExpression() as $s where {
  $s <: r".*(text-\[#.*\]).*",
  register_diagnostic(
    span = $s,
    message = "Avoid custom Tailwind color `text-[#FF0000]`. Use a design-token class instead.",
  )
}

[lukepighetti]

also worth noting that JsStringLiteralExpression() didn't seem to match for me. ended up with this.

language js

$s where {
  // string literals only
  or {
    $s <: r"\".*\"",
    $s <: r"\'.*\'",
    $s <: r"\`.*\`",
  },
  // contains -[#HHHHHH] pattern where H is hexadecimal
  $s <: r".*-\[#[a-fA-F0-9]{1,6}\].*",
  register_diagnostic(
    span = $s,
    message = "Avoid custom Tailwind colors, ie `text-[#RRGGBB]`. Use a design-token class instead.",
  )
}

[lukepighetti]

alright, i need to look into this again since it increased our linting time from 0.9s to 17s. not asking for handholding here just asking for strategy or pointing towards tools or development environments that will make it easier to build GritQL matchers. how do I know what syntax is available to me in GritQL in a Biome environment?

[lukepighetti]

related biomejs/biome#7339

[lukepighetti]

was able to get our lint checks down from 17s to 1.2s by using jsx_attribute as found here

language js

jsx_attribute() as $s where {
  or {
    $s <: r".*-\[#[a-fA-F0-9]{1,6}\].*",
  },
  register_diagnostic(
    span = $s,
    message = "Avoid custom Tailwind colors, ie `text-[#RRGGBB]`. Use a design-token class instead.",
  )
}

[morgante]

@lukepighetti I'm glad you were able to get jsx_attribute working - targeting a specific AST node is generally going to be much faster since then we can discard most nodes immediately. I agree the docs need to be improved here.