Consider using a postcss.config.js file

[willviles]

I'm working on a monorepo-based project where all of our company's styles and UI components are built with TailwindCSS. I've managed to override the current postcss webpack config to point at a postcss.config.js file in the root of the module:

// src/payload.config.ts

config.admin.webpack = (config) => {
  config.module.rules = config.module.rules.filter((rule) => {
    if (rule === '...') return false
    if ((rule.test as any)?.toString().includes('css')) {
      return false
    }
    return true
  })

  config.module.rules.push({
    test: /\.(scss|css)$/,
    sideEffects: true,
    use: [
      'style-loader',
      'css-loader',
      {
        loader: 'postcss-loader',
        options: {
          postcssOptions: {
            config: path.join(process.cwd(), 'postcss.config.js')
          }
        }
      },
      'sass-loader'
    ]
  })

  return config
}

// postcss.config.js

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('postcss-preset-env'),
    require('autoprefixer')
  ]
}

I'm just wondering whether it'd be better if Payload was scaffolded with a postcss.config.js file so that it's a little easier to customise for people who have quite advanced postcss plugin setups?

[MarkAtOmniux]

Would be very helpful as I am building a reactive UI preview area, and this would make it much easier for me to incorporate tailwind

[revnelson]

This post helped me to get tailwind working in my payload setup, and I'd like to link a couple of the newer tailwind requesters to this post, so I'm going to put my webpack config here as well.

I had some scss issues after using the original code at the top here, and modified it a bit to get it working for me (can't remember exactly the issues I had and looking at it now I can't see why mine would work and the original wouldn't, but it might help somebody).

Included in my config is the ignoredModules from this thread which has helped a lot with hooks that I don't want to load into the browser, as well as a function that got path aliasing working for me from the typescript config file.

payload > admin > webpack config:

// webpack config

import path from "path"

import type { Configuration } from "webpack"
import ignoredModules from "@/mocks/mockedModules.server"
import resolveTsconfigPathsToAlias from "./convert-tsconfig-path-to-webpack-alias.server"

const webpackConfig: (config: Configuration) => Configuration = (config) => {
	config.module!.rules = config.module?.rules?.map((rule) => {
		if (typeof rule === "object" && rule?.test?.toString().includes("css")) {
			if (typeof rule.use === "object") {
				rule.use = (rule.use as any).map((use: any) => {
					if (
						Object.keys(use).includes("options") &&
						Object.keys(use.options).includes("postcssOptions")
					) {
						use.options.postcssOptions.config = path.join(
							process.cwd(),
							"postcss.config.js"
						)
						use.options.postcssOptions.plugins = [
							...use.options.postcssOptions.plugins
						]
					}

					return use
				})
			}
		}

		return rule
	})

	config.resolve = {
		...config.resolve,
		alias: {
			...(config.resolve?.alias || {}),
			...ignoredModules,
			...resolveTsconfigPathsToAlias({
				tsConfigPath: "tsconfig.json", // Using custom path
				webpackConfigBasePath: "./" // Using custom path
			})
		}
	}

	config.watchOptions = {
		...config.watchOptions,
		ignored: [
			...((config.watchOptions?.ignored as any[]) ?? []),
			"**/*.server.ts"
		]
	}

	return config
}

export default webpackConfig

ignoredModules helper:

import path from "path"
import glob from "glob"

const mockModulePath = path.resolve(__dirname, "./empty.ts")

// get all files ending in .server.ts in src
const ignoredModulesList = glob.sync("**/*.server.ts", {
	absolute: true,
	windowsPathsNoEscape: true
})

const ignoredModules = ignoredModulesList.reduce(
	(acc: any, modulePath: string) => {
		acc[modulePath] = mockModulePath
		return acc
	},
	{}
)

export default ignoredModules as Record<string, string>

path alias helper:

import { resolve } from "path"
// Source: https://gist.github.com/nerdyman/2f97b24ab826623bff9202750013f99e
import fs from "fs"

/**
 * Resolve tsconfig.json paths to Webpack aliases
 * @param  {string} tsConfigPath           - Path to tsconfig
 * @param  {string} webpackConfigBasePath  - Path from tsconfig to Webpack config to create absolute aliases
 * @return {object}                        - Webpack alias config
 */
const resolveTsconfigPathsToAlias = ({
	tsConfigPath = "tsconfig.json",
	webpackConfigBasePath = __dirname
} = {}) => {
	const rawTsConfig = fs
		.readFileSync(tsConfigPath, "utf-8")
		.replace(/,\s*]/g, "]")
		.replace(/,\s*}/g, "}")

	const tsConfig = JSON.parse(rawTsConfig)

	const { paths } = tsConfig.compilerOptions

	const aliases = {}

	Object.keys(paths).forEach((item) => {
		const key = item.replace("/*", "")
		const value = resolve(
			webpackConfigBasePath,
			paths[item][0].replace("/*", "").replace("*", "")
		)

		console.log(value)

		// @ts-ignore
		aliases[key] = value
	})

	return aliases
}

export default resolveTsconfigPathsToAlias

---

I'm hoping the move to next.js will make all this useless as the bundler won't be so integral to payload's functionality, but until then this is what has worked for me.