How to add at rules on top

[jonnitto]

I want to add some at rules like this in the CSS file:

@position-try --left {
  inset: auto;
  top: anchor(bottom);
  right: anchor(right);
}

How can I achieve this? I didn't found anything in the documentation, neither here or in the issues…

[nmn]

We don't have an explicit API for this today. Please use a CSS file for this for now.

[jonnitto]

Is this planned? As CSS enhance, this will be needed more and more…

[nmn]

Yes. I created an issue #866 for new top-level rules that need to be referenced elsewhere in StyleX styles.

NOTE: We have always maintained that you should use a standalone CSS file for global styles and resets. This is by design and our goal with StyleX is to not to replace the need for any CSS at all. Our goal is to replace component-level styling specifically.

[jonnitto]

Thanks for the detailed explanation regarding global styles and how they are handled in StyleX! I completely understand the purpose and value of defining global styles upfront to maintain consistency and avoid unnecessary repetition across components.

I also wanted to take a moment to thank you for creating this issue, great to see that StyleX is envolving

However, in my particular case, I see @position-try as something more tied to the individual element’s specific layout or behavior rather than a global concern. It feels more contextual to the component itself than a reusable global style.

[predaytor]

@jonnitto, I think there is nothing wrong with using css-modules for this particular example. We can refer to stylex variables as regular global css variables, in case you need to follow your described design system by StyleX:

export const colors = stylex.defineVars({
	accent: 'blue', // local scope (prefixed at build time by stylex)
	'--accent': 'blue', // global scope (as-is)
});

[nmn]

However, in my particular case, I see @position-try as something more tied to the individual element’s specific layout or behavior rather than a global concern

I agree, which is why I created that issue. I will need to research the CSS specification a bit more to get the API right. It is also important to figure out what needs to be done for maximum re-usability of the styles. The obvious API will result in a unique CSS rule for every use which is less than ideal.

I suggested using the CSS file in the meantime, while we figure this out.