Skip to content

Conversation

@layershifter
Copy link
Member

@layershifter layershifter commented Sep 27, 2022

Fixes #225.

This PR implements makeResetStyles() function in @griffel/core.

  • It generates a monolithic classes with rf prefix
  • Produced CSS rules are insert into new r bucket, so any Atomic rules will have higher precedence
  • Shorthands are allowed in makeResetStyles calls are there are no reasons to forbid them

@@ -0,0 +1,324 @@
import { GriffelResetStyle } from '@griffel/core';
Copy link
Member Author

Choose a reason for hiding this comment

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

It's a copy of fixture.ts with exclusions of shorthands that are not banned.

@github-actions
Copy link

github-actions bot commented Sep 27, 2022

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react
__styles + mergeClasses (build time)
3.569 kB
1.607 kB
3.573 kB
1.609 kB
4 B
2 B
react
makeStaticStyles (runtime)
9.439 kB
4.066 kB
9.443 kB
4.068 kB
4 B
2 B
react
makeStyles + mergeClasses (runtime)
22.542 kB
8.43 kB
22.546 kB
8.432 kB
4 B
2 B
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
🤖 This report was generated against fb1e81016e7aea1da8f15f493cab29d61940d55f

@layershifter layershifter force-pushed the feat/add-make-reset-styles branch from 86d9742 to 42e3ff4 Compare September 27, 2022 14:51
@layershifter layershifter force-pushed the feat/add-make-reset-styles branch from 42e3ff4 to 46fb64c Compare September 29, 2022 12:31
@layershifter layershifter marked this pull request as ready for review September 29, 2022 12:46
@layershifter layershifter requested a review from a team as a code owner September 29, 2022 12:46
let ltrCSS = '';
let rtlCSS = '';

// eslint-disable-next-line guard-for-in
Copy link
Contributor

Choose a reason for hiding this comment

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

is this for performance reasons? the styles here is provided by the user, this might leak some weird things if someone is tweaking around a custom object as 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.

is this for performance reasons?

Yes, we use it consistently across in other places, too. It's not expected to see custom objects there, but we can change it if someone will report issues.

Co-authored-by: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
@layershifter layershifter force-pushed the feat/add-make-reset-styles branch from c90b433 to d12d11f Compare October 4, 2022 08:13
for (const property in styles) {
const value = styles[property as keyof GriffelStyle];

// eslint-disable-next-line eqeqeq
Copy link
Member

Choose a reason for hiding this comment

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

Chro!

@layershifter layershifter enabled auto-merge (squash) October 4, 2022 10:22
@layershifter layershifter merged commit 67109b0 into microsoft:main Oct 4, 2022
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.

core: implement makeResetStyles

4 participants