Missing default colors

[stouch]

We noticed that tw('macro') does not process default colors. For example to use {purple: {DEFAULT: '#color'}}, we needed to use tw('text-purple-DEFAULT'). So we had to add a function over the stailwc/install plugin in our vite.config.ts :

/**
 * Add missing default colors. For example, `purple.DEFAULT` is inject in colors as `purple`
 * 
 * @param pluginConfig 
 * @returns 
 */
const overrideStailWc = (pluginConfig): any => {
  const newConfig = pluginConfig[1].config;
  const additionalColors = Object.keys(newConfig.theme.colors).filter(
    (c) => c.indexOf("-DEFAULT") > -1
  );
  for (const color of additionalColors) {
    newConfig.theme.colors[color.replace("-DEFAULT", "")] =
      newConfig.theme.colors[color];
  }
  return [
    pluginConfig[0],
    {
      ...pluginConfig[1],
      config: newConfig,
    },
  ];
};

and

plugins: [
    dts(),
    react({
      plugins: [
        overrideStailWc(
          stailwc({
            engine: "styled-components",
            tailwindPath: path.join(__dirname, "tailwind.config.cjs"),
          })
        ),
        ["@swc/plugin-styled-components", {}],
      ],
    }),
  ],

[arlyon]

I was not aware that colors supported default values, but it does in fact seem like this is the case. Fix incoming. We just need to account for the potential DEFAULT in the colors and make sure not to append it.