[🐞] Putting ?inline causes swiper to not work in production

[Nefcanto]

Which component is affected?

Qwik Runtime

Describe the bug

I reported https://github.com/BuilderIO/qwik/issues/3665

Now after upgrading to Qwik 1.0.0 it still does exist.

By chance I realized that when we add ?inline to the end of Swiper styles, it breaks in the production.

If we remove ?inline then we get these warnings:

 Default and named imports from CSS files are deprecated. Use the ?inline query instead. For example: import swiperStyles from 'swiper/css?inline'
   Plugin: vite:import-analysis

But Swiper would work in production.

I just wanted to report it to you guys maybe it would help you fix something in Qwik. Thanks.

Reproduction

No production sample

Steps to reproduce

No response

System Info

System:
    OS: Linux 5.19 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (4) x64 Intel(R) Core(TM) i5-6500 CPU @ 3.20GHz
    Memory: 10.00 GB / 15.52 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 18.16.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.6.6 - /usr/local/bin/npm
  npmPackages:
    @builder.io/partytown: ^0.8.0 => 0.8.0 
    @builder.io/qwik: ^1.0.0 => 1.0.0 
    @builder.io/qwik-city: ^1.0.0 => 1.0.0 
    @builder.io/qwik-react: ^0.5.0 => 0.5.0 
    vite: ^4.3.5 => 4.3.5

Additional Information

No response

[rolanday]

+1, just ran into same after banging my head against wall for a few hours :p

https://discord.com/channels/842438759945601056/1106437346221637703/1106437346221637703

Same issue if dev mode or production. Note, that in dev mode if load CSS without ?inline (works) and then remove inline, it will still appear to work until after you cold-start your dev server. Not sure why, but threw me off. Mentioning because may be only thinking that issue in production mode only.

[rolanday]

Update. I had been using useStylesScoped$ and Discord member kindly suggest for me to use useStyle, and working for me now with npm start or dev. Haven't tried in real production env yet though, so. curious @Nefcanto if you're seeing issue with just npm start or beyond that.

[rolanday]

@Nefcanto , fyi, I pushed my qwik app w/ swiper to vercel edge and works fine for me.

    "@builder.io/qwik": "^1.1.1",
    "@builder.io/qwik-city": "^1.1.1",
    "swiper": "^9.3.1",

[Mark-Pineda-C]

no new updates on this? i still having problem using swiper in production

[wmertens]

@Mark-Pineda-C So you're using

import css from "...swiper.css?inline"

useStyles$(css)

And it's not working? Can you post a re pro via https://qwik.new ?

[github-actions[bot]]

Hello @Nefcanto. Please provide the missing information requested above. Issues marked with STATUS-2: missing info will be automatically closed if they have no activity within 14 days. Thanks 🙏