Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tailwind CSS bug repro #1748

Draft
wants to merge 7 commits into
base: main
Choose a base branch
from

Conversation

DaniGuardiola
Copy link

@DaniGuardiola DaniGuardiola commented Jan 31, 2025

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

Copy link

changeset-bot bot commented Jan 31, 2025

⚠️ 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.

@DaniGuardiola DaniGuardiola marked this pull request as draft January 31, 2025 18:55
Copy link

netlify bot commented Jan 31, 2025

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...

QR Code

Use your smartphone camera to open QR code link.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant