ExtractEmotion

Very basic tool to do one thing: extract into a css bundle the CSS generated by emotion.

Why should I use this?

We created this tool for a specific use case, where React is the main source of the library (including CSS styling), and we wanted to generate a vanilla JS version of our library. Instead of replicating the CSS twice in emotion and in pure CSS, we made a cli tool to get all the styles into a separate bundle.

We did this because emotion generates classnames and applies styles at runtime, meaning it can't be extracted by webpack plugins currently available, like MiniCSSExtractPlugin.

Prerequisite Notes The tool requires you to have react and emotion installed to work, since the input file given to the tool should include/import the react components using emotion. The entry point should already have been transpiled with babel, that step isn't done by the tool.

Install

npm install -D @drawbotics/extract-emotion

Usage as CLI

npx extract-emotion ./index.js --output ./output-dir

Options

• filename: Name of the generated CSS bundle file. If this is not passed, it will default to style.css
• prefix: The tool removes the emotion hashes on classnames, if you want to add a prefix to all your classnames here is where you define it
• output: Directory to which the CSS bundle will be written to

Development

npm run test
npm run build