Skip to content

Instantly share code, notes, and snippets.

@jaredpalmer

jaredpalmer/emotion-jsxstyle.js

Last active November 8, 2017 14:43
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save jaredpalmer/94f1786d9a7c0f789591fa849a7ef4a6 to your computer and use it in GitHub Desktop.
Save jaredpalmer/94f1786d9a7c0f789591fa849a7ef4a6 to your computer and use it in GitHub Desktop.
Download ZIP
jsxstyle everywhere!
Raw
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;
Raw
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;
Raw
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,
};
};
Raw
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment