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.

Sign up for GitHub

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

Jump to bottom

docs: add pages about Atomic CSS, build time optimisations #217

Merged
merged 5 commits into from
Oct 4, 2022
Merged

docs: add pages about Atomic CSS, build time optimisations #217

merged 5 commits into from
Oct 4, 2022

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Sep 20, 2022 •
edited
Loading

Requires #215, #216.

  • Updates a page about Atomic CSS with real content
  • Adds pages about ahead-of-time compilation
  • Adds pages about CSS extraction

@github-actions
Copy link

github-actions bot commented Sep 20, 2022 •
edited
Loading

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
core
makeStyles + mergeClasses (build time)		 1.834 kB
872 B
core
makeStyles + mergeClasses (runtime)		 20.781 kB
7.72 kB
react
__css + mergeClasses (build time)		 1.871 kB
869 B
react
__styles + mergeClasses (build time)		 3.569 kB
1.607 kB
react
makeStaticStyles (runtime)		 9.439 kB
4.066 kB
react
makeStyles + mergeClasses (runtime)		 22.542 kB
8.43 kB
🤖 This report was generated against 3a915ea7b6d6716657d5b0e14787fe25c22e5825

@layershifter layershifter mentioned this pull request Sep 26, 2022
Closed
layershifter
layershifter commented Sep 26, 2022
View reviewed changes
.yarn/patches/mdx-mermaid-npm-1.3.2-e8a6432fce.patch
@@ -0,0 +1,13 @@
diff --git a/lib/Mermaid.mjs b/lib/Mermaid.mjs
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sjwall/mdx-mermaid#67

@layershifter layershifter force-pushed the docs/updates branch 2 times, most recently from f49dbca to 3487bdf Compare September 27, 2022 09:07
layershifter
layershifter commented Sep 27, 2022
View reviewed changes
apps/website/docs/react/guides/child-window-rendering.md
# Child Window/Shadow DOM Rendering

When rendering in the main browser window, many components will need access to window or document to apply styles, listening for events, or measuring things. However it is possible to render to child windows and elements hosted in iframes.
# Child Window
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed "Shadow DOM" there to fit a single line in the sidebar

@layershifter layershifter force-pushed the docs/updates branch 3 times, most recently from f06c97e to d12f95d Compare September 27, 2022 09:19
@layershifter layershifter marked this pull request as ready for review September 27, 2022 09:38
@layershifter layershifter requested a review from a team as a code owner September 27, 2022 09:38
ling1726
ling1726 reviewed Sep 29, 2022
View reviewed changes
apps/website/docs/react/guides/limitations.md
}
```

- Use local CSS variables for nested/pseudo selectors. Prefer to use inline styles, but they can't be used for pseudo selector, for example.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why recommend inline styles over local css variables ?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMO it's redundant for one offs as it requires additional work without obvious benefits: you still need to pass a CSS variable via inline styles.

makeStyles({
  color: { color: 'var(--color)', }
})

<div style={{ '--color': props.color }} />

// vs.

<div style={{ color: props.color }} />

ling1726
ling1726 reviewed Sep 29, 2022
View reviewed changes
apps/website/docs/react/guides/limitations.md
@@ -4,6 +4,52 @@ sidebar_position: 2

# Limitations

## Runtime styles

Styles can't be created at runtime which includes dynamic selectors as well.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This section is missing a part on conditional styles

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did not get it, can you please clarify?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

a scenario like a size prop where you can enumerate the possible options. Then it's simply a case of applying the correct class

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Got it, will push updates 👍

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ling1726 added in 1bbbeae.

@layershifter layershifter enabled auto-merge (squash) October 4, 2022 08:16
@layershifter layershifter merged commit 6828b9b into microsoft:main Oct 4, 2022
@layershifter layershifter deleted the docs/updates branch October 4, 2022 08:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ling1726 ling1726 ling1726 approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@layershifter @ling1726