bug: Scoped CSS classnames wrongly escaped

[nemzes]

Prequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

v2.8.1

Current Behavior

When using scoped: true on a component, CSS class names with special characters are mangled due to incorrect escaping. This is particularly obvious when using a framework like Tailwind, which makes extensive use of special characters (:) in class names.

Expected Behavior

When using selectors in CSS like .foo\:bar the scoped selector in JS should be in the format .scopeName.foo\:bar.

Instead we currently get .foo\.scopeName:bar, which won't match anything.

Steps to Reproduce

Create a CSS file with a classname using escaped special characters:

.foo\:bar {
  color: red;
}

Use the class in a component that has scoped: true:

@Component({
  tag: 'my-component',
  styleUrl: 'styles.css',
  scoped: true,
})
export class MyComponent {
  render() {
    return <div class="foo:bar">Hello</div>;
  }
}

Code Reproduction URL

https://github.com/nemzes/stencil-scoped-classes-bug

Additional Information

Specifically for Tailwind, it is possible to work around this bug by using the separator configuration to use a character that doesn't require escaping (e.g. "_"): https://tailwindcss.com/docs/configuration#separator

[nemzes]

Someone had previously reported this on the Tailwind repo: tailwindlabs/tailwindcss#1985

[rwaskiewicz]

@splitinfinities I've validated this bug, but set the Resolution: Refine tag on the associated PR for the team to take a look at. I'm gonna remove it from this issue to avoid the templatation to re-triage it and have duplicate stories in our backlog (one already exists for the PR)

[say25]

Is this closable?

[rwaskiewicz]

This bug should be closable now with the release of v2.11.0 of Stencil, which happened ~30 minutes ago. Should anyone find a new instance of it (this bug), please open a new issue!