@taktikal/stylesheets

Abstractions for CSS-in-JS with theming support in React projects.

Defining styles

// Button.styles.ts

import { StyleParams } from "@taktikal/stylesheets";

export default ({ css, theme }: StyleParams) => ({
  button: css`
    color: ${theme.colorPrimary};
    background: ${theme.colorOffWhite};
    margin: 0 auto;

    &--primary {
      color: ${theme.colorOffWhite};
      background: ${theme.colorPrimary};
    }
  `;
});

Usage in functional components

// Button.tsx

import React from "react";
import { useStylesheet } from "@taktikal/stylesheets";
import styles from "./Button.styles";

interface Props {
  boolean?: primary;
}

export const Button: React.FC<Props> = props => {
  const s = useStylesheet(styles);

  const { primary = false } = props;

  return (
    <button className={s("button", { primary })}>
      Click me
    </button>
  )
};

Usage in class components

Using class components is discouraged, components should be functional if possible.

But for some legacy or sufficiently complex components, classes may be the best option. @taktikal/stylesheets supports class components, but the API is much less elegant.

// Button.tsx

import React from "react";
import { withStylesheetContext, StylesheetProps } from "@taktikal/stylesheets";
import styles from "./Button.styles";

interface Props extends StylesheetProps<typeof styles> {
  boolean?: primary;
}

class ButtonComponent extends React.Component<Props> {
  public render() {
    const s = this.props.getClassName;

    const { primary = false } = this.props;
    
    return (
      <button className={s("button", { primary })}>
        Click me
      </button>
    );
  }
}

export const Button = withStylesheetContext(styles, ButtonComponent);

Setup

Emotion peer dependencies

This package has the following peer dependencies. They must be installed alongside @taktikal/stylesheets.

{
  "emotion": "10.x",
  "emotion-server": "10.x"
}

Theme provider

The StylesheetContext.Provider must be included above components that make use of @taktikal/stylesheets in your app.

The value that the provider receives is the theme of your app. By default the theme is empty, but you can add more as described in the Add theme variables section.

import React from "react";
import { StylesheetContext } from "@taktikal/stylesheets";

interface Props {
  colorPrimary: string;
}

export const App: React.FC<Props> = props => {
  const { colorPrimary } = props;
  
  return (
    <StylesheetContext.Provider value={{ colorPrimary }}>
      ...
    </StylesheetContext.Provider>
  );
};

Server side rendering

If you are using SSR (server side rendering), you must use emotion-server's extractCritical like described in their documentation.

Theming

Theme

You can get the theme from StyleParams like so.

import { StyleParams } from "@taktikal/stylesheets";

export default ({ css, theme }: StyleParams) => ({
  // ...
})

By default, theme is an empty object.

Add theme variables

The CSSVariables interface defines theme. You can add dynamic variables to the theme by extending the CSSVariables interface like so:

// custom.d.ts

import "@taktikal/stylesheets";

declare module "@taktikal/stylesheets" {
  export interface CSSVariables {
    colorPrimary: string;
  }
}

In tsconfig.json, you should then add ./custom to the types field.

Once added you can use these variables like so:

import { StyleParams } from "@taktikal/stylesheets";

export default ({ css, theme }: StyleParams) => ({
  button: css`
    background: ${theme.colorPrimary};
  `
})