bismillahcss/src/plugin.ts

The next-gen utility-first CSS framework for modern, futuristic web development.

import { defaultTheme } from "./default-theme";
import { flattenColorPalette } from "./flatten-color-palette";

/**
 * BismillahCSS Framework Plugin
 * Designed to integrate seamlessly with modern build systems.
 * Provides theme resolution and configuration injection.
 */
export const bPlugin = {
    name: "bismillahcss-plugin",

    /**
     * PostCSS or Tailwind-like integration logic.
     * Injects current theme into the build process.
     */
    resolveConfig: (userConfig: any = {}) => {
        return {
            ...defaultTheme,
            ...userConfig,
            colors: {
                ...flattenColorPalette(defaultTheme.colors),
                ...(userConfig.colors ? flattenColorPalette(userConfig.colors) : {}),
            }
        };
    },

    /**
     * Tailwind CSS compat layer.
     * Allows using BismillahCSS as a Tailwind plugin.
     */
    tailwind: (params: { addComponents: any, theme: any }) => {
        const { addComponents, theme } = params;
        const bTheme = theme("bismillahcss") || defaultTheme;

        addComponents({
            ".b-container": {
                maxWidth: bTheme.spacing?.container || "1200px",
                margin: "0 auto",
                padding: "0 2rem",
            },
            ".b-btn-futu": {
                background: bTheme.colors?.primary,
                borderRadius: bTheme.borderRadius?.md,
                padding: "0.75rem 1.5rem",
                fontWeight: "600",
                transition: "all 0.3s ease",
            }
            // more components can be added here
        });
    }
};

export default bPlugin;