Emotion Styled based UI Library from scratch using Typescript and Rollup to bundle

[jayantasamaddar]

I am having a lot of difficulty bundling my component library that I built using @emotion/styled.

The folder structure looks like this -

src
├── components / componentFolder / index.ts (exports particular component)
├── lib / emotion.d.ts (Declarations for theme)
├── types / index.ts (exports all types)
├── index.ts (exports all components and types)

My rollup.config.js file looks like this.

import { readFileSync } from 'fs';
import path from 'path';

import { babel } from '@rollup/plugin-babel';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import typescript from '@rollup/plugin-typescript';

const input = './src/index.ts';
// Read package.json
const pkg = JSON.parse(
  readFileSync(new URL('./package.json', import.meta.url).pathname)
);
const extensions = ['.js', '.jsx', '.ts', '.tsx'];

export default [
  {
    input,
    output: [
      {
        format: 'cjs',
        dir: path.dirname(pkg.main),
        preserveModules: true,
        entryFileNames: '[name][assetExtname].js',
        exports: 'named'
      },
      {
        format: 'esm',
        dir: path.dirname(pkg.module),
        preserveModules: true,
        entryFileNames: '[name][assetExtname].js'
      }
    ],
    external: [
      /@babel\/runtime/,
      'react',
      'react-dom',
      /@emotion\/styled/,
      /@emotion\/react/
    ],
    plugins: [
      peerDepsExternal(),
      typescript(),
      nodeResolve({ extensions }),
      commonjs(),
      babel({
        exclude: 'node_modules/**',
        extensions,
        envName: 'production',
        babelHelpers: 'runtime',
        plugins: ['@babel/plugin-transform-runtime']
      })
    ]
  }
];

I keep getting errors on the theme declarations. Has anyone built a working ui library using typescript, @emotion/styled and rollup ? I tried searching, couldn't find any reference. Any example project to look at or any help in this matter is appreciated, including the tsconfig file. My components are tested on storybook and jest. I'm just not able to find the right documentation that shows how to properly bundle an emotion based library. Now I'm stuck here at the config for days, rethinking if I should rewrite the emotion code with SASS as that has plenty of documentation and looks straightforward.

[srmagura]

What is the exact error you are getting? Can you provide a link to a GitHub repo that demonstrates the problem?

[jayantasamaddar]

@srmagura

What is the exact error you are getting? Can you provide a link to a GitHub repo that demonstrates the problem?

1) Error I'm getting

./src/index.ts → dist/cjs, dist/esm...
[!] (plugin typescript) Error: @rollup/plugin-typescript TS7053: Element implicitly has an 'any' type because expression of type '"--ursa-font-size-lg"' can't be used to index type '{ "--ursa-bg-primary": string; "--ursa-backdrop": string; "--ursa-text-primary": string; "--ursa-btn-primary": string; "--ursa-btn-primary-hovered": string; "--ursa-btn-basic": string; "--ursa-btn-alert": string; ... 17 more ...; "--ursa-black": string; }'.
  Property '--ursa-font-size-lg' does not exist on type '{ "--ursa-bg-primary": string; "--ursa-backdrop": string; "--ursa-text-primary": string; "--ursa-btn-primary": string; "--ursa-btn-primary-hovered": string; "--ursa-btn-basic": string; "--ursa-btn-alert": string; ... 17 more ...; "--ursa-black": string; }'.

The problem seems to be stemming from the variable declarations file.

---

2.) These properties above that appeared in errors are declared in my emotion.d.ts file as theme variables

emotion.d.ts

import '@emotion/react';

declare module '@emotion/react' {
  export interface Theme {
    color: {
      "--ursa-bg-primary": string;
      "--ursa-backdrop": string;
      "--ursa-text-primary": string;
      "--ursa-btn-primary": string;
      "--ursa-btn-primary-hovered": string;
      "--ursa-btn-basic": string;
      "--ursa-btn-alert": string;
      "--ursa-btn-alert-hovered": string;
      "--ursa-btn-disabled": string;
      "--ursa-link-primary": string;
      "--ursa-link-primary-hovered": string;
      "--ursa-border-primary": string;
      "--ursa-border-secondary": string;
      "--ursa-nav-bg-primary": string;
      "--ursa-nav-item-bg-active": string;
      "--ursa-nav-item-bg-hovered": string;
      "--ursa-tag-bg-basic": string;
      "--ursa-tag-text": string;
      "--ursa-tab-selected": string;
      "--ursa-card-img-bg": string;
      "--ursa-badge-img-bg": string;
      "--ursa-accent-color": string;
      "--ursa-accent-color-hovered": string;
      "--ursa-white": string;
      "--ursa-black": string;
    },
    font: {
      "--ursa-font-primary": string;
    },
    fontSize: {
      "--ursa-font-size-1": string;
      "--ursa-font-size-2": string;
      "--ursa-font-size-3": string;
      "--ursa-font-size-4": string;
      "--ursa-font-size-5": string;
      "--ursa-font-size-6": string;
      "--ursa-font-size-7": string;
      "--ursa-font-size-8": string;
      "--ursa-font-size-9": string;
      "--ursa-font-size-10": string;
      "--ursa-font-size-11": string;
      "--ursa-font-size-12": string;
      "--ursa-font-size-13": string;
    },
    border: {
      "--ursa-border-radius-lg": string;
      "--ursa-border-radius-xl": string;
      "--ursa-border-radius-2xl": string;
      "--ursa-border-radius-full": string;
    }
  }
}

---

3.) Theme styles

I have another folder styles which have three files, common, darkTheme, lightTheme. They contain objects which declare the value of the variables listed above. The common contains the styles same for both dark and lightThemes and here's an example how the darkTheme looks.

Example:

`src/styles/darkTheme.ts

import { commonStyles } from "./common";

export const darkTheme = {
  ...commonStyles,
  color: {
    ...commonStyles.color,
    "--ursa-color-scheme": "dark",
    "--ursa-bg-primary": "rgba(4, 12, 24, 1)",
    "--ursa-text-primary": "rgba(255, 255, 255, 1)",
    "--ursa-backdrop": "rgba(15, 23, 42, 1)",
    "--ursa-border-primary": "rgba(71, 85, 105, 1)",
    "--ursa-nav-bg-primary": "rgba(22, 78, 99, 1)",
    "--ursa-nav-item-bg-active": "rgba(204, 251, 241, 1)",
    "--ursa-nav-item-bg-hovered": "rgba(21, 94, 117, 1)",
  },
};

---

4.) ThemeProvider component.

Now, I have a ThemeProvider component which works like this -

src/components/ThemeProvider/ThemeProvider.tsx

import React, { FC, ReactElement, ReactNode } from "react";
import {
  css,
  Global,
  Theme,
  ThemeProvider as EmotionThemeProvider,
} from "@emotion/react";

export interface ThemeProviderProps {
  theme: Theme;
  children: ReactNode;
}

export const ThemeProvider: FC<ThemeProviderProps> = ({
  children,
  theme,
}): ReactElement => {
  return (
    <EmotionThemeProvider theme={theme}>
      <Global
        styles={css`
          @font-face {
            font-family: "Roboto";
            font-style: normal;
            font-weight: 400;
            src: url("https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2")
              format("woff2");
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
              U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
              U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
          }
          *,
          *::before,
          *::after {
            box-sizing: border-box;
          }
          :root {
            color-scheme: ${theme.color["--ursa-color-scheme"]};
            font-size: 15px;
            font-family: "Roboto", "Helvetica", sans-serif;
          }
          div,
          section,
          article,
          p,
          span,
          a,
          ul,
          li {
            margin: 0;
            padding: 0;
          }
          h1,
          h2,
          h3,
          h4,
          h5 {
            font-weight: bold;
          }
        `}
      />
      {children}
    </EmotionThemeProvider>
  );
};

---

5.) A single component that uses the theme variables

src/components/Avatar/Avatar.tsx

import React, { FC, ReactElement, ReactNode } from "react";
import styled from "@emotion/styled";

interface AvatarProps {
  children?: ReactNode;
  className?: string;
  src?: string;
  alt?: string;
  variant?: "rounded" | "square";
  size?: "small" | "medium" | "large";
  bgColor?: string;
}

const AvatarImage = styled.img(
  ({ width, height }) => `
        width: ${width || "auto"};
        height: ${height || "auto"};
    `
);

const UrsaAvatar: FC<AvatarProps> = (props): ReactElement => {
  const { children, className, src, alt } = props;

  let avatarType: "image" | "external" | "placeholder";

  if (src) {
    avatarType = "image";
  } else if (typeof children === "string") {
    avatarType = "placeholder";
  } else {
    avatarType = "external";
  }

  const avatarMarkup = {
    image: <AvatarImage className="Ursa-AvatarImage" src={src} alt={alt} />,
    placeholder: (
      <span>
        {children ? (children as string).charAt(0).toUpperCase() : "U"}
      </span>
    ),
    external: <span>{children}</span>,
  };

  return (
    <div className={`Ursa-Avatar ${className || ""}`}>
      {avatarMarkup[avatarType]}
    </div>
  );
};

export const Avatar = styled(UrsaAvatar)(
  ({ theme: { color, border }, src, variant, size, bgColor }) => `
        width: ${
          size === "small" ? "28px" : size === "large" ? "112px" : "56px"
        };
        height: ${
          size === "small" ? "28px" : size === "large" ? "112px" : "56px"
        };
        border-radius: ${
          variant === "square" ? 0 : border["--ursa-border-radius-full"]
        };
        background-color: ${
          !src ? (bgColor ? bgColor : color["--ursa-card-img-bg"]) : "none"
        };
        & > img {
            border-radius: ${
              variant === "square" ? 0 : border["--ursa-border-radius-full"]
            };
            width: ${
              size === "small" ? "28px" : size === "large" ? "112px" : "56px"
            };
            height: ${
              size === "small" ? "28px" : size === "large" ? "112px" : "56px"
            };
        }

        & > span {
            display: flex;
            flex-grow: 1;
            justify-content: center;
            align-items: center;
            height: 100%;
            color: ${color["--ursa-text-primary"]};
            font-weight: bold;
        }
    `
);

The usage of color: ${color["--ursa-text-primary"]}; is not being recognized and is part of the error thrown.

---

6.) Example Usage: Storybook (see the decorators to understand how I intend the ThemeProvider to be used)

import React from 'react';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { ThemeProvider } from '../ThemeProvider';
import { darkTheme, lightTheme } from '../../styles';

import { Avatar } from '../Avatar';

export default {
  title: 'Components/Avatar',
  component: Avatar,
  decorators: [
    (Story) => (
      <ThemeProvider theme={darkTheme}>
        <Story />
      </ThemeProvider>
    )
  ]
} as ComponentMeta<typeof Avatar>;

const Template: ComponentStory<typeof Avatar> = (args) => <Avatar {...args} />;

export const SmallAvatar = Template.bind({});
SmallAvatar.args = {
  src: 'http://placekitten.com/200/200',
  alt: 'Snowbell',
  size: 'small'
};

export const StandardAvatar = Template.bind({});
StandardAvatar.args = {
  src: 'http://placekitten.com/200/200',
  alt: 'Snowbell'
};

export const LargeAvatar = Template.bind({});
LargeAvatar.args = {
  src: 'http://placekitten.com/200/200',
  alt: 'Snowbell',
  size: 'large'
};

export const Square_with_NoImage_Avatar = Template.bind({});
Square_with_NoImage_Avatar.args = {
  alt: 'Jayanta Samaddar',
  children: 'Jayanta Samaddar',
  variant: 'square'
};

[srmagura]

The error message says what the problem is: Property '--ursa-font-size-lg' does not exist on type '{ "--ursa-bg-primary": string; ...

It is saying that --ursa-font-size-lg is not a property of theme.colors. There must be somewhere in your code where you are doing theme.colors['--ursa-font-size-lg'].

[Andarist]

It would also be best if you could share your problem in a runnable form.