duplicate styling on multiple theme

[Jovin Lidan]

Describe the bug

Environment :
React v18
Nextjs v14.0.3 (App Router)
Tailwind v3.3.0
Tailwind Themer v4.0.0
Postcss v8

I have multiple theme like this

 {
    name: "theme1",
    selectors: ['[data-theme="theme1"]'],
    extend: {
      backgroundImage: {
        "primary-dark":
          "linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), linear-gradient(90deg, #4B4B4B 0%, #747474 27.71%, #BCBCBC 51.52%, #878787 75.98%, #525252 100%)",
        "primary-default":
          "linear-gradient(90deg, #4B4B4B 0%, #747474 27.71%, #BCBCBC 51.52%, #878787 75.98%, #525252 100%)",
        "primary-light":
          "linear-gradient(0deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15)), linear-gradient(90deg, #4B4B4B 0%, #747474 27.71%, #BCBCBC 51.52%, #878787 75.98%, #525252 100%)",
        "primary-lighter":
          "linear-gradient(0deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25)), linear-gradient(90deg, #4B4B4B 0%, #747474 27.71%, #BCBCBC 51.52%, #878787 75.98%, #525252 100%)",
        "primary-lightest":
          "linear-gradient(0deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)), linear-gradient(90deg, #4B4B4B 0%, #747474 27.71%, #BCBCBC 51.52%, #878787 75.98%, #525252 100%)",
        "angular-gold":
          "conic-gradient(from -11.25deg at 50% 50%, #4B4B4B -22.23deg, #BCBCBC 0.54deg, #4B4B4B 18.14deg, #BCBCBC 90.32deg, #4B4B4B 161.47deg, #BCBCBC 180.96deg, #4B4B4B 210.72deg, #BCBCBC 273.52deg, #4B4B4B 337.77deg, #BCBCBC 360.54deg)",
        linear:
          "linear-gradient(90deg, rgba(69, 69, 69, 0.9) 0%, rgba(37, 38, 39, 0.9) 100%)",
      },
      colors: {
        "secondary-dark": "#4B4B4B",
        "secondary-default": "#808080",
        "secondary-light": "#A6A6A6",
        "secondary-lighter": "#C7C7C7",
        "secondary-lightest": "#E0E0E0",
        "ink-dark": "#0E0E0E",
        "ink-default": "#292929",
        "ink-light": "#454545",
        "ink-lighter": "#5C5C5C",
        "ink-lightest": "#757575",
        "sky-darker": "#757575",
        "sky-default": "#8F8F8F",
        "sky-light": "#C2C2C2",
        "sky-lighter": "#F4F4F5",
        "sky-lightest": "#FFFFFF",
      },
    },
  },
  {
    name: "theme2",
    selectors: ['[data-theme="theme2"]'],
    extend: {
      backgroundImage: {
        "angular-gold":
          "conic-gradient(from -11.25deg at 50% 50%, #990000 -22.23deg, #FFAE8A 0.54deg, #990000 18.14deg, #FFAE8A 90.32deg, #990000 161.47deg, #FFAE8A 180.96deg, #990000 210.72deg, #FFAE8A 273.52deg, #990000 337.77deg, #FFAE8A 360.54deg)",
        linear:
          "linear-gradient(90deg, rgba(101, 0, 0, 0.9) 0%, rgba(25, 0, 0, 0.9) 100%)",
      },
      colors: {
        "primary-dark": "#7A0000",
        "primary-default": "#AD0000",
        "primary-light": "#FE6825",
        "primary-lighter": "#FF0000",
        "primary-lightest": "#FF5252",
        "secondary-dark": "#BC3A01",
        "secondary-default": "#F14B01",
        "secondary-light": "#FE6825",
        "secondary-lighter": "#FE8B57",
        "secondary-lightest": "#FEAE8A",
        "ink-dark": "#0A0000",
        "ink-default": "#290000",
        "ink-light": "#3D0000",
        "ink-lighter": "#470000",
        "ink-lightest": "#750000",
        "sky-darker": "#707475",
        "sky-default": "#8A8E8F",
        "sky-light": "#BEC0C1",
        "sky-lighter": "#F2F2F3",
        "sky-lightest": "#FFFFFF",
      },
    },
  },

It works, but when i use theme1 and class .bg-primary-dark , result duplicate css style in DOM

.

If i remove the theme2 then the result is:
.

Your minimal, reproducible example

Steps to reproduce

1. Define multiple theme like above
2. use theme1, and class .bg-primary-dark
3. problem appear

Expected behavior

.bg-primary-dark on theme1 should not have background-color: rgb(var(--colors-primary-dark )) styling on DOM

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• MacOS
• Google Chrome

tailwindcss-themer version

v4.0.0

Additional context

No response

[Ryan Clements]

Hiya!

Thanks for opening this issue and providing a config that can reproduce what you're seeing. Is this causing any issues for you e.g. breaking styles?

This is expected behavior as this plugin uses css vars to change styles instead of complex css classes.

Here is a Codesandbox of the issue you're describing. https://codesandbox.io/p/devbox/naughty-lalande-p27frt-p27frt

[Jovin Lidan]

Hey,
maybe this plugin config can limit each theme to only have background-color or background-image var if its defined in plugin config, but if it's expected behavior its okay, since this weird behavior didn't cause any serious issues on my project. anyway thanks for this plugin :D

[Ryan Clements]

Thanks for the feedback. The reason this is expected behavior is that this just how tailwindcss works. This would still happen even if you removed the plugin.

Regardless, I'm glad this provides you value. I love seeing this benefit other people :)