@empathyco/x-tailwindcss/dist/esm/x-tailwind-plugin/plugin.js

Empathy X Tailwind plugin

import { forEach } from '@empathyco/x-utils';
import plugin$1 from 'tailwindcss/plugin';
import components from './components.js';
import dynamicComponents from './dynamic-components.js';
import dynamicUtilities from './dynamic-utilities.js';
import xTheme from './theme.js';
import utilities from './utilities.js';

/**
 * Defines the x-tailwind plugin as a Tailwind {@link plugin} that can be invoked passing a
 * configuration object to customize it. The plugin is bundled with generated static and dynamic
 * components and utilities, all based on the plugin's theme.
 *
 * @public
 */
var plugin = plugin$1.withOptions(() => {
    /**
     * Registers the generated CSS for the components and utilities of the plugin to the
     * respective Tailwind layer. It depends on the plugin's theme, affecting
     * the color, spacing, etc... Of the styles generated in this step.
     *
     * @param helpers - The {@link TailwindHelpers}.
     * @internal
     */
    return function (helpers) {
        /* Add components */
        helpers.addComponents(components(helpers), { respectPrefix: false });
        /* Add dynamic components */
        forEach(dynamicComponents(helpers), (key, { styles, values }) => {
            helpers.matchComponents({ [key]: styles }, { respectPrefix: false, values: values !== null && values !== void 0 ? values : undefined });
        });
        /* Add dynamic utilities */
        forEach(dynamicUtilities(helpers), (key, { styles, values }) => {
            helpers.matchUtilities({ [key]: styles }, { respectPrefix: false, values: values !== null && values !== void 0 ? values : undefined });
        });
        /* Add utilities */
        helpers.addUtilities(utilities(helpers), { respectPrefix: false });
        /* Add variant to selected */
        helpers.addVariant('selected', '&.x-selected');
    };
}, () => {
    return {
        theme: { x: xTheme },
    };
});

export { plugin as default };