Refactor TagButton And Tag

packages/components/src/components/Tag/Tag.style.ts

@@ -1,24 +1,25 @@
-import { css } from "@emotion/core"
-import { typography, colors } from "../../theme"
+import { StyleFn, makeStyles } from "./../../utils/style-reducer";
+import { css } from "@emotion/core";
+import { typography, colors } from "../../theme";
 
-export type TagStyleProps = {}
+export type TagStyleProps = {};
 
-export let makeStyles = ({}: TagStyleProps) => {
-  return css`
-    border: 1px solid ${colors.blue[700]};
-    color: ${colors.white};
-    background-color: ${colors.black};
-    text-align: center;
-    padding: 10px 15px;
-    display: inline-block;
-    cursor: default;
-    font-family: ${typography.fonts.base};
-    font-weight: ${typography.weights.regular};
-    font-size: ${typography.sizes.button.medium};
-    margin: 0 15px 0 0;
+const styles: StyleFn = () => ({
+	border: `1px solid ${colors.blue[700]}`,
+	color: colors.white,
+	backgroundColor: colors.black,
+	textAlign: "center",
+	padding: "10px 15px",
+	display: "inline-block",
+	cursor: "default",
+	fontFamily: typography.fonts.base,
+	fontWeight: typography.weights.regular,
+	fontSize: typography.sizes.button.medium,
+	margin: "0 15px 0 0",
 
-    &::selection {
-      background: transparent;
-    }
-  `
-}
+	"&::selection": {
+		background: "transparent",
+	},
+});
+
+export const useCSS = ({}: TagStyleProps) => makeStyles([styles])({});

packages/components/src/components/Tag/Tag.tsx

@@ -1,18 +1,11 @@
-import React from "react"
-import { makeStyles, TagStyleProps } from "./Tag.style"
+import React from "react";
+import { TagStyleProps, useCSS } from "./Tag.style";
 
 type TagProps = {
-  text: string
-} & TagStyleProps
+	text: string;
+} & TagStyleProps;
 
-export default function Tag({
-  text,
-  ...styleProps
-}: TagProps) {
-  let styles = makeStyles(styleProps)
-  return (
-    <div css={styles}>
-      {text}
-    </div>
-  )
+export default function Tag({ text, ...styleProps }: TagProps) {
+	let styles = useCSS(styleProps);
+	return <div css={styles}>{text}</div>;
 }

packages/components/src/components/TagButton/TagButton.style.ts

@@ -1,38 +1,40 @@
-import { css } from "@emotion/core"
-import { typography, colors } from "../../theme"
+import { StyleFn, makeStyles } from "./../../utils/style-reducer";
+import { typography, colors } from "../../theme";
 
 export type TagButtonStyleProps = {
-  selected?: boolean
-}
+	selected?: boolean;
+};
 
-export let makeStyles = ({
-  selected = false
-}: TagButtonStyleProps) => {
-  return css`
-    border: 1px solid ${colors.blue[500]};
-    color: ${colors.white};
-    background-color: ${colors.black};
-    text-align: center;
-    padding: 15px 20px;
-    display: inline-block;
-    cursor: default;
-    font-family: ${typography.fonts.base};
-    font-weight: ${typography.weights.medium};
-    font-size: ${typography.sizes.button.large};
-    margin: 0 15px 0 0;
-    line-height: ${typography.sizes.button.large};
-    box-shadow: ${selected ? `3px 3px ${colors.blue[500]}` : "none"};
+const baseStyles: StyleFn = () => ({
+	border: `1px solid ${colors.blue[500]}`,
+	color: colors.white,
+	backgroundColor: colors.black,
+	textAlign: "center",
+	padding: "15px 20px",
+	display: "inline-block",
+	cursor: "default",
+	fontFamily: typography.fonts.base,
+	fontWeight: typography.weights.medium,
+	fontSize: typography.sizes.button.large,
+	margin: "0 15px 0 0",
+	lineHeight: typography.sizes.button.large,
 
-    span {
-      margin-left: 20px;
-      font-size: ${typography.sizes.icon.xxlarge};
-      font-weight: ${typography.weights.regular};
-      line-height: 0;
-      vertical-align: sub;
-    }
+	span: {
+		marginLeft: "20px",
+		fontSize: typography.sizes.icon.xxlarge,
+		fontWeight: typography.weights.regular,
+		lineHeight: 0,
+		verticalAlign: "sub",
+	},
 
-    &::selection {
-      background: transparent;
-    }
-  `
-}
+	"&::selection": {
+		background: "transparent",
+	},
+});
+
+const shadowFromProps: StyleFn = (styles, { selected = false }) => ({
+	...styles,
+	boxShadow: selected ? `3px 3px ${colors.blue[500]}` : "none",
+});
+
+export const useCSS = (props: TagButtonStyleProps) => makeStyles([baseStyles, shadowFromProps])(props);

packages/components/src/components/TagButton/TagButton.tsx

@@ -1,20 +1,17 @@
-import React from "react"
-import { makeStyles, TagButtonStyleProps } from "./TagButton.style"
+import React from "react";
+import { TagButtonStyleProps, useCSS } from "./TagButton.style";
 
 type TagButtonProps = {
-  text: string
-  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
-} & TagButtonStyleProps
+	text: string;
+	onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+} & TagButtonStyleProps;
 
-export default function TagButton({
-  text,
-  onClick,
-  ...styleProps
-}: TagButtonProps) {
-  let styles = makeStyles(styleProps)
-  return (
-    <div css={styles} onClick={onClick}>
-      {text}<span>+</span>
-    </div>
-  )
+export default function TagButton({ text, onClick, ...styleProps }: TagButtonProps) {
+	let styles = useCSS(styleProps);
+	return (
+		<div css={styles} onClick={onClick}>
+			{text}
+			<span>+</span>
+		</div>
+	);
 }