Emotion + hooks + typescript = a delightful experience.

[TimRJensen]

So, I'm developing a SOMe "platform" for the Danish Technical Museum. Platform is quoted because it's really just a mock-up of a potential platform for a course I'm taking. Now, I'm no expert frontend developer, frankly all I know is self-taught. I do however know that CSS is an absolute pain :> With that in mind I've always looked for alternatives; in the past it almost always ended up being JSS. This time however I threw myself at SASS, which is fine. However a preproccessor can only achieve so much, and when the app needed dynamic styling, I decided to try out Emotion:

defaultTheme.ts

import { mixins } from "./mixins"

const colors = {
  primary: "#2364AA"
  (...)
}

const sizes = {
  someComponent: {
    width: 300,
  }
  (...)
}

export const theme = {
  colors,
  sizes,
  mixins,
}

useCSS.ts

/**
 * Vendor imports.
 */
import { CSSProperties } from "react";
import { css, useTheme } from "@emotion/react";

/**
 * Custom imports.
 */
import { Theme } from "../themes/dtm";

/**
 * Types.
 */
type CSSType = {
  [K in keyof CSSProperties]: CSSProperties[K];
};

type ClassType = {
  [className: string]: CSSType | CSSType[];
};

/**
 * useCSS hook.
 */
export function useCSS<T extends ClassType>(
  withTheme: (theme: Theme) => ClassType | T
) {
  const theme = useTheme() as Theme;
  const classes = withTheme(theme);

  return {
    css: Object.entries(classes).reduce<{
      [K in keyof T]: ReturnType<typeof css>;
    }>((result, _class) => {
      const [key, value]: [keyof T, CSSType | CSSType[]] = _class;

      result[key] = css(value);

      return result;
    }, {} as any),
    theme,
  };
}

SomeComponent.tsx

/**
 * Vendor imports.
 */

/**
 * Custom imports.
 */
import { useCSS } from "./useCSS"

/**
 * SomeComponent functional component.
 */
export function SomeComponent (){
  const { css } = useCSS(({ colors, sizes: { someComponent } })=>({
    someClassName: {
      display: "flex", //intelliSense here :)
      width: someComponent.width, //Access to theme specific variables here :)
      border: `1px solid ${colors.primary}`, 
    },
  }));

  return <div css={css.someClassName}> //intelliSense here :)
    <div css={css.nope} /> //typesafety here :)
    (...)
  </div>
}

After implementing Emotion I'm getting cleaner and better code, I develop faster and can create rather advanced styles. It's just a great development experience. SASS and CSS-loader can suck it XD.

Anyways, what I'm trying to say is thank you. This module is fantastic.

Cheers,
Tim.

N.B.: Some of the above code have been written in free hand and might contain typos. I'm highly dependent on VSCode to catch 'em.

[Andarist]

Thank you for the kinds word. I'm very glad you enjoy it :)