@kodiak-ui/babel-plugin

@kodiak-ui/babel-plugin

A babel plugin that hoists jsx attributes.

@kodiak-ui/babel-plugin is used to optimize sx attributes by hoisting anything that could be out of the render path.

Usage

Via .babelrc (Recommended)

.babelrc

Without options:

{
  "plugins": ["@kodiak-ui"]
}

With options:

Defaults Shown

{
  "plugins": [
    [
      "@kodiak-ui",
      {
          attributesToHoist: ["sx", "variants"]
      }
    ]
  ]
}

Options

attributesToHoist

An array of jsx attributes to hoist.

Sample

// Input
import { Box } from '@kodiak-ui/primitives'

function sxGenerator() {
  return {
    bg: 'green',
  }
}

function App() {
  const isTrue = true

  return (
    <div
      sx={{
        backgroundColor: 'blue',
        '&:hover': {
          color: 'lightgreen',
        },
      }}
    >
      This has a hotpink background.
      <div
        css={{ backgroundColor: isTrue ? 'red' : 'blue' }}
        sx={{
          color: isTrue ? 'red' : 'blue',
        }}
        onClick={() => null}
      >
        Another div that isn't hoisted
      </div>
      <Box
        variants={['var1', 'var2']}
        sx={{ background: 'blue' }}
        aria-label="a label"
      >
        A box
      </Box>
      <Box sx={sxGenerator()}>Pure functions are also hoisted</Box>
    </div>
  )
}

// Output
      ↓ ↓ ↓ ↓ ↓ ↓

import * as React from 'react'; // or a jsx pragma
import { Box } from '@kodiak-ui/primitives';

function sxGenerator() {
  return {
    bg: 'green'
  };
}

var _ref = {
  backgroundColor: 'blue',
  '&:hover': {
    color: 'lightgreen'
  }
};
var _ref2 = ['var1', 'var2'];
var _ref3 = {
  background: 'blue'
};

var _ref4 = sxGenerator();

function App() {
  const isTrue = true;
  return <div sx={_ref}>
      This has a hotpink background.
      <div css={{
      backgroundColor: isTrue ? 'red' : 'blue'
    }} sx={{
      color: isTrue ? 'red' : 'blue'
    }} onClick={() => null}>
        Another div that isn't hoisted
      </div>
      <Box variants={_ref2} sx={_ref3} aria-label="a label">
        A box
      </Box>
      <Box sx={_ref4}>Pure functions are also hoisted</Box>
    </div>;
}