@tailwind base line delete all comments after it

[frederikhors]

What version of Tailwind CSS are you using?

3.0.0-alpha.2

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

SvelteKit (Vite), postcss 8

What version of Node.js are you using?

v16.13.0

What browser are you using?

None

What operating system are you using?

Windows

Reproduction URL

https://github.com/frederikhors/iss-svelte-kit-tailwind-comments

Describe your issue

I was trying a solution suggested by @adamwathan here.

I created a new SvelteKit app (with command from https://kit.svelte.dev/docs#introduction-getting-started):

npm init --yes svelte@next my-app

I added Tailwind in this commit: https://github.com/frederikhors/iss-svelte-kit-tailwind-comments/commit/84906710c497d57c8394430a482049605c2c390f.

If you run the project with npm run dev (after npm install of course) it works (Tailwind works, there is a bg-red-500 in __layout.svelte).

What doesn't work is this crazy thing:

If you build with

rm -rf ./node_modules/.vite/ && rm -rf build && npm run build

and open the css in build/_app/assets/pages/__layout.svelte-[NUMBERS].css you can search for "I_need_this_comment" (which is a comment in src/app.css) and you can find it in the final css bundle.

Now if you comment out the first line in src/app.css enabling @tailwind base; and build again with the same command the comment is lost.

[adamwathan]

Please take it easy on the exclamation marks dude, it really makes it hard to want to be helpful. Will look into this when I have time.

[frederikhors]

Please take it easy on the exclamation marks dude, it really makes it hard to want to be helpful. Will look into this when I have time.

Edited.

[adamwathan]

Here's a repo that is using Tailwind in total isolation without any other build tooling, and the comment is not deleted:

https://github.com/adamwathan/base-comment-delete-test

So unfortunately I don't think there is anything we are going to be able to change in Tailwind itself as Tailwind is not the tool that is removing it as far as I can tell.

I did some further testing and this is all you need to reproduce your problem:

.filter {
	--tw-blur: var(--tw-empty, /*!*/ /*!*/);
}

/*! I_need_this_comment */

body {
	background-color: red;
}

Svelte/Vite will remove the comment if you provide that input. I've minimized the reproduction to an esbuild minification bug, which I've created an issue for here:

evanw/esbuild#1796

In your case you should be able to avoid this problem though, because you can run PurgeCSS before esbuild runs its minification, where the comment will always be there for sure. Add PurgeCSS as a PostCSS plugin and use the control comments and I would expect they work fine, since esbuild's minification happens at the very end.

Closing as not a Tailwind bug, track evanw/esbuild#1796 for progress on the underlying issue.