swizec/component-css-extractor

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

👨‍🎨 component-css-extractor

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

Try it in a CodeSandbox 👇

How to use

$ yarn add component-css-extractor

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

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 <style> 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?

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.

Contributions welcome :)

MIT License

component-css-extractor's Issues

Module not found: Error: Can't resolve 'fs' in node_modules/css/lib/stringify

support link stylesheet

I read the code, it cannot get style from link stylesheet, could you support it?

Extract scoped media query styles

Hi @Swizec, great job on this library! Very helpful here!

Is there a way we can extract the media queries styles as well? My specific need here is the media print.

Thanks!
Henry

SVG elements and prob some others breaks the code

Hi,

thanks for a great plugin!

This error comes in line 14 map(name => name.split(" "))
error e3.split is not a function

Cheers, J

Bookmarklet

Hi!

Please, do you know how to convert this project into a bookmarklet?

Thank you!