Bud changes from 16.12.3 to 16.13.x break build

bud
1

Updating from Bud 16.2.3 along with its dependencies to 16.13.x has broken my build process.
Error: @roots/bud-tailwindcss: screens.md is not a valid tailwind theme key.

My screens are defined according to the Tailwind docs:

// tailwind config
module.exports = {
  theme: {
    screens: {
      'md': '47.50rem',
      'lg': '92.50rem',
    }
}

It looks like the error is in regard to the following in my bud config:

.settings((theme) => theme
.set('layout.contentSize', app.tailwind.resolveThemeValue('screens.md'))
.set('layout.wideSize', app.tailwind.resolveThemeValue('screens.lg'))
)

// bud.config.js
export default async (app) => {
	app
		.entry({
			app: ["@scripts/app", "@styles/app"],
			editor: ["@scripts/editor", "@styles/editor"],
		})

		.assets(["images"])

		.watch(["resources/views", "/resources/design-tokens", "app"])

		.proxy("https://sandbox.local")

		.serve("http://localhost:3000")

		.setPublicPath("/wp-content/themes/sage/public/")

		.wpjson.settings({
			color: {
				custom: false,
				customDuotone: false,
				customGradient: false,
				defaultDuotone: false,
				defaultGradients: false,
				defaultPalette: false,
				duotone: [],
			},
			layout: {},
			custom: {
				spacing: {},
				typography: {
					"font-size": {},
					"line-height": {},
				},
			},
			spacing: {
				blockGap: true,
				margin: true,
				padding: true,
				spacingSizes: [],
				units: ["rem", "px"],
			},
			typography: {
				customFontSize: false,
				letterSpacing: false,
			},
		})
		.useTailwindColors()
		.useTailwindFontSize()

		.settings((theme) =>
			theme
				.set(
					"spacing.spacingSizes",
					Object.entries(app.tailwind.resolveThemeValue("spacing")).reduce(
						(sizes, [name, size]) => [
							...sizes,
							{ name: name, size, slug: name },
						],
						[]
					)
				)
				.set("layout.contentSize", app.tailwind.resolveThemeValue("screens.md"))
				.set("layout.wideSize", app.tailwind.resolveThemeValue("screens.lg"))
		)
		.enable()
}
2

Did you find a solution to this?

Iā€™m running into a very similar issue with maxWidth ā€“ a previous project running Bud 6.12.2 has no errors, while 6.16.1 kicks up: maxWidth.content is not a valid tailwind theme key.

3

The solution for this turned out to be fairly straight forward ā€“ at least from my testing on Bud 6.16.1.

I was able to swap out:

.set('layout.contentSize', app.tailwind.resolveThemeValue('maxWidth.content'))

with:

.set('layout.contentSize', app.tailwind.resolvedConfig.theme.maxWidth['content'])

1 Like