feat(theme): add prefixed CSS

[Arno500]

This should fix #566 by prepending a ".ory" before all selectors, meaning that every component can be wrapped in something that contains the class "ory" to apply the style.

Related Issue or Design Document

Checklist

• I have read the contributing guidelines and signed the CLA.
• I have referenced an issue containing the design document if my change introduces a new feature.
• I have read the security policy.
• I confirm that this pull request does not address a security vulnerability.
  If this pull request addresses a security vulnerability,
  I confirm that I got approval (please contact security@ory.sh) from the maintainers to push the changes.
• I have added tests that prove my fix is effective or that my feature works.
• I have added the necessary documentation within the code base (if appropriate).

Further comments

It's definitely not the cleanest implementation, but it's absolutely transparent to the user. That said, it seems the new version of Tailwind styles misses some styles (like cursor: pointer; on buttons). But I can confirm I had the exact same render between "old global" and "prefixed" ones. Except the fonts, but well, that's another problem and I do not mind it too much!

Overall, the only "drawback" of this solution is that we have to add an element wrapping the components with the class "ory". It's not horrible, but still not the golden solution :/

Before

After

[changeset-bot]

⚠️ No Changeset found

Latest commit: a257f12

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

@Arno500 is attempting to deploy a commit to the ory Team on Vercel.

A member of the Team first needs to authorize it.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 53.41%. Comparing base (f3fad4d) to head (a257f12).
⚠️ Report is 242 commits behind head on main.

Additional details and impacted files

@@             Coverage Diff             @@
##             main     #567       +/-   ##
===========================================
+ Coverage   42.43%   53.41%   +10.98%     
===========================================
  Files         136      159       +23     
  Lines        2008     2930      +922     
  Branches      288      453      +165     
===========================================
+ Hits          852     1565      +713     
- Misses       1149     1306      +157     
- Partials        7       59       +52     

Components	Coverage Δ
@ory/elements-react	51.68% <ø> (+14.89%)	⬆️
@ory/nextjs	62.52% <ø> (-3.46%)	⬇️

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[jonas-jonas]

Thanks for the PR. I do like this approach. I had already looked into this a little, and came up with what I have in #569. WDYT? Seems like it would be the same outcome, though, so I don't really have a preference.

I do think we can omit the additional export, and just change the existing stylesheet, with a changelog note to add .ory-elements to the enclosing elements.

[Arno500]

Hello!
That would indeed fit my case, however I have one last gripe: the variables overriden in the :root global element. I don't know exactly how we can do that, but I think my method was creating another section called :host instead. I'm not a 100% sure how it was working though :/

[jonas-jonas]

the variables overriden in the :root global element

Ok, I tried different imports, but it doesn't seem this is possible to solve with plain CSS nesting. So I think your approach is better. Could you remove the .prefixed export and just change the default CSS export? Then I'll add it to our internal testing pipeline to make sure there are no UI regressions.

creating another section called :host instead

:host is for shadow doms and has no effect outside of one. Could be another interesting way to scope though, but I think that probably would break something else.

[Arno500]

Actually, I think just putting the variables as-is inside .ory-element would do the job?
Variables should be inherited from the parent if my understanding of CSS variables is correct.
I'll try that with your version and see how it's doing.

[Arno500]

Am st00pid, it was working in my solution because:

.ory,
:host {
... vars
}

So of course! The plugin is too smart and is doing some magic. I guess the :host was just there as a backup for some specific situations (but probably not important for us anyway)
I will just edit the things you requested!

EDIT: done