Ensure escaped theme variables are handled correctly

[philipp-spiess]

This PR ensures that escaped theme variables are properly handled. We do this by moving the escape/unescape responsibility back into the main tailwindcss entrypoint that reads and writes from the CSS and making sure that _all internal state of the Theme class are unescaped classes.

However, due to us accidentally shipping the part where a dot in the theme variable would translate to an underscore in CSS already, this logic is going to stay as-is for now.

Here's an example test that visualizes the new changes:

expect(
  await compileCss(
    css`
      @theme {
        --spacing-*: initial;
        --spacing-1\.5: 2.5rem;
        --spacing-foo\/bar: 3rem;
      }
      @tailwind utilities;
    `,
    ['m-1.5', 'm-foo/bar'],
  ),
).toMatchInlineSnapshot(`
  ":root, :host {
    --spacing-1\.5: 2.5rem;
    --spacing-foo\\/bar: 3rem;
  }

  .m-1\\.5 {
    margin: var(--spacing-1\.5);
  }

  .m-foo\\/bar {
    margin: var(--spacing-foo\\/bar);
  }"
`)

Test plan

• Added a unit test

• Ensure this works end-to-end using the Vite playground:

  

[adamwathan]

Shouldn't this be --spacing-1\.5?

[philipp-spiess]

@adamwathan Ah yeah I think you're right if they're defined with \. they should be CSS variables with \. just the lookup for 1_5 should also work 👍