Production build has broken pseudo-selectors, but is fine on dev

[cmbartschat]

Qwik Version

0.13.3

Operating System (or Browser)

Ubuntu/Firefox

Node Version (if applicable)

18

Which component is affected?

Qwik Rollup / Vite plugin

Expected Behaviour

The correct behavior is exhibited using npm run dev:

scoped.css

span::before {
  content: " not ";
  user-select: all;
}

index.tsx

import { component$, useStylesScoped$ } from "@builder.io/qwik";
import styles from "./scoped.css?inline";

export default component$(() => {
  useStylesScoped$(styles);
  return <div>This is <span>broken.</span></div>;
});

Generated style:

span.⭐️iizyr0-0::before {
  content: " not ";
  user-select: all;
}

We see the text: "This is not broken."

Actual Behaviour

Using the express adaptor, npm run build && npm run serve with the same code:

Generated styles:

span:before.⭐️iizyr0-0{content:" not ";user-select:all}

We just see: "This is broken."

Additional Information

Looks like an earlier-reported issue bubbling up again: https://github.com/BuilderIO/qwik/issues/1081

[manucorporat]

weird!

[cmbartschat]

Looks like this is still a problem in 0.14.1.

https://stackblitz.com/edit/qwik-broken-pseudoselector?file=README.md

[mhevery]

I will have a look!

[mhevery]

@manucorporat I looked into this, and the issue seems to be with minifier not with style scoping. It looks like the minifier runs before style scoping and the minifier changes span::before to span:before which then causes the issue with scoped styling.

[sslotsky]

Also experiencing this issue. Are there any workarounds for this? Does the qwik team own the minifier being used or do we have to talk to another team to fix? Any sense of a timeline for a fix? 🙏🏼

[heinthanth]

Still facing this issue. Do someone know any workaround?

[mhevery]

This is an issue with CSS minifier, which I think is part of Vite, so this is not a Qwik issue.

[cmbartschat]

@mhevery I tried, they kicked the can down to esbuild or up to Qwik, where do we go from here?

[mhevery]

esbuild makes sense. https://github.com/evanw/esbuild/issues/2871