feat(core): useStyle hook

[raymondmuller]

Description

See feature idea discussion here: #757

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
mitosis-fiddle	✅ Ready (Inspect)	Visit Preview	Oct 3, 2022 at 7:40PM (UTC)

[samijaber]

I think you're better off making the change once inside of collectCss, the helper responsible for aggregating all of the styles into a CSS string. You could append json.style to its output, which ought to give us support in all generators without changing the code within them.

mitosis/packages/core/src/helpers/styles/collect-css.ts

Lines 80 to 85 in 45c48a5

	export const collectCss = (json: MitosisComponent, options: CollectStyleOptions = {}): string => {
	const styles = collectStyles(json, options);
	// TODO create and use a root selector
	return classStyleMapToCss(styles);
	};

Mind giving that a shot and see if it works without hiccups?

[samijaber]

Love this! Can we add 2 component snapshot tests:

• 1 that uses only useStyle
• 1 that uses useStyle and the css prop, showing how they get combined.

[samijaber]

Excellent @raymondmuller . Thank you for this new feature!! 🏆