1.0.0 • Published 3 years ago
extract-emotion-styles v1.0.0
Why build this?
Emotion (and CSS-in-JS libraries generally) make developing great components super fast - but what happens when you need to work with libraries that bake-in classnames or are using dangerouslySetInnerHTML ingested from somewhere else? This library solves all of your styling issues in these scenarios - so you can continue to use Emotion, and style uncontrolled HTML and components just like you would any other Emotion component.
What can I do with this?
- Get the styles from an existing Emotion-styled component as CSS text
- Apply styles from an existing Emotion-styled component to any DOM selector of your choosing
API
| Function Name | Description | Expects | Returns | |
|---|---|---|---|---|
| parseComponentToStyle | Take a single Emotion-themed component and return a string of CSS classes. | component: The component you'd like to extract styles from. toClassName (optional): replace the component's Emotion-generated classname with a classname of your choosing in the extracted rules. shouldUnmount (optional, default: true): control whether the generated React instance should still be available after styles are extracted. Useful for debugging. | All found CSS styles as a string. | |
| applyComponentStylesToClass | Take a single Emotion-themed component, and apply its styles directly to a different class name. | component: The component you'd like to extract styles from. toClassName: replace the component's Emotion-generated classname with a classname of your choosing in the extracted rules. shouldUnmount (optional, default: true): control whether the generated React instance should still be available after styles are extracted. Useful for debugging. | No return | |
| addRawCssToGlobalStyles | Add additional CSS styles globally to your document. Useful for adding additional styles/overriding Emotion styles. | rawCSS: Plain CSS text as a single string | No return |
1.0.0
3 years ago