[babel-plugin] Better options for processStylexRules

[necolas]

In particular, we should be able to support generating CSS files that:

• Order CSS correctly but don't use @layer or a polyfill.
  • CSS layers aren't needed for many use cases.
• Use native @layer.
  • Useful for explicitly controlling order, including when generating multiple sheets.
• Polyfill @layer.
  • If layers are needed but browser support is not adequate.
  • Use PostCSS instead of rolling our own solution: https://www.npmjs.com/package/@csstools/postcss-cascade-layers

[jeongminsang]

I've implemented this solution, but I have some about a breaking change. Please take a look and let me know your thoughts. More details are available in the PR description. #1072

[nmn]

Order CSS correctly but don't use @layer or a polyfill.

This is not entirely possible. Based on the StyleX design for media queries and pseudo classes, all longhand styles should have higher specificity than shorthand styles.

This is also needed for RN support to work correctly.

Therefore, we need a plain .margin-top to override a .margin:hover

This means we need some way to bump the specificity, which means a @layer or a polyfill for bumping specificity.

[jeongminsang]

I've carefully reviewed the feedback on the #1072 and am currently working on addressing the points. I'll update the PR soon.

@nmn,

I now fully understand that for StyleX's design and RN support, ensuring longhand styles override shorthand styles requires achieving higher specificity, which in turn necessitates the use of @layer or a polyfill.

Considering this situation, I'd appreciate hearing the maintainers' thoughts on the future direction of this issue.

• Would it be best to proceed with the current #1072, excluding the "order CSS correctly without @layer or a polyfill" requirement?
• Alternatively, regarding the StyleX specificity issue that would require @layer or a polyfill, I'm open to discussing and exploring solutions if maintainers can provide clear guidelines.

I'm keen to help resolve this issue.

[necolas]

You can do it without adding "none" for now. We don't use any layers stuff internally, but that won't be the case for long so we might not need "none" for long anyway