Have ideas to improve npm?Join in the discussion! »

    cssatom
    TypeScript icon, indicating that this package has built-in type declarations

    0.6.0 • Public • Published

    cssatom

    CSSAtom

    A group of super lightweight packages for atomic CSS-in-JS

    npm


    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}} */

    Install

    npm i cssatom

    DownloadsWeekly Downloads

    14

    Version

    0.6.0

    License

    MIT

    Unpacked Size

    27 kB

    Total Files

    34

    Last publish

    Collaborators

    • avatar