Lightweight CSS-In-JS library for UI packages. Battle tested on Emoji-Picker-React.

When creating a third-party package, you have different concerns than when creating an application. Most existing solutions come to solve the problem of shipping styles with your application, but they are not suitable for third-party packages.

There is no existing standard that makes consuming third party packages with their styles as easy as importing packages that are defined locally in your application. The process always involves some manual work or extra configuration, and no solution works out of the box with all bundlers or environment.

FlairUp aims to solve this by allowing package-authors to ship their styles with their package, and automatically apply the styles with them, both during SSR and in the browser.

npm install flairup

The main issue that FlairUp is trying to tackle is the challenge of bringing your own styles as a third-party dependency. There is no standard way for configuring your styling that will work in all environments and with all bundlers.

It will either break on some bundlers, or will require the user to import the styles manually, which is not ideal.

FlairUp is a one-time-runtime library, meaning that it will only run once, when the package is imported. While usually, it is not recommended to have styles computed at runtime, this is the only way we can assure the library is working in all environments.

The way FlairUp works is by adding a <style> tag to the DOM, and injecting the styles into it.

To reduce bloat and improve performance, FlairUp will only add a single class per CSS property, meaning that if a certain style exists in multiple places, it will only be added as one class to the stylesheet, and be reused in all places consuming it. This is a much more efficient way, allowing us not to worry about de-duplication of stylis.

Defining your style has two parts:

1. Creating a stylesheet object using the createSheet function. This function adds the style tag to the DOM, and returns a stylesheet object with a create function.
2. Using the individual styles using the create function. In the create function you can define your styles as a javascript object, and get back a Set containing the class names of the styles you defined.

1. CSS Properties
2. Pseudo Selectors and Pseudo Elements
3. Media Queries
4. Defining of CSS Variables

1. Scoping styles under a known class name (Preconditions)
2. Scoping lower level styles under a selector (Postconditions)
3. Adding custom class names to the stylesheet object

import { createSheet, cx } from 'flairup';

const sheet = createSheet('MyComponent');

const styles = sheet.create({
  button: {
    color: 'red',
    ':hover': {
      color: 'blue',
    },
  },
});

const Button = () => <button className={cx(styles.button)}>Hover Me</button>;

const styles = sheet.create({
  button: {
    '.': 'my-button', // or ["my-button", "button-main"]
    color: 'red',
  },
});

Unlike regular CSS properties, CSS variables are as a single class per scope.

const styles = sheet.create({
  button: {
    '--': {
      '--color': 'red',
      '--hover-color': 'blue',
    },
  },
});

const styles = sheet.create({
  button: {
    color: 'red',
    '@media (max-width: 600px)': {
      color: 'blue',
    },
  },
});

const styles = sheet.create({
  button: {
    color: 'red',
    ':hover': {
      color: 'blue',
    },
    '::before': {
      content: '🎩',
    },
  },
});

const styles = sheet.create({
  '.theme-dark': {
    button: {
      color: 'red',
      ':hover': {
        color: 'blue',
      },
    },
  },
  button: {
    color: 'green',
  },
});

Supports all the following selectors:

• >
• ~
• +
• *
• &.class (Adds the class directly to the selector without a space)

const styles = sheet.create({
  button: {
    '.lower_level_class': {
      color: 'red',
    },
  },
  paragraph: {
    '*': {
      color: 'blue',
    },
  },
});

While the library supports SSR, we need to do a little bit of work in our component to make it work. All we need to do is render a style tag inside our component and put the styles inside it.

Create the following component:

export function SSRStyles() {
  if (stylesheet.isApplied()) {
    return null;
  }

  return (
    <style
      suppressHydrationWarning
      dangerouslySetInnerHTML={{ __html: stylesheet.getStyle() }}
    />
  );
}

And place it anywhere inside your component, like this:

export default function MyComponentMain({ children }: Props) {
  return (
    <div>
      <SSRStyles /> // <-- Here
      <ChildComponent>{children}</ChildComponent>
    </div>
  );
}