Selector playground doesn't correctly escape colon char in selector suggestion

[dgodongm]

Current behavior

Similar issue to #3902

1. Run script that visits https://joinmastodon.org/
2. Use selector playground, to get selector for the 'Stay in control of your own timeline' h2 element

Results: Suggested selector is: cy.get(':nth-child(1) > .full-width-bg__inner > .xl\:col-start-2 > .h4')

Screenshot:

Desired behavior

The colon should be double escaped to work: cy.get(':nth-child(1) > .full-width-bg__inner > .xl\\:col-start-2 > .h4')

Test code to reproduce

describe('home page tests', () => {
  beforeEach(() => {
    cy.visit('/')
  })

 
  it('Stay in control', () => {
    cy.get(':nth-child(1) > .full-width-bg__inner > .xl\:col-start-2 > .h4').should('have.text', 'Stay in control of your own timeline')
  })
})

Cypress Version

12.16.0

Node version

v19.7.0

Operating System

macOS 13.3.1 (a)

Debug Logs

No response

Other

No response

[lmiller1990]

I reproduced it here: https://github.com/lmiller1990/cypress-test-tiny/compare/master...lmiller1990:cypress-test-tiny:issue-27258?expand=1

We do indeed need the double \\.

[lmiller1990]

I looked around and I think this needs to be patched in the cypress/unique-selector module. That's here.

Are you interested in making a PR?

[SangilYun]

It looks like the CSS.escape dependency might be causing this issue. https://github.com/mathiasbynens/CSS.escape/issues/17