Skip to content

Babel plugin to move anonymous inline style objects in your JSX to the top of the module scope.

Notifications You must be signed in to change notification settings

bitttttten/babel-plugin-react-move-anonymous-inline-style-objects

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

babel-plugin-react-move-anonymous-inline-style-objects

Lift inline anonymous objects on style and css props in JSX outside of the render's scope. This will benefit a component that will be rendered multiple times as it prevents a new anonymous object being created on every render. In reality, the performance gain is ever so slight although it seems to scale roughly linearly with the size of the object, so it might be worth considering still!

Taking suggestions for a name too 🌚

Disclaimer

This was written just to learn how to create a babel plugin, I wouldn't recommend using it 👻

Example

In

import React from "react"

const MyComponent = () => <div style={{ color: "red" }} />

Out

import React from "react"

var bpmio__style__0 = {
  color: "red",
}

const MyComponent = () => <div style={bpmio__style__0} />

Gotchas

This is only a proof of concept, and a big emphasis on it being a work in progress.

It currently does not support logical expressions or conditonal expressions inside the style or css props. This is because there is additional work to be done to detect if it's safe to move the object to the top of the module scope without breaking any references to scopes it does not have access to, like variables from state. This means this plugin only moves the anonymous object if all values are a string literal (not a template literal) or a numerical literal.

Supported

import React from "react"

const SupportedStringLiteral = () => <div style={{ color: "red" }} />
const SupportedNumericLiteral = () => <div style={{ padding: 32 }} />

Not supported

import React from "react"

const NotSupportedTemplateLiteral = () => <div style={{ color: `red` }} />
const NotSupportedTemplateLiteralWithConditional = () => <div style={{ padding: `${process.env.IS_TOUCH_DEVICE ? 32 : 0}` }} />
const NotSupportedConditional = () => <div style={{ color: process.env.IS_SOME_VALUE && `red` }} />
const NotSupportedTenary = () => <div style={{ color: process.env.IS_SOME_VALUE ? "yellow" : "blue" }} />

About

Babel plugin to move anonymous inline style objects in your JSX to the top of the module scope.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published