https://cypress.io logo
Join Discord
Powered by
# vue
  • r
    Normally I don't do any global css file because I tried to always use the style section of a SFC. so how can I use cypress ct with components that has their own styles?
  • s
    If App.vue was using scoped styles there would be no problem
  • b
    @User I would advise to use a css file for app
  • b
    extract the css in this file and apply them to both #app and the tested object
  • b
    I might even go further and apply those styles directly to the body
  • b
    since this was the intention in the first place
  • r
    I'm testing it with scoped style in App.vue as you said but it doesn't seem to work either, also, I notice HelloWorld.vue is using scoped styles and they didn't seems to work either 🙁
  • r
    You're right, that should be the norm, I'll try to do it with any global css from now on, but, it seems that even with scoped styles it doesn't seem to work.
  • b
  • r
    Great, thanks for the PR @User 👍 , I'm trying to use that repo as a testing field for cypress ct with Vue and any help is welcome
  • r
    The last mistery is why the HelloWorld.vue compoent is not loading the scoped styles jejeje
  • t
    Does anyone have an idea how to make this work with Tailwind. When I generate the CSS from my project from Tailwind (without purging it) I have a 5.5 MB CSS file, and Cypress has a hard time with that. The start of the unit test then takes a very long time. In Storybook and in the project the JIT compiler is running.
  • s
    @User that's interesting. What's the JIT compiler?
  • s
    like in particular, what webpack plugin is being used?
  • s
    We should just be using the same config as your local devserver... nothing else
  • s
    @User ^^ this works for me out of the box
  • s
    no code changes
  • s
    Using Bart's PR
  • t
    JIT checks at runtime which tailwind classes are needed and generates a CSS file with them. This is smaller and can grow further when new classes are noted.
  • t
  • s
    Tyvm. Looking.
  • s
    We work with any webpack setup so like... it's just a matter of making sure the right loaders etc are run
  • r
    😮
  • s
    I see I see. Spiking into it now.
  • s
    Do you have a nice playground project for me?
  • s
  • t
    ah nice 🙂
  • s
    If you have a playground to add, can you put it there?
  • s
    If you're playing around with Vite btw, my Vite x Cypress demo has WindiCSS which is on-demand tailwind for esm
  • t
    i build a playground
1...151617...37Latest