Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Isolate css #1016

Merged
merged 3 commits into from
Mar 12, 2023
Merged

Isolate css #1016

merged 3 commits into from
Mar 12, 2023

Conversation

alixander
Copy link
Collaborator

@alixander alixander commented Mar 12, 2023

CSS and font targeting needs to be diagram-specific.

Imagine you have two embedded D2 SVGs on a web page. They both say "fill-N1" should be a certain color, as dictated by their theme. Well the second one that says that will win, overwriting the CSS of the first diagram.

The fix is to give the outer SVG unique diagram ID class, and then all the CSS rules target elements that are descendants of that class.

All the tests change because of diagram hash change. But I've visually checked each test to make sure nothing rendered different.

Without this change, it wasn't possible to do this, since the font styles of the second one overrides the font styles of the first.
Screen Shot 2023-03-11 at 5 27 41 PM

closes #972

@alixander alixander merged commit f47eada into terrastruct:master Mar 12, 2023
@alixander alixander deleted the isolate-css branch March 12, 2023 01:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

theme-css needs to append unique id
1 participant