fix(transformer/styled-components): do not insert space when removing block comments in CSS minification

[overlookmotel]

Previously we inserted a space in place of a block comment. I think it's probably unnecessary.

Input:

styled.div`width/* big */: 1000px;`;
styled.div`x/* blah */y`;
styled.div`${x}/* blah */${y}`;

Previous output post-minification:

styled.div`width :1000px;`;
styled.div`x y`;
styled.div`${x} ${y}`;

After this PR:

styled.div`width:1000px;`;
styled.div`xy`;
styled.div`${x}${y}`;

I'M NOT COMPLETELY SURE ABOUT THIS ONE. That behavior and the "Add a space when this is a own line block comment" comment were there in the original version before I refactored it in #12224, but I never understood its purpose.

There may be a good reason that I'm missing why it needs to be as it is, in which case this PR is wrong. All the conformance tests still pass (maybe just be due to inadequate test coverage), but there's a unit test showing the old behavior.

@Dunqing Can you advise?

Edit: Yes, I think this change is wrong. In browser, CSS padding: 10/* */0 behaves like padding: 10 0, not padding: 100.

[overlookmotel]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• fix(transformer/styled-components): do not insert space when removing block comments in CSS minification #13381 👈 (View in Graphite)
• fix(transformer/styled-components): remove more escaped line breaks in CSS minification #13380
• fix(transformer/styled-components): remove unnecessary whitespace around block comments in CSS minification #13379
• main

---

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

• 0-merge - adds this PR to the back of the merge queue
• hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[codspeed-hq]

CodSpeed Instrumentation Performance Report

Merging #13381 will improve performances by 4.02%

_{Comparing 08-29-fix_transformer_styled-components_do_not_insert_space_when_removing_block_comments_in_css_minification (66cef68) with main (c900b3e)}

Summary

⚡ 2 improvements
✅ 36 untouched benchmarks

Benchmarks breakdown

	Benchmark	BASE	HEAD	Change
⚡	transformer[binder.ts]	1.7 ms	1.6 ms	+4.02%
⚡	transformer[react.development.js]	718.6 µs	693.5 µs	+3.61%

[overlookmotel]

I've concluded this is wrong. Have taken a different approach in #13390.

[Dunqing]

It seems it is okay not to insert a space if the block comment is between a selector; however, a space is necessary in the value.

Input

.v/* block comment */.b {
    padding: 10px/* block comment */20px
}

Output generated by https://css.github.io/csso/csso.html

.v.b{padding:10px 20px}

However, I suppose we cannot determine where the block comment is.

[overlookmotel]

Thanks for coming back.

Hmm. By the looks of CSSO, there's a lot more minification optimizations we could make. But do we want to get into that?

I've opened an issue in the backlog: oxc-project/backlog#179

My recent flurry of PRs have mostly been about simplifying the minification algorithm, and making sure we do insert whitespace where it's necessary for correctness. Removing more unnecessary whitespace has been a pleasant byproduct.