Skip to content

Latest commit

 

History

History
77 lines (57 loc) · 1.42 KB

README.md

File metadata and controls

77 lines (57 loc) · 1.42 KB

babel-plugin-visage

@byteclaw/babel-plugin-visage version License

Babel plugin that improves Visage performance by hoisting styles prop to a root scope of a Component's file.

Example

In

import { Box } from '@byteclaw/visage';
import React from 'react';

export function Test() {
  return <>
    <Box styles={{ color: 'red' }}>
    <Box styles={{ color: 'blue' }}>
    <Box styles={{ color: 'green' }}>
  </>
}

Out

import { Box } from '@byteclaw/visage';
import React from 'react';

var _ref = Object.freeze({ color: 'red' });
var _ref2 = Object.freeze({ color: 'blue' });
var _ref3 = Object.freeze({ color: 'green' });

export function Test() {
  return <>
    <Box styles={_ref}>
    <Box styles={_ref2}>
    <Box styles={_ref3}>
  </>
}

Installation

yarn add --dev babel-plugin-visage

or if you prefer npm

npm install --save-dev babel-plugin-visage

Usage

Via .babelrc (Recommended)

{
  "plugins": ["@byteclaw/visage"]
}

License

MIT