EffCSS is a self-confident CSS-in-JS library based only on the browser APIs. Use the full power of JS and TS to create styles.

Some features

• zero-dependency,
• framework agnostic,
• selectors isolation and minification out of the box,
• flexible stylesheets types that can suggest available selectors (BEM and Atomic CSS compatible),
• compatible with any rendering (CSR, SSR, SSG).

Links

• Docs
• SourceCraft
• GitVerse
• GitHub
• GitLab
• NPM

Devtools

• Mozilla Firefox
• zip for Chromium based browsers, that can be installed using chrome://extensions

Examples

• Vanilla TS
• React
• Svelte
• Vue
• Angular
• SolidJS
• Preact
• Qwik
• Lit
• React SSR
• Svelte SSR
• Vue SSR
• Astro SSG

Installation

Type in your terminal:

# npm
npm i effcss

# pnpm
pnpm add effcss

# yarn
yarn add effcss

Quick start

Just call useStyleProvider in your code:

main.js

import { useStyleProvider } from "effcss";

const consumer = useStyleProvider({
    attrs: {
        min: true // to create minified selectors
    }
});

const root = createRoot(document.getElementById("root"));
root.render(<App css={consumer} />);

Each CSS stylesheet corresponds to a single Stylesheet maker. Stylesheet maker is a JS function that should return object or string with style rules:

maker.ts

import { TStyleSheetMaker } from 'effcss';

// you can describe your styles
// so that other people can use them via TypeScript generics
export type TMyMaker = {
    /**
     * Font-size utility
     */
    fsz: 16 | 20 | 24;
    /**
     * Card scope
     */
    card: {
        /**
         * Card border radius
         */
        rounded: '';
        /**
         * Card height
         */
        h: 'full' | 'half';
        /**
         * Card logo scope
         */
        logo: {
            /**
             * Logo width
             */
            w: 's' | 'l';
        },
        /**
         * Card footer scope
         */
        footer: {
            /**
             * Footer visibility
             */
            visible: '';
            /**
             * Footer size
             */
            sz: 's' | 'm' | 'l';
        };
    };
}

export const myMaker: TStyleSheetMaker = ({ select, pseudo: {h}, at: { keyframes, property }, merge, palette, coef, size, units: {px} }) = {
    // specify selector variants via generic
    const selector = select<TCardMaker>;
    // create property with unique identifier
    const widthProperty = property({
        ini: px(200),
        inh: false,
        def: px(200) // will be used as fallback value in `var()` expression
    });
    // create keyframes with unique identifier
    const spin = keyframes({
        from: {
            transform: 'rotate(0deg)',
        },
        to: {
            transform: 'rotate(360deg)',
        },
    });
    // deeply merge objects
    const cardLogoStyles = merge({
        width: widthProperty,
        animation: `20s linear infinite ${spin}`,
        ...h({
            filter: "drop-shadow(0 0 2em #61dafbaa)",
        })
    }, {
        border: 'none',
        background: palette.pale.xl.alpha(0.8),
        aspectRatio: 1,
        ...h({
            opacity: 0.5
        })
    });
    return {
        ...sizeProperty,
        ...spin,
        [selector('fsz:16')]: { ... },
        [selector('card')]: { ... },
        [selector('card.logo')]: cardLogoStyles,
        [selector('card.logo.w:s')]: {
            ...widthProperty(px(100))
        },
        [selector('card.logo.w:l')]: widthProperty(px(300)),
        [selector('card.rounded:')]: { ... },
        [selector('card.h:full')]: { ... },
        [selector('card.footer')]: { ... },
        [selector('card.footer.visible:')]: { ... },
        ...each(coef.short, (k, v) => ({
            [selector(`card.footer.sz:${k}`)]: {
                height: size(v)
            }
        }))
    };
};

To use Stylesheet maker just pass it to cx (creates classnames string) or dx (creates data attributes object) methods of Style provider:

App.tsx

import { useRef } from 'react';
import { useStyleProvider } from 'effcss';
import type { TMyMaker } from './maker';
import { myMaker } from './maker';

export const App = (props: {
    css: IStyleProvider;
}) => {
    const styleProvider = useStyleProvider();
    const stylesRef = useRef();
    // put it inside ref to avoid recalculations
    if (!stylesRef.current) {
        const [card] = css.use(myStyleSheetMaker);
        // thanks to the TMyMaker type,
        // you don't need to look at the implementation - just create the necessary attributes
        stylesRef.current = {
            // you can apply list of selectors
            card: styleProvider.dx<TMyMaker>('card.rounded:', 'fsz:24'),
            // or you can apply object with selectors
            footer: styleProvider.dx<TMyMaker>({
                card: {
                    footer: {
                        visible: '',
                        size: 'm'
                    }
                }
            })
        };
    }
    const styles = stylesRef.current;
    // just apply attributes to appropriate elements
    return (
        <div {...styles.card}>
            <div {...styles.footer}>...</div>
        </div>
    );
};

That's all. Enjoy simplicity.