Twin.Macro with Storybook and SVGR Loader

[LouisJackson]

Hello I'm using twin.macro with Styled-Components within Storybook and, I'm using SVGR Loader for svgs.

When I'm adding tw and css props to my SVG component it does work normally, unless I'm using the component with a dynamic name.

import React from 'react';
import tw, { TwStyle } from 'twin.macro';
import ArrowRightIcon from '../../../assets/arrow-right.svg';

const IconVariants = {
  'arrow-right': ArrowRightIcon,
}

interface Props extends React.SVGAttributes<SVGElement> {
  variant?: keyof typeof IconVariants;
  extraCss: string | TwStyle | TwStyle[];
}

const Icon: React.FC<Props> = ({ variant = 'arrow-right', extraCss }) => {
  const IconComponent = IconVariants[variant];

  return (
    <IconComponent tw="inline fill-current stroke-current" css={extraCss} />
  ); // <-- doesn't work
  return (
    <ArrowRightIcon tw="inline fill-current stroke-current" css={extraCss} />
  ); // <-- work
};

export default Icon;

Here are the errors I get in Storybook, when I add just the tw property and both tw and css property.

I wonder if it is a twin.macro bug or if I'm doing things wrong.

Thanks for the help!

[ben-rogerson]

Hey there!
Could you also share an example of your IconVariants component so I can see how you're selecting the icon (and passing the props to it)?

[ben-rogerson]

Whats your webpack config for svg loader?
I'd have to recreate an example to get to the bottom of this.
Providing me an example repo would be ideal though :)

[LouisJackson]

Here's a repo to reproduce the problem based on the Twin TS StyledComponents Storybook template you made.
Changes have been made to .storybook/main.js file to include the SVGR Loader which works fine until you add a tw prop to the SVG. Hope this helps you get to the bottom of this.

[LouisJackson]

@ben-rogerson did you have the chance to give it a look?

[ben-rogerson]

Twin hoists the styled component outside of the component when the tw prop is used and so loses it's scope

After babel runs, it looks like this:

import React from "react";
import ArrowRightIcon from "../assets/arrow-right.svg";
const IconVariants = { "arrow-right": ArrowRightIcon };

var _StyledIconComponent = _styled(IconComponent).withConfig({ // < IconComponent is no longer in scope
  displayName: "pages___StyledIconComponent",
  componentId: "dl4jt5-0"
})({ "borderWidth": "1px" });

const Icon = ({ variant = "arrow-right" }) => {
  const IconComponent = IconVariants[variant];
  return <_StyledIconComponent data-tw="border" />;
};

export default Icon;

The workaround is to convert IconComponent to an outside function, something like this:

// Icon.tsx
import React from "react";
import tw, { TwStyle } from "twin.macro";
import ArrowRightIcon from "../assets/arrow-right.svg";

const IconVariants: { [key: string]: React.FC } = {
  "arrow-right": ArrowRightIcon,
};

interface Props extends React.SVGAttributes<SVGElement> {
  variant: keyof typeof IconVariants;
  // extraCss: string | TwStyle | TwStyle[];
}

const IconComponent = ({ variant, ...rest }: {
  variant: keyof typeof IconVariants;
}) => IconVariants[variant](rest);

const Icon: React.FC<Props> = ({ variant = "arrow-right" }) => (
  <IconComponent tw="border" variant={variant} />
);

export default Icon;

Alternatively, you could return IconVariants directly:

// Icon.tsx
import React from "react";
import ArrowRightIcon from "../assets/arrow-right.svg";

const IconVariants {
  "arrow-right": ArrowRightIcon,
};

interface Props extends React.SVGAttributes<SVGElement> {
  variant: keyof typeof IconVariants;
}

const Icon: React.FC<Props> = (props) =>
  IconVariants[props.variant || "arrow-right"](props);

export default Icon;

and:

// Icon.stories.tsx
import React from "react";
import { Story } from "@storybook/react/types-6-0";
import Icon from "./Icon";
import "twin.macro";

export default { title: "Icon", component: Icon };

export const Default: Story = (props) => (
  <Icon variant="arrow-right" tw="border" {...props} />
);

[LouisJackson]

thanks a lot! makes sense and will use the first workaround for now.