How use @custom-media with vite config.

[Vfivew]

I have config.
css: { lightningcss: { drafts: { customMedia: true, }, include: Features.MediaQueries, targets: browserslistToTargets( browserslist(["last 2 version", "not dead"]), ), }, transformer: "lightningcss", },
Then i created styles.css where determine
@custom-media --small-screen (width <= 480px);
When i try import "--small-screen" from styles.css in my style.module.css - i can use this variable.
But when i import my styles.css in my index.tsx - this variable is gone and i cant use it anywhere in my style.module.css.
I change customMedia false- then my variable appears in all my style.module.css.
I understand correctly that my variable is --small-screen
will not be available due to the customMedia flag in the project, and I have to import it directly into each style.module.css?