Tailwind CSS bug repro

[DaniGuardiola]

DO NOT MERGE, this is a bug repro.

Related issue: #1749

This branch reproduces a bug that causes the css output of Tailwind CSS classes that contain the & character to transform it into &, which breaks it. For example, a class using a "dark theme" variant like this:

.dark\:bg-red-500 {
  &:where(.dark, .dark *) {
    background-color: var(--color-red-500);
  }
}

This is actually outputted like this:

.dark\:bg-red-500 {
  &:where(.dark, .dark *) {
    background-color: var(--color-red-500);
  }
}

The effect is that the browser cannot parse the contents of the selector, so that class doesn't work and the color is not applied.

How to run repro

1. Clone branch
2. pnpm i
3. Go to examples/with-tailwindcss
4. pnpm dev
5. See bottom section of the page.
6. See src/routes/index.tsx for the code.
7. Dark variant is specified in src/app.css

[changeset-bot]

⚠️ No Changeset found

Latest commit: c9a6b9e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

💥 An error occurred when fetching the changed packages and changesets in this PR

Some errors occurred when validating the changesets config:
The package or glob expression "solid-start-docs" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.

[netlify]

✅ Deploy Preview for solid-start-landing-page ready!

Name	Link
🔨 Latest commit	c9a6b9e
🔍 Latest deploy log	https://app.netlify.com/sites/solid-start-landing-page/deploys/67a6b233e851290008731351
😎 Deploy Preview	https://deploy-preview-1748--solid-start-landing-page.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[atilafassina]

@DaniGuardiola I believe this issue is solved by #1787

Let us know if you think it isn't. For now I'm closing this :)

[DaniGuardiola]

@atilafassina it is not fixed. This happens independently of whether vite or postcss is used.