addBase silently changes css variable casing from camelCase to kebab-case

[RyanClementsHax]

What version of Tailwind CSS are you using?

v3.0.8

What build tool (or framework if it abstracts the build tool) are you using?

Create react app v5

What version of Node.js are you using?

16.13.0

What browser are you using?

N/A

What operating system are you using?

Ubuntu 20.04 WSL

Reproduction URL

https://github.com/RyanClementsHax/tailwindcss-css-variable-casing-bug

Describe your issue

addBase silently changes css variable casing from camelCase to kebab-case. Other methods of adding css variables seem to be unaffected.

The following code generates the following css.

    plugin(({ addBase }) => {
      /* this doesn't work */
      addBase({
        ":root": {
          // camelCased
          "--colors-primaryThing-500": "0, 0, 255",
          "--colors-secondaryThing-500": "255, 0, 0",
        },
      });
    }),

:root {
  /* kebab-cased */
  --colors-primary-thing-500: 0, 0, 255;
  --colors-secondary-thing-500: 255, 0, 0;
}

Adding css variables directly in css or via @layer does not seem to be affected. Examples:

@layer base {
  /* this works fine */
  .neon {
    --colors-secondaryThing-500: 144, 160, 64;
  }
}

/* this works fine */
.dark {
  --colors-secondaryThing-500: 139, 0, 0;
  --colors-primaryThing-500: 0, 0, 139;
}

All of the above examples are in the minimal reproduction repo

Use case

I wrote a theming plugin that automatically generates css variables. Changing casing under the hood causes unexpected outputs.

P.S. thanks for such a great library :)

[thecrypticace]

Hey thanks for the report! Good find!

I tracked this down to our use of postcss-js which is converting css variables to kebab-case. I've opened a PR to address this: postcss/postcss-js#61

Hopefully, that'll get merged in so we can bump our deps to address it. If not we'll have to address this in some other way.

I'll leave this open for now and will come back once that other PR is resolved.

[RyanClementsHax]

Thanks a bunch!

Was there anything else I could have done to make this easier for you?

[thecrypticace]

Nope, it was very self-explanatory & thank you for providing a reproduction! Those are always helpful!