Failing to import constant

[marcguilera]

I am seeing an error when importing media queries into my components. Here's a bit of context with a minimum repro example.

I have a couple of constants defining media queries in a file to avoid duplication such as:

export const SMALL_BREAKPOINT = 640;
export const SMALL_SCREEN = `@media (min-width: ${SMALL_BREAKPOINT}px)`;

export const MEDIUM_BREAKPOINT = 768;
export const MEDIUM_SCREEN = `@media (min-width: ${MEDIUM_BREAKPOINT}px)`;

export const LARGE_BREAKPOINT = 1024;
export const LARGE_SCREEN = `@media (min-width: ${LARGE_BREAKPOINT}px)`;

Then I import it into my svelte component like this:

<script lang="ts" context="module">
	import { MEDIUM_SCREEN } from '$lib/shared/ui/theme/variables/media';
	import * as stylex from '@stylexjs/stylex';

	const style = stylex.create({
		thing: {
			default: {},
			[MEDIUM_SCREEN]: {
				display: 'none'
			}
		}
	});
</script>

<div {...stylex.attrs(style.thing)}>
	<h1>Welcome to SvelteKit</h1>
	<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
</div>

And get an error saying:

[plugin:vite-plugin-stylex] StyleX Error: /src/routes/+page.svelte: Only static values are allowed inside of a stylex.create() call.
  
💡 If you're importing StyleX tokens or styles from another file using aliases, make sure to define those in your Vite config or in the StyleX Plugin options.

Interestingly if I inline the const it does work:

<script lang="ts" context="module">
	const MEDIUM_BREAKPOINT = 768;
	const MEDIUM_SCREEN = `@media (min-width: ${MEDIUM_BREAKPOINT}px)`;
	import * as stylex from '@stylexjs/stylex';

	const style = stylex.create({
		thing: {
			default: {},
			[MEDIUM_SCREEN]: {
				display: 'none'
			}
		}
	});
</script>

<div {...stylex.attrs(style.thing)}>
	<h1>Welcome to SvelteKit</h1>
	<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
</div>

Of course I would like to have my medias in a central place so the later option is not an acceptable solution but it's a sample to show this happens due to how things get imported into scope.

[nucleartux]

There is an open issue about this problem here.

[nmn]

Closing this discussion as importing constants from other files is intentionally not supported. As described in #238, we will have an API for sharing media queries soon.