Qwik preview build doesn't have classes

[wmertens]

UnoCSS version

latest

Describe the bug

While developing on Qwik, everything works, but when running a preview build, none of the used classes make it into the css, only the base.

Reproduction

https://stackblitz.com/edit/qwik-starter-ja5dje?file=package.json,vite.config.ts,src%2Froutes%2Findex.tsx

let it install+run, observe the text colors, then ctrl-c + pnpm preview. The preview build will not have classes for the text.

I'm guessing the extractor doesn't work with qwik's way of running jsx internally?

System Info

anywhere

Validations

• [X] Read the Contributing Guidelines.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[ulic75]

I've worked around it by adding the content pipeline to my uno.config.ts

  content: {
    pipeline: {
      include: [
        /\.([jt]sx?|mdx?)($|\?)/,
      ],
    },
  },

[wmertens]

Wow odd! Any idea what's going on that this is needed?

[ulic75]

I haven't taken the time to dig into. I think the docs suggest this should already be happening with a Vite build process. 🤷‍♂️

[wmertens]

Interestingly, why I add these lines, it breaks maplibre from node_modules, suddenly there's an invalid token inside the js during parsing by rollup. So this is definitely scanning too much. (plus why would it change code? Transformers accidentally matching?)

I figured out the reason: In production, the qwik vite plugin transforms tsx files at load and immediately splits them into already-converted .js files. Luckily, these are named like /src/s_2xrqvfoqzdu.js so I changed the config to

    content: {
        pipeline: {
            include: [
                // Generic JSX files
                /\.([jt]sx|mdx?)($|\?)/,
                // QRLs during Qwik dev
                /\/src\/.*_[\da-z]{11}\.js/,
                // Parsed JSX files during Qwik build
                /\/s_.*\.js$/,
            ],
        },
    },

and now things work, it is also finding classes I'm adding in visible tasks.

Not sure why you are also parsing .md @ulic75? Is there content in there with named CSS classes?

Is there anything missing? Where should this be documented?

[wmertens]

Hmm maybe the unocss plugin can detect the qwikvite plugin and set the default include rules to the above?

[wmertens]

Actually, all the qwik-processed files look like _$hash.js, so here's a simplified ruleset:

    content: {
        pipeline: {
            include: [
                // Generic JSX files
                /\.([jt]sx|mdx?)($|\?)/,
                // QRLs during Qwik dev, parsed JSX files during Qwik build
                /_[\da-z]{11}\.js$/,
            ],
        },
    },

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[wmertens]

@antfu should the unocss plugin automatically use the pipeline I wrote above?