perf(transformer/styled-components): simplify CSS minification

[overlookmotel]

Simplify CSS minification.

• Remove the step of adding placeholders, which means we also don't need to remove them again, and don't need a hashmap to track which quasis are retained. Instead, just work through the quasis one by one.
• Remove the intermediate new_raws Vec.
• Skip \\, \', \" in byte search loop, to avoid backtracking to check for \" when exiting a string.

The whole thing squashes down to a single function.

I believe I've kept the behavior exactly as it was before. Is there anything I'm missing?

There's one bit of the logic I don't understand. /* ... */ is replaced with a space, unless there's a space preceding / following it. But I don't think we need to add a space in cases like height:/* big */${10000}px. Do we?

[overlookmotel]

• perf(transformer/styled-components): remove quasis and expressions in batch #12256
• fix(transform/styled-components): fix spans of quasis when some quasis removed #12240
• perf(transformer/styled-components): simplify CSS minification #12224 👈 (View in Graphite)
• 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 #12224 will not alter performance

_{Comparing 07-11-perf_transformer_styled-components_simplify_css_minification (8e13e2a) with main (9b14fbc)}

Summary

✅ 34 untouched benchmarks

[Dunqing]

There's one bit of the logic I don't understand. /* ... */ is replaced with a space, unless there's a space preceding / following it. But I don't think we need to add a space in cases like height:/* big */${10000}px. Do we?

This is what the Babel plugin does, I don't know why.

https://github.com/styled-components/babel-plugin-styled-components/blob/4e2eb388d9c90f2921c306c760657d059d01a518/src/minify/index.js#L91-L92

[overlookmotel]

As far as I can see, Babel plugin will not insert a space in place of the comment in `height:/* big */100px`, because it minifies in 2 passes - (1) remove comments and then (2) remove whitespace. So it does insert a space in 1st pass, but then removes it again in 2nd pass.

We're doing it all in 1 pass, so I think we need to check for "symbols" (:{},;) before/after the comment as well when deciding whether to insert a space in place of a comment or not.

But that's a separate issue from this PR. I don't think this PR changes behavior from what it was before.

[Dunqing]

As far as I can see, Babel plugin will not insert a space in place of the comment in `height:/* big */100px`, because it minifies in 2 passes - (1) remove comments and then (2) remove whitespace. So it does insert a space in 1st pass, but then removes it again in 2nd pass.

We're doing it all in 1 pass, so I think we need to check for "symbols" (:{},;) before/after the comment as well when
deciding whether to insert a space in place of a comment or not.

I see, I can't see any reason it would block us from removing this space.

[graphite-app]

Merge activity

• Jul 13, 6:19 PM UTC: Dunqing added this pull request to the Graphite merge queue.
• Jul 13, 6:28 PM UTC: Merged by the Graphite merge queue.