` keeps `.black`, but `` can make Svelte treat `.black` as unused. For those cases, use the companion preprocessor [`@humanspeak/svelte-scoped-props`](https://github.com/humanspeak/svelte-scoped-props). It adds explicit `scoped:` props so the parent component can opt into forwarding its own CSS scope hash through a component prop. For the deeper compiler-design notes behind this workaround, see the [Svelte Scoped Props docs](https://scoped.svelte.page/docs) and the [design notes](https://scoped.svelte.page/docs/design-notes). ```svelte

Native heading keeps the style.

Motion heading keeps it too. ``` > Live example: [/examples/scoped-motion-classes](https://motion.svelte.page/examples/scoped-motion-classes) ## Install ```bash pnpm add -D @humanspeak/svelte-scoped-props ``` Add the preprocessor to `svelte.config.js` before Svelte compiles your components: ```js title="svelte.config.js" import { scopedProps } from '@humanspeak/svelte-scoped-props' import adapter from '@sveltejs/adapter-cloudflare' import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' import { mdsvex } from 'mdsvex' const scopedPropsPreprocess = scopedProps({ runtimeModule: '@humanspeak/svelte-scoped-props/runtime' }) const scopedPropsSvelteOnly = { name: 'svelte-scoped-props-motion-docs', markup(options) { if (!options.filename?.endsWith('.svelte')) return undefined return scopedPropsPreprocess.markup?.(options) } } const config = { preprocess: [ scopedPropsSvelteOnly, vitePreprocess(), mdsvex() ], kit: { adapter: adapter() } } export default config ``` If your docs pipeline also processes non-Svelte files, wrap `scopedProps()` so it only transforms `.svelte` markup, then run your usual preprocessors afterward. ## How it works `scoped:class` is rewritten before Svelte analyzes the component: ```svelte ``` becomes equivalent to: ```svelte ``` The package also adds a tiny compile-time marker so Svelte sees `.black` as used in the parent file and keeps the scoped CSS rule. ## When to use it Use `scoped:class` when all of these are true: - The class is defined in the same Svelte file's `