Why are css comments being stripped out?

[shirotech]

Describe the bug

Comments in CSS are being stripped out, and there seem to be no options to stop it. The use case is to allow 3rd-party tools like vite that uses vitePreprocess, and allow postcss plugins to process the comments correctly. e.g. disable certain features.

Reproduction

https://svelte.dev/repl/44822de64b7040369b5bf4d95fcf7da0?version=3.55.1

Check "CSS output" tab

Logs

No response

System Info

System:
    OS: macOS 13.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 33.45 GB / 64.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.13.0/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm
  Browsers:
    Chrome: 109.0.5414.119
    Firefox: 107.0.1
    Safari: 16.2

### Severity

blocking certain usages

[pedroferreira37]

Hi, can i work in this issue, is my first issue.

[pedroferreira37]

I got back to work on this issue, I found the problem, is because of the way css-tree lib handles the parsing. I facing issues to implement it, @Conduitry can you help, or find someone most experiences in the codebase for it?

[teobgeno]

Hi @pedroferreira37

I did a litle experiment on this and I found that css-tree as you said will strip all the comments form except exclamation comments (i.e. /*! .. */).

https://github.com/csstree/csstree/blob/master/lib/syntax/node/StyleSheet.js#L40-L48

So I suppose you must convert any css comments to this form before provide the source to the css-tree parser.
Their documentation also mention an onComment callback https://github.com/csstree/csstree/blob/master/docs/parsing.md#oncomment that you may find useful for this conversion.

The next step is during svelte compilation and more specific when the stylesheet propery of the component object is being initialized
https://github.com/sveltejs/svelte/blob/master/packages/svelte/src/compiler/compile/css/Stylesheet.js#L391-L432

For node.type === 'Comment' I think you must create a new class like Atrule or Rule in order to add it to the Stylesheet class.

I hope this will be of some help.

[pedroferreira37]

@teobgeno Hi Theo, appreciate the help, this was exactly what I did, but seems that the compiler itself don't handle it, I created it, but in another tests it breaks. The reason is that before creating atrules and walking trough the nodes, I have to return the comments. As you mention, the css-tree don't handle it by default, and will stripe all comments, to make this to work, I have to store the comments, and return it before atrules, but when storing it, it's where it breaks, because the comments propertie it's not expected.

I will glad if you join me to show you more about.

[binury]

This is problematic for e.g. css linting and being able to use comment disables. E.g., in a sveltekit (vite or svelte)preprocess pipeline, the code received by postcss (etc) is already mangled and stripped of comments, so lint errors are generated.

(no, preserveComments makes no difference)

[Rich-Harris]

If the purpose of the comments is to provide information to a preprocessor, why does it matter that Svelte (which sees the output of preprocessors) strips them out?

[shirotech]

If the purpose of the comments is to provide information to a preprocessor, why does it matter that Svelte (which sees the output of preprocessors) strips them out?

The issue is the plugins that process the CSS never gets to see the comments as that always get stripped out first. This will not allow CSS plugins to toggle certain features based on those said comments hints.

[Rich-Harris]

Svelte is not stripping out anything before preprocessors see the content. That's why 'pre' is in the name!

It sounds like the issue lies outside Svelte itself, so I'm inclined to close this unless someone can convince me otherwise.

[pedroferreira37]

Hello,

When I took another look at it, I realized the problem wasn't exactly related to Svelte, but rather to the AST build in css-tree.

Below, I've included some background information on css-tree. (The last time I checked the css-tree documentation, this note wasn't available).

The note in the css-tree documentation:

The issue example (note that the comment follows the css-tree exception).

The result of the ast using css-tree.

We can see that css-tree preserves the comment(/*! */), but in the svelte example, is not appearing on the css output tab.

I need to look into it in more detail, since the project had some changes. In both case, either still using css-tree or not, I believe that the issue asks for a feature support of the comments(either because not being handle or being striped out)

Waiting for clarification of the css-tree to move forward.

Thanks all.

[dummdidumm]

Comments are preserved in Svelte 5, where we're using a home-grown parser.

[pedroferreira37]

Well, then I don’t see any reason to not close this issue other than backwards compatibility.

[dummdidumm]

Yeah, closing this then - this is too niche of a use case to backport to Svelte 4.