`no-invalid-token-paths` reports false positive with color opacity modifier

[oneHoopoe]

Given this code:

import { styled } from '../styled-system/jsx'

function App() {
  return (
    <styled.p css={{boxShadow: "0px 5px 5px {black/25}"}}>Reproduction</styled.p>
  )
}

export default App

ESlint reports a following error:

5:32  error  `black/25` is an invalid token path  @pandacss/no-invalid-token-paths

I have created a reproduction repo as a minimum reproducible example, if it helps. The example CSS rule is in App.tsx.

[oneHoopoe]

I looked into the code. It seems this could be fixed by modifying the regex used by the extractTokens function. I haven't tested it thoroughly, but this seems to work:

token\(([^"'(),]+)(?:,\s*([^"'(),]+))?\)|\{([^{\r\n}]+?)(?:\/\d+)?\}

Alternatively, I noticed the isValidColorToken function of no-hardcoded-color rule just splits a string by / and uses the first part.

I may make a PR, if I find time to figure out how to set up everything.

[anubra266]

@oneHoopoe this is because black is not a token path, so it gets interpreted as a raw color. if you're using the token syntax, it should be colors.black not black

Note the difference in the outputs: