feat(build-time): #647 createUseStyle

[mauroerta]

Proposed changes

Implemented the function createUseStyle that replaces createUseClasses and adds:

Flat style object

const useStyle = createUseStyle({
    bg: 'primary'
})

instead of

const useClasses = createUseClasses({
   component: {
       bg: 'primary'
   }
})

Possibility to pass functions to the style object for an interaction between build-time and run-time:

const useStyle = createUseStyle({
    bg: props => props.bg
})

Return value

createUseStyle returns an object that contains the className, the style, and other default component properties (if componentName is specified):

const useButton = createUseStyle({
   componentName: 'Button',
   variant: props => props.variant
});

function Button({ variant }) {
   const { className, style } = useButton({ variant });
   return <button className={className} style={style} />
}

Closes #647

Types of changes

• 🐛 Bugfix (non-breaking change which fixes an issue)
• ✨ New feature (non-breaking change which adds functionality or enhancements)
• 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
• ✅ Tests (added tests for an existing feature)
• 📚 Documentation Update (if none of the other choices apply)
• 🙌 Other (please, write a clear and concise description of the proposal in the section above)

Checklist

• 👀 I have read the CONTRIBUTING doc
• ✅ Lint and unit tests pass locally with my changes
• 🧪 I have added tests that prove my fix is effective or that my feature works
• 📚 I have added the necessary documentation (if appropriate)
• 🔀 Any dependent changes have been merged and published in downstream modules

[codecov-commenter]

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (b9d98d2) 100.00% compared to head (a37c8ef) 100.00%.

📣 This organization is not using Codecov’s GitHub App Integration. We recommend you install it so Codecov can continue to function properly for your repositories. Learn more

Additional details and impacted files

@@            Coverage Diff            @@
##              main      #692   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           96       100    +4     
  Lines          754       836   +82     
  Branches       131       146   +15     
=========================================
+ Hits           754       836   +82     

Impacted Files	Coverage Δ
packages/utils/src/deepMerge.ts	100.00% <ø> (ø)
packages/utils/src/parseNumber.ts	100.00% <ø> (ø)
packages/babel-plugin/src/constants.ts	100.00% <100.00%> (ø)
packages/babel-plugin/src/utils/css.ts	100.00% <100.00%> (ø)
packages/babel-plugin/src/utils/dynamicClasses.ts	100.00% <100.00%> (ø)
packages/babel-plugin/src/utils/getStyleObject.ts	100.00% <100.00%> (ø)
...ages/babel-plugin/src/utils/isThemeableProperty.ts	100.00% <100.00%> (ø)
packages/babel-plugin/src/utils/splitStyles.ts	100.00% <100.00%> (ø)
packages/babel-plugin/src/utils/toJS.ts	100.00% <100.00%> (ø)
packages/babel-plugin/src/visitor.ts	100.00% <100.00%> (ø)
... and 12 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.