Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

babel-plugin-glamorous-to-emotion

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

babel-plugin-glamorous-to-emotion

A codemod to migrate existing React or Preact codebases from glamorous to emotion.

  • 1.2.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
10
decreased by-54.55%
Maintainers
1
Weekly downloads
 
Created
Source

💄 glamorous → 👩‍🎤 emotion

This codemod was created to help migrate an existing React or Preact codebase from glamorous to emotion in light of this issue on glamorous.

Here's a demo of the codemod in action. The upper-left quadrant is glamorous code, the lower-right quadrant is the transformed code.

Features

This codemod follows the glamorous to emotion migration guide on the glamorous repo. Particularly, it rewrites the following:

  • ✅ All import statements, including ThemeProvider inclusion.
  • ✅ All glamorous function calls to emotion function calls.
  • ✅ The content property to be emotion friendly.

Usage

You'll need to use babel-codemod to apply this codemod to your existing codebase. It should be pretty straightforward:

  • First, install this plugin: yarn add babel-plugin-glamorous-to-emotion -D

  • Then run it: npx babel-codemod --plugin babel-plugin-glamorous-to-emotion "src/**/*.js" or a similar variation depending on your directory structure.

This will put you fully in emotion-land.

Options

You may also pass a --plugin-options argument to the babel-codemod command. Here's a sample call:

npx babel-codemod --plugin babel-plugin-glamorous-to-emotion --plugin-options glamorousToEmotion='{"withBabelPlugin": true}' src/**/*.js
  • withBabelPlugin

    Tells the plugin that your emotion setup includes the emotion-babel-plugin. Without this option, <glamorous.Div marginTop={5}/> gets translated to <div className={css({marginTop: 5})}>.

    If this option is enabled, it will be transformed to <div css={{marginTop: 5}}>.

  • preact

    Uses import styled from "preact-emotion" instead of import styled from "react-emotion"

Contributing

ALL CONTRIBUTIONS WELCOME!

I sincerely hope it helps you migrate your codebase! Please open issues for areas where it doesn't quite help and we'll sort it out.

Acknowledgements

The following people are awesome for their open source work and should be acknowledged as such.

FAQs

Package last updated on 21 Aug 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc