Svelte 5: add $style and CSS modules support (like Vue) to fully obfuscate/isolate class names

[dm-de]

Describe the problem

First... Vue has this functionality - I miss in Svelte
https://vuejs.org/api/sfc-css-features.html#css-modules
vitejs/vite#7447 (comment)

Code like this in Svelte:

<h1 class:block={true}>Hello</h1>
<style>
    .block { display: block; }
</style>

will generate such CSS:
.block.svelte-3zrlxr{display:block}

.block is my own custom class name
.svelte-3zrlxr is auto-generated class name for whole component

But this is not enough!
This was a "cheap" solution, that have side effects!
Today... custom class names (like block) can collide with GLOBAL class names.
This means, that custom used classes are simple not isolated!

Describe the proposed solution

Svelte like solution. Example code:
(module was added to not break compatibility)

<h1 class={$style.block}>Text</h1>
<style module>
  .block { display: block; }
</style>

or convert (auto obfuscate)

<h1 class:block={true}>Text</h1>
<style module>
  .block { display: block; }
</style>

Both should be possible

Alternatives considered

CSS-modules work today. They obfuscate class names.
Vite support CSS modules: https://vitejs.dev/guide/features#css-modules

If i write code like this, it works:

<script>
    import style from './style.module.css'
</script>
<h1 class={style.block}>Text</h1>

It generate this class name for "block":
_block_1xra7_1

But now, I need to split component in separate files.
I search a way to use <style> block in Svelte file and not an external module.css

Importance

would make my life easier

[biowaffeln]

You can already achieve this behaviour by using svelte-preprocess-cssmodules. Not sure if this needs to be added in svelte directly

[dm-de]

Thank you! I don't know this.

Here is one little problem:
svelte-preprocess-cssmodules
requires "svelte": "^3.22.3"
(updated 1 year ago)

so I get errors:

Could not resolve dependency:
npm ERR! peer svelte@"^3.20.0" from [email protected]
npm ERR! node_modules/svelte-preprocess-cssmodules
npm ERR!   svelte-preprocess-cssmodules@"^2.2.4" from the root project

I used --force to install

Not sure if this needs to be added in svelte directly

I'm not sure either... But css scoping is not perfect at the moment.

svelte-preprocess-cssmodules
has bind() and allows following awesome Code:

<script>
  let color = 'red';
</script>

<p class="text">My lorem ipsum text</p>

<style module>
  .text {
    font-size: 18px;
    font-weight: bold;
    color: bind(color);
  }
</style>

[biowaffeln]

hmm that's odd. You might want to file an issue on the svelte-preprocess-cssmodules repo. I do have some trouble getting it to work in a test project myself... Anyways, I believe this issue is a duplicate of #6972 and should be closed.

[h-a-s-k]

This would be great considering svelte-preprocess-cssmodules has not been updated in a while

[vadirn]

I've been able to achieve a similar functionality (well, styling children by passing classnames defined by parent) by using a very minimal (small enough to copy-paste 😅) preprocessor.
It replaces selectors like :local(.class) to :global(.class-uid) and puts the mapping { class: "class-uid" } into function __styles() { return { class: "class-uid" } that's being appended to the script block.

import MagicString from 'magic-string';
import { parse } from 'svelte/compiler';

/**
 * @returns {import('svelte/compiler').PreprocessorGroup}
 */
export function svelteLocalSelector() {
	return {
		name: 'svelte-local-selector',
		markup: markupPreprocessor(),
	};
}

function markupPreprocessor() {
	/** @type {import('svelte/compiler').Preprocessor} */
	return ({ content, filename }) => {
		const localClassNames = {};
		const ast = parse(content);
		const css = ast.css;
		const js = ast.instance;
		const style = stylePreprocessor(localClassNames);
		const script = scriptPreprocessor(localClassNames);

		const s = new MagicString(content);

		if (css) {
			const updatedStyles = style(css.content.styles);

			if (Object.keys(localClassNames).length > 0) {
				s.update(css.content.start, css.content.end, updatedStyles);

				const { start, end } = js.content;

				s.update(start, end, script(content.slice(start, end)));
			}
		}

		const map = s.generateMap({ file: filename });

		return {
			code: s.toString(),
			map,
		};
	};
}

const localPseudoClassSelectorRegex = /:local\(\.([\w-]+)\)/g;

function stylePreprocessor(localClassNames) {
	/** @type {(content: string) => string} */
	return (content) => {
		const id = hash(content);

		return content.replaceAll(localPseudoClassSelectorRegex, (_, className) => {
			const nextValue = `${className}-${id}`;

			localClassNames[className] = nextValue;

			return `:global(.${nextValue})`;
		});
	};
}

function scriptPreprocessor(localClassNames) {
	/** @type {(content: string) => string} */
	return (content) => {
		if (Object.keys(localClassNames).length > 0) {
			return content + functionTemplate(localClassNames);
		}

		return content;
	};
}

function functionTemplate(localClassNames = {}) {
	return `
function __styles() {
	return ${JSON.stringify(localClassNames)};
}
`;
}

/**
 * @param {string} str
 * @returns {string}
 */
function hash(str) {
	str = str.replace(/\r/g, '');
	let hash = 5381;
	let i = str.length;

	while (i--) hash = ((hash << 5) - hash) ^ str.charCodeAt(i);

	return (hash >>> 0).toString(36);
}

Usage example:

<script>
	import Nav from './Nav.svelte';
	const { nav } = __styles();
</script>

<style>
	:local(.nav) {
		margin-inline: auto;
	}
</style>

<Nav className={nav} />