Is there a way to make Svelte use a method other than classes for scoping components?

[unikitty37]

Svelte adds a class with a hash to components in order to do scoping. This breaks Playwright's toHaveClass, which expects to match the whole classList, meaning that, instead of

expect(locator).toHaveClass('disabled')

I have to write

expect(locator).toHaveClass(/^disabled\ss(velte)?-[0-9a-zA-Z]+$/)

and, even then, I'm not 100% sure that regexp covers all cases, as it makes assumptions about the format of the scoping class, and that it will be at the end of the classList.

I could write a hasScopedClass assertion for Playwright, but I'm wondering if I can configure Svelte to scope its components a different way. Vue used a v-<hash> attribute and matched it in the CSS with [v-<hash>], which avoided this problem.

I'm guessing Svelte does it this way for a reason (though I'd love to know what it is :) but it does make testing considerably more clunky. Is it possible to configure Svelte to do scoping without messing with the classList?

[webJose]

Try adding the cssHash compiler option to a function that returns an empty string (or maybe null or undefined):

// This is /svelte.config.js:

import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'

export default {
  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
  // for more information about preprocessors
  preprocess: vitePreprocess(),
  // v---------------  Add compiler options to add cssHash
  compilerOptions: {
    cssHash: () => '',
  }
}

This setting only works when you build the project. It doesn't work when running the development server (npm run dev).

Documentation

[unikitty37]

Try adding the cssHash compiler option to a function that returns an empty string (or maybe null or undefined):

Thanks, but won't setting that just give every selector an empty hash (and therefore break scoping)?

What I'm wanting is for it to not put the return value of cssHash as a class, but rather as a separate attribute…

[webJose]

Break the scope to test. Deploy without this so you scope in production.

[unikitty37]

I'm going to be using Playwright's visual snapshots, so that's probably not going to work for me — I want to be able to say that the page actually looks correct.

It looks like a custom matcher that ignores the Svelte class might be the easiest way.