Question: what pattern should be used for DRY values in style keys?

[slightly-askew]

Describe the feature request

Hey. I've previously assigned media values to a variable (either globally or per-file):

I would happy keeping the magic number value in my .stylex.ts file and importing it, but I can't seem to do that without getting an error either—it needs to be the full variable object. I have responsive tokens in my variables file but keeping arbitrary component styles such as the screenshot example in a external .stylex.ts file feels a little abstract imho.

Is there an idiomatic way to achieve this in Stylex that I have missed?

[slightly-askew]

Apologies, missed the discussions tab.

I found the answer from another thread:

It would be amazing to share these queries or magic numbers across files but appreciate it's not possible.

[Jta26]

Generally verbosity and repetition are not issues for StyleX because they get de-duplicated anyways, but yeah it would be convenient from a devx perspective to be able to share these viewport values, but a solution to this is to create css variables using stylex.defineVars() for things you want to reuse widely.

see: https://stylexjs.com/docs/learn/theming/defining-variables/#using-media-queries

[nmn]

This may be relevant: #238