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