[bug] Tailwind Colors transformPalette not reducing nested values

[areklam]

Agreement

• This is not a duplicate of an existing issue
• I have read the guidelines for Contributing to Roots Projects
• This is not a personal support request that should be posted on the Roots Discourse community

Expected Behavior

TransformPalette should output theme.json ready colors for nested colors

Color array like in theme.json ready format like:

"palette": [
        {
          "name": "Primary-name1",
          "slug": "primary-name1",
          "color": "#181818"
        },
        {
          "name": "Primary-name1-50",
          "slug": "primary-name1-50",
          "color": "#383838"
        },
        {
          "name": "Primary-name1-25",
          "slug": "primary-name1-25",
          "color": "#F8F8F8"
        },
        {
          "name": "Primary-name2",
          "slug": "primary-name2",
          "color": "#FFFFFF"
        },
        {
          "name": "Primary-name3",
          "slug": "primary-name3",
          "color": "transparent"
        },

Actual Behavior

Nested colors does gets output with incorrect themeJSON format:

"palette": [
        {
          "name": "Primary-name1",
          "slug": "primary-name1",
          "color": {
            "25": "#F8F8F8",
            "50": "#383838",
            "DEFAULT": "#181818"
          }
        },
        {
          "name": "Primary-name2",
          "slug": "primary-name2",
          "color": "#FFFFFF"
        },
        {
          "name": "Primary-name3",
          "slug": "primary-name3",
          "color": "transparent"
        }

Steps To Reproduce

Create nested Tailwind Colors

colors: {
      primary: {
        name1: {
          DEFAULT: '#181818',
          50: '#383838',
          25: '#F8F8F8',
        },
        name2: '#FFFFFF',
        name3: 'transparent',
      },
    },

Set up bud config for colors (config below) and build

version

5.7.7

What package manager are you using?

yarn classic

version

1.22.18

Are you using pnpm?

• yes
• no

Logs

No response

Configuration

const config = require('./tailwind.config.js')
const {transformPalette} = require('@roots/sage/theme/tailwind')
const palette = transformPalette(config.theme.colors)

/**
 * @typedef {import('@roots/bud').Bud} bud
 *
 * @param {bud} app
 */

module.exports = async (app) => {
  app
    /**
     * Application entrypoints
     *
     * Paths are relative to your resources directory
     */
    .entry({
      app: ['@scripts/app', '@styles/app'],
      editor: ['scripts/blocks/*.js', 'scripts/editor.js', 'styles/editor.scss'],
    })

    /**
     * These files should be processed as part of the build
     * even if they are not explicitly imported in application assets.
     */
    .assets('images')

    /**
     * These files will trigger a full page reload
     * when modified.
     */
    .watch([
      'tailwind.config.js',
      'resources/views/*.blade.php',
      'app/View/**/*.php',
    ])

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

    /**
     * Target URL to be proxied by the dev server.
     *
     * This is your local dev server.
     */
    .proxy('http://www.example.test')

    .themeJson({
      color: {
        custom: false,
        customGradient: false,
        defaultPalette: false,
        defaultGradients: false,
        palette,
      }
    })
};

Relevant .budfiles

budfiles.zip

[kellymears]

Is this a thing that even works in tailwind?

Looking at the tailwind docs I don't see any mention of n-level nesting for color groups. Simplified, the example provided looks like:

module.exports = {
  theme: {
    colors: {
      'tahiti': {
        100: '#cffafe',
      },
    },
  },
}

But you want support for:

module.exports = {
  theme: {
    colors: {
      'tahiti': {
        'sub-color': {
          100: '#cffafe',
        } 
      },
    },
  },
}

Looking at the DefinitelyTyped/tailwindcss repo those types don't allow for this use case either.

A TailwindColorValue is defined as:

export type TailwindColorValue = string | TailwindColorGroup | TailwindColorFunction;

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/tailwindcss/tailwind-config.d.tsL241-L243

And a TailwindColorGroup is just a simple readonly Record object.

export interface TailwindColorGroup {
    readonly [key: string]: string;
}

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/tailwindcss/tailwind-config.d.ts#L188-L190

Am I missing something? Does this work for you? Regardless, since this isn't documented I'm going to mark this as a feature request.

That said, assuming it works and there can be some assurance that this hidden feature is not going to change, I don't mind adding support for it.

[areklam]

Tailwind does run tests for deeply nested color objects so it should be allowed.

I've been using this nesting in Tailwind for some time without any issues. Relevant Tailwind PR

[kellymears]

thank you for the references. i think the next step for us is to add recursion to the color value reducer:

bud/sources/@roots/sage/src/theme/tailwind.adapter.ts

Lines 61 to 69 in 5164bc9

	const flatten: (
	color: string,
	shades: TailwindValuesColor | TailwindColorValue,
	) => Array<[string, string]> = (color, shades) =>
	typeof shades !== 'string'
	? Object.entries(shades).reduce((all, [variant, color]) => {
	return [...all, [normalizeKey(variant), color]]
	}, [])
	: [[color, shades]]

afterward we should submit a PR on the typings.