Bud: Passing Tailwind spacing to theme.json

bud
1

There seems to be provided functions for useTailwindColors(), useTailwindFontFamily(), useTailwindFontSize(), etc. Why not spacing too?

I’ve been trying to get this worked out in my project, but my js is poor.

So far… this doesn’t work obviously:

export default async (app) => {
	app.wpjson.settings((theme) =>
		theme
			.set("spacing.spacingSizes", [app.tailwind.resolveThemeValue("spacing")])
	)
}

It produces:

// theme.json

"spacingSizes": [
        {
          "xs": "clamp(0.75rem, 0.69rem + 0.27vw, 0.9375rem)",
          "sm": "clamp(1rem, 0.92rem + 0.36vw, 1.25rem)",
       }
]

How would I go about returning each as its own object like this example?

"spacingSizes": [
  {
        "name": "xs",
        "size": "clamp(0.75rem, 0.69rem + 0.27vw, 0.9375rem)",
        "slug": "xs"
  },
  {
        "name": "sm",
        "size": "clamp(1rem, 0.92rem + 0.36vw, 1.25rem)",
        "slug": "sm"
  },
]
2

I think I got it:

// bud.config.js

  const spacingSizes = Object.entries(app.tailwind.theme.spacing).map(([name, size]) => ({
    name,
    size,
    slug: name,
  }));

app
.wpjson
.settings((theme) =>
  theme.set("spacing.spacingSizes", spacingSizes)
)
3

This looks good. You might want to use a reducer and the new set function, but what you have is perfectly fine:

app.wpjson.set(
  `settings.spacing.spacingSizes`,
  Object.entries(app.tailwind.theme.spacing).reduce(
    (sizes, [name, size]) => [...sizes, { name, size, slug: name }],
    []
  )
)
4

Much appreciated! That’s much cleaner.