Breakpoints starting with a number aren't working (2xl, etc)

[IHIutch]

Description

When I use 2xl breakpoint, I expect my styles to render, but instead my 2xl breakpoint styles are never rendered

https://stackblitz.com/edit/stackblitz-starters-3siapy?file=pages%2Findex.js

Link to Reproduction

https://stackblitz.com/edit/stackblitz-starters-3siapy?file=pages%2Findex.js

Steps to reproduce

1. Add styles to a break point starting with a number (2xl, 3xl, etc)
2. Can be within a style attribute or breakpoint attribute

className={css({
  bg: {
    '2xl': 'orange.500',
  },
})}
// or
className={css({
  '2xl: {
    bg: 'orange.500',
  },
})}

3. Styles never render at specified breakpoint, although you can see them generated in your CSS

@media screen and (min-width: 1536px) {
    .\2xl\:bg_orange\.500 {
      background: var(--colors-orange-500)
    }
}

JS Framework

React

Panda CSS Version

0.4.0

Browser

Brave Version 1.52.126 Chromium: 114.0.5735.133 (Official Build) (arm64)

Operating System

• macOS
• Windows
• Linux

Additional Information

For what its worth, I checked out how Tailwind handles this and it prefixes a 3 to the style name. Not sure why, though.

@media (min-width: 1536px) {
  .\32xl\:bg-orange-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(251 146 60 / var(--tw-bg-opacity));
  }
}

[IHIutch]

After some cursory reading, it looks like .\32 is used because 32 is the unicode representation of 2 (And adding a 3 before the 2, ie .\32, in the generated CSS does indeed fix this issue for me). Today I learned.

However, I don't know what tooling is used to generate their (or Panda's) classNames, otherwise, I'd happily open a PR!

• https://www.w3.org/International/questions/qa-escapes#css_identifiers
• https://mathiasbynens.be/notes/css-escapes#css

[segunadebayo]

Thanks for such a detailed breakdown. TIL

I've gone ahead to update the escape function. I'll release an update shortly.

[IHIutch]

Ah, ha. I was actually digging into this myself. But I'll post what Ive been working on in case its useful