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.

Sign up for GitHub

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

Jump to bottom

Incorrect selector generation for TailwindCSS and :global() with dark: variant in Svelte 5 #14330

Open
fmaclen opened this issue Nov 16, 2024 · 1 comment
Open

Incorrect selector generation for TailwindCSS and :global() with dark: variant in Svelte 5 #14330

fmaclen opened this issue Nov 16, 2024 · 1 comment
Labels
css Stuff related to Svelte's built-in CSS handling

Comments

@fmaclen
Copy link

fmaclen commented Nov 16, 2024 •
edited
Loading

Describe the bug

While using TailwindCSS with the :global() directive and dark mode variants (dark:) in Svelte 5, I encountered an issue where the generated CSS selectors are incorrect. Instead of generating :global(div:where(...)), it produces :global(div):where(...), causing unexpected behavior and warnings.

Steps to Reproduce:

  1. Created a new Svelte 5 project with TailwindCSS.
  2. In app.html I added the data-color-theme attribute:
<body data-sveltekit-preload-data="hover" data-color-theme="dark">
	<div style="display: contents">%sveltekit.body%</div>
</body>
  1. Then, the component looks like this:
<div class="markdown">
  {@html `<div>
		<code>All background colors are expected to be blue, red should not be visible</code>
	</div>`}
</div>

<style lang="postcss">
  .markdown {
    :global(div) {
      @apply bg-red-500 p-10;

      /* This line genreates incorrect CSS which breaks styling and throws warnings during build */
      @apply dark:bg-blue-500;
    }

    /* WORKAROUND: These styles work as expected */
    :global(code:where([data-color-theme="dark"], [data-color-theme="dark"] *)) {
      @apply bg-blue-500;
    }
  }
</style>
  1. Build the project using Svelte 5's build process.

Expected Behavior:
The :global() directive should generate CSS selectors with the correct syntax, i.e., :global(div:where(...)).

Actual Behavior:
The generated CSS selector is incorrect:

:global(div):where([data-color-theme="dark"], [data-color-theme="dark"] *)

This incorrect selector causes unexpected behavior and generates warnings during the build process.

Unused CSS selector ":global(div):where([data-color-theme="dark"], [data-color-theme="dark"] *)"

image

Additional Information:
I'm currently migrating a project from Svelte 4 to Svelte 5 which has this pattern and worked fine before the migration.

Looks like this bug is closely related to this one: #10513
I tried some of the suggestions on that issue but couldn't solve the problem on my end.

Reproduction

https://github.com/fmaclen/tailwind-global-css-bug

Logs

No response

System Info

Binaries:
    Node: 20.9.0 - /usr/local/bin/node
    npm: 10.9.0 - /usr/local/bin/npm
    bun: 1.1.26 - ~/.bun/bin/bun
  npmPackages:
    svelte: ^5.0.0 => 5.2.2

Severity

blocking an upgrade
@dummdidumm dummdidumm added the css Stuff related to Svelte's built-in CSS handling label Nov 16, 2024
@fmaclen
Copy link
Author

fmaclen commented Nov 20, 2024

Here's a workaround for using dark: with components defined in tailwind.config.js:

const config = {
  // ...
  plugins: [
    function ({ addComponents }) {
      addComponents({
        '.confirm-deletion': {
          '@apply bg-gradient-to-r from-transparent to-red-50': {},
          
          // WORKAROUND
          '&:global(:where([data-color-theme="dark"], [data-color-theme="dark"] *))': {
            '@apply bg-gradient-to-r from-transparent to-red-900': {}
          }
        },
      });
    },
    require('tailwind-scrollbar')
  ]
};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css Stuff related to Svelte's built-in CSS handling
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@fmaclen @dummdidumm