jsxstyle everywhere!

emotion-jsxstyle.js

import React from 'react';
import { css as EmotionCSS } from 'react-emotion';

import { jsxstyleFactory } from './jsxstyleFactory';

const cx = (css, styles, className) =>
  EmotionCSS([{ ...css, ...styles }, className]);

const jsxstyle = jsxstyleFactory(cx);
export const Box = jsxstyle.Box;
export const Flex = jsxstyle.Flex;
export const InlineFlex = jsxstyle.InlineFlex;
export const Inline = jsxstyle.Inline;
export const InlineBlock = jsxstyle.InlineBlock;
export const Block = jsxstyle.Block;
export const Grid = jsxstyle.Grid;
export const Col = jsxstyle.Col;
export const Row = jsxstyle.Row;

glamor-jsxstyle.js

import React from 'react';
import { css as GlamorCSS } from 'glamor';

import { jsxstyleFactory } from './jsxstyleFactory';

const cx = (css, styles, className) =>
  GlamorCSS([{ ...css, ...styles }, className]);

const jsxstyle = jsxstyleFactory(cx);
export const Box = jsxstyle.Box;
export const Flex = jsxstyle.Flex;
export const InlineFlex = jsxstyle.InlineFlex;
export const Inline = jsxstyle.Inline;
export const InlineBlock = jsxstyle.InlineBlock;
export const Block = jsxstyle.Block;
export const Grid = jsxstyle.Grid;
export const Col = jsxstyle.Col;
export const Row = jsxstyle.Row;

jsxstyleFactory.js

import React from 'react';

export const jsxstyleFactory = fn => {
  const Box = ({
    component = 'div',
    className,
    css,
    props,
    children,
    ...rest
  }) => {
    return React.createElement(
      component,
      {
        className: fn(css, rest, className),
        ...props,
      },
      children
    );
  };

  Box.displayName = 'Box';

  const Block = p => <Box display="block" {...p} />;

  Block.displayName = 'Block';

  const Inline = p => <Box display="Inline" {...p} />;

  Inline.displayName = 'Inline';

  const InlineBlock = p => <Box display="inline-block" {...p} />;

  InlineBlock.displayName = 'InlineBlock';

  const Flex = p => <Box display="flex" {...p} />;

  Flex.displayName = 'Flex';

  const InlineFlex = p => <Box display="inline-flex" {...p} />;

  InlineFlex.displayName = 'InlineFlex';

  const Grid = p => <Box display="grid" {...p} />;

  Grid.displayName = 'Grid';

  const Row = p => <Flex flexDirection="row" {...p} />;

  Row.displayName = 'Row';

  const Col = p => <Flex flexDirection="column" {...p} />;

  Col.displayName = 'Col';

  return {
    Box,
    Flex,
    InlineFlex,
    Inline,
    InlineBlock,
    Block,
    Grid,
    Col,
    Row,
  };
};

styled-components-jsxstyle.js

import React from 'react';
import { css as ScCSS } from 'styled-components';

import { jsxstyleFactory } from './jsxstyleFactory';

const cx = (css, styles, className) =>
  ScCSS([{ ...css, ...styles }, className]);

// should codegen these but whatevs
const jsxstyle = jsxstyleFactory(cx);
export const Box = jsxstyle.Box;
export const Flex = jsxstyle.Flex;
export const InlineFlex = jsxstyle.InlineFlex;
export const Inline = jsxstyle.Inline;
export const InlineBlock = jsxstyle.InlineBlock;
export const Block = jsxstyle.Block;
export const Grid = jsxstyle.Grid;
export const Col = jsxstyle.Col;
export const Row = jsxstyle.Row;