Choosing properties for colors throws error "Cannot read properties of undefined (reading 'replace')"

[amosbastian]

Loading the plugin works fine, but when I change my tailwind config to only include specific colours:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    join(__dirname, "{src,app,pages,components}/**/*!(*.stories|*.spec).{ts,tsx,html}"),
    ...createGlobPatternsForDependencies(__dirname),
  ],
  darkMode: ["class"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-inter)", ...fontFamily.sans],
      },
      colors: {
        primary: colors["blue"],
      },
    },
  },
  plugins: [
    require("@tailwindcss/forms"),
    require("@tailwindcss/typography"),
    require("windy-radix-typography"),
    require("windy-radix-palette")({
      colors: {
        mauveA: radixColors.mauveA,
        mauveDarkA: radixColors.mauveDarkA,
        red: radixColors.red,
        redDark: radixColors.redDark,
      },
    }),
    require("tailwindcss-animate"),
  ],
};

I get the following error:

./app/styles.css.webpack[javascript/auto]!=!../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[13].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[13].use[3]!./app/styles.css
TypeError: Cannot read properties of undefined (reading 'replace')
    at Array.map (<anonymous>)
    at Array.reduce (<anonymous>)

For context I am using it in an Nx monorepo with Next.js' app directory

[brattonross]

Thanks for reporting the issue! I don't get this when using the plugin in a Vite or Astro app, so it might be something related to webpack... I'll dig a bit deeper when I get some time

[justinmetros]

Thanks for reporting the issue! I don't get this when using the plugin in a Vite or Astro app, so it might be something related to webpack...

Getting similar error in a Remix app with v0.2.1 of typography: ✘ [ERROR] [plugin css-file] Build failed with 1 error: node_modules/windy-radix-typography/index.js:14:47: ERROR: [plugin: postcss-plugin] Cannot read properties of undefined (reading 'replace')

[brattonross]

This issue would occur in v0.x of windy-radix-typography, when trying to calculate the CSS property name of a given color. When customizing the available colors of windy-radix-palette, if some of the colors that the typography plugin was expecting to be available weren't listed, then it would try to look up this color, but fail.

I've since rewritten windy-radix-typography to be a Tailwind preset instead of a plugin, and as part of this rewrite, removed the bit of code that used to throw this error.

The preset now uses Tailwind's theme function to look up the colors used in the typography themes, so I'm anticipating that this issue will no longer occur with windy-radix-typography >= v1.0.0-beta.x