uploadthing/tw/index.js

Learn more: [docs.uploadthing.com](https://docs.uploadthing.com)

import { dirname, sep } from 'node:path';
import plugin from 'tailwindcss/plugin';
import __node_cjsModule from 'node:module';

/**
 * UploadThing Tailwind plugin which injects custom variants
 * for the built-in UI components
 * @see https://docs.uploadthing.com/concepts/theming#theming-with-tailwind-css
 *
 * When using this, you need to specify `content` manually. For automatic
 * detection, see {@link withUt}.
 */ const uploadthingPlugin = plugin(({ addVariant })=>{
    // Variants to select specific underlying element
    addVariant("ut-button", '&>*[data-ut-element="button"]');
    addVariant("ut-allowed-content", '&>*[data-ut-element="allowed-content"]');
    addVariant("ut-label", '&>*[data-ut-element="label"]');
    addVariant("ut-upload-icon", '&>*[data-ut-element="upload-icon"]');
    addVariant("ut-clear-btn", '&>*[data-ut-element="clear-btn"]');
    // Variants to select specific state
    addVariant("ut-readying", '&[data-state="readying"]');
    addVariant("ut-ready", '&[data-state="ready"]');
    addVariant("ut-uploading", '&[data-state="uploading"]');
});

const require = __node_cjsModule.createRequire(import.meta.url);
/**
 * Add more here when additional UI packages are added
 */ const PACKAGES = [
    "react",
    "solid",
    "svelte",
    "vue"
];
/**
 * HOF for Tailwind config that adds the
 * {@link uploadthingPlugin} to the Tailwind config
 * as well as adds content paths to detect the necessary
 * classnames
 */ function withUt(twConfig) {
    const contentPaths = PACKAGES.map((pkg)=>{
        try {
            const resolved = require.resolve(`@uploadthing/${pkg}`, {
                paths: [
                    ...module.paths,
                    process.cwd()
                ]
            });
            return dirname(resolved) + sep + "**";
        } catch  {
            return null;
        }
    }).filter((s)=>s != null);
    if (contentPaths.length === 0) {
        // eslint-disable-next-line no-console
        console.warn(`
  [uploadthing]: Unable to resolve path for uploadthing UI packages. As a workaround, you can manually add the paths to your content paths: 
    - Find where your package manager has installed the distribution files, e.g. './node_modules/@uploadthing/react'.
      Note: If you have a monorepo, you may need to look up the tree to find the correct path.
    - Add the path to the 'content' field in your Tailwind configuration: 
      content: [
        // your other content paths
       './node_modules/@uploadthing/react/dist**' // <-- add this line
      ]
    `);
    }
    if (Array.isArray(twConfig.content)) {
        twConfig.content.push(...contentPaths);
    } else {
        // content can be an object too with `files` property
        twConfig.content.files.push(...contentPaths);
    }
    if (!twConfig.plugins) {
        twConfig.plugins = [];
    }
    twConfig.plugins.push(uploadthingPlugin);
    return twConfig;
}

export { uploadthingPlugin, withUt };