The CSS world has evolved a lot in recent years and we often see and use packages / frameworks that do things that one day we never imagined would be possible. And to keep up with all the developments, we must move towards the future and dispense with everything that is not necessary.

The same applies to CSS, because if it is not necessary, why does the user have to load styles that do not make any sense to be on the page?

We take it as the main reference of Facebook StyleX, presented at during F8, with a focus on reducing 80% of the size of styles uploaded by the user.

The CSSAtom provides a reusable html class name process, eliminating any duplication of styles and minimizing on demand. Styles are automatically added to the page without any additional effort.

Why should I use?

The CSSAtom is a package that generates CSS dynamically, including only what is used on the page, eliminating everything else. No .css files and no additional requests.

How to use?

Install

Use npm i cssatom or yarn add cssatom to install the package on your project.

Use no seu projeto .js

import { css } from "cssatom";
// or 
const { css } = require("cssatom");

/* Style rules are auto-injected to HEAD, on a tag <style>  */
document.querySelector("h1").className = css({ color: "#721c24", fontSize: 32 });
/* The CSS will be generated like: {._1r09c7a {color:#721c24}._5r9nha {font-size:32px}} */