Warning about renamed colours

[ricardomadeira93]

I have a function that gets all tailwind colors, and then i map them to my component, but on the console i have an warning towards renamed colors.

import * as tailwindColors from "tailwindcss/colors"

type ColorOption = {
  label: string
  value: string
  color: string
}



const colorOptions: ColorOption[] = []
const addedColors: Set<string> = new Set()

Object.entries(tailwindColors).forEach(([color, shades]) => {
  if (color === "default" || typeof shades !== "object") return

  Object.entries(shades).forEach(([shade, value]) => {
    const capitalizedLabel = `${color.charAt(0).toUpperCase()}${color.slice(1)} ${shade}`
    if (!addedColors.has(value as string)) {
      colorOptions.push({
        label: capitalizedLabel,
        value,
        color: value as string,
      })
      addedColors.add(value as string)
    }
  })
})

export { colorOptions }

import { tailwindConfig, typographyConfig } from "@prologue/shared"
import typography from "@tailwindcss/typography"
import { Config } from "tailwindcss"

const config: Config = {
  presets: [tailwindConfig],
  darkMode: "class",
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "../ui/src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      typography: typographyConfig,
    },
  },
  plugins: [typography],
}

export default config

How can i remove the warnings?

[wongjn]

Consider avoiding accessing the properties that emit the warning:

tailwindcss/src/public/colors.js

Lines 302 to 321 in ff6f085

	get lightBlue() {
	warn({ version: 'v2.2', from: 'lightBlue', to: 'sky' })
	return this.sky
	},
	get warmGray() {
	warn({ version: 'v3.0', from: 'warmGray', to: 'stone' })
	return this.stone
	},
	get trueGray() {
	warn({ version: 'v3.0', from: 'trueGray', to: 'neutral' })
	return this.neutral
	},
	get coolGray() {
	warn({ version: 'v3.0', from: 'coolGray', to: 'gray' })
	return this.gray
	},
	get blueGray() {
	warn({ version: 'v3.0', from: 'blueGray', to: 'slate' })
	return this.slate
	},

[wongjn]

No, it'd be in the function where you access tailwindcss/colors.

[wongjn]

Got new warnings with it.

import * as tailwindColors from "tailwindcss/colors"
 
type ColorOption = {
  label: string
  value: string
  color: string
}
 
const colorOptions: ColorOption[] = []
const addedColors: Set<string> = new Set()
 
const colorNameMapping = {
  lightBlue: { version: "v2.2", newColor: "sky" },
  warmGray: { version: "v3.0", newColor: "stone" },
  trueGray: { version: "v3.0", newColor: "neutral" },
  coolGray: { version: "v3.0", newColor: "gray" },
  blueGray: { version: "v3.0", newColor: "slate" },
}
 
const warn = ({ version, from, to }) => {
  console.warn(
    `Warning: '${from}' is deprecated since ${version}. Use '${to}' instead.`
  )
}
 
Object.entries(tailwindColors).forEach(([color, shades]) => {
  if (color === "default" || typeof shades !== "object") return
 
  // Check if the color is in the mapping object
  if (colorNameMapping[color]) {
    const { version, newColor } = colorNameMapping[color]
    warn({ version, from: color, to: newColor })
    color = newColor
  }
 
  Object.entries(shades).forEach(([shade, value]) => {
    const capitalizedLabel = `${color.charAt(0).toUpperCase()}${color.slice(1)} ${shade}`
    if (!addedColors.has(value as string)) {
      colorOptions.push({
        label: capitalizedLabel,
        value,
        color: value as string,
      })
      addedColors.add(value as string)
    }
  })
})
 
export { colorOptions }
Warning: 'blueGray' is deprecated since v3.0. Use 'slate' instead.

I'm not sure why you did what you did, but yes, that would be expected. As per my initial comment, consider avoiding accessing the deprecated properties.

[ricardomadeira93]

How could i avoid accessing them?

[wongjn]

You'd probably want to avoid the Object.entries(tailwindColors) call, as this would access all the properties, including the deprecated ones.

[ricardomadeira93]

Will give it a try, and let you know how it went!