feat(postcss-plugin-lwc): make CSS transform compatible with shadow DOM

[pmdartus]

Details

Make CSS transformation compatible with native shadow DOM. The rules using the :host selector are now duplicated to work in both native and synthetic shadow DOM.

Does this PR introduce a breaking change?

• Yes
• No

[caridy]

big +1 on this... very happy to see progress on this front.

[pmdartus]

Can you review this @diervo? I want to rebase and merge this.

[diervo]

LGTM

[salesforce-best-lwc-internal]

Benchmark results

Base commit: e77f7a7 | Target commit: 771d6e0

lwc-engine-benchmark-ie11

table-append-1k	metric	base(e77f7a7)	target(771d6e0)	trend
benchmark-table/append/1k	duration	813.10 (±0.00 ms)	811.30 (±0.00 ms)	-1.8ms (0.2%) 👌

table-clear-1k	metric	base(e77f7a7)	target(771d6e0)	trend
benchmark-table/clear/1k	duration	77.80 (±0.00 ms)	77.20 (±0.00 ms)	-0.6ms (0.8%) 👌

table-create-10k	metric	base(e77f7a7)	target(771d6e0)	trend
benchmark-table/create/10k	duration	7387.50 (±0.00 ms)	7681.90 (±0.00 ms)	+294.4ms (4.0%) 👌

table-create-1k	metric	base(e77f7a7)	target(771d6e0)	trend
benchmark-table/create/1k	duration	665.80 (±0.00 ms)	676.30 (±0.00 ms)	+10.5ms (1.6%) 👌

table-update-10th-1k	metric	base(e77f7a7)	target(771d6e0)	trend
benchmark-table/update-10th/1k	duration	110.10 (±0.00 ms)	107.80 (±0.00 ms)	-2.3ms (2.1%) 👌

tablecmp-append-1k	metric	base(e77f7a7)	target(771d6e0)	trend
benchmark-table-component/append/1k	duration	1041.10 (±0.00 ms)	1079.00 (±0.00 ms)	+37.9ms (3.6%) 👌

tablecmp-clear-1k	metric	base(e77f7a7)	target(771d6e0)	trend
benchmark-table-component/clear/1k	duration	176.00 (±0.00 ms)	188.10 (±0.00 ms)	+12.1ms (6.9%) 👌

tablecmp-create-10k	metric	base(e77f7a7)	target(771d6e0)	trend
benchmark-table-component/create/10k	duration	10540.10 (±0.00 ms)	10617.60 (±0.00 ms)	+77.5ms (0.7%) 👌

tablecmp-create-1k	metric	base(e77f7a7)	target(771d6e0)	trend
benchmark-table-component/create/1k	duration	937.50 (±0.00 ms)	953.40 (±0.00 ms)	+15.9ms (1.7%) 👌

tablecmp-update-10th-1k	metric	base(e77f7a7)	target(771d6e0)	trend
benchmark-table-component/update-10th/1k	duration	95.70 (±0.00 ms)	110.50 (±0.00 ms)	+14.8ms (15.5%) 👌

lwc-engine-benchmark

table-append-1k	metric	base(e77f7a7)	target(771d6e0)	trend
benchmark-table/append/1k	duration	179.35 (±3.00 ms)	178.40 (±2.65 ms)	-1.0ms (0.5%) 👌

table-clear-1k	metric	base(e77f7a7)	target(771d6e0)	trend
benchmark-table/clear/1k	duration	14.75 (±0.65 ms)	14.45 (±0.75 ms)	-0.3ms (2.0%) 👌

table-create-10k	metric	base(e77f7a7)	target(771d6e0)	trend
benchmark-table/create/10k	duration	975.00 (±9.55 ms)	961.40 (±5.20 ms)	-13.6ms (1.4%) 👍

table-create-1k	metric	base(e77f7a7)	target(771d6e0)	trend
benchmark-table/create/1k	duration	122.75 (±2.25 ms)	121.15 (±2.70 ms)	-1.6ms (1.3%) 👍

table-update-10th-1k	metric	base(e77f7a7)	target(771d6e0)	trend
benchmark-table/update-10th/1k	duration	96.05 (±1.75 ms)	101.40 (±6.55 ms)	+5.4ms (5.6%) 👎

tablecmp-append-1k	metric	base(e77f7a7)	target(771d6e0)	trend
benchmark-table-component/append/1k	duration	267.80 (±6.95 ms)	265.80 (±4.75 ms)	-2.0ms (0.7%) 👌

tablecmp-clear-1k	metric	base(e77f7a7)	target(771d6e0)	trend
benchmark-table-component/clear/1k	duration	23.05 (±1.75 ms)	23.90 (±1.85 ms)	+0.8ms (3.7%) 👌

tablecmp-create-10k	metric	base(e77f7a7)	target(771d6e0)	trend
benchmark-table-component/create/10k	duration	1789.65 (±12.20 ms)	1776.85 (±10.90 ms)	-12.8ms (0.7%) 👍

tablecmp-create-1k	metric	base(e77f7a7)	target(771d6e0)	trend
benchmark-table-component/create/1k	duration	199.75 (±5.40 ms)	200.20 (±6.15 ms)	+0.4ms (0.2%) 👌

tablecmp-update-10th-1k	metric	base(e77f7a7)	target(771d6e0)	trend
benchmark-table-component/update-10th/1k	duration	92.75 (±5.75 ms)	95.60 (±6.60 ms)	+2.8ms (3.1%) 👌

wc-append-1k	metric	base(e77f7a7)	target(771d6e0)	trend
benchmark-table-wc/append/1k	duration	278.60 (±16.90 ms)	279.70 (±18.45 ms)	+1.1ms (0.4%) 👌

wc-clear-1k	metric	base(e77f7a7)	target(771d6e0)	trend
benchmark-table-wc/clear/1k	duration	31.70 (±2.60 ms)	32.65 (±2.60 ms)	+1.0ms (3.0%) 👎

wc-create-10k	metric	base(e77f7a7)	target(771d6e0)	trend
benchmark-table-wc/create/10k	duration	2282.90 (±14.00 ms)	2224.25 (±17.65 ms)	-58.6ms (2.6%) 👍

wc-create-1k	metric	base(e77f7a7)	target(771d6e0)	trend
benchmark-table-wc/create/1k	duration	235.25 (±4.40 ms)	239.35 (±6.00 ms)	+4.1ms (1.7%) 👎

wc-update-10th-1k	metric	base(e77f7a7)	target(771d6e0)	trend
benchmark-table-wc/update-10th/1k	duration	89.60 (±6.55 ms)	89.40 (±7.50 ms)	-0.2ms (0.2%) 👌