https://github.com/swizec/component-css-extractor

Extract CSS from any scoped styles in a component framework. In the browser.
https://github.com/swizec/component-css-extractor

css react styled-components vue

Last synced: about 1 month ago
JSON representation

Extract CSS from any scoped styles in a component framework. In the browser.

• Host: GitHub
• URL: https://github.com/swizec/component-css-extractor
• Owner: Swizec
• License: mit
• Created: 2019-06-01T23:10:40.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T23:15:47.000Z (almost 2 years ago)
• Last Synced: 2024-10-03T06:51:03.538Z (3 months ago)
• Topics: css, react, styled-components, vue
• Language: JavaScript
• Size: 705 KB
• Stars: 37
• Watchers: 5
• Forks: 4
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 👨‍🎨 component-css-extractor

Extract CSS from any scoped styles in a component framework. In the browser.

Try it in a CodeSandbox 👇

[![CodeSandbox thumbnail](https://i.imgur.com/nDckQbd.png)](https://codesandbox.io/s/heuristic-leakey-b645b)

## How to use

```

$ yarn add component-css-extractor

```

To extract CSS from any component, use the `extractCSS` method with a DOM node reference.

```javascript

import extractCSS from 'component-css-extractor'

// ...

const styles = extractCSS(node);

```

Tested with React and styled-componets, but should work on anything that renders to the DOM and puts class-based CSS in `` tags in your HTML header. Works on CodeSandbox and create-react-app. Probably others. ✌️

Happy CSS extracting! ❤️

PS:  👨‍🎨 component-css-extractor won't work with server-side-rendering. This is purely a client-side library. There are plenty of built-in solutions for the server.

## But why?

![](https://media.giphy.com/media/1M9fmo1WAFVK0/giphy.gif)

I built this for a project where I needed to export parts of my UI to raw HTML. Getting the HTML is easy, but you need styles as well or it doesn't work that great.

Turns out extracting the styles isn't so trivial. Styled-components supports it when you're doing server-side-rendering, but not in the browser.

Using `element.getComputedStyle` works okay, but produces too much code. You get values for every CSS property in the standard, not just what you defined.

If you wanna see all the approaches I tried before landing on this one, you can watch this video.

[![](https://i.imgur.com/BeINEPk.png)](https://www.youtube.com/watch?v=v-akMfXZZNE)

# Contributions welcome :)

MIT License